UIデザインを生成AIで自動生成！~Googleの「Stitch」を試す~
最近、フロントエンドの開発を勉強しています。
Next.jsなどのコード部分は、チュートリアルを通じて簡単なものは書けるようになってきましたが、
私には絵心がないため、ウェブ画面のUIデザインをゼロから作成することは苦手です。
一方、Google I/O 2025から、Stitchというツールが紹介されました。
Stitchを使用することで、ツールのインストール不要で、
「プロンプト」や「画像入力」から自動でUI画面デザインを生成してくれるようなので、
実際に触って試してみたいと思います。
今回は「ファイルを入力するとPDFを出力するシステムのUIデザイン」の生成を対象とします。
以下は実際に作成されたデザインの一例になります。
以降は、Stitchの使い方について説明します。
Stitchの使い方手順
ここでは「ファイルを入力するとPDFを出力するシステムのUIデザイン」
をStitchで生成する手順を説明します。
1. Stitchのサイトに移動する
以下のStitchのサイトに移動する
以下のような画面が表示されるので、「Mobile」向けか「Web」向けを選択する。
今回はMobile向けを選択。
2. プロンプトによるUIデザイン生成
プロンプトを入力し、「Generate designs」を押す。
日本語入力できるか不明でしたが、以下のように返答が返ってきたため、プロンプトは理解されてそう。
UIデザインがOKかの確認がくるので、OKの旨をプロンプトで投げる。
3秒ほど待つと、以下のようなデザインが生成される。
良さそうな見た目ですね。
少なくとも私のスキルではこのレベルのデザインを数秒で作成するのは難しいです。
3. デザインの調整（プロンプトを使って、全画面のデザインを修正する）
プロンプトを入力して、画面内のテキストを日本語に変更してみます。
テキストのスタイルには多少の乱れがありますが、
日本語としては十分に理解可能で、プロトタイプ用途としては問題なさそうです。
画面を指定せずにプロンプトを入力すると、
すべての画面（PDF Converter, PDF Options, PDF Converter, PDF Conversion Complete)に
プロンプトの内容が適用されるようです。
4. デザインの調整（プロンプトを使って、個々の画面を調整する）
個別の画面にプロンプトを適用するには、
調整したい画面の上部の「Edit」を選択した状態でプロンプトを入力します。
↓
こんな感じになりました。1枚の画面を投げると、1枚の画面が返ってくるようです。
なお、「2枚の画面を同時にEditする」といった使い方はできなさそうです。
1つの画面 or 画面を選択せずに、すべての画面にプロンプトを適用するという使い方になります。
5. 過去の状態に戻って作業する
過去に生成されたデザインは、左側のチャット履歴部分に残っています。
過去に生成されたデザインは緑枠のようにグレーアウトされています。
現在操作しているデザインは、赤枠部分のように発光しています。
グレーアウトをクリックすることで、グレーアウト部分が操作対象となり、発光し、
プロンプトを投げられるようになります。
6. フォントや見た目を設定する
画面右上のEdit themeから、見た目やフォントを変えられます。
- Lightモード/Darkモードを変更
- カラーを変更
- ボタンの丸さを変更
- フォントを変更
ができるようです。
すべては試してませんが、
例えばカラーとボタンの丸さを変更して「Apply theme」を実行すると、
以下のように緑色が主体となったデザインが提案されます。
7. 出力する
HTML形式と、Figma形式で出力できるようです。
画面をクリックし、「Code」を押すとHTMLが表示されます。
適当なHTMLファイルを作成して動かしたところ、同様の画面が表示されました。
「Figma」を押すと、クリップボードにコピーされて、ctrl+vで貼り付けできるようになるようです（windowsの場合）
Figmaに貼るとこんな感じで編集できました。
備考
StitchにはStandard ModeとExperimental Modeがあります。
Standard Modeはプロンプト入力のみ、Experimental Modeは画面入力からデザインを作成してくれるようです。
生成AIモデルは、
Standard Modeは「Gemini 2.5 Flash」
Experimental Modeは「Gemini Pro」
が使用しているようです。
今回はStandard Modeを使用しましたが、
プロトタイプ用であれば十分な性能を持っているように感じました。
所感
Stitchを使うと、プロンプトだけでUIデザインを即座に出してくれるため、
デザインが苦手な人にとってはかなり有用なツールだと思います。
特によかったのは、私のような初心者が迷いがちなボタンやテキストの見栄えの良いサイズ・配置を、
整えた状態で提示してくれるところです。
欲を言えば、HTML出力だけでなく、Next.jsで使える形で出力してくれると良いなと感じました。
今後はStitchを使いつつ、フロントエンド開発にチャレンジしていきたいと思います！
Discussion