Google Stitchの使い方｜デザインルールを渡して、AIでお店らしいWebデザイン案を作る

こんなこと、ありませんか。

• AIにWebサイトのデザインを頼むと、きれいだけど、どこかで見たような仕上がりになる
• 作り直すたびに、色や雰囲気が変わってしまう
• 気になるところを直したいけれど、デザインツールの操作に自信がない

この記事では、Google Stitch（グーグル ステッチ）の基本の使い方を押さえたうえで、これまで作った「ルール表」とアイコンを渡して、こもれびcafeのトップページのデザイン案を作ります。
気になるところを、言葉で伝えて直すところまで進めます。

• Google Stitchを使ってみよう
• Google Stitchのはじめ方
• お願いの文章だけで、デザイン案を作ってみる
• Stitchの画面と、基本の操作について
• ルール表とアイコンを渡して、1案作ってもらう
• イメージと違ったら、新しく作り直す
• 気になるところを、言葉で伝えて直してもらう
• 直らなかったところは、場所を指してもう一度
• 作ったデザインはどうするか？
• まとめ

Google Stitchを使ってみよう

Google Stitchは、Googleが試験的に公開している、Webサイトやアプリの画面のデザインを作るAIです。

画像元：Google Stitch

作りたいものを文章で伝えるだけで、デザイン案を作ってくれます。

※ 執筆時点では無料で使えます（Google Labsの試験版）。1か月に作れる回数には上限があります。
※ Claude Designでも、同じようにデザイン案を作れます。くわしくはClaude Designの記事で紹介しています。

Google Stitchのはじめ方

Google Stitchは、Googleアカウントがあれば誰でも使えます。

Google Stitchを開き、右上の「Try now」をクリック。
ログインを求められたら、Googleアカウントでログインしてください。

はじめて使う場合は、利用規約の同意が表示されます。
チェックボックスはニュース配信や調査の招待を受け取る設定なので、外してもかまいません。

「Continue」を押すと、Stitchのダッシュボード（ホーム画面）が開きます。

お願いの文章だけで、デザイン案を作ってみる

Stitchのダッシュボードは英語ですが、シンプルな構成なので迷いにくいと思います。
なお、お願いは日本語で書いて大丈夫です。作り始めると、日本語で返ってきます。

今回作ってほしいのはWebデザインなので、入力欄の下にあるスイッチを「Web」にしておいてください。

題材は、前回に続いて架空のカフェ「こもれびcafe」です。
まずは何も添付せずに、お店の情報だけを伝えて作ってもらいましょう。
入力欄に次の文章を貼り付けて、送信します。

個人経営のカフェ「こもれびcafe」のWebサイトの、トップページのデザインを作ってください。
ページの文章は日本語でお願いします。

【お店の情報】
・店名：こもれびcafe
・雰囲気：木のぬくもりのある内装、窓から緑が見える、BGMはジャズ
・お客さん：近くに住む・働く30〜40代の女性。一人でゆっくり過ごしたい人
・オーナーの希望：ナチュラルで温かみのある感じ。元気すぎる・にぎやかすぎるのは苦手

ページの構成（どんなセクションを置くか）は、あえて指定していません。細かく決めすぎるより、AIに任せたほうが、見栄えのよい案になりやすいからです。

しばらく待つと、デザイン案ができあがります。

できあがったデザイン案の全体は、こちらです。

お店の情報だけで作った案別タブで開く

※ 枠の中をスクロールすると、ページの下まで見られます。

お店の情報だけで、ナチュラルな雰囲気のデザインができました。
「木」「ナチュラル」というワードあたりから、AIはグリーンをアクセントにしたようです。グリーンがアクセントの配色は簡単スタイルガイドの作り方でAIに相談したときにも登場しましたから、お店の情報から想像するには「王道」や「無難」なカラーと言えるのかもしれません。

Stitchの画面と、基本の操作について

できあがったデザイン案は、画面の中央（キャンバス）に表示されます。
Stitchの画面で、よく使う操作は次の4つです。

完成直後は、全体像が見えるように小さく縮小されています。拡大してみましょう。

Panツールで画面を動かして、確認したい部分を見ていきます。

Selectツールで文字の部分をダブルクリックすると、文字を直接打ちかえられます。
誤字や、ちょっとした言い回しの直しなら、ここで直すのが早いです。

※ 部分を選ぶと出るメニュー（Edit Element）の「Edit With AI」を選ぶと、選んだ部分だけをAIに直してもらえます。

ダッシュボードに戻りたいときは、左上メニューの「Go to all projects」から戻れます。

ルール表とアイコンを渡して、1案作ってもらう

お店の情報だけで作った案は、きれいですが、ボタンは深い緑、見出しは明朝体、アイコンはよく見かける形です。ほかのカフェのサイトと並べると、見分けがつきにくい仕上がりです。
そこで、これまで作ったルール表とアイコンを渡して、もう一度作ってもらいます。

ルール表を作った記事のルール表（.md）と、アイコンを作った記事のアイコンを用意しておいてください。前回までの記事を読んでいない方は、下の素材を使えます。

ダッシュボードを開いて、ルール表のファイルとアイコンの画像を添付します。
フォルダごとドラッグアンドドロップで添付できます。

そのうえで、次の文章を送ってください。さきほどのお願いに、3行目の1文を足しただけです。

個人経営のカフェ「こもれびcafe」のWebサイトの、トップページのデザインを作ってください。
ページの文章は日本語でお願いします。
添付したデザインルールに沿って、色・フォント・言葉づかいをそろえてください。アイコンは、添付した画像を使ってください。

【お店の情報】
・店名：こもれびcafe
・雰囲気：木のぬくもりのある内装、窓から緑が見える、BGMはジャズ
・お客さん：近くに住む・働く30〜40代の女性。一人でゆっくり過ごしたい人
・オーナーの希望：ナチュラルで温かみのある感じ。元気すぎる・にぎやかすぎるのは苦手

少し待つと、さきほどと同様にデザインが作られます。

できあがった案を、さきほどの案と並べてみましょう。

ルール表なし別タブで開く

ルール表あり別タブで開く

※ 枠の中をスクロールすると、ページの下まで見られます。

ページの中ほどにある、メニューの部分を比べてみます。

ルール表なし

ルール表あり

ルール表を渡した案は、見出しが手書き風のフォント（Klee One）になり、ボタンにはテラコッタ色。メニューや営業時間・地図のところには、前回作ったアイコンが並んでいます。フォントの名前はお願いに書いていませんが、ルール表のとおりになりました。
ルール表とアイコンを作った手間が、そのまま「お店らしさ」になって返ってきます。

イメージと違ったら、新しく作り直す

同じお願いでも、作るたびに結果は変わります。
次の画像は、同じルール表で作った別の案です。どのセクションの文章もベージュの箱に入っていて、どこも同じ見え方になっています。

全部が箱に入った案別タブで開く

※ 枠の中をスクロールすると、ページの下まで見られます。

こういうときは、気になるところを1つずつ言い直すより、新しいプロジェクトで作り直したほうが早いこともあります。全体の印象が違うときは作り直し、細かいところが気になるときは、次のように直してもらいましょう。

気になるところを、言葉で伝えて直してもらう

デザイン案を拡大して見ていくと、気になるところが出てきます。
細かいところを挙げ出すとキリがないですが、例えば、今回の案では以下があります。

• ヘッダーのメニューが、英語（About、Menuなど）になっている
• 見出しが「綴るカフ／ェ」のように、言葉の途中で改行されている
• 写真が、ルール表の「彩度は控えめ」より、くっきりしている

チャット欄に、次の文章を送ります。

次のところを直してください。色・フォント・文章はそのままにしてください。

・ヘッダーのメニュー表記（About、Menu など）を日本語にしてください
・見出しやメニュー名が、「カフ／ェ」「珈／琲」のように、言葉の途中で改行されています。言葉の切れ目で改行されるようにしてください
・写真が少しくっきりしすぎています。ルールの「色味は少し暖かく、彩度は控えめ」に合うように、写真の上に紙のオフホワイト（#FAF7F2）をうすく重ねて、やわらかく見せてください
・カードと写真に、ごくうすい影をつけて、紙を重ねたように見せてください

しばらく待つと、直したデザイン案ができあがります。

ヘッダーのメニューは「お店のこと」「メニュー」などの日本語になりました。
メニューの部分を、直す前と比べてみましょう。

直す前

直したあと

「ハンドドリップ／珈琲」「焼きたて／クロワッサン」のように、言葉の切れ目で改行されています。メニューの書いてあるカードや、写真には、ごくうすい影も付きました。

写真には、コントラストと彩度（色のあざやかさ）を少しだけ下げる指定が入りました。
同じ写真で、指定のあり・なしを切りかえて見てみましょう。

直す前直したあと

※ 2秒ごとに、直す前と直したあとが切りかわります。

ぱっと見ではわからないくらいですが、切りかえると、少し落ち着いた色になっています。
今使われている画像は、すべて一括してAIが作ったものなのでトーンが合っています。ですが、実際にお客様からいただいた写真などでは、明るさなどにムラがあることが多いです。そういう際にも、このちょっとした設定が効いてきます。

直らなかったところは、場所を指してもう一度

1か所だけ、直らなかったところがあります。
「店主より」の見出しは、まだ「ささやかな日常を綴るカフ／ェ」で改行されたままです。

AIは「ささやかな日常を綴るカフェ」をひとかたまりにして、途中で切らないようにしてくれていました。ところが、このかたまりが見出しの入る枠の幅より長く、1行に収まりません。そのため、結局「カフ／ェ」で折り返されてしまいます。

こういうときは、直してほしい場所を指して、どう直したいかを具体的に伝えます。

「店主より」の見出しの「ささやかな日常を綴るカフェ」が1行に収まらず、まだ「カフ／ェ」で改行されています。
「ささやかな日常を」と「綴るカフェ」の間で改行してください。

ただ、今回のような場合なら、AIにお願いを入力して送信するよりも、手で直してしまったほうが早いかもしれません。誤字や1か所だけの改行なら、文字をダブルクリックして、自分で打ちかえるのも手です。

AIに修正をお願いするコツは、ルール表の言葉を使って伝えることです。
「なんか違う」「もっとおしゃれに」では、AIはどこをどう直せばいいか迷います。「彩度は控えめ」のように、ルール表に書いてある言葉で伝えると、直してほしい方向がはっきり伝わります。

細かいところまで、全部をお願いの文章で詰める必要はありません。
言葉で伝えれば、FigmaやIllustratorで自分で直すより、ずっと早く形になります。ある程度整ったら、次に進んでOKです。

作ったデザインはどうするか？

できあがったデザイン案は、手元に保存したり、ほかのツールに書き出したりできます。

手元に保存するときは、左上のメニューから「Download Project」を選びます。
デザイン案の画像と、HTMLのファイルなどが、zipファイルにまとめてダウンロードされます。

ほかのツールで続きを作りたいときは、右上の「Export」から書き出します。
Figma（フィグマ）を選べば、デザインツールの中で細かいところを手で仕上げられます。

まとめ

• Google Stitchは、作りたいものを文章で伝えるだけで、Webのデザイン案を作ってくれる（執筆時点では無料）
• お店の情報だけでも、ページの構成や文章まで考えてくれるので、何を載せるか決まっていない段階のたたき台になる
• ルール表とアイコンを添付すると、色・フォント・アイコンがそろい、「お店らしい」デザイン案になる
• 全体の印象が違うときは作り直し、細かいところは言葉で伝えて直してもらう
• 直してほしいことは、ルール表の言葉で伝える。1回で直らなければ、場所を指して具体的に。1か所だけなら自分で打ちかえるのも早い
• できたデザインは「Download Project」で保存、「Export」でFigmaなどに書き出せる