デザインAIツールStitchの使い方｜検索画面のプロトタイプ作成で実務への有効性を検証

デザインとコーディングの往復作業を削減し、プロトタイピングの速度を向上させたいというニーズは、多くの開発現場で共通しています。UIデザインからフロントエンドコードまでを自動で生成するツールとして「Stitch」があります。自然言語による指示やラフなスケッチ画像から、実用的なアプリやWebのUIを素早く形にできる点が特徴です。

本記事では、Stitchの概要から具体的な使い方、実際に検索画面のプロトタイプを作成する検証結果までを詳しく解説します。実践的な活用方法を知りたい方はぜひ参考にしてください。

✍️Stitchとは？概要と主要な機能

Stitchは、Googleが提供する試験的なAIツールで、テキストや画像からWeb・モバイルアプリのUIデザインとコードを生成できます。無料のGoogleアカウントがあれば、利用制限の範囲内で利用可能です。ここでは、Stitchの基本的な仕様と主要な機能について解説します。

自然言語と画像からUIデザインを自動生成

Stitchの最大の特徴は、多様な入力ソースから精度の高いUIを生成できる点です。自然言語のテキストで「カート画面を作成して」と指示するだけで、適切なレイアウトとコンポーネントが配置されたデザインが出力されます。テキストだけでなく画像入力にも対応しており、ホワイトボードに描いた手書きのワイヤーフレームや、既存アプリのスクリーンショットを読み込ませてUIの生成が可能です。

これにより、デザインツールに不慣れな担当者でも、頭の中にあるイメージを視覚的なデザインとして素早く具現化できます。その結果開発初期の要件定義やプロトタイピングの段階で、イメージの共有を円滑に進めるための強力なサポートツールとなります。

AIモデルの選択と多彩な生成モード

作業の目的やフェーズに応じて、複数のAIモデルと生成モードを選択できるのがStitchの強みです。以下のモードを用途に合わせて使い分けることができます。

• 3.0 Flash：処理速度を重視し、HTMLベースの高品質なデザインを素早く出力するモード
• Thinking with 3.1 Pro：生成速度よりも品質と推論（ロジック）を優先し、複雑な要件に対応するモード
• Redesign：既存のアプリやサイトの画像を添付し、新しいUIへと再設計するモード
• Ideate：解決したい課題を入力し、AIが具体的な解決策となるUIデザインを提案するモード

これらを適切に選択することで、状況に合わせた最適な出力結果を得られます。

充実したデザインシステムとカスタム作成

UIの一貫性を保つためのデザインシステム管理機能が備わっています。

あらかじめ用意された「Presets（プリセット）」には、Alexandria、Bauhaus、Glacier、Carbon、Neon Tokyoなど多彩なテーマが含まれており、ワンクリックでプロジェクト全体のデザインスタイルを変更できます。

さらに、独自のカスタムデザインシステムも構築可能です。自社のブランドカラーや指定のフォント、コンポーネントのルールを設定して登録しておくことで、生成するすべての画面に対してブランドガイドラインに沿った一貫性のあるデザインを適用できます。企業のデザイン基準を満たすUIを効率よく作成する際に役立ちます。

豊富なエクスポート連携とInstant Prototype

生成したデザインを次の開発工程へシームレスに引き継ぐための豊富な出力オプションが用意されています。代表的な出力形式や連携機能は以下の通りです。

• Figmaエクスポート：デザインデータをFigmaに直接貼り付け可能
• AI Studio連携：画像をGoogle AI Studioへ直接出力
• .zipダウンロード：プロジェクト全体のファイル一式をダウンロードしたり、特定のデザインをマークダウンでダウンロードしたり可能
• コードコピー：HTMLコードをクリップボードにコピー
• Instant Prototype：生成画面を即座に操作可能なプロトタイプとしてプレビュー&編集
• MCP対応：Model Context Protocolを利用した他ツールとの連携

これにより、デザインから実装への移行が円滑になります。

⭐Yoomは開発・デザイン関連の定型業務を自動化できます

Yoomは、様々なSaaSをノーコードで連携し、日々の定型業務を自動化するプラットフォームです。専門的な知識がなくても直感的な操作で連携フローを作成でき、複数のアプリをまたぐ作業を自動化します。

[Yoomとは]

例えば、デザインツールとプロジェクト管理ツールを連携し、デザインが完成したタイミングで自動的にタスクのステータスを更新するといった運用が可能です。また、チャットツールと連携して、開発リポジトリへのプッシュ通知をトリガーにチームへメッセージを送信する仕組みも構築できます。これにより、開発やデザインの現場で発生する手作業や確認漏れを防ぎ、コア業務に集中できる環境を整えられます。業務効率化を目指すチームにとって、Yoomは強力な味方になります。

🖊️Stitchの基本的な使い方と操作手順

Stitchは、直感的でわかりやすいインターフェースを採用しています。ここでは、実際にデザインを作成する際の基本的な手順と、知っておくと便利な編集機能について順を追って解説します。

1. Stitchの開始

Stitchを開くと、デザインを作成するための入力欄が表示されるので、以下の要素を自由に設定します。

• 入力欄：デザインの要件を入力
• ターゲットデバイス：「アプリ」または「ウェブ」を選択
• 参照データ：画像や既存サイトのURL、DESIGN.mdデータをアップロード
• プロンプト強化：入力した内容に対してAIが不足している情報を補う指示を提案
• 生成モード：3.0 FlashやRedesignなどを選択

これらを活用することで、プロンプト作成に慣れていないユーザーでも、意図に沿った高品質なUIデザインを引き出すことが容易になります。

2. キャンバス上での直感的な編集と修正

生成されたUIデザインに対して、キャンバス上で直接的な編集や修正指示を行えます。主な編集方法は以下の2つです。

• Direct Edit：生成されたデザイン上のテキストやUI要素を直接クリックして、文字の書き換えや自然言語によるAIでの変更を行えます。
• Mark：修正したい特定の領域をドラッグしてマーク（範囲選択）し、その部分に対してのみ「ボタンの色を明るくして」といった自然言語での変更を行えます。

これらのインタラクティブな編集機能により、デザインツールを使いこなすスキルがなくても、チャット感覚で細かな調整を繰り返しながら理想のUIに近づけられます。全体を作り直す手間が省け、微調整の効率が上がります。

【Direct Edit】

【Mark】

3. バリエーションの生成とデザイン適用

無限キャンバス画面では、複数のデザインを比較しやすくなっています。以下の2種類の機能でデザインを比較・調整できます。

• バリエーション作成：1つのプロンプトに対して、3パターンの異なるレイアウトを並べて出力
• デザインシステムの適用：メニューから好みのPresetsや自作のカスタムデザインシステムを適用

バリエーションの作成やカスタムデザインを変更することで、複数のデザインの良い部分を組み合わせたり、特定のバリエーションをベースにさらに修正を加えたりすることができます。また、キャンバス上のすべてのUI要素に対して、一括で指示が反映されるため、手作業でのスタイル修正を省けます。

🤔実際にStitchで検索画面のプロトタイプを作ってみた

Stitchの実力を測るため、実務でよく発生する「検索機能」のUI作成を想定した検証を行いました。ゼロの状態から複数のUIを一括作成し、その後、カスタムデザインの変更やDirect Edit機能による部分修正を行いました。

検証1：検索体験の複数状態を一括デザイン

検索画面のUIにおいて、入力前、入力中、結果なしといった異なる状態（ステート）を一度にデザインする検証を行いました。

【検証プロンプト】

ECサイトの検索バーを含む画面を設計してください。以下の5つの状態を横に並べて出力してください。
1. 入力前の状態
2. ユーザーが「ニット」と入力中の状態（サジェスト5件のドロップダウンを表示。全件検索のオプション付き）
3. 検索結果ありの状態
4. 検索結果なしの状態（もしかして：〇〇、カテゴリへの誘導を含む）
5. ローディング状態

プロンプトを送信すると、以下のデザインが生成されました。

検証結果

一括でデザインを作成してみて、以下のことがわかりました。

• 5つの状態の画面が指示の抜け漏れなく一度で生成された
• 複数のUI間でメニューや背景などのデザイン要素に統一感がある
• テキストの処理は英語が優先されやすい

生成された結果から、Stitchは高い精度でUIデザインを生成できることがわかりました。今回指示した5つの異なる状態（入力前、入力中、結果あり、結果なし、ローディング）の画面が、無限キャンバス上に一度で生成されたため、画面ごとの状態を比較・検討する際に非常に便利です。また、生成された各画面のUIは、メニューや背景などのデザイン要素が統一されており、画面間でデザインが崩れるといった不自然な状態がなく、実務でも十分に活用できるクオリティを保っています。

一方で、生成されるUI内のテキストに関しては、現状では英語が優先的に処理される傾向が見られました。商品名など一部のテキストでのみ日本語が反映されたり、画面内で日本語と英語が混在してしまったりするケースがあるため、日本語のUIを作成する際には、生成後にテキスト部分の修正を行う必要があります。

検証2：作成したデザインの編集

検証1で生成された5つの検索画面に対して、Stitchに組み込まれている編集機能を利用し、デザインの変化を検証しました。ここでは、プリセットの変更とボタンの変更をしてみました。

プリセットの変更

まずは、以下のようにプリセットから「Carbon」を選択し、変更するように指示しました。

【検証プロンプト】

プリセットの「Carbon」を適用してください。

プロンプトを送信すると、以下のように新たなデザインが生成されました。

ボタンの編集

次に、検索画面のボタンのデザインを変更してみます。「Direct Edit」をクリックし、ボタン要素を選択します。この直接編集機能を利用すると、デザイン内をスクロールすることも可能です。

今回はテキストではなく要素変更なので「AIで編集」をクリックします。

チャット欄に選択した要素情報が追加されるので、変更内容を入力して送信します。

【検証プロンプト】

ボタンの背景を黄色にして、文字を黒にしてください。

指示を送信すると、変更内容を反映したデザインが生成されました。

特定のデザインを指定して出力したり、プロジェクト全体を出力したりできます。今回は、編集したデザインのコードを表示してみました。

検証結果

生成されたデザインの編集をしてみて、以下のことがわかりました。

• プリセットの適用で一貫性を保ったまま一括でデザインを変更できる
• AIが指定した要素やテキストをピンポイントで変更してくれる
• 変更前のデザインと並べて生成されるため、修正前後の比較が容易に行える

編集を試した結果から、Stitchは作成後のデザイン調整も非常に効率的かつ直感的に行えることがわかりました。デザインシステムからプリセットを適用すると、生成済みのすべての画面に対して一括でデザインが反映され、レイアウト崩れを起こすことなく、一貫性を保ったまま全体のテイストを変更できます。

さらに、特定の箇所だけを修正したい場合には「Direct Edit（直接編集）」機能が便利です。変更したい要素を直接クリックして選択し、AIに指示を出すだけで、背景色と文字色の変更といった複数の要素が絡む修正も同時に行ってくれます。

また、修正指示を出した際には、元のデザインを上書きするのではなく、すぐ横に新しいデザインが並んで生成される点も大きなメリットです。修正前と修正後のデザインを視覚的に見比べながら作業を進められるため、より理想に近いUIデザインをスムーズに追求できます。

📉まとめ

Stitchは、自然言語や画像から高品質なUIデザインとコードを生成し、開発初期のプロトタイピングから実装へのスムーズな移行を支援するツールです。無限キャンバスでの自由なアイデア展開や、インタラクティブな部分修正機能を備え、デザインの専門知識がないユーザーでも意図した画面を形にできます。複数のUIステートを一括生成したり、既存のデザインシステムを適用して一貫性を保ったりする機能は、実務におけるデザイン工数の削減に直結します。さらに、FigmaやGoogle AI Studioへのエクスポート連携により、既存の開発ワークフローに組み込みやすい点も魅力です。課題解決のためのIdeate機能やリデザイン機能を活用し、プロジェクトの企画段階から実装まで幅広く業務を効率化できます。

💡Yoomでできること

Yoomは複数のSaaSツールをノーコードで繋ぎ、業務の自動化を実現するプラットフォームです。API連携の専門知識がなくても、パズル感覚で自動化フローを組み立てることができるので、デザインやコーディング業務だけでなく、顧客対応や請求書管理といった日々の反復作業を自動で処理できます。例えば、顧客管理システムに新しい情報が登録された際に、自動で請求書ツールにデータを連携してPDFを発行し、そのファイルを指定のチャットツールやクラウドストレージに送信するといった一連のプロセスを自動化できます。また、承認フローを組み込むことで、社内の決裁プロセスもスムーズに進行します。Yoomを導入することで、人的ミスの削減と作業時間の短縮を同時に達成でき、チームはよりクリエイティブな業務にリソースを集中できるようになります。

👉今すぐYoomに登録する 

【出典】

出典1：Stitch