プロンプトから UI へ：Google Stitch を使う

ほとんどの UI プロジェクトは、始まる前に止まってしまいます。頭の中には明確なアイデアがあるのに、それをワイヤーフレームやモックアップ、プロトタイプに落とし込むには、いつも確保できるとは限らない時間が必要です。Google Stitch は、このギャップを埋めるために作られています。

2025 年 5 月にローンチされ、その後大幅に拡張された Stitch は、いまや本格的な AI ネイティブのデザイン・プロトタイピングキャンバスとなっています。会話による UI 生成、画像やワイヤーフレームの入力、インタラクティブなマルチスクリーンプロトタイプ、音声ワークフロー、デザインシステムの可搬性を担保する DESIGN.md、開発者へのハンドオフのための SDK/MCP 統合をサポートしています。本記事では、実際のフロントエンドワークフローの一部として、これを効果的に使う方法を解説します。

Google Stitch が実際に行うこと

Stitch は、自然言語のプロンプトを構造化された UI レイアウトに変換する AI 支援デザインツールです。反復作業が可能な画面を生成し、それらをインタラクティブなフローに接続して、HTML と TailwindCSS としてエクスポートできます。

これは本番対応のアプリ生成ツールではありません。高精細なビジュアル仕上げで Figma を置き換えることはなく、フロントエンド開発者の必要性をなくすものでもありません。Stitch が得意とするのは、白紙のキャンバスという問題を解消し、初期段階のデザイン作業を数日から数分に圧縮することです。

当初は Gemini 2.5 Pro でローンチされた Stitch ですが、現在はより新しい Gemini モデルをサポートし、プロンプトに個別に応答するのではなく、進化していくプロジェクトコンテキスト全体を踏まえて推論できるようになっています。Google はこれを、従来のデザインツールというよりも AI ネイティブなデザインワークフローとして説明しています。

有用な出力を得るためのプロンプトの書き方

プロンプトの質は、AI を活用した UI デザインにおいて最大の変数です。漠然としたプロンプトは汎用的なレイアウトしか生まれません。具体的なプロンプトは、実際に作業に使えるものを生み出します。

うまく機能するフレームワークが Zoom-Out-Zoom-In です：

1. ズームアウト — コンテキストを設定する：プロダクトの種類、ターゲットユーザー、プラットフォーム（iOS アプリ、Web ダッシュボードなど）
2. ズームイン — 画面を定義する：その目的、レイアウト階層、主要コンポーネント、ビジュアル上の制約

以下は SaaS ダッシュボードの圧縮された例です：

Context: Admin dashboard for a B2B project management SaaS. Users are operations managers reviewing team workload daily.

Screen goal: Show active project count, team capacity, and overdue tasks at a glance.

Layout: Sticky top nav, KPI cards row, workload chart (horizontal bar), overdue task list below.

Visual direction: Clean, data-dense, neutral palette, no decorative elements.

Constraints: Desktop-first, accessible text sizing, [WCAG 2.1](https://www.w3.org/TR/WCAG21/) contrast compliance.

このレベルの具体性があれば、AI は汎用テンプレートにデフォルトするのではなく、実際のレイアウトに関する意思決定を行うための十分なシグナルを得られます。

初回の出力が得られたら、フォローアッププロンプトで洗練していきます。Stitch は会話全体でコンテキストを維持するため、「KPI カードをよりコンパクトにして、暗い背景に切り替えて」 と指示すれば、その変更を一貫した形で適用してくれます。

知っておくべき主要機能

画像入力： スケッチ、ホワイトボードの写真、既存 UI のスクリーンショットをアップロードできます。Stitch は構造を分析し、それを基に新しいレイアウトを生成します。リデザイン作業や、粗いアイデアを素早く変換するのに役立ちます。

マルチスクリーンプロトタイピング： 画面同士を接続し、ユーザーフローをシミュレートできます。Stitch はナビゲーションパターンに基づいて論理的な次の画面を自動生成できるため、初期のステークホルダーレビューが大幅に高速化されます。

DESIGN.md： タイポグラフィ、カラートークン、スペーシング、コンポーネント規約などのデザインシステムのルールを格納する、エージェント可読な Markdown ファイルです。Google は DESIGN.md 仕様 を公開しており、互換性のある AI ツールやワークフロー間で共有できるようになっています。

コードエクスポート： Stitch は、初期実装作業を加速できる HTML とフロントエンドのスキャフォールディングをエクスポートします。出力を実際のスタック（React、Vue、SwiftUI など）に適応させる作業は依然として必要です。Stitch SDK も、エージェントワークフローや MCP スタイルの統合のために Stitch の機能を公開しています。

実際のワークフローでの Stitch の位置づけ

Stitch は 初期反復段階 で最もよく機能します：レイアウトの方向性を探り、情報階層を検証し、本格的なデザインシステムやコードベースに着手する前に、反応できる具体的なものを生成する段階です。

MVP を構築する個人開発者にとっては、最初の 2 ラウンドのワイヤーフレーミングを完全に置き換えることができます。プロダクトチームにとっては、デザイナーが Figma で洗練に取りかかる前に、構造について合意を形成する素早い手段となります。

出力はスタート地点であり、ゴールではありません。そのように扱えば、本当に有用なツールとなります。

始め方

stitch.withgoogle.com にアクセスし、構造化されたプロンプトを書いて、媒体（アプリまたは Web）を選びます。

そこからフォローアッププロンプトで反復し、画面をフローに接続して、ハンドオフや構築の準備ができたらエクスポートします。アイデアから動作するプロトタイプまでの距離が、これほど短くなったことはありません。

まとめ

Google Stitch は、デザインツールやデザインチームを置き換えようとしているわけではありません。アイデアと、実際に見て批評し改善できる最初のバージョンとの間にある、あの居心地の悪い隔たり、つまり始めることの摩擦を取り除こうとしているのです。よく構造化されたプロンプトを用いて初期段階の思考ツールとして使えば、コンセプトからクリック可能なプロトタイプまでの道のりが劇的に短縮されます。出力を素材として扱い、反復を通じて洗練し、構造が固まったらハンドオフしましょう。

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..