AIに「賞を獲れる品質で」と一文足したら、LPはどこまで変わる？10本作って比べた
note.comでも読む
AIにLP（1ページでお店や商品を紹介するWebページ）を作ってもらうと、どれも「どこかで見たような」形になる。そう感じたことはありませんか。
私はWeb制作の仕事で、毎日のようにAIと一緒にサイトを作っています。最近は仕上がりも丁寧になりました。それでも、何本か並べると、どれも似た顔をしているのが気になっていました。
そんなときXで、95万回表示された投稿を見かけました。「指示文の最後に、この一文を付けるとよい」というものです。本当に変わるのか。同じお題でパン屋のLPを10本作って、並べて比べました。
AIに頼むと「無難で丁寧」なLPになる
最初に、何も足さずに頼んだLPを2本作りました。お題は、個人経営の小さなパン屋のLPです。
どちらも、生成り色の背景に明朝体の大きな見出しがありました。左に見出し、右にパンの絵、その下に丸いボタンが2つです。余白も整っていて、スマホで見ても崩れません。
正直、よくできていました。昔のAIに比べたら、大分良くなっています。でも、前に作った英会話教室のLPと並べてみると、形がほとんど同じでした。
英会話教室のLPを作ったときの話は、こちらに書いています。
https://note.com/shinemon33/n/n8986b8fe27a9
ここで私は、「こちらの指示に引っ張られすぎているのでは」と疑いました。
Xでも、同じ違和感を書いている人がいました。生成AIでさっと作ったサイトは、フォントの種類も大きさも、色も、レイアウトも、文章も「生成AI感」が強い。でも、それを言葉にするのが難しい、という声です。私が抱えていたのも、まさにその言葉にしにくい感じでした。
試したのは、指示の最後に足す「一文」
Xの投稿で紹介されていたのは、次の一文です。
クオリティ基準としては awwwardsやwebby awards、FWAで賞を穫れるくらいのクオリティを目指して、セルフチェックでそのクオリティ基準になるまで自分でクオリティアップを繰り返してawwwards・Webby・FWAは、Webデザインの有名な賞です。「賞を獲れるくらいを目指して、自分で確かめて直し続けて」と頼む一文になります。
比べ方は、次のとおりです。10本は、3つの組に分けて作りました。
- A（2本）: お題だけで頼む
- B（2本）: お題の最後に、この一文を足す
- C（6本）: 私が普段の仕事で使っている制作手順で作る。途中で手順書を直しながら、2本ずつ3回
10本に共通する条件は、次のとおりです。
- お題は10本とも同じ文面
- 使うAIも10本とも同じ（Anthropic社のClaude Sonnet 5.5。文章やコードを書くAIです）
- 写真やイラストは1枚も使わない。パンの絵も、すべてコードで描かせる
- 1本だけだとたまたまかもしれないので、同じ条件で2本ずつ作る
- 私はコードに一切手を加えていない。 10本とも、AIが書いたものをそのまま載せている
このうち、見比べた4本（BとCの最後の2本）は、実物をサイトに置きました。スクロールの演出や、崩れている所も、そのまま触って確かめられます。私は手を加えていないので、崩れもそのまま残っています。サイトに置くときに、リンクに画像を出すための設定だけ足しました。ページの中身は、AIが書いたままです。
一文あり（1本目） https://suzumin.com/works/demo/award-prompt/b1/?v=2
一文あり（2本目） https://suzumin.com/works/demo/award-prompt/b2/?v=2
手順＋一文（1本目） https://suzumin.com/works/demo/award-prompt/c5/?v=2
手順＋一文（2本目） https://suzumin.com/works/demo/award-prompt/c6/?v=2
画像を使わないのは、今回の見どころの1つです。食パンの焼き色も、クロワッサンの層も、窯の火も、10本すべてがコードだけで描かれています。
一文を足すと、型から外れた。でも崩れた
一文を足した2本は、明らかに別物でした。
縦書きの大きな店名と、画面いっぱいのパン。1本は黒い背景で、夜明け前の窯をイメージした作りでした。開くと、窯に火が入るローディングが流れます。スクロールすると、生地がだんだん焼けていく演出もありました。
見比べて、思わず「Bの効果はかなりあるな」と声が出ました。測ったわけではありませんが、私の感覚では、こっちの方が見た人の反応は良さそうです。
ただ、細かく見ていくと「うーん…おしい」。そのままではお客さんに出せませんでした。
- ページが画面の横幅から、はみ出している
- 右下の焼き上がり時刻が、途中で切れている
- スマホで見ると、崩れが目立つ
かかった時間も、一文なしの約4分に対して13〜17分と、約4倍でした。
一文には「自分で確かめて直して」と書いてあります。それでも崩れが残ったのは、今回の作り方では、AIが実際の画面を見られなかったからです。確かめていたのは、コードの読み直しだけでした。
Xにも、似た経験を書いている人がいました。AIに資料を作らせたとき、一覧だけ見て「崩れなし」と報告されたのに、実際は文字の重なりが残っていたことが何度かあった、という声です。AIの「確認しました」は、どこを見て確認したのかまで聞かないと分かりません。
中盤にも見せ場がありました。1本目の「窯のはなし」は、スクロールすると、白い生地がだんだん焼き色の付いたパンになっていきます。時刻も3時半の仕込みから、7時の開店まで進みます。
自分の手順書が、全部のLPを同じ色にしていた
次に、私が普段の仕事で使っている手順で作りました。実在するサイトを参考に見て、作って、できたページをブラウザ（ChromeなどのWebページを見るソフト）で開いて撮り、見て直す、という流れです。これなら崩れないはずです。
実際、崩れはゼロでした。ところが見た目は、一文なしのLPとほとんど変わりません。「Aのちょっといい版」といったところです。
原因を探すと、手順書の中にありました。以前、焼肉店のLPを作ったときに決めた配色と書体が、「基本」として書かれていたのです。茶色がかった黒と温かい白、それに明朝体の見出しです。AIはそれを、パン屋にもそのまま当てはめていました。
お客さん向けの制作に、自分や過去の案件のテイストを持ち込んではいけません。手順書のその行を直して、もう2本作りました。
色は変わりました。白と緑、クリームとテラコッタです。でも並べてみると、「なんかまた同じような感じになったなぁ」。ページの形は同じままでした。左に横書きの見出し、一部だけ差し色、丸いボタンが2つ、右に絵。何も見せずに作った最初の2本とも同じ形です。
実は、Xの元の投稿にも「デザイン用のスキル（frontend-design。AIにデザインの考え方を足すための、追加の指示集です）を使えばいいのでは」という返信が付いていました。投稿した本人の答えは、「使っていたが、結局AIっぽいデザインに戻ることが多い」です。私の手順でも、このスキルを使っていました。道具を足しても、形は元に戻る。手順書を直したあとに起きたのも、同じことでした。
AIは「よくできたサイトの平均」を出していた
ここまで並べて、私が出した答えはこうです。AIの標準は「無難、そして丁寧」。言い換えると、AIは平均値を取っています。
ただし、ネット上の全サイトの平均ではありません。「よくできたサイトの平均」です。余白がある、見出しが大きい、ボタンが分かりやすい。こうした失敗しない要素は、多くのサイトに入っています。だから平均を取っても残り、丁寧に見えます。
縦書きの店名や黒い背景のような、思い切った表現は一部のサイトにしかありません。平均を取ると消えてしまいます。これが無難さの正体です。
Claudeを作っているAnthropicも、公式の記事「Improving frontend design through Skills」（2025年11月12日）で、似たことを書いていました。学習データには、誰にでも通用して誰も不快にしない、安全なデザインが多い。指示が無いと、AIはその「いちばんありそうな中心」から選ぶ、という説明です。
https://claude.com/resources/articles/improving-frontend-design-through-skills
ここからは、10本の結果に合う私の見立てです。AIの中身を確かめたものではありません。
一文が効いた理由も、同じ形で説明できると考えています。「賞を獲れる品質で」と書くと、平均を取る相手が「受賞サイト」に変わります。受賞サイトは思い切った表現ばかりなので、平均しても大胆さが残ります。そのかわり、はみ出しのような失敗も混ざります。
一文と「見て直す」を組み合わせたら、両方そろった
最後に、普段の手順に一文を足しました。あわせて、AIがブラウザで実際の画面を見て、直す形にしました。
できた2本は、型から外れていました。
1本は、極太のゴシック体で「朝7時、最初の一窯。」と大きく書かれています。下には、次の焼き上がりまでのカウントダウンが流れます。もう1本は、バター色の画面に「06:40」という巨大な時刻が主役で、ページ全体が窯の時刻表になっていました。
今回の2本では、スマホ幅とPC幅で何度か測っても、横のはみ出しはありませんでした（1本だけ、途中の幅で動きの演出が一瞬3pxはみ出したことがあり、測り直すと0でした）。AIは画面を見て直す作業を、2〜3周やっていました。かかった時間は5〜9分で、一文だけの13〜17分より短く済んでいます。
実物を見て、「大胆なフォント。ありきたり感がなく良い」「スマホでも見やすい」と感じました。全体としては「結構どれもいい。レベル上がったな」というのが正直な感想です。
一文は「型から外す」効き目、見て直す手順は「崩れを消す」効き目でした。別々の効き目なので、今回の2本では、両方そろえて初めてお客さんに見せられる形になりました。
1本目には、店主の手紙を縦書きで、名刺のように見せる「て・が・み［名詞］」というコーナーもありました。この発想は、私には出てこなかったものです。
一文を使うときに気をつけたいこと
この一文は、どんな案件にも足せばいい、というものではありません。試して分かった注意点です。
- 時間は延びる。 一文だけだと約4倍かかりました
- 崩れは必ず実際の画面で確かめる。 AIの「確認しました」をそのまま信じない
- お客さんが「無難で丁寧」を望むなら、足さない。 派手さが合わない業種もあります
- 自分の配色や書体を、手順書に「基本」と書かない。 全部の案件がそれに寄ります
また、今回は同じ条件で2本ずつしか作っていません。1回ごとのブレもあるので、「この一文で必ず変わる」とまでは言えません。
まとめ
- AIに頼んだLPは「よくできたサイトの平均」になり、無難で丁寧な形に寄る。自分の手順書の書き方が、それを強めていることもあった
- 指示の最後に「賞を獲れる品質で」と一文足すと、型から外れて演出が増えた。ただし時間は約4倍で、崩れも出た
- 一文と「実際の画面を見て直す」手順を組み合わせると、型から外れて、しかも崩れないLPになった（今回の2本では）
みなさんは、AIにデザインを頼むとき、どんな一言を足していますか。コメントで教えてもらえると嬉しいです。フォローしておくと、次の記事が届きます。
📺 この記事の内容を動画で見る
公開までしばらくお待ちください。