00:00:00AIエージェントによるデザインの精度は、今やかなり向上しています。
00:00:02作成されたサイトの表示が崩れているといった問題も、現在はほとんどありません。
00:00:06しかし、どのモデルも同じデータで学習されているため、デザインがどうしても
00:00:10似通ってしまい、平凡になりがちです。
00:00:11Claudeのモデルでさえ、こうした事態を避けるには特別なプロンプトが必要です。
00:00:15Google Stitchはデザインに特化したツールで、なんと
00:00:19Claude Codeのワークフローに直接組み込むことができます。
00:00:21そこで今回は、StitchとClaude Codeを組み合わせた4つの活用法を紹介します。
00:00:26これで、あなたのアプリが「よくあるAI生成サイト」になるのを防げます。
00:00:30Stitchの最新アップデートでは、UI構築にデザインシステムを使用します。
00:00:34このシステムは、ウェブサイトのUIガイドを構成するあらゆる要素に基づいており、
00:00:38これには色、テーマ、フォントなどの様々な項目が含まれます。
00:00:41これらの要素は、実は「design.md」というファイルによって形成されています。
00:00:45このファイルこそが、あるエージェントから別のエージェントへデザインを引き継ぐ鍵となります。
00:00:49このdesign.mdファイルを、デザインを実装する任意のエージェントに渡せば、
00:00:54スタイリングのテーマ全体を完璧に一致させることができます。
00:00:56これが機能する理由は、ファイルがエージェント向けに最適化されているからです。
00:00:59エージェントがデザインの意図を容易に把握できるよう、的を絞った言葉が含まれています。
00:01:04また、すべてのデザインシステムを画面上に視覚化するため、
00:01:08テキストだけでスタイルを解釈する必要はありません。
00:01:10色やフォントを並べて実際に確認することで、実装後の
00:01:14アプリの仕上がりを直感的に把握できます。
00:01:16Stitchで何かを構築する際、Stitchが最初に行うステップは、
00:01:21design.mdとデザインシステムの作成です。
00:01:22プロンプトで明示的に指示しなくても実行されます。
00:01:25デザインシステムが確定すれば、サイト作成時に複数のページや
00:01:30再生成が行われても、一貫性を保つことができます。
00:01:32以前はデザインの一貫性を保つのが難しかったのですが、今回の更新によって
00:01:36Stitchを利用する上での最大の懸念が解消されました。
00:01:39Stitchが自動生成するシステムに頼るだけでなく、
00:01:43独自のデザインシステムを構築することも可能です。
00:01:45要件に合わせてテーマを設定したり、既存のデザインファイルがある場合は、
00:01:49それをアップロードするだけで自動的にデザインシステムとして取り込み、
00:01:53視覚化してくれます。
00:01:54重要なのは、使用するdesign.mdが
00:01:58適切な構造に従っていることを確認することです。
00:01:59この構造はエージェント（特にStitch）向けに最適化されており、
00:02:04制作の意図を効率よく理解させるのに役立ちます。
00:02:06私たちはよく、Claudeなどのエージェントとアプリのアイデアを練ります。
00:02:09そのブレインストーミングから生まれたデザインをStitchで形にしたいなら、
00:02:13デザインスタイルをdesign.mdファイルの形式でStitchに持ち込むことができます。
00:02:17Stitch関連のスキルが集約されたGoogle公式のスキルリポジトリから、
00:02:21デザインファイルの構造をClaudeに与えることができます。
00:02:25そこにある例から、Stitchに最適化されたデザインファイルのテンプレートを入手できます。
00:02:29使用しているエージェントに、作成したいウェブサイトのスタイルと
00:02:33テンプレートを提供すれば、スタイルガイドに従った
00:02:38適切なdesign.mdをテンプレートに基づいて生成してくれます。
00:02:39詳細なdesign.mdファイルが生成されたら、それをStitchに持っていき、
00:02:44新しいデザインシステム作成画面のdesign.mdセクションに貼り付けます。
00:02:48「Save design」を押した瞬間に、そのデザインの視覚化データが作成されます。
00:02:52視覚化されたら、作成したばかりのデザインシステムをベースにして
00:02:56UIを実装するようStitchに依頼できます。
00:02:59するとStitchは、design.mdの正確なスタイリングを反映した
00:03:03システム通りのデザインを実装します。
00:03:05このデザインシステムを使えば、何ページでも繰り返し作成でき、
00:03:10すべてのページで同じデザインスタイルを維持できます。
00:03:12既にStitchでプロジェクトを作成済みで、そこからdesign.mdを抽出したい場合は、
00:03:16Googleが作成したスキルを利用できます。
00:03:19「design.mdスキル」は、Stitchのプロジェクトを
00:03:25Stitchのワークフローに最適化されたテンプレート形式のdesign.mdに変換します。
00:03:28また、もし私たちのコンテンツを楽しんでいただけているなら、ぜひ「ハイプ」ボタンを押してください。
00:03:32皆様の応援が、より多くの人に役立つコンテンツを作る励みになります。
00:03:35Stitchの能力は素晴らしいものですが、特定のジャンルのサイトにおいて
00:03:39優れたUXを実装するには、まだ課題も残っています。
00:03:42常にゼロからデザインするのが最善とは限りません。
00:03:44既存のサイトはそのジャンルで実際に機能するパターンに基づいて構築されています。
00:03:48そのため、そうしたパターンを模倣することは、
00:03:53ユーザーにとって本当に使いやすいサイトを作る近道になります。
00:03:54以前、AIで構築する際は、スクリーンショットをアップロードして
00:03:58デザインツールにそのコピーを依頼していました。
00:04:00するとツールは、レイアウトやコンポーネントをそのまま複製しようとしました。
00:04:04しかし、Stitchの新しいアップデートでそれが変わりました。
00:04:06Stitchの「再デザイン（redesign）」機能でも、スクリーンショットを渡しますが、
00:04:10単なるコピーはしません。
00:04:11スクリーンショットを「スタイルガイド」として活用するのです。
00:04:12参照元からパターン、配置、デザイン言語を抽出して、
00:04:17それをあなたの独自のウェブサイトに適用します。
00:04:18つまり、既存のパターンを土台にして、オリジナルのものを構築できるのです。
00:04:22再デザイン機能を使うには、スクリーンショットが必要です。
00:04:25しかし、セクションごとに撮るのは手間がかかります。
00:04:28代わりに「GoFullPage」などの拡張機能を使ってフルページ・スクリーンショットを撮れば、
00:04:33スタイルのリファレンスを一度に提供できます。
00:04:35参考にしたいサイトのスクリーンショットを渡すと、Stitchはそれを
00:04:39スタイルとコンポーネント配置の基準として使い、似た雰囲気のUIを作成します。
00:04:44画像生成にはNano Bananaの機能が使われており、
00:04:45UIスタイルにマッチした各セクション用の画像を生成してくれます。
00:04:50他のサイトのスタイルを模倣する方法は、他にもあります。
00:04:51リンクをコピーするだけで、サイト全体のスタイルを再現できます。
00:04:54デザインシステムの設定から、任意のウェブサイトのデザインを
00:04:59design.mdファイルとしてインポートできるのです。
00:05:03URLを入力すると、Stitchがそのサイトをクロールして
00:05:06スタイルやタイポグラフィの情報を取得し、デザインシステムを取り込みます。
00:05:09しかし、時としてStitchが思い通りのスタイルにならないこともあります。
00:05:12そんな時は、希望するスタイルのラフなスケッチや
00:05:17ワイヤーフレームをアップロードすれば解決します。
00:05:18デザインのテーマを具体的に指定することも可能です。
00:05:21参照資料とテーマ指定があれば、Stitchが生成するUIは
00:05:26ワイヤーフレームとスタイルガイドに正確に一致し、要件通りのサイトになります。
00:05:31さらに細かく修正したい箇所がある場合は、
00:05:34Stitchの注釈・編集機能が使えます。
00:05:36気に入らない部分にどう変えたいか注釈を入れて「適用（apply）」をクリックすれば、
00:05:40指示通りのスタイルが実装されます。
00:05:42さて、先へ進む前に、スポンサーからのお知らせです。
00:05:45Uptime Robotを紹介します。
00:05:46OpenAIやAnthropicなどのAI APIを使って開発していると、
00:05:49ステータスは200 OKなのに、レスポンスが滅茶苦茶なことがあります。
00:05:52アプリが壊れていても、ユーザーから苦情が来るまで気づけないこともあります。
00:05:56そんな時に役立つのがUptime Robotです。
00:05:57ユーザーが気づく前に問題をキャッチしてくれます。
00:05:59APIをピン留めして確認し、単なるステータスコードだけでなく実際のレスポンスもチェックして、
00:06:04Slackやメールですぐに通知してくれます。
00:06:06AIエンドポイントの監視やAPIクレジットの残量追跡を行い、
00:06:10エラーがサポート案件になる前に解決しましょう。
00:06:12稼働状況やインシデント履歴を表示する公開ステータスページも作成できます。
00:06:16セットアップは数秒で終わります。
00:06:18エンドポイントを追加し、期待するレスポンスと通知先を設定するだけです。
00:06:2150個のモニターを試せる無料プランもあります。
00:06:24API監視は月額わずか7ドルからで、自分でサーバーを建てるより安上がりです。
00:06:28クーポンコード「AI Labs」を使えば、年内まで10%オフになります。
00:06:32固定コメントのリンクから、今すぐ始めましょう。
00:06:35もう一つの構築方法は、Stitchの機能を既存のエージェント能力と繋げることです。
00:06:40Claude Codeなどの、エージェントスキルをサポートするツールが対象です。
00:06:44Googleはこのために複数のスキルを開発しており、
00:06:48Stitchを操作するための追加機能をエージェントに提供しています。
00:06:51リポジトリの手順に従えば、必要なスキルをインストールできます。
00:06:54ワークフローで最も重要なのは「Enhance Prompt（プロンプト強化）」スキルです。
00:06:58曖昧なプロンプトを、Stitchが最適に動作する形へと
00:07:02自動的に変換してくれます。
00:07:05Stitchは詳細な説明よりも形容詞で雰囲気（ムード）を識別するため、
00:07:09このスキルには一般的なキーワードのリファレンスが含まれています。
00:07:12その他にも、サイト全体を構築するための「Stitch Loop」というスキルがあります。
00:07:16これにより、エージェントはChromeデベロッパーツールを使いながら、
00:07:20プロンプトに従って自律的なループでStitchからサイトを構築していきます。
00:07:23ポイントは、プロンプトの履歴を適切に管理し、各ステージへと引き継ぐことです。
00:07:28これらのスキルがすべて自動で処理してくれるため、
00:07:32これは「ワンショット（一撃）」でアプリを作るのに最も近い方法と言えます。
00:07:33ただし、スキルを使う前に、Stitch MCPが接続されているか確認してください。
00:07:38Stitchはこれを使って、バックグラウンドでデザインの構築や取得を行っています。
00:07:41このチャンネルにはMCPのインストール方法や、よくある問題の
00:07:46デバッグ手順を解説した動画がありますので、参考にしてください。
00:07:49さて、MCPやコード経由でStitchからデザインを書き出すと、
00:07:53通常はすべてが1つにまとまった巨大なHTMLファイルが出力されます。
00:07:56しかし、最近のアプリはReactベースのコンポーネント構造が多いため、
00:08:01HTMLをReactにマッピングし直す作業はエージェントにとって負担になります。
00:08:03これを簡略化するために「React componentスキル」が役立ちます。
00:08:06Stitchのデザインを、適切な検証基準に基づいたモジュール形式のコンポーネントに変換します。
00:08:10スクリプトで検証しつつデザインを取得するため、コンポーネント化が容易になります。
00:08:15このワークフローでは、希望のプロセスを記述した「Clod.md」を作成できます。
00:08:20手順は以下の順序に従う必要があります。
00:08:21まず、Enhance promptスキルで曖昧な指示をStitch専用プロンプトに変換し、
00:08:26Stitchに入力が正しく伝わるようにします。
00:08:28次に、Stitch loopを使ってデザインを構築します。
00:08:31構築が終わったら、Reactコンポーネントとしてアプリにデザインを実装します。
00:08:35作りたいランディングページのプロンプトを入力すると、
00:08:39Clod.mdに記載された指示に従って処理が始まります。
00:08:41まずEnhance promptスキルが読み込まれ、利用可能なツールを使って
00:08:45最適化されたプロンプトが生成されます。
00:08:47プロンプトの準備ができたら、次のステップへ進む許可を求められます。
00:08:50承認後、Stitch loopスキルが読み込まれ、Stitch MCPを使用してプロジェクトを作成します。
00:08:56プロジェクト作成後、先ほど生成されたプロンプトがStitchに送信され、
00:09:00デザインシステムと実際のデザインが順次生成されます。
00:09:04デザインプロセスの一環として、画像生成機能も活用されます。
00:09:08デザインが完成すると次のステップに移り、React componentスキルによって
00:09:12使用中のフレームワークに最適化されたコンポーネント構造で実装が行われます。
00:09:18開発サーバーを起動すれば、ボタンのホバーエフェクトまで含め、
00:09:22Stitchのデザインが正確に再現されているのが分かります。
00:09:26このワークフローを使えば、機能的なアプリをより素早く簡単に構築できます。
00:09:28ここで使用したClod.mdやその他の資料は、
00:09:33AI Labs Proで公開しています。
00:09:34今回の動画のリソースだけでなく、過去の全動画の資料も
00:09:38ダウンロードしてご自身のプロジェクトで活用いただけます。
00:09:40私たちの活動を支援したいと思ってくださるなら、
00:09:43これが最良のサポート方法になります。
00:09:44リンクは概要欄にあります。
00:09:46ゼロから作るのは必ずしも良い選択ではなく、それはコンポーネントも同様です。
00:09:50素のReactコンポーネントで生成されたUIは、見た目重視で動きがなく、
00:09:54インタラクションやアニメーションを追加するのに手間がかかります。
00:09:58代わりにUIライブラリを活用すべきです。そうすることで、
00:10:02あらかじめ組み込まれたインタラクション機能を利用でき、
00:10:07UIをより生き生きとさせ、制作も楽になります。
00:10:08これをさらに簡単にするため、Googleは「ShadCN UIスキル」を提供しています。
00:10:13これはStitchからShadCNコンポーネントへ変換する際の手順を示してくれます。
00:10:16このスキルは、アプリ全体でこれらのコンポーネントを
00:10:21正しく実装するための詳細なガイドとして機能します。
00:10:22ShadCNは複数のレジストリとの接続をサポートしているため、
00:10:26それらを統合して機能をさらに拡張することも可能です。
00:10:30ただし、ワークフローをスムーズにするために、
00:10:35構築前にShadCN MCPをセットアップしておくことをお勧めします。
00:10:36効果的に使うには、Clod.mdファイルを設定し、
00:10:41Stitch MCPの使用時に自動でShadCNスキルを呼び出して
00:10:47デザインをコンポーネント化するよう指示を含めておきます。
00:10:48レジストリを追加できるので、プロジェクトに使いたいものを自由に指定できます。
00:10:52例えば、今回のサイト制作では、高級感を出すために
00:10:57GlassmorphismとMotion Primitivesを選びました。
00:11:00プロジェクトのニーズに合わせて、最適なものを選択してください。
00:11:03以前Stitchで作成したUIがあるなら、それを
00:11:07ShadCNコンポーネントを使ったアプリに変換できます。
00:11:08実装したいプロジェクト名を指定して、
00:11:12アプリへの実装を依頼するだけです。
00:11:13まず指定されたプロジェクトが取得され、ShadCN UIスキルが読み込まれます。
00:11:18そしてShadCN MCPのツール呼び出しと指定したレジストリを用いて、
00:11:23アプリ全体が実装されます。
00:11:24実装が終わると、Stitchで見たままのデザインが、
00:11:27ShadCN UIコンポーネントで構築されたアプリとして完成します。
00:11:29実装が容易になったことで、一度の生成で出来上がるアプリの
00:11:34インタラクティブ性が劇的に向上します。
00:11:36ということで、今回の動画は以上です。
00:11:38チャンネルを支援し、こうした動画制作を応援していただける方は、
00:11:42下の「スーパーサンクス」ボタンからお願いします。
00:11:44ご視聴ありがとうございました。それでは、また次回の動画で。