実在サイトの参考をAIに渡しても、正直そこまで変わらなかった話
note.comでも読む
「参考サイトを渡せば、AIがもっと個性のあるデザインを出してくれるんじゃないか」——そう思って試した結果、出てきたのは、参考なしで作った案とほとんど同じ型のLPでした。参考を渡す手間をかけたのに、なぜか思ったほど変わらない。この違和感、あなたも感じたことはありませんか？
今回は、大阪に新規オープンする焼肉店の集客LP（デザインのみ）を想定して、「参考なし」と「実在サイト5件の参考あり」の2パターンでAIにLPを作らせ、最後に「いいとこ取り」で1本に合成しました。前回の英会話サービスLP記事（後述）と同じ手順です。今回も同じ手が通ったか、そして参考を渡すことに意味はあったのか——正直に書きます。
「参考を渡せば個性が出る」と思っていた
参考サイトのURLをAIに渡しても、期待したほど個性的には変わらず「無難だけど文字が小さくて見づらい」止まりだった、という声がX上で見られます。
今回のお題は、大阪に新規オープンする焼肉店の集客LPです。実際に公開されていた募集文を想定ブリーフとして使いました（応募はしていません。店名・住所・料金はすべてダミーです）。
クライアントの要望を整理すると、こうです。
- 目的 — 新店の認知と予約獲得。Instagramや広告から予約につなげる
- 客層 — 20〜40代、友人・カップル・宴会。InstagramやGoogleで店を探す人
- 雰囲気 — 高級感がありながら入りやすい。黒×白基調の落ち着いた世界観
- 写真 — 肉写真を大きく、シズル感、写真と余白
- スマホ — 予約しやすいこと
- 最初の1画面（FV） — 「この焼肉を食べてみたい」と直感させる
（「シズル感」は、肉が焼ける音や湯気まで伝わってきそうな、見た瞬間に食欲が湧く臨場感のこと。私も今回あらためて調べました）
FV／NEW OPEN告知／店舗コンセプト／お肉へのこだわり／看板メニュー／おすすめコース／料理・ドリンク／店内・座席／利用シーン／オープン記念キャンペーン／店舗情報・アクセス／予約CTA、の12ブロック構成です。
まずA案は、この募集文だけを渡して1ページHTMLを生成しました（店名ダミー「炭火焼肉 燠色 -OKIIRO-」）。次にB案では、Inspoという、実在サイトのデザインを検索できるMCPツール（AIに外部の道具をつなぐ仕組み）を使って参考を5件引き、「配色の役割・FVの型・セクションのリズム」を言葉に落としたメモを一緒に渡して同じ手順で生成しました（店名ダミー「熾火焼肉 灯家」）。
参考に選んだのは、Death & Co（暗い実写に暖白の文字を薄く重ねる）、Dinner by Heston Blumenthal（純黒・純白を避けたグレー階調）、Chipotle（料理写真の余白に見出しを重ねる）、Dirty Vine（塗り＋アウトラインのCTAを2つ並べる）、NYT Cooking（写真→小ラベル→大見出し→本文の繰り返し）の5件。英語圏のサイトのみ収録されているため、「日本語では字間を広げず、サイズ差とウェイト差でメリハリをつける」と翻訳しておきました。
写真なし枠の段階では「B優勢」だった。ただ、それが反転した
CSSのダミー枠（写真なし）で比べたとき、差が出たのはPC幅の最初の1画面だけでした。B案はFV写真枠が画面全体を占めるフルブリード型。A案は見出しとボタンだけが並んでいて、写真は画面を下にスクロールしてから登場します。この段階では「B優勢」と判定しました。
ところが、生成写真を入れたら判定が反転しました。
AIが作ったLPの写真枠には、「熾火で炙る和牛の断面」「炙りユッケと卵黄」「店主が炭を起こす手元」のように、どんな写真を入れる場所かを示すラベルが1枠ずつ付いています。まずB案の16枠について、このラベルどおりにAIでダミー写真を1発生成して当てはめました。この16枚をA案へ流用できるか確かめたら、A案の枠はラベルの中身が別物で、同じ写真が2回出る枠と構図が合わない枠が出てしまい、見送り。A案の20枠には別に20枚を生成しました。
写真を入れて全体を見ると、「ヒーロー以外はAのほうが好み」という印象に変わりました。看板メニュー4品の非対称グリッドも、こだわり3枚の縦長レイアウトも、写真が入って初めて映える構造だったのです。枠だけの段階でデザインを判定してはいけない——これが今回いちばんの気づきです。
C案は「いいとこ取り」。前回と同じ手が2回目も通った
AIに任せきりで作ったサイトが「ブランドに合わない」と後から気づいた、という副業Webデザイナーの声が2026年9月に入って複数確認されています。任せきりにしないなら、どこを人が決めるか。私の場合は「どの部品を採るか」でした。
そこで前回の英会話サービスLP記事と同じ手を使いました。「Aの本体＋BのFV型（写真フルブリード＋文字重ね）」を部品指名で1本に合成する、C案の生成です。1案をひたすら修正するループには戻りません。
ただ、合成してみると小さな問題がひとつ。Aの左揃えコピーをそのまま残したら、FV写真の肉とコピーが重なって読めなくなってしまいました。対処はシンプルで、FV写真をCSSで左右反転（scaleX(-1)）して肉を右下へ移動させるだけ。コピーの読みやすさが一気に上がりました。
FV下にあった小写真2枚は削除しました。小写真があるとFVで引き算した意味が薄れるのと、スマホで見たとき窮屈だったためです。
それから、ちょっとした落とし穴も見つかりました。コース価格・オープン日「10.1」・電話番号が、装飾系の欧文書体（Cormorant Garamond）に乗って「可愛く」見えてしまっていたのです。この書体の数字は「オールドスタイル数字」といって、数字ごとに高さが上下に揺れる作りで、丸っこく見えます。焼肉店のLPとしては違和感がありました。見出しの明朝（Shippori Mincho）に統一して、数字の高さと幅をそろえる指定を入れたら落ち着きました。「AIっぽさ」は紫グラデだけでなく、こういう細部にも出てくるものです。
余談ですが、ひとつ実務メモ。比較用にページ全体のスクリーンショットを撮ったら、最初は真っ白な画像が出てきました。原因は、スクロールすると要素がふわっと出てくるアニメーション。AIが自分で気づいて、全部表示した状態にしてから撮り直してくれました。AIが作ったサイトを見比べるときに起きやすいので、真っ白な画像が出ても慌てなくて大丈夫です。
「できた」。でも正直に言うと「基本系」だった
A・B・C、3案とも最終的に「茶味のある黒×温白×明朝＋写真セクション交互」という定番型に収まりました。参考5件も同じ方向を向いていました。高級飲食の定番中の定番です。
なぜこうなったのか。答えは要望文に書いてあります。「高級感がありながら入りやすい・黒×白」という指定は、定番型そのものを求めているのです。参考を渡しても型は外れません。上がるのは「型の精度」と「クライアントに説明できる言葉」だけです。
X上でも「AIが出したラフをそのまま使うと物足りない。結局は人がヒアリングして組み直す工程が要る」という指摘が出ていますが、今回の私のケースでは、原因はここにありました。要望文が定番型を求めている限り、AIは定番型を出してきます。参考の有無は型の向きを変えない。
B案で「参考メモを言葉に落とした」作業には、べつの意味がありました。「Death & Coから暗い実写＋暖白文字を採った」「Dirty Vineから塗り＋アウトラインのCTA2つを採った」という記録が残ること（画像やコードは転載せず、画面から読み取った構成を言葉にして参考にしています）。発注する側に説明できる言葉が手に入ること。これは数字には出にくい副産物です。
差をつけたいなら「もう1案」ではなく、署名になる要素を1つだけ足すフェーズが要ります。縦組みの見出し、スクロール連動の炭火の光……今回はそこまでやっていません。n=1の実験なので「Bが勝った／負けた」とも言い切れません。これが正直なところです。
まとめ
参考を渡す手間を「無駄だった」とは思っていません。ただ、期待値の置き場所を間違えると、「思ったより変わらなかった」という感想だけが残ります。今回の実験で見えてきたことを整理します。
ポイント1｜枠だけで判定しない。写真を入れてから見る ダミー枠の段階ではB優勢に見えたのに、写真を入れたらAの本体のほうが好みに変わりました。デザインの判定は、素材が入った状態でやります。
ポイント2｜参考は型を変えない。型の精度を上げる 実在サイト5件を参考に渡しても、要望文が定番型を求めている限り出てくるものは定番型です。参考の価値は「説明できる言葉が残ること」にあります。
ポイント3｜「もう1案」より「署名になる要素を1つ」 A・B・C案の差分より、縦組み見出しや演出アニメのような「その店らしさ」を1要素足すほうが差になりそうです。今回はそこまでやっていないので、次の課題です。
ポイント4｜AIっぽさは細部に出る 紫グラデだけじゃありません。オールドスタイル数字の「可愛さ」も、スクロールのアニメーションのせいで真っ白になるスクリーンショットも、全部「確認していないと気づかない」種類の問題です。
次にAIへ参考を渡すなら、この順で
- その1｜要望文が求めている「型」を一文にする — 例:「黒×白の高級感、写真主役」。ここで型は決まります
- その2｜参考から採る要素を絞る — 「配色の役割」「最初の1画面の型」「セクションの並び」の3つくらいに
- その3｜写真を入れてから比べる — 枠だけで判定しない。「いいとこ取り」は2回続けて使えたので、次も試すつもりです
ここまで読んでいただいてありがとうございます。
AIに参考を渡すとき、みなさんはどうしていますか。「渡したのに変わらなかった」「こう渡したら効いた」どちらでも、コメントで教えてもらえると嬉しいです。フォローしておくと、次の実験記事が届きます。