自然言語でプロ並みのUIを作成｜Stitchの使い方

前回の記事では、Stitchがどんなツールかを紹介しました。

今回は、「マカロン専門店」のWebページを作りながら、使い方を紹介します。

※ Stitchはベータ版のため、本記事の画面や機能は今後変わることがあります。

1. Stitchにアクセスする

まず、ブラウザでstitch.withgoogle.comにアクセスし、右上の「Try now」をクリックしてGoogleアカウントでログインします。
クレジットカードの登録やメール認証などはなく、ログインすればすぐに使い始められます。

2. プロンプトを入力する

アプリ」か「ウェブ」を選択します。ここではWebページを作るので「ウェブ」を選択します。

画面の入力欄に、作りたい画面を入力します。文章だけでなく、手書きのスケッチや、参考にしたいサイトのスクリーンショットを渡すことも可能です。

次のプロンプトを試してみましょう。

東京・代官山にある上品なマカロン専門店「Macaron Shop」のトップページをデザインしてください。
- くすみピンクとアイボリーを基調に、ゴールドをアクセントにした、エレガントで洗練されたデザイン
- ヒーローセクションに美しいマカロンのビジュアルと「ひとくちで、しあわせ色」というキャッチコピー
- ナビゲーション：ホーム、商品紹介、店舗案内、アクセス
- 人気のマカロン（ピスタチオ、ローズ、フランボワーズ、ダークショコラ、レモン、塩キャラメル）をカードで並べた商品紹介セクション
- こだわりのセクション（厳選素材、ていねいな手仕事、上品なパッケージ）
- 高級感がありつつ親しみやすい雰囲気
- テキストはすべて日本語で
- レスポンシブ対応（PC・スマホ）

日本語に対応していますが、もしイマイチだった場合は英語のプロンプトで試してみてください。

Design a homepage for an elegant macaron boutique "Macaron Shop" in Daikanyama, Tokyo.
- Sophisticated, refined style based on dusty pink and ivory, with gold accents
- A hero section with a beautiful macaron visual and the tagline "A bite of happy colors"
- Navigation: Home, Products, Store, Access
- A product section showing popular macarons (pistachio, rose, raspberry, dark chocolate, lemon, salted caramel) as cards
- A "commitment" section (selected ingredients, careful craftsmanship, elegant packaging)
- A luxurious yet approachable atmosphere
- Responsive (desktop and mobile)

3. デザインを確認・選ぶ

プロンプトを送ると、デザインの生成が始まります。

▲しばらくするとデザインが生成される

4. 修正する

気になるところは、プロンプトを入力して直していきます。

英語で作った場合は、ここで「すべてのテキストを日本語にして」と伝えると、画面の文字が日本語に変わります。

編集したいデザインをクリックし、上部の「Modify」をクリックしてみてください。
「編集」と「アノテーション」があります。

▲「Modify」をクリックすると「編集」と「アノテーション」がある

「編集」は、文字を修正したり、画像を削除や生成ができます。

▲「編集」は「テキストを編集」や「AIで編集」で修正する

「アノテーション」は、右側のボタンを使って、直したい部分を囲み、コメントを入力して指示します。

▲「アノテーション」は印を書き込んで修正する

すると、その部分だけが変わります。全体を作り直すよりも、特定の箇所だけを直す方が結果が安定しやすく、クレジットの消費も抑えられます。

無料プランはクレジットに上限があるので、細かい修正はこの方法がおすすめです。

修正のときに知っておくと役立つコツが2つあります。

1回に1つだけ直す
「色も変えて、ボタンも大きくして、文言も…」と複数をまとめて頼むと、Stitchは前のデザインを覚えていないため、全体を作り直して崩してしまうことがあります。変更は1つずつ伝えるのがコツです。
うまくいったらスクショを保存
予期せずリセットされることがあるので、「この状態がいい」と思ったらスクリーンショットを撮っておくと安心です。

なお、デザインに使われている画像はサンプルです。実際のサイトにするときは、自分で撮った写真や、商用利用が許可された画像に差し替えてください。

5. 書き出す

デザインが仕上がったら、右上の「エクスポート」から書き出します。書き出し先はいくつか用意されていて、主なものは次のとおりです。

AI Studio：Googleの「AI Studio」で開いて編集ができます。Googleのツールだけで完結させたい場合に便利です。ただし、AI Studio（無料版）は入力した内容がGoogle AIの学習に使われるため、機密情報やまだ未公開のアイデアは入れないよう注意しましょう。
Figma：デザインツールの定番「Figma」に取り込んで、レイアウトや細部をさらに調整できます。デザインをじっくり作り込みたい場合はこちらです。
コード（.zip ／クリップボードにコピー）：HTML／Tailwind CSSのコードとして書き出せます。自分のプロジェクトで使ったり、v0やCursorに渡して動くサイトに仕上げたりできます。

このほか、Netlify・Bolt・Lovableといった他サービスへの書き出しや、コーディングツールと連携する「MCP」なども選べます。

▲「エクスポート」から書き出せる

Googleのツールで仕上げるなら「AI Studio」、デザインを詰めるなら「Figma」、自分で実装するなら「コード」が向いています。

6. このあとの作業は？

Stitchが作ってくれるのは、あくまで「画面のデザイン」までです。実際にネット上に公開したり、動くサイトにしたりするには、もう一手間かかります。具体的には、次のような方法があります。

v0で動くサイトに仕上げる
Stitchで作ったデザイン（画面のスクリーンショットや、書き出したコード）をv0に渡して、動くサイトとして作り直します。v0なら、そのまま公開（Vercelへのデプロイ）まで一気にできます。v0の使い方は、別記事の【Part2】v0の使い方で紹介しています。
AI Studioで仕上げる
書き出し先で「AI Studio」を選ぶと、GoogleのAI Studioでそのまま編集や開発を続けられます。Googleのツールだけで、デザインからアプリ作りまで完結させたい場合に向いています。
コードをそのまま使う
Stitchが書き出したHTML／Tailwindのコードを、自分のサーバーに置いたり、Cursorなどで仕上げてから公開したりします。コードを直接さわれる人向けです。コードを見たい場合は、「More」→「コードを表示」をクリックします。
Figmaで整えてから実装する
デザインをFigmaで作り込んでから開発に渡す方法です。チームでデザインを作る場合に向いています。

▲「More」→「コードを表示」をクリックするとコードが表示される。

Stitchを使えば、言葉や画像を伝えるだけでプロ並みのデザインを作れます。

実際にアクセスして、プロンプトを入力して書き出すという流れさえつかめば、頭の中のイメージを形にできると思います。

現在はベータ版ですが、今後のアップデートが楽しみなツールなので、まずは触ってみてはいかがでしょうか。