Googleの新AIツール「Stitch」
誰でも簡単にUIデザインが作れる！
目次
Googleは、日本時間5月21日未明に開催された年次イベント「Google I/O 2025」で、AIを活用した新しいWebデザインツール「Stitch」のベータ版公開を発表しました。
Stitchはテキストや画像から、ものの数分でUIデザインとフロントエンドコードを生成することができます。
この新しい取り組みは、デザイナーとエンジニアの間に存在していた「アイデアから実装」までの距離を、AIの力で一気に縮めようとしています。
今回はこの「Stitch」についてシェアしていこうと思います。
ぜひ最後までご覧ください。
Google Stitchとは？
Google Stitchは、Googleの研究開発部門であるGoogle Labsが提供する、AIを活用した新しいウェブツールです。
このツールはプロンプトに入力した言葉や画像から、UIデザインを自動で作成し、さらにそのデザインを実現するためのプログラムコード（フロントエンドコード）まで生成してくれます。
さらに、UI/UXデザインツール「Figma」へのエクスポートにも対応しているので、デザインの細部を調整したり、チームでの共同作業がしやすくなっています。
Stitchは、デザインと開発の間のギャップを埋め、作業を大幅に効率化することを目的としています。
通常、デザイナーが作ったデザインをエンジニアがコードに落とし込む作業には多くの時間と手間がかかります。
StitchはこのプロセスをAIの力で短縮することを目的として開発されました。
Stitchでできること
Stitchには2つのモードがあり、できることと使用するAIモデルが異なります。
「Standard Mode」：自然言語からUIを生成する
プロンプトに、作成したいアプリケーションの目的と機能、カラーパレットやデザインテーマ、ユーザー体験の詳細な要件、レイアウトの希望などを入力するだけで、それに合わせてカスタマイズされたUIを生成します。
AI モデルは Gemini 2.5 Flash を使用しています。
「Experimental Mode」：画像やワイヤーフレームからUIを生成する
ホワイトボードに描いたデザインスケッチ、UIのスクリーンショット、あるいはラフなワイヤーフレームがある場合、それをStitchにアップロードするだけでStitchが画像を処理し、対応するUIを生成してくれます。
制作現場において、ディレクターの描いたワイヤーフレームを即座にデザインに変換できると考えるとかなり強力な機能だと思います。
この核となる技術は、Googleが開発した高性能なAIモデル「Gemini 2.5 Pro」です。
このAIモデルの最大の特徴は、テキストと画像の両方を同時に理解できることです。
そのため、どちらか一方の情報だけでなく、両方を合わせて判断し、柔軟に反応することができます。
このGemini 2.5 Proのおかげで、Stitchはユーザーの指示をより深く理解し、細かなニュアンスまで捉えたUIを生成できるようになります。
実際に使ってみよう！
Stitchはまだベータ版ですが、以下のサイトから使うことができます。
この記事では「Standard Mode」を使用して、自然文からWebデザインを作成してみます。
Step1: プロンプトを入力
今回は試しに、Webアプリ用の家具ストアのページを作成してみます。
Webアプリ用のデザインを作るので、「Web」を選択し、プロンプトに
ノームコアなデザインの家具を有するgiraffeという家具サイト。シンプルで洗練された印象で、すっきりとしたUI。
と入力しました。
Step2:生成
「Generate designs」をクリックして数分待つと、あっという間にUIが完成しました。
かなり短いプロンプトでしたが、ここまで仕上げてくれました。
TOPだけではなく、そのほかのページまで提案をしてくれています。
Step3: デザインの調整
次にこのデザインを少し変更してみようと思います。
カラー、角丸、フォントなどを選択して調整可能です。
調整は、右上フォントのマークをクリックして行います。
現状ではあまり自由度が高くありません。選べるフォントも少なく、背景の色味もLightかDarkの2パターン。
今後のアップデートに期待しましょう。Googleなのでフォントはどんどん追加されるのではないでしょうか。
クリック一つで色々と変えられるので、気軽に作業できるのは嬉しいですね。
Illustratorで作業するよりずっと楽に感じます。
また、新しいプロンプトを入力して仕様を調整することも可能です。
今回は、プロンプトに
店までの地図と住所を追加して
と入力しました。
20秒ほどで、地図が追加されました！
他のページを作成したい場合も、同じようにプロンプトで指示を送るだけで、簡単に作成できます。
Step4: Figmaにペースト
Stitchで生成されたデザインは、Figmaにコピーするボタンをクリックしてペーストするだけで、Figmaではレイヤーやレイアウト情報を持った状態で再現されます！
AIでざっくりデザインを生成して、Figmaで細かいところを作っていくという作業フローが簡単に実現できます。これは快適ですね。
コード生成
次に、コードを確認してみましょう。
作成されたUIデザインをクリックすると、次のような画面が表示されるはずです。
この「Code」をクリックするとHTML/CSSコードが表示されます。
右上の「Copy code」からコピーすることも可能です。
まとめ
今回は、AI搭載のUIデザイン支援ツール「Stitch」を紹介しました。「Stitch」は、UIデザインを簡単かつ高速に作成できるため、特にプロトタイプ作成にぴったりのツールです。
デザイン出しとリテイクはAIで、細かい詰めは人間の手で。これが主流になりそうです。
この記事では、「Standard Mode」を使いましたが、「Experimental Mode」に切り替えると、手描きのスケッチや既存のスクリーンショットからもUIデザインとコードを作成できます。
ぜひ皆さんも試してみてください。
