Google StitchでアプリUIを作る方法

TL;DR

Google StitchでアプリかWebを選び、作りたいサービスを文章で指示すると、複数画面のUI案を生成できる。日本語化や画面追加を対話で進め、コードまたは選択範囲のリンクをClaude CodeやCursorへ渡せば、Expoなどの実装に反映できる。

Transcript

はい、どうもしです。え、今回はですね、 Googleが出した、え、デザイン作成 用のWebブサービスのスティッチって いうのをね、え、紹介していこうかなと 思います。これ見ていただいたら分かる ようにね、これAIが出してくれた デザインなんですけども、私スマホアプリ とかWebサービス作ってるんですけど、 やっぱAIってデザインがちょっと弱いん ですよね。ま、僕もデザインの知識 ほとんどないので、ま、AIに指示しても ね、やっぱりAIっぽくなっちゃうじゃ ないですか。だからそういったものを解消 してくれるようなサービス、スティッチっ ていうのをね、紹介していこうと思います 。ま、見て分かる通りかなりね、こう、 クオリティの、ま、デザインっていうのを 出力してくれてるわけですね。ま、こう いっ... Read More

Key Insights

• Stitchは、スマホアプリとWebサービスのどちらかを選び、自然言語の指示から複数画面のUI案を生成できるデザイン作成用Webサービスである。
• 大まかな要望は、詳細な仕様を最初から書かなくてもデザイン案へ変換でき、生成後の対話によって日本語化や画面追加を段階的に進められる。
• 画面構成は、オンボーディング、ホーム、プレミアム課金、生成詳細、プロンプト支援など、アプリに必要な役割ごとに追加して整理できる。
• 画面遷移は、実演ではデザイン図として生成されなかったものの、各画面をどう移動させるかという案をテキスト形式で取得できた。
• 生成した画面は、右クリックの「コピーアズコード」で取得し、Claude CodeやCursorへ渡して実装の参照情報として利用できる。
• Expoでの実演は、Stitchのコードと画面遷移資料をClaude Codeに読み込ませ、オンボーディングからホーム画面へ進むUIを再現した。
• MCP連携は、選択範囲のリンクを開発支援AIへ渡して再現を依頼できるが、実演者はHTML取得のためにAPIキーによる認証設定が必要だと報告している。
• スタイル指定は、ミニマルやゴージャスなどのテーマを指示することで調整でき、実演ではミニマルなライフログ用Webサービスの画面が作成された。
• 🎬 このチャンネルの他の動画:
  • Claude Codeでアプリを高速開発する方法
  • Claude CodeにMCPを導入する方法
  • AIツールでYouTube風アプリを開発する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Google StitchでアプリUIを作る方法は？

Stitchでアプリを選び、作りたいサービスの内容を自然言語で入力します。生成された複数の画面を確認し、日本語化、オンボーディング、課金画面などを追加で依頼します。最後にコードか選択範囲のリンクをClaude CodeやCursorへ渡し、実装を依頼します。

Q: Google Stitchではどの程度詳しい指示が必要ですか？

最初から細かな仕様をすべて書く必要はありません。実演では「AIを使ってスマホの背景画像を作れるスマホアプリ」という大まかな指示から4画面が生成されました。その後の対話で言語、必要なページ、テーマを追加し、段階的に具体化できます。

Q: Stitchで生成した画面を日本語にする方法は？

生成後の入力欄で、すべて日本語で書くように依頼します。実演では英語を含む4つの画面に対して日本語化を指示し、まとめて修正しました。最初に国内向けとして作り、後から海外向けへ展開する進め方も選択肢として紹介されています。

Q: Stitchで追加すべきアプリ画面を考える方法は？

Stitchに必要なページを質問し、提案された候補から順番に追加します。実演では、アプリの目的を紹介するオンボーディング、プレミアム課金、生成詳細、プロンプトアシスタントなどを作成しました。必要になった時点で画面を生成する進め方も可能です。

Q: StitchのデザインをExpoアプリへ反映する方法は？

対象画面を右クリックしてコードをコピーし、画面遷移の説明と一緒にプロジェクト内の資料へ整理します。そのファイルをClaude Codeへ渡し、まずオンボーディングなど対象範囲を指定して構築を依頼します。実演では同じ方法を各画面に繰り返しました。

Q: Stitchで画面遷移図を作ることはできますか？

実演では画面遷移をデザイン図として生成できませんでしたが、遷移方法はテキストで整理されました。その内容をコードや画面デザインと一緒にClaude Codeなどへ渡せば、どの画面からどこへ移動するかを示す実装資料として活用できます。

Q: StitchのMCP連携を使う方法は？

StitchのドキュメントにあるMCP連携を設定し、対象デザインを右クリックして選択範囲へのリンクをコピーします。そのリンクをClaude Codeなどへ貼り、MCPを呼び出して忠実に再現するよう依頼します。実演者はFigma MCPと同様の使い方だと説明しています。

Q: StitchのMCPでHTMLを取得できない場合はどうしますか？

APIキーを取得し、認証を含むセットアップ方法を試します。実演者の環境では、CursorへURLを貼る方法だけでは作成したデザインのHTMLをダウンロードできませんでした。そのため、ドキュメントに記載された認証後のMCP起動方法が必要だと報告しています。

Q: StitchはWebサービスのデザインにも使えますか？

Webサービスにも利用できます。Stitchの開始時にWebを選び、サービス内容と希望する雰囲気を入力します。実演ではライフログサービスをミニマルなスタイルで依頼し、ランディングページを含むデザインを生成して、実際のWebサービスへ反映しました。

Q: Stitchでデザインの雰囲気を調整する方法は？

プロンプトに希望するテーマやスタイルを加えます。実演では、特に指定しなくてもUIが生成されましたが、ミニマルやゴージャスなどの表現を指示すれば、求める方向へ近づけられると説明されています。画像素材は別途生成して追加する方法も示されています。

Summary & Key Takeaways

• まずStitchでアプリかWebを選び、作りたいサービスの概要を入力する。実演では、AIでスマホ壁紙を作るアプリという大まかな指示から4画面が生成された。細部を決め切らない依頼でも案を得られ、生成後に全テキストの日本語化やテーマ指定を追加できる。

• 次に、最初の画面だけでなく、オンボーディング、プレミアム課金、生成詳細、プロンプトアシスタントなど、製品に必要な画面を対話で追加する。Stitchは画面遷移をデザインとして生成できなかった例でも、遷移案をテキストで整理し、実装用の資料として利用できた。

• 実装では各画面のコードと画面遷移の説明をClaude Codeへ渡し、Expoアプリとしてオンボーディングやホーム画面を再現した。MCP連携なら選択範囲のリンクからデザインを参照できるが、実演者の環境ではURLだけの設定でHTMLを取得できず、APIキーを使った認証設定が必要だった。