AI（Google Stitch）で統一感あるデザイン案を複数生成｜デザインルールを守ったバリエーションの作り方

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

• デザインのルールは決まったけれど、どんなレイアウトにすればよいか思いつかない
• 何パターンか作って比べたいけれど、1つずつ頼むのは大変
• 直してもらったところが、次の案では元に戻ってしまう

この記事では、Google Stitch（グーグル ステッチ）のバリエーション機能を使って、AIにWebデザインの複数案を作ってもらいます。
前回作ったトップページのデザイン案をもとに、色やフォントはそのままで、統一感のある案をレイアウト違いで並べて比べます。直したところが元に戻ってしまったときに、「ルール表」に書き足して守る方法も紹介します。

• デザインが思いつかないときは、バリエーションで複数案を作る
• バリエーションの作り方
• 3つの案を並べて比べる
• 直したところが戻っていたら、ルール表に書き足す
• 同じ設定でも、直したところが戻ることがある
• ルール表に書くもの、その場で済むもの
• AIに、ルール表への書き足しを手伝ってもらう
• 書き足したルール表で、作り直す
• 気になるところは、チャットで直す
• まとめ

デザインが思いつかないときは、バリエーションで複数案を作る

ルール表で色やフォントが決まっても、「ページをどんな形に組み立てるか」は、また別の悩みです。
写真を大きく見せるか、文章と写真を左右に並べるか。頭の中だけで考えていると、なかなか決まりません。

そんなときは、Google Stitchのバリエーション（Variations）を使ってみましょう。今あるデザイン案をもとに、少しずつ違う案を、まとめて作ってくれます。
並べて比べると、「この形がいい」「ここは、さっきの案のほうがいい」と、選びながら考えられます。本番のデザインに入る前の、ネタ出しにも使えます。

※ この記事では、Google Stitchの使い方の記事で作り、気になるところを直したデザイン案を使います。Stitchのはじめ方や基本の操作も、そちらで紹介しています。

バリエーションの作り方

Stitchで、前回のプロジェクトを開きます。
直したデザイン案をクリックして選択すると、画面上部に横長のメニューが表示されます。
その中の「Generate」から「Variations」を選びます。

設定の画面が開きます。項目がいくつかありますが、今回は次のように設定してください。

「Generate variations」を押すと、しばらくして3つの案ができあがります。

3つの案を並べて比べる

できあがった3つの案を並べてみましょう。

案1別タブで開く

案2別タブで開く

案3別タブで開く

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

どの案も、色・フォント・アイコンはそろったまま、レイアウトだけが違います。
案1はキャッチコピーと写真を左右に並べた形、案2は見出しを左にそろえた形、案3は全体を中央にそろえた1列の形です。メニューの並べ方も、4列・2列・1列と、案ごとに違います。デザイン案を何パターンか作るのは、時間もかかりますし、途中でネタ切れになりがちですが、バリエーション機能を使うとすぐにできてよいですね。

比べるときは、「どれがきれいか」だけでなく、ルール表のコンセプトに合っているかで見てみてください。こもれびcafeなら「手書きノートのぬくもり」「余白を残す」「写真の雰囲気」です。
「全体は案3、メニューは案2の並べ方」のように、気に入ったところを組み合わせて、チャットでお願いしてもかまいません。

よく見ると、前回チャットで直したところ（ヘッダーのメニューの日本語、写真にうすく重ねた色、ごくうすい影）も、3つの案すべてに残っています。

直したところが戻っていたら、ルール表に書き足す

ただし、いつも今回のように、直したところが残るとは限りません。

同じ設定でも、直したところが戻ることがある

前回の記事で、「全部が箱に入った案」を紹介しました。どのセクションの文章も、ベージュの箱に入っていた案です。
この案を、チャットで「箱に入れるのは『お店について』だけ」と直してから、さきほどと同じ設定（3案・Explore・Layoutだけ）でバリエーションを作ってみました。

直す前別タブで開く

チャットで直したあと別タブで開く

バリエーション（の1つ）別タブで開く

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

できあがった3つの案とも、メニューや店舗情報が、またベージュの箱に入ってしまいました（右の案では、お知らせも）。1つにまとめたキャッチコピーも、2つに戻っています。

チャットで直したことが、次の案でも守られるかどうかは、そのときによって変わります。
確実に守ってほしいことは、ルール表に書いておきましょう。
ルール表に書いてあることは、次に作る案の「前提」になります。

※ Stitchは、最初に渡したルール表をもとに、自分用のデザインのルールを作っています。チャットで直しても、そのルールは書きかわりません。

今回のように直したところが残っていた場合も、書いておくと安心です。新しいプロジェクトで下層ページを作るときや、ほかのAIツールにデザインを頼むときに引き継げるのは、ルール表だけだからです。

ルール表に書くもの、その場で済むもの

とはいえ、直したことを全部ルール表に書くと、ルール表がどんどん長くなります。
分けるときの目安は、次に作るもの（ほかのページ、バナー、別のツール）でも守ってほしいかです。

これまでに直したことを、分けてみました。

「キャッチコピーを1つにする」は、このページだけの話なので、ルール表には書きません。
一方、「言葉の途中で改行しない」は、ほかのページでも起こりそうです。けれど、ルールというより、そのつど直せば済む話にも思えます。こういう「迷う」ものは、何度も同じ直しをするようなら書き足す、くらいでかまいません。

AIに、ルール表への書き足しを手伝ってもらう

書き足す中身が決まったら、ルール表の書き方にそろえる作業は、AIに手伝ってもらいましょう。
ここではClaudeを使いますが、ほかのAIチャットでも、ほぼ同じことができます。

※ ルール表が手元にない方は、このセクションの下からダウンロードできます。

Claudeのチャットに、ルール表のファイル（.md）を添付して、次の文章を送ります。

添付したのは、カフェ「こもれびcafe」のデザインルールです。
このルールを渡して、デザインツールでトップページのデザイン案を作り、次のところをチャットで直しました。

・ベージュ（#EFE8DE）の箱は、目立たせたいところだけに使い、全部のセクションには使わない。ほかは背景（#FAF7F2）の上に置いて、うすい区切り線や余白で分ける
・ヘッダーのメニューは日本語にする
・写真の上に紙のオフホワイト（#FAF7F2）をうすく重ねて、やわらかく見せる
・カードと写真に、ごくうすい影をつけて、紙を重ねたように見せる

ほかのページや、ほかのツールで作るときにも守りたいので、ルールに書き足したいです。
・直す必要がある項目だけを、直したあとの形で出してください
・ほかの項目と同じ書き方（表・見出し・箇条書き）にそろえてください
・新しい色は足さないでください
・今のルールとぶつかるところ（例：「派手な影」は避ける）があれば、どう書き分けたかも教えてください

お願いしたとおり、返答の中には今のルールとぶつかるところと、その書き分けもあるはずです。例えば、今回の場合だとルール表の「やらないこと」には、もともと「派手な影」と書いてあります。「ごくうすい影はよい」と書き足すと、ぶつかって見えます。こういうところをどう書き分けたかも、返答で確かめておきましょう。

おかしいところやイメージと違うところがあれば、続けてチャットで伝えて、直してもらいます。
最初に直すところだけを出してもらったのは、全文だと、どこが変わったのか確かめにくいからです。

もう1つ、確かめておきたいのが数値です。
返答の中の影の濃さや写真の重ね方は、AIが文章から推測した値になります。

影の形：ずらしは小さく（下に2〜4px）、ぼかしはやわらかく（8〜12px）。CSSの目安は box-shadow: 0 2px 10px rgba(92, 81, 73, 0.1)。

今回試した際には、Claudeは「不透明度などの数値は目安です。トップページで直した状態と見比べて、ちょうどよい値に合わせてください。」と説明を入れてくれています。ご自身でこのくらいと言える場合は、そのまま自分で打ちかえてかまいません。

よくわからない、という場合は、直したデザイン案のコードを渡して、合わせてもらいましょう。
コードは、前回の記事で紹介した「Download Project」のzipファイルに入っています。直したデザイン案のフォルダにある code.html を、チャットに添付して、次の文章を送ります。

※ フォルダがいくつかあるときは、中の画像（screen.png）を見るか、.htmlファイルをブラウザで開いて、採用したいデザイン案を選んでください。

添付したのは、直したあとのデザイン案のコード（code.html）です。
先ほどのルールの「影の使い方」と「写真の雰囲気」の数値を、このコードに合わせて直してください。

・直すのは、影と、写真の見せ方の数値だけにしてください
・余白や文字サイズ、ページの文章など、ほかのことはルールに足さないでください
・数値は「〜程度」の幅ではなく、そのまま使える値を1つにしてください
・直したところだけを出してください

影の色や写真の重ね方が、実際のデザイン案に合った値になりました。
返答の最後には、ルールとコードが違うところも挙げてくれています。今回はルール表を直すのが目的なので、ここは読み流して大丈夫です。

中身に問題がなければ、全文をファイルで出してもらいましょう。
自分で1か所ずつ書きかえるより早く、書きまちがいも防げます。

直したところをすべて反映した、デザインルールの改訂版の全文を、.mdファイルで出力してください。
【変更】【追加】の印は外してください。

新しいルール表が作成されます。
できあがったファイルをダウンロードして保存してください。

デモでは添付したファイルがkomorebi-cafe-design-rules_v2.mdだったので、ファイル名は v3 になっています。
別の名称になっていた方や、日付で管理したいなどご自身のルールがある方はファイル名を変更してください。

書き足す前のルール表（v2）と、書き足したルール表（v3）、アイコンの画像は、下からダウンロードできます。

書き足したルール表で、作り直す

最後に、書き足したルール表がちゃんと効くか、確かめてみましょう。

Stitchのダッシュボードを開き、書き足したルール表（v3）とアイコンの画像を添付します。入力欄の下のスイッチは「Web」にしておいてください。
お願いの文章は、前回の記事と同じです。

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

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

しばらく待つと、デザイン案ができあがります。
チャット欄の説明を見ると、影について、ルール表（v3）に書いた値がそのまま使われていることがわかります。

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

ルール表（v3）を渡して作った案別タブで開く

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

ヘッダーのメニューは、今回は最初から日本語になりました。
写真にはうすく色が重なり、カードと写真には目立ちすぎない影がついています。大きなベージュの箱も、全部のセクションではなく「季節のおたよりとおやつ」だけに使われています。アイコンも、添付した画像がメニューの見出しなどに入っています。
チャットで直さなくても、ルール表（v3）に書き足した内容が、最初から反映されています。

一方で、最上部のタイトルは「ゆっくり流れる自分だけ／の時間。」と、中途半端な位置で改行されています。ここは、あとで直します。

続けて、さきほどと同じ設定（3案・Explore・Layoutだけ）で、バリエーションも作ってみます。

画面に並んでいる3つがバリエーションです。
どの案でも、メニューの日本語、写真の色、影、ベージュの箱の使い方が守られています。ただ、タイトルの改行は、案によって「ゆっくり流れる自分だけの／時間。」のように中途半端なままです。

気になるところは、チャットで直す

ルール表を書き足しても、全部が思いどおりになるとは限りません。
今回のタイトルのように気になるところは、チャットで直してもらいましょう。どの案にも同じタイトルがあるので、まとめてお願いします。

最上部のセクションで「ゆっくり流れる自分だけの時間。」が中途半端に改行されないようにしたいです。
２カラムの場合のデザインでは「ゆっくり流れる」「自分だけの時間。」と改行してください。

元の案とバリエーション、4つの画面すべてで、タイトルが言葉の途中で切れなくなりました。2カラムの案は、お願いしたとおり「ゆっくり流れる／自分だけの時間。」で改行されています。

このタイトルの改行は、さきほど「迷う」に分けた「言葉の途中で改行しない」と同じ種類のものです。前回の記事でも同じ直しをしていますから、次に作るときのために、ルール表に書き足してもよいタイミングです。

このように、何度も同じ直しをするところが出てきたら、ルール表に書き足します。
ルール表は、こうして使いながら育てていくとよいでしょう。

まとめ

• Google Stitchのバリエーションを使うと、色やフォントはそのままで、レイアウトの違うデザイン案をまとめて作れる（Layoutだけにチェックする）
• 比べるときは、「どれがきれいか」だけでなく、ルール表のコンセプトに合っているかで見る
• チャットで直したことは、バリエーションで残ることも、戻ることもある。確実に守ってほしいことは、ルール表に書く
• 書くかどうかの目安は、「次に作るものでも守ってほしいか」。このページだけの直しは書かない
• 書き足しはAIに手伝ってもらい、数値は code.html を渡して、実際のデザイン案に合わせる
• 何度も同じ直しをするところが出てきたら書き足して、ルール表を育てていく