Stitchとは？
Stitchは、Gemini 2.5 Proを使い、テキストや画像からユーザーインターフェースのデザインとフロントエンドコードを生成するGoogle Labsの実験的なツールです。デザイナーや開発者が、アプリの初期アイデアを視覚的なインターフェースにし、調整を重ねて開発へ進めるのを支援します。
配色や想定するユーザー体験を含め、作りたいアプリを日常的な英語で説明したり、スケッチ、スクリーンショット、ワイヤーフレームをアップロードしたりして始められます。Stitchはその入力からインターフェースを生成し、対話形式のチャット、画像入力、テーマ選択での修正にも対応しています。複数のバリエーションを作成し、レイアウトやコンポーネント、スタイルを比較することもできます。
生成したインターフェースはFigmaに貼り付けて、さらに編集したり、共同作業に使ったりできます。また、デザインに基づくフロントエンドコードのエクスポートにも対応しています。アプリのバックエンド構築ではなく、インターフェースの生成と調整に重点を置いたツールです。
Stitchでできること
テキストからUIを生成
アプリの内容や配色、想定するユーザー体験を説明すると、視覚的なインターフェースを生成できます。
画像を基にデザイン
スケッチ、スクリーンショット、ワイヤーフレームをアップロードし、それに対応するデジタルインターフェースを生成できます。
対話による調整
対話形式のチャット、画像入力、テーマ選択を使って、生成したデザインを調整できます。
デザインのバリエーション
複数のインターフェース案を生成し、異なるレイアウトやコンポーネント、スタイルを検討できます。
Paste to Figma
生成したデザインをFigmaに移し、さらに調整したり共同で編集したりできます。
フロントエンドコードのエクスポート
生成したインターフェースに基づくフロントエンドコードをエクスポートし、開発を進められます。
Stitchが向いている人
- UIデザイナー
- インターフェースのアイデアを検討し、生成したデザインをFigmaに移してさらに編集できます。
- フロントエンド開発者
- アプリの説明や参考画像から、インターフェースのデザインとフロントエンドコードを生成できます。
よくある質問
デザインの生成にはどのような入力を使えますか？
日常的な英語による説明のほか、スケッチ、スクリーンショット、ワイヤーフレームなどの画像をアップロードして使えます。
Stitchで作成したデザインはFigmaで編集できますか？
はい。StitchにはFigmaへの貼り付け機能があり、デザインをさらに調整したり、共同作業に使ったりできます。
Stitchはコードも生成しますか？
はい。インターフェースのデザインに基づいて、フロントエンドコードを生成・エクスポートできます。
Stitchの代替ツール
代替ツールを比べる
ほかのAIグラフィックデザインツール
もっと見る
LOGO.com
AIロゴ作成
AIでロゴやブランド素材を作成・編集し、統一感のあるWebサイトも作れます。
LogoAI
AIロゴ作成
AIでロゴやブランドキット、ブランド用の画像・動画を作成します。
Playground
AIグラフィックデザイン
AIでロゴ、グッズ用のデザイン、ポスター、SNS画像を作成・編集できます。
SciDraw AI
AI画像生成
科学イラストやデータグラフを生成し、編集可能な形式で書き出せます。
SciFig
AIグラフィックデザイン
AIで科学イラスト、データチャート、フローチャートを作成できます。
Recraft
AI画像生成
再利用できるビジュアルスタイルで、画像・ベクター・モックアップを生成・編集できます。