Google Stitch を使い始めた最初の1週間、私はかなり非効率な使い方をしていた。
「どんな画面が作れるかな」とあいまいなプロンプトを試し、出てきた結果に「なんか違う」と感じては捨てる。また別のプロンプトを試す。この繰り返し。
1時間使って、使える画面が1枚も生成できなかった日もあった。
あれから半年。今はStitchを毎日のように使い、1時間あれば5〜8画面を仕上げることができる。変わったのは、プロンプトの書き方だけじゃない。Stitch を使う「前後」の行動、準備の仕方、習慣そのものが変わった。
その変化を、10の習慣として整理してみた。
結論から言うと——Stitch の生産性は、プロンプトの書き方よりも「プロンプトを書く前の準備」と「生成した後の使い方」に大きく依存する。ツールに慣れるほど、Stitch の前後の時間が短くなることが効率化の本質だ。
習慣1：セッションを始める前に「目標を1行で書く」
「今日のStitchセッションで作るもの」を1行でメモしてから始める。
「ログイン画面を作る」ではなく「Bサービスの新機能Xのアクティベーション確認画面を作る。スマホ向け。ユーザーは40代のビジネスパーソン。」くらいの粒度で。
この1行を書くことで、Stitchに何を頼むかが明確になる。セッション中に「何を作ろうとしていたんだっけ」と迷う時間が大幅に減った。
実際に使ってみてわかったのは、「目標のあいまいさ」がプロンプトのあいまいさに直結し、出力のあいまいさを生むということだ。
習慣2：テンプレートプロンプトを用意する
毎回ゼロからプロンプトを書くのは非効率だ。私は「プロンプトのテンプレート」をNotionに保存している。
テンプレートの構成：
- 画面の種類（何の画面か）
- ユーザーの状態・目的
- デバイス（スマートフォン / デスクトップ / タブレット）
- トーン（明るい / シリアス / やわらかい / プロフェッショナル）
- 必須要素（特定のボタン、フォーム項目、プログレス表示など）
- 禁止事項（使わない色、要素など）
このテンプレートに埋めていくだけでプロンプトが完成する。埋める時間は2〜3分。テンプレートのない頃は、プロンプトを考えるだけで10分かかっていた。
習慣3：DESIGN.md を最初に必ずインポートする
新しいStitchプロジェクトを始めるとき、最初にやることはDESIGN.mdのインポートだ。これをしないと、後から「ブランドと色が合わない」という問題が発生する。
チームで共有しているDESIGN.mdをプロジェクト設定から読み込むのに30秒もかからない。でもこれを忘れると、後で何枚もの画面を直すことになる。
「Stitch を開いたら、まずDESIGN.mdのインポートを確認する」を最初の手順として体に染み込ませた。
習慣4：最初は「荒削りな生成」から始める
完璧なプロンプトを書こうとして時間をかけるより、まず「7割の完成度」のプロンプトで生成してしまう方が速い。
最初の生成で全体の方向性を確認し、「ここが違う」「ここに追加したい」という具体的なフィードバックをStitchに渡して修正する。この「生成→フィードバック→修正」サイクルを回す方が、最初から完璧を目指すより圧倒的に速い。
Stitch のチャット欄でのやり取りは、「ボタンをもっと大きく」「このテキストをXXに変更して」といった粒度の指示を受け付けてくれる。修正を指示することへの心理的ハードルを下げるのも重要な習慣だ。
習慣5：フィードバックは「感想」ではなく「指示」で伝える
生成された画面に対して「なんか重い感じがする」と伝えても、Stitchは改善できない。
効果的なフィードバックの形式：
- 感想：「なんか重い感じがする」→ 指示：「背景色を #F8F8F8 にして、ヘッダーのフォントサイズを20pxから18pxに下げて」
- 感想：「ボタンが目立たない」→ 指示：「CTAボタンを画面下部に固定して、幅を全幅にして」
- 感想：「もっとすっきりさせたい」→ 指示：「カード間の余白を24pxから32pxに広げて、アイコンを削除して」
この変換が自然にできるようになると、Stitchとのやり取りが格段にスムーズになる。
習慣6：ボイス入力を使う場面を決めておく
Stitch 2.0（2026年3月リリース）でボイスキャンバス機能が搭載され、声でStitchに指示できるようになった。
実際に使ってみて、ボイス入力が特に有効な場面は以下の通り：
- 長いプロンプトを素早く入力したいとき（タイピングより速いことがある）
- 複数の修正指示を連続して伝えたいとき
- 「この色をもっとビビッドにして、フォントは細くして」のような感覚的な指示
一方で、Hex値などの正確な数値入力にはテキスト入力の方が確実だ。用途によって使い分けることで、全体の作業時間が短くなった。
習慣7：Figma へのペーストを「最後に1回」にする
Stitch には「Figmaにペースト」機能がある。生成したUIをFigmaのファイルに貼り付けられる（Cmd+Vまたはctrl+Vで貼り付け）。
初期の頃、私は画面を1枚生成するたびにFigmaに貼り付けていた。これは非効率だった。何度もFigmaとStitchを行き来することで集中力が分散し、かえって時間がかかった。
今は「ある画面の全バリアントをStitch内で完成させてから、まとめてFigmaにペーストする」というルールにしている。集中力を分散させずに、Stitch内で一気に完成させる。
習慣8：「これは何の画面か」を毎回自問する
Stitch でUIを生成している最中、「これは何の目的を持った画面か」を常に自問するようにした。
UIデザインが陥りやすい罠は、「きれいに見えること」と「ユーザーが目的を達成できること」を混同することだ。Stitch は見た目のきれいな画面を素早く生成してくれる。でも、それがユーザーのゴール達成に本当に役立っているかどうかは、別問題だ。
「この画面に来たユーザーは、何をしたいのか」「この画面を見た後、ユーザーは次に何をするのか」——この問いを持ち続けることで、Stitch の生成物を正しく評価できるようになった。
習慣9：バリアントを最低2パターン作る
重要な画面は必ず2パターン以上生成して比較する。
「パターンA：情報量多め / パターンB：ミニマル」「パターンA：ビジュアル重視 / パターンB：テキスト重視」など、意図的に対極のパターンを作ることで、どちらの方向性が良いかの議論がしやすくなる。
1パターンしか作らないと、それが良いか悪いかの基準がなく、フィードバックが主観的になりやすい。「これとこれ、どっちがいい？」という問いかけの方が、チームメンバーから具体的な意見を引き出せる。
習慣10：セッション後に「うまくいったプロンプト」を保存する
良いUIが生成されたとき、そのプロンプトを必ず保存する。
私はNotionの「Stitchプロンプトライブラリ」というページに、画面の種類ごとに効果的だったプロンプトを蓄積している。6ヶ月間の蓄積で、今では50本以上のプロンプトが溜まっている。
新しい画面を設計するとき、まずライブラリを検索し「近いプロンプトがないか」を確認する。あれば流用・改変。なければ新規作成してライブラリに追加。このサイクルによって、チーム全体のStitch活用スキルが向上していった。
よくある質問（FAQ）
Q. Google Stitch のボイスキャンバス機能はどのように使いますか？
A. Stitch 2.0（2026年3月リリース）から搭載されたボイスキャンバス機能は、Stitch のエディタ上でマイクアイコンをクリックすることで有効になります。有効化すると、音声でプロンプトや修正指示を入力できます。「ボタンの色を青に変えて」「フォントサイズを大きくして」といった指示をそのまま声で伝えられます。日本語対応はしていますが、技術用語や数値の認識精度には個人差があるため、正確な数値指定はテキスト入力を推奨します。
Q. プロンプトテンプレートを作るとき、最初に何から書き始めればいいですか？
A. まず「自分がよく作る画面の種類」をリストアップするところから始めましょう。ログイン画面・ダッシュボード・設定画面・エラー画面など、繰り返し作る画面に絞ってテンプレートを作ります。最初から完全なテンプレートを目指すのではなく、「使いながら追記していく」ドキュメントとして育てるのが現実的です。
Q. Stitch とFigmaを行き来するとき、データが崩れることはありますか？
A. StitchからFigmaへのペースト（Cmd+V / Ctrl+V）では、ベクター要素・テキスト・レイアウトの多くが保持されます。ただし、Stitch特有のスタイル（一部のシャドウ設定など）はFigma上で再現されないことがあります。Figmaにペーストした後は必ず目視確認し、崩れている箇所を修正してから使いましょう。
Q. Stitch のクレジット（利用上限）を効率的に使うコツはありますか？
A. Stitch 2.0からクレジット制（1日ごとにリセット）に変わりました。クレジットを効率的に使うには、①方向性が決まっていないうちはライトモードを使う（重いモデルより消費が少ない）、②テキスト指示での小修正はなるべく使い、大幅なやり直しを減らす、③1日の作業計画を立てて優先度の高いページから着手する——などが有効です。
Q. チームでStitchを使うとき、プロンプトライブラリを共有する方法はありますか？
A. 現時点でStitch内にチーム用プロンプトライブラリ機能はないため、外部ツールで管理します。Notion・Confluence・GitHubのMarkdownファイルなどが使われています。ファイルにはプロンプト本文・生成結果のスクリーンショット・使用シーンの説明をセットで記録しておくと、他のメンバーが参照しやすくなります。
Q. Stitch のモード（Standard / Experimental など）は使い分けるべきですか？
A. はい、使い分けると効率的です。Stitch 2.0では4つのAIモードが利用可能で、軽いモードほどクレジット消費が少なく速度が速い一方、重いモードほど品質が高くなります。方向性の確認・ラフ作成には軽いモード、最終確認や重要なページには重いモードを使うという使い分けが経済的です。
まとめ：習慣化こそがStitch活用の本質
Stitch の生産性は、ツールの機能よりも「ツールをどう使うか」という習慣によって決まる部分が大きい。
10の習慣をまとめると：
- 始める前に目標を1行で書く
- テンプレートプロンプトを用意する
- DESIGN.mdを最初にインポートする
- 最初は荒削りな生成から始める
- フィードバックは「指示」で伝える
- ボイス入力の使いどころを決める
- Figmaへのペーストをまとめて行う
- 「この画面の目的は何か」を自問する
- バリアントを最低2パターン作る
- うまくいったプロンプトを保存する
この中で、今日から始めやすいのは「1. セッション前に目標を1行書く」と「10. 良いプロンプトを保存する」だ。この2つだけでも、Stitch の使い方は大きく変わるはずだ。
次のステップ：まずはNotionやメモ帳に「Stitchプロンプトライブラリ」というページを作り、次にいいUIが生成できたときそのプロンプトを保存することから始めてみましょう。
