犬と猫の地域包括ケアをめざして／11回目：Google StitchでUIプロトタイプを作る

2026年4月13日（月）10:00〜12:00、11回目のデザインスプリントを実施しました。テーマは「プロトタイプ制作」。前回（第10回）で精度を高めたストーリーボードをもとに、ユーザーが実際に体験できるサービスサイトの雛形を作る時間です。

Google Stitchとは何か

今回初めて登場するツール、Google Stitchについて簡単に紹介します。

Stitchは、Googleが提供するAIを活用したUIプロトタイピングツールです。テキストで指示を出すだけで、実際に動くWebページのHTML/CSSを自動生成してくれます。デザインの知識がなくても、「こんな画面を作りたい」という意図を言葉で伝えれば、数分でスマホ対応のUIが完成します。

生成されるのは画像ではなくHTMLファイル。つまり、Claude CodeなどのAIコーディングツールに読み込ませれば、そのままフロントエンド開発のベースとして活用できます。デザイン→開発のコストを大幅に圧縮できる点で、スタートアップや小規模チームにとって強力な武器になります。

V0 vs Stitch——まず比較してみた

今回のセッションでは、いきなり一つのツールに絞るのではなく、まずV0（Vercel）とStitch（Google）を比較してから使用ツールを決定しました。

両者に同じ指示を出してアウトプットを比較した結果、Stitchの方が求めるイメージに近い画面を生成できました。特にスマホ画面の自然なレイアウト感と、ユーザーの動線を意識したUI設計が優れていると判断し、今回はStitchを採用しました。

今回のスコープ：「お気に入り」という一つのアクション

プロトタイプ制作で最も重要なのは、「ユーザーにどのアクションを取ってほしいか」を最初に固定することです。

なんとなくサイトを作っていても、どこで何をしてもらいたいか、それが何につながるのかが曖昧なままでは意味をなしません。今回チームが合意した「取ってほしいアクション」はひとつ——「お気に入り（保存）」です。

設計した動線はシンプルです。

1. SEO記事を読んだ飼い主が、サービスページに流入する
2. サービス内の各ページを閲覧する
3. 気になる記事を「お気に入り」に保存する
4. 後日また戻ってくる

「お気に入り」は単なる機能ではありません。飼い主が「ここに戻ってくる理由」をつくる仕掛けであり、継続的な関係性の起点となるものです。前回のストーリーボードで設計した「自分専用のケア辞書を蓄積する」という体験と直結しています。

あえて「相談しない」で作った理由

今回のセッションで意図的に行ったのが、「それぞれがStitchとやり取りして、チーム内で相談せずに作る」というルールです。

相談しながら作ると、どうしても一つの方向に収束していきます。アイデアが絞られ、多様性が失われ、一面的な表現になってしまいます。あえてバラバラに作ることで、それぞれの解釈・視点・美意識が表れた複数のアウトプットを得ることができます。

デザインスプリントにおいて、この「まず個人で考える」プロセスは非常に重要です。チームで議論する前に個人の思考を深めておくことで、後の統合フェーズで本当に豊かな化学反応が生まれます。

できあがったUIモック——数分でここまで

上の画像が、筆者がStitchで作成したスマホ用UIのモックです。「犬と猫のケアマネ」のサービスサイトとして、3つの画面を生成しました。

• 左画面：ハンバーガーメニュー内。トップページと「あなたへのおすすめ」コンテンツと専門家への相談導線
• 中央画面：実際の記事。コメント欄を完備。下部に「この記事を保存」ボタン
• 右画面：サービスページ。お気に入り（bookmarkボタン）も用意。（おむつの知識など、テーマ別に蓄積）

これがわずか数分でできてしまう——そんな時代に入っています。しかも生成されるのは画像ではなくHTMLファイルなので、Claude CodeなどのAIコーディングツールに読み込ませれば、そのままフロントエンドの土台として活用できます。デザイナーなしでも、アイデアをリッチな画面として素早く具現化できる環境が整ってきています。

次のステップ：UIをさらに磨き、実際のユーザーへ

今回はそれぞれがアウトプットを出したところで終了しました。次回は各自のUIの良いところを持ち寄り、統合・精緻化していく作業です。最終的には実際のユーザーに触ってもらい、「お気に入り」ボタンが本当に押されるかを検証していきます。

また今後は、サービスを広げていく上で欠かせない仲間づくりについても、チームで話し合っていく予定です。プロダクトの設計と並行して、誰とどう組むかという視点も重要になってきます。

---