UI/UXデザイン革命：Google Stitchの紹介と使用方法

Google Stitch とは？

Google Stitch は、Google Labs が開発した、人工知能（AI）を用いたユーザーインターフェース（UI）デザインプラットフォームです。Google I/O 2025 で発表されました。Galileo AI の技術と、Gemini（Flash および Pro）などの大規模言語モデルの能力を組み合わせて構築されており、テキストによる説明、スケッチ画像、または音声による指示を、わずか数分で完全な UI デザインとフロントエンドコードに変換することを可能にします。これは、アイデア出しとプログラミングの間のギャップを埋める「架け橋」であり、「白紙のキャンバス問題」を克服し、デザインの速度を数倍に加速するのに役立ちます。

具体例を用いた Google Stitch の6ステップガイド

ステップ1：アクセスと初期設定

ウェブサイト https://stitch.withgoogle.com/ にアクセスし、Google アカウントでログインします（ソフトウェアのインストールは不要です）。
メインインターフェースには無限のキャンバススペースが表示されます。コマンド入力ボックスの上部で、デザイン形式として App または Web を選択します。
次に、右下隅にある AI モデルを選択します。選択肢は以下の通りです。
- 3 Flash（デフォルト）： 超高速でデザインを生成します。日常的な基本的なニーズに適しています。
- Thinking with Pro： 複雑なインターフェース向けに、品質と論理的思考能力を優先します（Gemini 2.5 Pro または 3.1 Pro を使用）。
- Redesign： Nano Banana Pro モデルを使用します。既存の画像に基づいてデザインをやり直すことに特化しています。
- Ideate： アイデアの方向性が明確でない場合に、解決策の方向性を提案します。

ステップ2：インターフェースを作成するためのプロンプトの記述 チャットボックスに、対象、スタイル、主要な構成要素を含む、希望するインターフェースの詳細な説明を入力します。

例：「プロジェクト管理ツール『Trackflow』のための、モダンな SaaS ランディングページをデザインしてください。ヒーローセクションには濃いネイビーブルー、コンテンツセクションの背景は白、コールトゥアクションボタンはコーラルオレンジを使用してください。レイアウトには以下を含めてください：大きな見出しがあるヒーローセクション、アイコン付きの3列の機能グリッド、3つの料金プランがある価格表、お客様の声セクション、そしてフッター。」
約10～15秒後には、AI があなたの説明に基づいた完全なウェブサイトインターフェースを返します。

ステップ3：AI によるデザインの微調整（反復） Stitch では、最初からやり直す必要はありません。AI とさらに会話を続けて、細部を微調整することができます。

例：お客様の声セクションを選択し、次のプロンプトを入力します：「お客様の声エリアのデザインを、横向きのカードに変更してください。左側にアバター画像、右側に引用文、上部に5つ星の評価を追加してください。このエリアの背景は薄いグレーにしてください。」
Stitch は自動的に新しいバリエーションを生成し、元のデザインと並べて比較できるようにします。テキストをダブルクリックして直接編集することもできます。

ステップ4：画像（Image-to-UI）または音声（Voice Canvas）からのデザイン

画像から： 手書きのワイヤーフレームや、印象的なウェブサイトのスクリーンショットがある場合は、プロンプトボックス内の画像アップロードアイコンをクリックします。例：画像をアップロードし、「このランディングページを Trackflow ツール用にデザインし直してください…構造はそのままに、ブランドカラーのネイビーとコーラルオレンジを使用してください。」と入力します。AI がスケッチをデジタル化し、フルカラーのハイファイデザインに変換します。
音声を使用： キャンバス上のマイクアイコンを押して、直接音声で指示を出します（Voice Canvas）。例： 「見出しを大きくして、背景エフェクトを追加し、CTAボタンの横にプロダクトモックアップを配置してください。」 話している間にも、デザインはリアルタイムで変化します。 ステップ5：各画面を連携し、インタラクティブなプロトタイプへ

AIに依頼して、登録ページやダッシュボードなど、他の画面をさらにデザインしてもらうことも可能です。

必要な画面が揃いましたら、画面上のリンクツール（Stitchボタン）をご利用ください。例えば、ホームページの「Get Started」ボタンをログインページに接続すると、Stitchが自動的に論理フローを理解します。
Playボタンを押せば、実際のユーザーがアプリケーションを使用しているかのように、プロトタイプをクリックして体験することができます。

ステップ6：プロジェクトファイルをFigmaまたはコードに書き出す（Export）

デザインにご満足いただけましたら、以下の手順で書き出しを行います。

Figmaへの書き出し： ...Moreアイコンから Copy to Figma を選択します。Figmaソフトウェアを開いて貼り付けると、デザインは整ったAuto Layout構造で表示され、レイヤーやテキストは引き続き自由に編集可能です。
コードへの書き出し： コードアイコン（< >）をクリックすると、Stitchが整然としたHTML/CSSおよびTailwind CSSのソースコードを提供します。また、デザインをGoogle AI StudioやAntigravityに直接書き出し、アプリケーションとしてさらに発展させることも可能です。

まとめ

Google Stitchは、プロのUI/UXデザイナーやプログラマーを完全に置き換えるために生まれたわけではありません。しかしながら、迅速な試作品を必要とするファウンダー、コードと組み合わせるためのインターフェースを必要とする開発者、そしてアイデア創出のプロセスを高速で繰り返したいデザイナーなど、あらゆる立場の方にとって、非常に優れたデザインアシスタントとなります。自然言語を使用することで、今や誰もが、頭の中にあるアイデアを瞬時にして実際の製品として具現化できるのです。

Google Stitchを用いた、スケッチから完全なソースコードに至るまでのインターフェースデザインの全工程を、より視覚的かつ具体的にご理解いただき、直接的な操作手順をご覧いただくために、以下の添付プレゼンテーション資料もあわせてご参照ください。

📊Google_Stitch_2026.pptx

コメント(1)