2025年6月9日

GoogleのUI生成AI「Stitch」をおすすめプロンプトで試してみた

生成AI（Generative AI）

Popular tags

Content

こんにちは、はるです！

今日は、最近Googleから発表されたUI生成AIである"Stitch"を簡単に触ってみたのでそれについて執筆してみます。
こちらのAIを利用することで、専門的なスキルがなくてもウェブやモバイル向けが簡単に作れました。
また、テキスト指定の生成AIはプロンプトの書き方が肝心です。
今回はそういった観点から実際にプロンプトを分けて比較してみました。

Stitchとは

https://stitch.withgoogle.com/

上記URLから使用することが出来ます。
Googleアカウントが無くても使用することは可能ですが、ログインした方が性能が良いものを使えるため出来る方はしておきましょう。

StitchはUI生成ツールです。
特徴は下記の通りです。

・モバイル/Web双方のアプリ開発に対応
・Figmaへのペースト機能(個人的に最も嬉しい！)
・フロントエンドへのコード変換が可能

使い方

非常に簡単です。
上記セクションにて貼付したURLへアクセスし下記画像のようにプロンプトを打ち込むだけです。
ここでは、「可愛い感じにログイン画面作ってください。」と入力してみました。

そうすると、下記のように表示されます。他のAIと使用方法はあまり変わらないですね。

Google公式により提唱されたプロンプトの考え方

https://discuss.ai.google.dev/t/stitch-prompt-guide/83844

こちらに公式によるプロンプトガイドが記載されています。
軽く翻訳してまとめておきました。(私の考えや解釈も混ぜてるため直訳ではありません)

1.抽象的な指示から始めて徐々に具体化していく

抽象的指示：このアプリはマラソンランナー向けアプリです。
具体的指示：このアプリはマラソンランナーがコミュニティ参加、パートナー検索、トレーニングアドバイス、レース検索できるアプリです。デザインはミニマルで集中できるようなもの。

このどちらも含める必要がありそうです。
また、具体的指示を行う際は、”雰囲気”を伝えるべきとも書かれています。
“Instagramのように”・”可愛い雰囲気で”・”ミニマリスト風に”、こういったように表現してあげると良さそうですね。

2.画面毎に作り込む

Stitchは1つの画面に対して詳細な指示をこなすことが得意なようです。
そのため、1つのプロンプトを用いて複数の画面を同時に編集するようなことは控えた方が良さそうですね。

3.テーマの設定

アプリでは基本的に主となるカラーがあります。(メインカラー・プライマリーカラー・ブランドカラーなど呼び名は様々)
もちろん、アプリではその他にも様々なカラーの種類がありますが基本的には主となるカラーを軸に全て決められていきます。
そのため、軸となる色は必ず指定しましょう。

また、フォントなども指定しましょう。(必要に応じて)
ただし、モバイルアプリなどでは基本的にGoogle/Appleが定めた標準のフォントがあるのでそれを使用すべきです。

4.画面イメージの修正

特定の画面イメージの修正を行う際は詳細に指定しましょう。
例えば、画面Aと画面Bがあり、画面A内にボタンDとボタンEがあるとします。
この時に、”ボタンの背景色を明るくして”と指示するのは抽象的すぎます。
今回でいえば、”画面A内にあるボタンDの背景色を明るくして”と指定するのが良いと思われます。(可能ならカラーコードも)

5.他細かいアドバイス

・簡潔&一貫を持たせる(曖昧さは避ける)
・繰り返し実験をする(プロンプトを何回も重ねる)
・1回辺りのプロンプトで行う大きい変更は1度まで(いくつも行うと影響が分からなくなる)
・UI/UXキーワードを使用する(ナビゲーションバーなど)
・要素の指定をするときは具体的に(画面AのボタンBと表現するなど)

プロンプト試してみた

プロンプトの指定でどれくらい変わるのか、”私が公式プロンプトガイドを読む前に書いたもの“と”公式プロンプトガイドに沿って書き直したもの“で試してみました。
Stitchに実際に画面イメージを生成してもらいましょう！
今回は”スマホでインフルエンサーを検索するアプリ”を新規作成する想定で、”1.抽象的な指示から始めて徐々に具体化していく”と”3.テーマの設定”を織り込みました。
また、ベータ版ということもあり多言語対応は苦手な可能性もあるので安定感を取って念のため英語を用いてプロンプトしてみます。
(英作文力については現在頑張って英語勉強中なのでご容赦ください…。)

プロンプト：Google公式プロンプトガイドを読む前に記載

Now I’m trying to develop an mobile application that can allow users to search for influencers in a variety of genres.
It also may allow users to set tags on influencers, in other words it means this app would adopt folksonomy systems. Can you create this app’s UI with keeping below requirements?
1.It looks like Instagram’s UI
2.It adopts dark mode

※日本語訳※
現在、ユーザーがさまざまなジャンルのインフルエンサーを検索できるアプリを開発しています。
また、ユーザーはインフルエンサーに対してタグを設定することが可能で、いわゆる”フォークソノミーシステム”を採用しています。
下記の要件に沿ってアプリのUIを生成してください。
1. インスタグラムのUIに似ている
2. ダークモードを採用している

プロンプト：Google公式プロンプトガイドを読んだ後に記載したもの

This is a sleek and professional influencer discovery app for mobile.
All users can search for influencers across genres and create custom tags through folksonomy systems.
Dark mode interface with #00C2D6 turquoise accent color. Instagram-inspired feed layout and navigation patterns.
Modern, clean aesthetic focused on content discovery and social tagging.

※日本語訳※
これは非常に洗練されたアプリでインフルエンサーを検索するものです。
ユーザーはジャンル問わずインフルエンサーを検索することができて、またフォークソノミーシステムを通じてタグを作成することもできます。
本アプリは#00C2D6ターコイズをアクセントカラーとしたダークモードのインターフェースです。
インスタグラムのフィードレイアウトやナビゲーションパターンをインスパイアしたモダンで綺麗なデザインで、ユーザーがコンテンツの発見やタグ付加に集中できるようなデザインです。

これらのプロンプトの後、双方ともにPlease create a home screen that users can search for arbitrary influencers.(ユーザーが任意のインフルエンサーを検索できるホーム画面を作成してください)と入力しました。

結果

読む前：

読んだ後：

違いますね。
用途を考えると明らかに後者の画面が合ってます。
また、アクセントとなるカラーを設定したので統一性が現れており、アプリの世界観が強まってるといえます。
一度のプロンプトでここまで変わることを考えると、やはり作りたいデザインの雰囲気や世界観を自身で言語化することは必須ですね。

まとめ

私はデザインが苦手なので、Stitchの便利さに本当に歓喜しています。
意識して様々なアプリのデザインを観察するようにしていますが、いざ自分がデザインを考える側になると”Simple is the best”と考え始め質素なデザインばかり描いてしまいます…。
ですから、ベースをAIに考えてもらい、それをブラッシュアップしていくアプローチが取れるようになるのは非常に嬉しいです！
また、プロンプトを考えるためには自身でもデザインの雰囲気などをしっかり言語化する必要があるため曖昧さを無くす仕組みにもなっていますね！

ぜひ、皆さんも使ってみてください！