はじめに
みなさんこんにちは。インプルの岩崎です。
今回はデザインに関する新たなAIツールのご紹介です！
stitchとは
stitchは、Googleが提供するAI搭載のUIデザイン・プロトタイピングツールです。
現在は、Google Labs経由でベータ（実験的）提供されており、文章や画像からアプリ・ウェブの画面デザインやフロントエンドコードを自動生成することができます。
AIが苦手としてきたUI分野にも、グイグイAIの波はきますね・・・！
特に、Geminiは最近すごいです。設計からデザイン・コーディングまで、一連の開発工程を網羅しそうですね。
自然言語や画像入力にも対応し、制作されたデザインは、Figmaに書き出して手直ししたり、コードとして書き出すこともできるようです。もう人間のやることは少なくなってきましたね・・・。
とはいうものの、どのくらいの出来なのかはみてみないとわかりません。実際に使ってみましょう！
使ってみよう
早速使ってみましょう！
プロンプトの入力
home画面を開くと、このような画面が出てくると思います。
ここから直接プロンプトを入力するのもいいですが、右上のダッシュボードをクリックしてみましょう。
すると、このようなプロンプトを入力する画面が出てきますので、ここから入力してみましょう！
プロンプトは日本語でもいいですが、まだBATA版ということもあり、英語の方が精度が良さそうです。
そこで、chatGPTにいい感じのプロンプトを作ってもらいました（下記）。今回はこちらを使ってUI・ワイヤーフレームを作ってもらいましょう。
===== 日本語で考える =====
忙しい社会人向けのタスク管理アプリ。
シンプルで落ち着いたデザイン。
ホーム画面には今日のタスクと進捗を表示。
===== Stitch用 英語プロンプト =====
Mobile app home screen for a task management app for busy professionals,
with a clean minimalist design and calm neutral color palette.
Shows today's tasks and progress at a glance.UIの生成
このプロンプトを入力し送信すると、下記のような制作画面が表示されました。
2枚の画面の下地が表示され、UIデザインを生成しているようです。どのような画面が出来上がるのでしょうか？
2分ほどすると、UIデザインが完成しました！
ちゃんと指示通り、シンプルなタスク管理アプリが制作され、ホームには今日のタスクが表示されています。ユニークさは少ないものの、このレベルをAIが作ってくれるのは、なかなか素晴らしいですね。
制作されたUIは、2つの画面が並んでいますが、これはそれぞれ独立したもので、2つの異なるUIコンセプト（デザイン案）」を提案してくれた状態です。
左側は、Variant A：Professional Task Dashboard のパターン。成果を見せるダッシュボード型のUIで、以下のポイントがあるようです。
- 進捗を一目で見せる（円形プログレス）
- 今日のタスクに集中
- KPI・達成感重視
右側は、Variant B：Timeline Task Overview のパターン。時間軸で管理するプランナー型のUIで、以下のポイントがあるようです。
- 時間軸（横スクロール日付・タイムライン）
- 1日の流れ管理が得意
- スケジュール感重視
Stitch（の中のGemini）は、今回比較的オープンな要件のプロンプトを入力したため、壁打ちできるように複数案を提示してくれたようです。
この後の選択としては、どちらかのアイデアにコメントしたり、さらにいいアイデアを求めたり、チャット形式でブラッシュアップしていくことができます。
生成されたUIへコメント
今回生成されたUIは、Bの方が好みだったので、Bをブラッシュアップするようにコメントしてみましょう。
===== 日本語 =====
タイムラインタスク概要を好みます。
より明確な時間ブロックと微妙な進捗インジケーターでこのバージョンを改良してください。
次に、タスク詳細画面を確認したいです。
===== 英語 =====
I prefer the Timeline Task Overview.
Please refine this version with clearer time blocks and subtle progress indicators.
Next, I’d like to see a task detail screen.すると、さらに新たに画面をつくってくれました。
もともとのB案をさらにブラッシュアップし、本当に使えるUIを目指して改良してくれています。
その後、Stitchからは、このアプリの方向性や管理構造、操作体験の向上など、アプリに必要な情報を次から次へと引き出そうと質問してきました。これは、デザインどう作ればいいの？の人からすれば、素敵な質問で、それにさえ答えていけば、徐々に求めるデザインが作成されていく、というものです。
これは、作るものが未経験なものをAIに作ってもらうAIプロダクトとして、ベストな設計なのかもしれません。
最終的に、7つも画面を作ってくれました。ブラッシュアップしてだんだんといいものが仕上がっていく、いいツールですね！
Figmaとして出力
さて、生成能力を楽しんだ後は、連携能力にも注目してみましょう。
デザイナーやエンジニアの人からすると、AIに生成されぱなっしのものは、どこかむず痒さがあると思います。しかし、Stitchで生成されたものは、その問題を解決してくれます！
まずはFigmaとの連携ですが、これはものすごく簡単で、コピペするだけです笑。
本当に張り付いた笑！
しかし、PNGで張り付きました。聞いていた話だと、レイヤー構造で張り付くはずですが、そうではないようです。
GPTに調べてもらったところ、Standard／Rapidモードでデザインを生成している場合にCopy to Figmaと表示されるようで、モードによってはボタンが出なかったりバグで消えたりすることもあるようです。
他の方の記事（2025年の5月のですが・・・）をみると、できていたので、バージョンアップや時の流れでできなくなってしまった可能性はあります。
ですが、さらに調べてみると、プラグインなどもあるようなので、これらを使えばレイヤー構造を維持して移行できそうです。今回は特にやりませんが、今後、調査する余裕があればやってみようと思います。
htmlとして出力
こちらも簡単で、コピペするだけです！
コードを表示したいものをクリックし、Moreから、コードを表示、と押すと、htmlが出力されます。
すると、htmlが表示されるので、右上のコードをコピーでコピーできます！
PNGやhtmlとしてエクスポート
もちろん、ただのPNG画像としてダウンロードすることもできます。
同じくMoreからダウンロードをクリックします。すると、自動でzipファイルがダウンロードされるので、その中身にhtmlファイルとPNGファイルが入っています。
おわりに
いかがだったでしょうか？
さまざまなエクスポート方法を持ち、UIの生成能力も高いStitch、なかなかいいですね。
去年はエンジニア界隈の生成AIが盛り上がっていましたが、今年はデザイン界隈も盛り上がりを見せるのではないのでしょうか。Geminiのモデルが優秀であることが伝わってきます・・・。
ご覧いただき、ありがとうございました！