Stitch：AIを使ってアプリのインターフェースとコードを素早く生成する

Stitchは、Google Labsが提供するAIを搭載したインターフェイスデザインツールで、ユーザーがアイデアをモバイルアプリやウェブアプリのインターフェイスとフロントエンドコードに素早く変換できるように設計されています。ユーザーは、テキストの説明を入力するか画像をアップロードするだけで、StitchはHTML/CSSコード付きのレスポンシブなインターフェースデザインを生成し、直接使用したり、Figmaにエクスポートしてさらに編集したりすることができる。このツールはGemini 2.5 Proモデルに基づいており、複数のデザインスタイルと迅速な反復をサポートしているため、開発者、デザイナー、スタートアップチームが迅速にプロトタイプを構築するのに適している。デザインから開発までのワークフローを合理化し、コンセプトから実現までの時間を短縮します。Stitchは現在パブリックベータ版で、無料で使用できますが、サインインにはGoogleアカウントが必要で、使用制限がある場合があります。

機能一覧

• インターフェース・デザインの作成テキストプロンプトや画像入力により、モバイルアプリやウェブアプリのUIレイアウトを素早く生成できます。
• コード輸出React、Flutterなどのフレームワークをサポートし、本番環境向けにクリーンなHTML/CSSコードを自動生成します。
• Figmaとの統合チームコラボレーションとさらなる最適化のために、設計を直接Figmaにエクスポートすることができます。
• レスポンシブデザイン複数のデバイス用のインターフェイスを作成し、異なる画面サイズでもうまく表示されるようにします。
• マルチモデルの選択Gemini 2.5 ProとGemini 2.5 Flashの2つのモデルから、性能のニーズに合わせてお選びいただけます。
• 反復最適化色、レイアウト、コンポーネントのスタイルなど、デザインの詳細を会話形式で調整できます。
• 画像処理アップロードされたスケッチや参照画像に基づいて、レイアウトやスタイルを認識するためのプロフェッショナルなインターフェースを生成することができます。
• アクセシビリティ・サポートWCAG 2.2に準拠し、アクセシビリティ向上のための自動ARIAタグを含むコードを生成します。

ヘルプの使用

アクセス＆ログイン

Stitchを利用するには、https://stitch.withgoogle.com、Googleアカウントでログインする必要がある。このサイトは、追加インストールなしでブラウザ上で直接実行され、最高の互換性のためにChromeまたはEdgeが推奨されています。ログインすると、入力ボックスや画像をアップロードするオプションなど、すっきりとしたインターフェイスが表示される。

最初のインターフェイスの作成

1. 入力プロンプトホームページのテキストボックスにデザイン要件を入力してください。例えば、「ミニマルなスタイル、白い背景、青いボタンの書店用モバイルアプリのインターフェイスをデザインしてください」と入力します。プロンプトは、ハイレベル（例：「ランニングアプリ」）でも具体的（例：「ナビゲーションバー、検索ボタン、商品リストを備えたeコマースインターフェイス」）でもかまいません。簡単な説明から始めて、徐々に下げていくことをお勧めします。[](https://discuss.ai.google.dev/t/stitch-prompt-guide/83844)
2. AIモデルの選択Gemini 2.5 Pro (複雑な要件向け) または Gemini 2.5 Flash (高速) のどちらかをお選びいただけます。初心者の方は、より正確な結果を得るためにProモデルを使用することをお勧めします。
3. デザインの生成デザインを生成 "ボタンをクリックすると、Stitchは数秒のうちにインターフェースのドラフトを1つ以上生成します。結果はページの右側にプレビュー画像とインタラクション・コンポーネントと共に表示されます。

編集と最適化

インターフェイスを生成した後、ユーザーは以下の方法で調整することができる：

• ダイアログ・エディターEdit "ボタンをクリックし、テキストプロンプトエリアに移動し、"ボタンの色を紫に変更する "や "サイドバーを追加する "などの具体的な変更を入力します。Stitchはプロンプトに従ってインターフェイスを再生成します。
• 手動調整: プレビュー・インターフェースで特定のコンポーネント（例：ボタン、ナビゲーション・バー）を選択し、サイドパネルでスタイル、間隔、フォントを調整することができます。
• マルチスクリーン・デザイン複数のページ（例：アプリのトップページと詳細ページ）を生成する必要がある場合は、編集モードで「次の論理ページを生成する」と明示的に記述すると、Stitchがコンテキストに基づいてデザインスタイルを継続します。

デザインとコードのエクスポート

1. FigmaへのエクスポートFigmaに貼り付け "ボタンをクリックすると、デザインは自動的にFigmaと互換性のあるレイヤー構造に生成され、デザイン・チームとのコラボレーションに最適です。注意: 現在、Figmaエクスポートは、画像入力に基づくデザインには対応していません。
2. 輸出コードExport Code」オプションを選択すると、Stitchは必要に応じてHTML/CSSコード、またはReact、Flutter、その他のフレームワークコードを生成します。コードにはレスポンシブ・レイアウトとARIAタグが含まれており、開発で直接使用するのに適しています。ユーザーはコードをIDE（VS Codeなど）にコピーして、さらに編集することができます。
3. アイテムの保存ログイン状態では、デザインは自動的にGoogleアカウントに保存されます。

注目の機能操作

• 画像入力アップロード]ボタンをクリックし、スケッチまたは参照画像（手書きのワイヤーフレームなど）を選択します。Stitchは画像内のレイアウトと要素を分析し、近いUIデザインを生成します。画像が明確で、明確に定義されたUI要素が含まれていることを推奨します。
• レスポンシブ・プレビューデザインが生成されたら、「プレビュー」モードに切り替えて、インターフェイスが携帯電話、タブレット、デスクトップ・デバイスにどのようにフィットするかを確認します。ユーザーは解像度を調整して、さまざまな画面サイズをテストできます。
• アクセシビリティの最適化: Stitchが生成するコードにはARIAタグが自動的に含まれ、インターフェイスがWCAG 2.2に準拠していることを保証します。ユーザーは、コードをエクスポートした後、Lighthouseツールを使用してアクセシビリティ・スコア（平均98.61 TP3T）を確認できます。

ヒント

• 明示的記述具体的なスタイル（例：「モダン、ダークテーマ」）や機能（例：「検索バーとカードレイアウトを含める」）をプロンプトに含めると、生成の質が向上します。
• 段階的反復複雑な要件を一度に入力するのを避けるため、簡単なヒントから始め、徐々に詳細を追加していきます。
• 参考例ブラウズ https://mobbin.com或Dribbble获取灵感、スティッチと連動してよりカスタマイズされたインターフェイスを生成します。

ほら

• ブラウザの互換性ブラウザによっては画像の読み込みに失敗する場合があります。
• 使用上の制限Google Labsの実験的ツールであるStitchは、1日に生成できる回数に制限がある場合があります。
• 設計上の制限生成された結果は一般的なスタイルに偏る可能性があるため、ブランドの一貫性を確保するために詳細なプロンプトを提供する必要があります。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   スタートアップ企業や独立系開発者は、Stitchを使って最小実行可能製品（MVP）インターフェイスを素早く生成し、設計時間を節約することができます。例えば、「フィットネスアプリのホームページを、クラス一覧と購読ボタン付きでデザインする」と入力すると、数分で使用可能なUIとコードが得られます。
2. チームワーク
   デザイン・チームは、Stitchで生成された初期デザインをFigmaにエクスポートし、メンバーとの共同最適化を行うことができます。
3. UIデザインを学ぶ
   初心者デザイナーは、簡単なプロンプトを入力し、Stitchが生成するプロフェッショナルなインターフェイスを観察することで、レイアウト、カラースキーム、コンポーネントデザインについて学ぶことができます。
4. クロスプラットフォーム開発
   開発者はStitchを使用して、ReactやFlutterプロジェクトで直接使用できるレスポンシブコードを生成し、手作業によるコーディング時間を短縮できる。

品質保証

1. スティッチは無料ですか？
   そう、Stitchは現在Google Labsの実験的ツールとして無料だが、サインインにはGoogleアカウントが必要で、使用量に制限があるかもしれない。
2. 複数ページのアプリケーションを生成することは可能ですか？
   できます。ユーザーは、プロンプトで複数のページを生成するよう明示的に要求するか、編集モードで論理的なページをページごとに記述する必要がありますが、Stitchはデザインの一貫性を維持します。
3. 生成されたコードの品質は？
   コードはクリーンでWCAG 2.2に準拠しており、ReactやFlutterなどのフレームワークをサポートし、本番環境に適していますが、複雑なプロジェクトでは手作業による最適化が必要になる場合があります。
4. 対応ブラウザは？
   ChromeまたはEdgeを推奨します。ブラウザによっては画像の読み込みに問題が発生する場合があります。
5. 発電の質はどうすれば向上するのか？
   スタイル、色、機能を説明した具体的なプロンプトを使用する。一度だけの複雑な入力よりも、徐々に反復する方が効果的です。