00:00:00AIデザインは、新しいツールのリリースやモデルのアップデートのたびに進化を続けていますが、
00:00:04優れたデザインというのは、単一のツールに頼ってアプリの見栄えが良くなるのを待つだけでは生まれません。
00:00:09デザインをより良くするのは、常にツールとリソースの組み合わせであり、
00:00:12さらに重要なのは、目的に応じて適切なツールを使い分けることです。
00:00:16GoogleのAIデザインツール「Stitch」に、UIデザインを大幅に効率化する画期的なアップグレードが加わりました。
00:00:21また、Vercelからも最近、ClaudeのChrome拡張機能を超えるようなツールが登場し、
00:00:26今では私のブラウザテストにおける定番ツールになっています。
00:00:29今日は話すべきことがたくさんあります。これらを組み合わせることで、
00:00:32これほど完成度の高いデザインができるとは思ってもみませんでした。
00:00:34Google StitchがMCP（Model Context Protocol）として利用可能になり、AIエージェントとの接続が可能になりました。
00:00:39これにより、エージェントを通じてプロジェクトの作成・管理やデザイン制作ができるようになっています。
00:00:43このアップデートのおかげで、自分でStitchに詳細なプロンプトを出す必要がなくなり、Claudeに任せられるようになりました。
00:00:48プロジェクト管理機能も充実しており、新規プロジェクトの作成から、
00:00:53進行中のプロジェクト一覧の取得、リスト画面によるプロジェクトや画面の管理まで可能です。
00:00:57さらに、テキストプロンプトからエージェントに新しいデザインを作成させることもできます。
00:01:02インストール手順は、公式ドキュメントでステップ・バイ・ステップで解説されています。
00:01:06通常はcurlを使用してGoogle Cloud SDKをインストールしますが、私はMacを使っているので、
00:01:11brewを使用してGoogle Cloud CLIをダウンロードしました。
00:01:14ログインはユーザーとしてとアプリケーションとしての2回必要です。というのも、
00:01:19Google Cloud内のプロジェクトに接続して、その中でStitch APIを有効化する必要があるからです。
00:01:24デザインの作成には、そのプロジェクトのリソースが使用される仕組みになっています。
00:01:27一連のプロセスが完了すれば、Stitchを好きなエディタに接続できます。
00:01:31私はClaude Codeを使用したので、その中にセットアップして全てのツールを使えるようにしました。
00:01:35さて、この長くて面倒なセットアップを簡略化してくれる「Stitch MCP」を誰かが作ってくれました。
00:01:41Google Cloudのインストールからプロジェクトのセットアップまで、すべて自動で処理してくれます。
00:01:45ただし、これは非公式で、あくまで個人の実験的なツールですが、今のところ問題なく動作しています。
00:01:50何を作るにしても、実装前のプランニングは不可欠です。今回私は、技術面だけでなく、
00:01:54IT業界のあらゆる職種に対応した、模擬テクニカルインタビューアプリの制作に取り組んでいました。
00:02:03動画の制作過程で、Stitch MCPの動作における課題や、デザインプロセスでのより良い活用法がいくつか見つかりました。
00:02:13それらのルールは、アプリのソースコードと一緒にClaude.mdファイルにまとめ、AI Labs Proで公開しています。
00:02:18AI Labs Proは、私たちが最近立ち上げたコミュニティで、これまでの動画で紹介したリソースをすべて一箇所に集めています。
00:02:23プロンプトや再利用可能なコマンド、プロジェクト用に作成したスキルなど、盛りだくさんです。
00:02:28私たちの活動に価値を感じてくださり、チャンネルを支援したいと考えていただけるなら、
00:02:33ここに参加していただくのが一番の方法です。リンクは概要欄にあります。
00:02:38私はアプリの計画にClaude Codeの「Planモード」を使うのが好きです。大まかなアイデアを投げれば、細部まで詰めて
00:02:43詳細なドキュメントを書いてくれます。もちろん、皆さんはお好みのIDEで計画を立てて構いません。
00:02:48Claude Codeにアプリのアイデアを伝え、よくある「いかにもAIが作ったデザイン」にならないよう、
00:02:53UIガイドを作成するよう指示しました。
00:02:58時間はかかりましたが、プランニングを徹底的に行いました。計画を隅々まで読み込み、
00:03:03納得がいくまで何度も修正を加えてブラッシュアップすることが非常に重要です。
00:03:09粘り強く調整を続けた結果、最終的に理想通りのプランが完成しました。
00:03:14ClaudeのPlanモードでデザイン案が固まったら、次はいよいよ実装です。
00:03:19正直なところ、デザイン能力に関してはClaudeのモデルよりもGeminiの方が優れていると感じています。
00:03:24そこで、Claudeが生成したプランを元に、Stitch MCPを使って新しいプロジェクトを開始し、
00:03:29正確なデザインを作成するよう指示しました。エージェントはMCPツールを使用して
00:03:35新しいプロジェクトを作成し、各セクションの生成を開始しました。まずプロジェクトIDで識別し、
00:03:40Stitchに詳細なプロンプトを送信します。それを受けたStitchが画面の生成を始め、
00:03:45Gemini 1.5 Flash（※原文3 Flash）を使用して最初のセクションを作成しました。ただ、気になったのは、
00:03:50ランディングページの各セクションを個別にプロンプト送信していた点です。一般的なウェブデザインのように
00:03:551枚の長いデザインとして作成してくれませんでした。これでは後で1つのアプリにまとめる際に苦労します。
00:04:00そこで、個別のコンポーネントではなく、1枚の長いページデザインを作成するようClaudeに頼み直しました。
00:04:05するとClaudeは非常に詳細なプロンプトを作成し、それを受け取ったStitchが、
00:04:10セクションごとのアイデアを活かしたまま、ランディングページ全体を一気に生成してくれました。
00:04:15デザイン面では、コメントアウトやターミナルコマンドといった、
00:04:20エンジニアが親しみを感じる要素が盛り込まれているのがとても気に入りました。
00:04:25Stitchのプレビュー機能で各デバイスでの見え方を確認したところ、
00:04:30滑らかなホバーエフェクトも実装されていました。モバイルとデスクトップの両方で
00:04:34しっかり動作するレスポンシブなデザインでした。Stitchが生成したデザインに満足したので、
00:04:40Claude Codeで構築しているNext.jsプロジェクトにこれを移行することにしました。
00:04:45Stitch MCPを使ってランディングページ全体のコードを取得し、
00:04:51作成中のNext.jsプロジェクトに実装するようClaudeに指示しました。
00:04:56「get screen」ツールで画面情報を取得すると、コードのダウンロードリンクが返ってきます。
00:05:01Claudeはcurlコマンドでコードを抽出し、HTMLが手に入れば、
00:05:06既存のNext.jsプロジェクトへの組み込みは簡単です。ただ、実装を開始した際、
00:05:11Claudeはすべてのコードを main page .tsx ファイルに詰め込んでしまいました。
00:05:17これはReactアプリが推奨する適切なコンポーネント構造ではありません。
00:05:22とりあえず開発サーバーを起動して、実装されたUIを確認してみます。
00:05:26ヒーローセクションのテキスト配置を除けば、Stitchで生成したものとほぼ同じでした。
00:05:31ホバーエフェクトや弁当グリッドのアニメーション、背景のパララックススクロールも再現されています。
00:05:36コードが1つのファイルに固まっているのを直すため、保守性を高めるよう
00:05:41適切なコンポーネント構造へのリファクタリングをClaudeに指示しました。その結果、コードは整理され、
00:05:46UIコンポーネントとページが綺麗に分割された、見通しの良い構成になりました。
00:05:51Claude CodeとStitchの力で、ターミナル風のエンジニア好みなテーマを持つ、
00:05:57完成度の高いアプリができました。しかし、まだUIに課題がありました。例えば、
00:06:02技術面接セッション中にユーザーがコードを入力するため、コードパネルは編集可能であるべきです。
00:06:08また、質問の表示位置もUXの観点から改善の余地がありました。
00:06:14そこでアプリのテストに、Vercelの「Agent Browser」を使用しました。これはRustとNode.jsで構築された、
00:06:19AIエージェント向けのCLIツールで、従来のブラウザ自動化ツールよりも格段に高速です。
00:06:24インストールは簡単で、コマンド一つでシステム全体にグローバルインストールされます。
00:06:29現時点ではChromium系ブラウザ限定で、FirefoxやSafariには対応していません。
00:06:34Agent Browserは、ClaudeのChrome拡張機能やPlaywright、Puppeteerよりも優れた機能を備えています。
00:06:40従来の拡張機能は、ブラウザを起動してスクリーンショットを撮り、ピクセルをマッピングして操作しますが、
00:06:44それとは対照的に、Agent Browserはbashコマンドとして動作し、
00:06:50スクリーンショットではなく「スナップショット」を利用します。
00:06:55このスナップショットは、ページ全体のアクセシビリティ・ツリーに、
00:07:00各要素を識別するセレクタをタグ付けしたものです。エージェントはこのセレクタを使って効率的に操作します。
00:07:05既存のブラウザとは別のセッションで動作するため、ログインが必要な操作などは
00:07:10そのままでは行えません。この点は、ユーザーのブラウザ上で動作するClaude拡張機能とは異なります。
00:07:19利用可能なコマンドの詳細は、GitHubのリポジトリで確認できます。UIのナビゲーション、セレクタの使用、
00:07:24マウス操作のシミュレート、クッキーやストレージの管理、ネットワーク監視方法などが網羅されています。
00:07:30私は自分のアプリにClaude.mdファイルを追加し、あらゆるテストに
00:07:35Agent Browserのツールを使うよう指示しました。使い方が分からない時はhelpコマンドを使うようにも伝えました。
00:07:40これらのルールとワークフローのガイドラインもAI Labs Proで入手可能です。
00:07:45これは基本的にはヘッドレスブラウザの自動化ツールですが、「headed」オプションを有効にすれば、
00:07:50ブラウザウィンドウを表示して動作を確認することもできます。
00:07:55私はClaudeに、ヘデッドモードでUIテストを行うよう指示しました。まずhelpコマンドで
00:07:59コマンド一覧を確認してからブラウザを起動しました。この手法は、
00:08:05私たちが「Claude browser use」で提案したものと似ています。
00:08:09セクションごとのスクリーンショットではなく、ページ全体のスナップショットを撮ることで、
00:08:14高い精度を保ちつつテストプロセスを大幅にスピードアップさせました。
00:08:19エージェントはアプリ内を巡回し、複数のUIを移動してレイアウトを確認するなど、多くのテストをこなしました。
00:08:24アクセシビリティ・ツリーを活用することで、他の自動化ツールならもっと時間がかかるところを、
00:08:29わずか4分で全工程を完了させました。
00:08:39また、エディタが編集不可である問題も特定し、その場ですぐに修正してくれました。
00:08:43その後、ブラウザでスナップショットを撮り、エディタのセレクタを見つけ、
00:08:48クリックやタイピング機能を使って、修正が正しく反映されたかをテストしました。
00:08:53今回の内容は以上です。チャンネルをサポートし、こうした動画の制作を
00:08:57支援していただける方は、ぜひAI Labs Proへの参加をご検討ください。
00:09:02今回もご視聴ありがとうございました。それではまた次回の動画でお会いしましょう。