01. Google Stitchでアプリの画面案を作る

アプリのアイデアとターゲットが決まったら（Phase02：リサーチ編）、次に行うのは「画面の具体的な形（ワイヤーフレーム）」を作ることです。

バイブコーディングでは、最初からコードで画面を作ろうとすると、AIが生成するUIがチグハグになったり、想像していたデザインと乖離して手戻りが発生したりしがちです。

そこで、本サイトではUIデザインツール Google Stitch を使います。Stitchを使えば、AIと対話しながら直感的にアプリの画面案（ワイヤーフレーム）を組み立てていくことができます。

この記事のサブコンテンツ

この記事では、以下のステップに沿ってGoogle Stitchで画面案を作る方法を解説します。

Google Stitchの役割と基本機能
Stitchプロジェクトの作成と初期プロンプト
AIとの対話によるレイアウトの磨き込み
習慣トラッカーアプリを例にした画面レイアウト案
画面レイアウト作成時のチェックリスト
まとめと次のステップ

1. Google Stitchの役割と特徴

Google Stitchとは

Google Stitchは、AIエージェント（Gemini）と対話しながらアプリやWebサイトのUIプロトタイプを作成できる、AIネイティブなデザイン設計ツールです。

Figmaなどの従来のデザインツールのように自分で細かくパーツを配置していく必要はなく、言葉で「こういう画面を作って」と伝えるだけで、洗練されたレイアウト案を瞬時に可視化してくれます。

なぜコーディングの前に画面案を作るのか

バイブコーディングにおいて、Stitchで画面案をあらかじめ作成するメリットは主に3つあります。

認識のズレを防ぐ：人間が思い描いている「いい感じの画面」と、AIが推測する「いい感じの画面」のギャップを、デザインの段階で埋めておくことができます。
コード生成の精度向上：Stitchからエクスポートした画面構成データやプロンプトを開発用AI（GitHub Spec Kitなど）に渡すことで、AIが正確なスタイリング（CSS/StyleSheet）と構造でコードを出力しやすくなります。
手戻りの最小化：コードを書き直すよりも、Stitch上で「ボタンを右上に移動して」「リストをカード型に変更して」とAIにデザインを指示して修正するほうが、圧倒的に高速でノーリスクです。

既存デザインのインポート

Stitchはゼロから新規で画面案を生成するだけでなく、すでに手元にあるデザインアセットを「インポート」して再利用・編集する機能も強力にサポートしています。

Figmaや各種デザインデータからのインポート：Figmaの共有URLをStitchに読み込ませるだけでなく、ローカルの .figファイル（Figmaデザインデータ） やその他のアセットファイルをドラッグ＆ドロップしてキャンバス上に直接インポート可能です。これにより、既存のFigmaワイヤーフレームやデザインシステムをそのままStitchに引き継ぎ、AIでの対話編集へとスムーズに移行できます。
画像・スクリーンショットの解析：手書きのワイヤーフレームスケッチや、既存アプリのスクリーンショット画像をStitchに放り込むことで、AIが画像レイアウトや構成部品を視覚的に解析・検出し、編集可能なStitchコンポーネントに自動変換してくれます。

リアルタイム生成プレビュー

Stitchが画面案を生成する際、ローディングを待つ必要はありません。

リアルタイムな逐次描画：AIが画面構成を出力するプロセスは、キャンバス上にブロック単位で**リアルタイムにストリーミング（逐次生成）**されます。
素早い手戻りチェック：ヘッダーからコンテンツ領域へと画面が徐々に出来上がっていくのをリアルタイムでプレビューできるため、「方向性が違う」と感じた瞬間に生成をストップして指示を修正することができ、デザイン策定にかかる時間を劇的に削減できます。

2. Stitchプロジェクトの作成と初期プロンプト

まずはStitchを開き、新しいプロジェクトを作成します。初期画面案を作るために、AIに対して「作りたいアプリの要件」をプロンプトとして渡します。

初期プロンプトの構成

最初のプロンプトでは、アプリの目的、表示したい要素、そして「どのような画面構成が必要か」を明確に伝えます。

プロンプトテンプレート

あなたは優れたUI/UXデザイナーです。
以下の要件を満たす、スマホ向け「習慣トラッカーアプリ」のダッシュボード（メイン画面）のワイヤーフレーム（画面案）をGoogle Stitchで作成してください。

【表示したい要素】
1. ヘッダー：今月の進行状況（パーセンテージ）を表示する円グラフ
2. カレンダー部：今週1週間分の進捗が一目でわかる水平スクロールのカレンダー（日付と曜日、完了した日はチェックマークが表示される）
3. メインコンテンツ：今日の習慣リスト（習慣名、目標回数、完了ボタン、進捗バー）
4. アクション：画面右下にフローティングアクションボタン（FAB）で「習慣の追加」ボタンを配置

【デザインの方向性】
・無駄な要素を削ぎ落とした、シンプルでプレミアム感のあるミニマルデザイン
・iOS/Android共通で違和感のないモダンなモバイルレイアウト

これをStitchのプロンプト入力欄に投入すると、AIが数秒で指定された要素を配置した美しい画面案を生成します。

3. AIとの対話によるレイアウトの磨き込み

一度で完璧なデザインができることは稀です。Stitchの最大の強みは、生成されたワイヤーフレームを見ながら「対話でデザインを洗練させていける」点にあります。

フィードバックと修正プロンプトの例

生成された画面に対して、以下のように対話形式で修正を指示します。

例1：情報の優先度を変更する

「ヘッダーの円グラフが少し大きすぎて、メインの習慣リストが見づらいです。円グラフを小さくし、画面右上か左上にコンパクトに配置してください。代わりにカレンダー部をもう少し強調してください。」

例2：インタラクションを高める

「習慣リストの各項目（カード）をタップしたくなるように、少し角丸（border-radius: 16px程度）を大きくし、背後に非常に薄い影（ドロップシャドウ）を追加してください。完了ボタンは『チェックマーク』のみのシンプルなアイコンにしてください。」

例3：空状態（Empty State）の設計

「習慣がまだ登録されていない場合の『空状態』の画面案も作成してください。寂しい印象にならないよう、中央に『新しい習慣を登録して始めましょう！』というメッセージと、イラスト風のプレースホルダーを配置してください。」

このように、対話を重ねることで、コードを1行も書かずに理想の画面構成を定義していきます。

ピンポイントのインプレイス編集

Stitchでは、画面全体のプロンプト対話に加えて、特定の部品を対象にした部分的なAI編集機能（In-place AI Edits）が使えます。

選択部位のピンポイント修正：画面全体を再生成することなく、修正したいボタンやテキスト、カードなどのコンポーネントをキャンバス上で直接「選択」し、その要素だけにプロンプト（例：「この完了チェックボタンをもっと大きく」「このテキストのフォントを細くして」）を指示してその場で書き換えることができます。
レイアウト崩れの防止：他の正常な部分のレイアウトやスタイルを維持したまま、特定の要素だけをピンポイントで安全に微調整することが可能です。

4. 習慣トラッカーアプリを例にした画面レイアウト案

Stitchで作成する基本的な4つの画面のレイアウト構成案を整理します。

① ダッシュボード（一覧）画面

役割：ユーザーが毎日開き、習慣の進捗を確認・記録するメイン画面。
主なコンポーネント：週次進捗ヘッダー、本日の習慣カードリスト（スワイプでのアクションに対応）、新規追加ボタン（FAB）。

② 習慣詳細・分析画面

役割：特定の習慣の過去の統計データや、カレンダー表示でモチベーションを高める画面。
主なコンポーネント：過去30日間のカレンダー（ヒートマップ形式）、現在の継続日数（ストリーク数）、リマインダー通知設定へのリンク。

③ 習慣作成・編集フォーム画面

役割：新しい習慣を登録、または既存の習慣を編集する画面。
主なコンポーネント：習慣タイトル入力フィールド、頻度選択（毎日、週3日、曜日指定など）、リマインダー時刻設定、カラータグ選択。

④ 設定・プロフィール画面

役割：アプリ全体の設定、テーマ（ライト/ダークモード）の切り替えなどを行う画面。
主なコンポーネント：テーマ切り替えスイッチ、データバックアップ（Cloud Sync）設定、ライセンス・アプリ情報。

5. 画面レイアウト作成時のチェックリスト

Stitchで画面案を完成させる前に、以下のポイントを満たしているかセルフチェックを行います。

1画面1目的：画面内の要素が多すぎて、ユーザーが何をしていいか迷う状態になっていないか？
手の届く操作系：完了ボタンや追加ボタンなど、頻繁にタップする要素が片手で操作しやすい位置（親指の届く画面下部など）に配置されているか？
一貫したレイアウト：異なる画面間で、ヘッダーの高さや余白（マージン/パディング）の基準が揃っているか？
状態（ステート）の考慮：データがある状態だけでなく、「読み込み中（Skelton UI）」「データゼロ（Empty State）」「エラー発生時」の画面構成も考慮されているか？

6. まとめと次のステップ

この記事では、Google Stitchを使ってアプリの画面レイアウト案（ワイヤーフレーム）をAIと共同作成する方法を学びました。

画面の見た目と構成が決まったら、次はそれらの画面がどのように繋がり、ユーザーがどう遷移していくかという「導線設計」に進みます。

次の記事では、Stitchの画面案を元にアプリ全体のフロー図を作る「02. Stitchの画面案からユーザー導線を作る」に進みましょう。