Claude Codeに自社の採用ページやお店のサイトを作らせると、どこかで見たような見た目になることはありませんか。
山や空の絵、英字の小さな見出し、同じ形のカードが3枚。
整ってはいるけれど、店名を消すと、どこのサイトか分かりません。
X（旧Twitter）で「AIへの依頼の最後にこれを足すと、デザインのいいサイトが一発で作れる」という投稿が話題になりました。
足すのは、次の一文です。
クオリティ基準としては awwwardsやwebby awards、FWAで賞を穫れるくらいのクオリティを目指して、セルフチェックでそのクオリティ基準になるまで自分でクオリティアップを繰り返してawwwards・Webby Awards・FWAは、どれも海外のWebデザインの賞です。
本当に良くなるのかを、公式の資料と、実際に作り比べた結果の両方で確かめました。
Claude Codeでは見た目が変わり、AIの審査役がつけた「独創性」の点が大きく上がりました。
ただし、かかった時間は約3倍、費用は約2.4倍です。
Codexは絵が細かくなりましたが、30分たっても作業が終わりませんでした。
避けたい見た目を名前で挙げ、スマホ幅での見直しも頼んだ版は、点数がもう一段上がりました。
この記事でわかること
- 話題の一言は、何をAIに頼んでいるのか
- AnthropicとOpenAIの公式資料に書いてあること
- 一言あり・なしで作ったサイトの実際の画面
- かかった時間・費用と、AIの審査役による点数
- 使うなら、そのまま貼れる依頼文
話題のデザインプロンプトは「高い基準を決めて、見直しをくり返して」という頼み方
- 目指す水準を「賞を取れるくらい」と高く置く
- その水準に届くまで、自分で見直して直し続ける
人に言えば「100点を目指して、自分で採点しながら書き直して」です。
この頼み方に近いものは、AIを作っている会社の公式資料にも載っています。
ChatGPTやCodexを作るOpenAIの手引きには、「最高のサイトとは何か」を5〜7項目の採点表にして、満点が取れるまで考え直させる例があります。
Claude Codeを作るAnthropicの資料にも、「仕上げる前に自分の作業を確かめさせると、間違いを見つけやすい」と書かれています。
公式資料には「画面を確かめる道具を渡す」「避けたい見た目は名前で挙げる」とも書いてある
Anthropicは、サイトのような画面を作らせるなら、AIが自分の作った画面を確かめられる道具を渡すとよいと書いています。
Anthropicが配っているデザイン用の手順書にも、「できるなら画面を撮って、自分の作品を批評しながら作る」とあります。
もう1つの注意は、「AIっぽさを避けて」とだけ頼むと、ありがちな見た目を1つやめても、別のありがちな見た目に替わりやすいことです。
Claude Opus 5.5向けの手引きには、「クリーム色の背景」「01/02/03の番号」「錠剤形の丸いボタン」のように、避けたい見た目を名前で挙げるほうが結果が良くなる、と例つきで書かれています。
資料どおりなら、結果はこう予想できます。
- 画面を見られるAIなら、見直しで仕上がりが上がる
- 「賞を取れる水準」はぼんやりした指示なので、ありがちな見た目は残りやすい
- 見直しをくり返すぶん、時間と費用は増える
同じ依頼文で、Claude CodeとCodexに2本ずつ作らせた
試したのは、架空のお店のトップページです。
渡した依頼文は、これです。
架空のお店「やまびこ珈琲焙煎所」のWebサイトのトップページを作ってください。
お店について：長野県の山あいにある、夫婦2人で営む小さな自家焙煎の珈琲店。店内で飲めるほか、豆の通販もしている。
載せる内容：
・お店の紹介（こだわり：注文を受けてから少量ずつ焙煎する）
・豆の種類3つと価格（深煎り「山霧ブレンド」200g 1,600円／中煎り「朝焼けブレンド」200g 1,500円／浅煎り「エチオピア イルガチェフェ」200g 1,800円）
・通販の案内（全国発送、5,000円以上で送料無料）
・店舗の場所と営業時間（長野県○○市、10:00〜17:00、水曜定休）
・問い合わせ
条件：index.html 1ファイルで作る（CSSとJavaScriptも同じファイルの中）。画像ファイルは使わず、CSSやSVGで表現する。スマホでも見やすくする。この依頼文のままのものと、最後に話題の一言を足したものを、Claude Code（Claude Opus 5.5）とCodex（GPT-6 Astra）に1本ずつ作らせました。
4本とも同じMacで同時に動かし、途中で人は手を出していません。
できあがった4本の最初の画面は、次のとおりです。
Claude Codeは見た目が変わり、時間は約3倍になった
一言なしは、山と夕日と小屋の絵に、店名を大きく置いた落ち着いたページでした。
一言ありは、店名の「やまびこ」（声が返ってくること）にかけて、「お客さんの注文という声が届いてから焼く」という話を作りました。
見出しは、縦書きの「声が届いてから、焼きはじめる。」です。
豆の欄では、スクロールに合わせて空が夜→朝焼け→朝へ変わります。
色の濃い深煎りは夜、中煎りは朝焼け、色の薄い浅煎りは朝と、豆の色に空の色を合わせています。
作業の記録によると、Claude Codeは画面を撮って確かめ、次の5点を自分で直していました。
- 縦書きの見出しの折り返し
- 豆の欄の空が、下の通販の欄に重なる不具合
- フッターのロゴの崩れ
- 豆の名前のはみ出し
- 注文の帯が、問い合わせの送信ボタンを隠す問題
ただ、スマホでは太陽や月の絵が、何袋買うかを選ぶ「−・＋」のボタンや説明文に重なったまま残りました。
| Claude Code | 一言なし | 一言あり |
|---|---|---|
| かかった時間 | 約3分半（206秒） | 約11分（666秒） |
| AIが道具を使ったり考え直したりした回数 | 8回 | 40回 |
| 費用（API料金に換算） | 1.24ドル | 3.03ドル |
費用は、同じ作業をAPI（使った分だけ払う契約）で動かした場合の金額です。
月額プランならお金は増えませんが、使える量の上限に、一言なしより早く近づきます。
Codexは絵が細かくなったが、30分たっても終わらなかった
見出しは「山の静けさを、一杯に。」から「山の時間を、一杯に。」へ。
左に見出し、右に山の絵、下に同じ形の豆袋のカードが3枚、という並びは同じです。
一言ありでは、絵だけが変わりました。
山に細い線が入り、コーヒーカップや焙煎機の絵が足され、豆袋のラベルが1種類ずつ描き分けられました。
一方、時間は大きく延びました。
一言なしは約7分半（454秒）で終わりました。
一言ありは、ファイルの書き換えを19回くり返し、30分たっても終わらなかったため、そこで止めました。
最後にファイルを書き換えたのは、始めてから約18分後です。
Codexは一度も画面を開かず、コードだけを読んで直し続けていました。
AIの審査役2人に、作り手を伏せて点をつけさせた
見た目の良し悪しを、私の好みだけで決めないように、AIの審査役を2人用意しました。
- awwwardsの審査員役
- 社員10人ほどの会社の経営者役
経営者役は、デザインの専門家ではない人として見てもらいました。
どちらにも、どのAIが作ったか、一言があるかは伏せて、画面の画像だけを見せました。
採点は、awwwardsが実際に使っている4項目と配分に合わせました。
デザイン40%、使いやすさ30%、独創性20%、内容10%です。
Claude Codeの一言なし・ありに、2人がつけた点はこうなりました。
審査員役は一言ありを上に、経営者役は一言なしをわずかに上にしました。
どちらのAIも、一言を足すと独創性が上がり、使いやすさが下がりました。
| 10点満点 | 審査員役 | 経営者役 | 2人の平均 |
|---|---|---|---|
| Claude Code 一言なし | 6.82 | 7.80 | 7.31 |
| Claude Code 一言あり | 7.47 | 7.72 | 7.60 |
| Codex 一言なし | 6.18 | 7.90 | 7.04 |
| Codex 一言あり | 6.61 | 8.08 | 7.35 |
| 一言なし→一言あり | 審査員役 | 経営者役 |
|---|---|---|
| Claude Code 独創性 | 5.2→8.0 | 7.0→9.0 |
| Claude Code 使いやすさ | 7.8→6.6 | 8.4→6.5 |
| Codex 独創性 | 4.8→5.8 | 7.2→8.0 |
| Codex 使いやすさ | 5.8→5.6 | 7.4→7.2 |
平均では、どちらのAIも一言ありのほうが0.3点ほど上でした。
経営者役が「お金を払うならこちら」と選んだのも、Claude Codeでは一言なし、Codexでは一言ありでした。
経営者役は、Claude Codeでは「迷わず注文までたどり着ける」ことを、Codexでは絵の作り込みを重く見ていました。
審査員役の点では3本が6.5点を超えましたが、審査員役が「実際に入賞に届く」と見たのは、独創性も高いClaude Codeの一言ありだけでした。
どの案にも「英字の小さな見出し」「同じ形のカード3枚」「番号つきの手順」のような、AIが作りがちな見た目が残っている、とも指摘しています。
審査役もAI（Claude）なので、人の審査員の点とは違う可能性があります。
作ったのも各1本ずつなので、たまたまの差も含まれます。
最初の採点は、ページ全体を1枚に撮った画像で誤って減点された
1回目は、ページ全体を縦長の1枚に撮った画像を見せました。
すると2人とも、Claude Codeの一言ありを「豆の説明が白い文字で読めない」と大きく減点しました。
実際に開いてスクロールすると、文字は背景の明るさに合わせて濃い色に変わり、ちゃんと読めました。
全体を1枚に撮る方法では、スクロールに合わせて変わる背景が止まったまま写ります。
上の点数表は、人が見るのと同じように1画面ずつスクロールして撮り直した画像での点です。
使うなら「画面を見せる」と「避ける見た目の名指し」をセットにする
公式資料が勧めていた「避けたい見た目を名前で挙げる」も試しました。
話題の一言のあとに次の2文を足して、Claude Codeにもう1本作らせています。
次の型は使わないでください：「01/02/03」の番号つきの手順やカード、同じ形のカードを3枚並べる組み方、見出しの上の細線つきの小さなラベル、英字の小見出しや英語の飾り文句、角の丸い錠剤形のボタン、クリーム色の背景、山と太陽と小屋のヒーロー。
仕上げに、パソコン幅とスマホ幅（390px）で文字と絵の重なり、1文字だけ次の行に落ちる改行がないかを見て直してください。避ける見た目は、審査役が挙げたものと、Anthropicの手引きの例から選びました。
「ヒーロー」は、ページのいちばん上の大きな絵の欄のことです。
名指しした版は、山の絵をやめ、焙煎の温度グラフを最初の画面に置きました。
見出しは「焼くのは、ご注文を受けてから。」です。
横のグラフは、ひと釜を焼くあいだに温度がどう変わるかを描いています。
豆の一覧は「ちがうのは、釜から出す時刻です」として、浅煎り9分40秒、中煎り10分40秒、深煎り12分と並べました。
かかった時間は約11分（646秒）、AIが道具を使ったり考え直したりした回数は56回、費用はAPI料金に換算して2.64ドルでした。
| 10点満点 | 審査員役 | 経営者役 | 2人の平均 |
|---|---|---|---|
| Claude Code 一言あり | 7.47 | 7.72 | 7.60 |
| Claude Code 一言あり＋名指し | 7.64 | 8.48 | 8.06 |
2人とも、前の4本のどれよりも高い点をつけました。
使いやすさが大きく伸び（審査員役6.6→8.0、経営者役6.5→9.0）、独創性は少し下がりました（8.0→7.6、9.0→8.5）。
経営者役は「お金を払うならこれ」と選び直し、「長野の山あいの店らしい温かさは、前の4案より弱い」とも書いています。
スマホで絵がボタンに重なる崩れはなくなりましたが、押せない状態のボタンの文字が読みにくい所は残っていました。
この版は4本とは別に、あとから1本だけ作らせました。
採点も、前の4本の点数を基準に、この1本だけをあとから採点しています。
依頼文には、仕上げにスマホ幅で見て直す指示も入っています。
そのため、「型の名指し」と「スマホ幅での見直し」のどちらがどれだけ点を上げたかは、この1本からは分けられません。
また、Claude Codeは「1回に焼く量は1kgまで」「焙煎は夫、店で淹れるのは妻」など、依頼文にない内容を足していました。
Claude Codeが作業後に出した報告にも「いただいた情報にない内容を足したので、使ってよいか判断してください」とあり、事実の確認は人の仕事として残ります。
使うときの条件は3つです。
- AIが自分の画面を見られるようにする
- 避けたい見た目を名前で挙げる
- 仕上がりは人がスマホで確かめる
今回いちばん点が高かった版に渡した文を、そのまま貼れる形で置いておきます。
依頼文の最後に足して使ってください。
クオリティ基準としては awwwardsやwebby awards、FWAで賞を穫れるくらいのクオリティを目指して、セルフチェックでそのクオリティ基準になるまで自分でクオリティアップを繰り返して
次の型は使わないでください：「01/02/03」の番号つきの手順やカード、同じ形のカードを3枚並べる組み方、見出しの上の細線つきの小さなラベル、英字の小見出しや英語の飾り文句、角の丸い錠剤形のボタン、クリーム色の背景、山と太陽と小屋のヒーロー。
仕上げに、パソコン幅とスマホ幅（390px）で文字と絵の重なり、1文字だけ次の行に落ちる改行がないかを見て直してください。「次の型は使わないでください」のあとは、自分のページに合わせて入れ替えます。
一度作らせたページの画面をClaudeに見せて、「AIが作りがちな見た目を挙げて」と聞くと、入れ替える候補が出てきます。
作業の途中でClaude Codeが、画面を撮る操作の許可を求めてきたら、許可します。
同じ一言でも、AIの種類と「画面を見られるか」で変わり方が違う
あなたの会社では、AIに作らせたページを、誰がどの画面で確かめていますか。
次のどちらかに心当たりがあれば、一度話を聞かせてください。
- AIでサイトやLPを作ってみたが、どこかで見た見た目になる
- AIが作ったページを、誰がどう確かめるかが決まっていない
30分の無料オンライン相談で、どこをAIに任せ、どこを人が確かめるかを一緒に整理します。
その場で見積もりは出さず、売り込みもしません。
AIの使い方の検証は、メルマガでも届けています。
Claudeでデザインを仕上げる公式の手順書は、こちらの記事で紹介しています。
Claudeのスキルおすすめ5選｜公式19本から会社で使える順
ほかの記事は、こちらにまとめています。
中小企業のAI活用ガイド｜何から始める？業務別の使い方まとめ
参考にした情報
Anthropic「Prompting best practices」
Anthropic「Prompting Claude Opus 5.5」Frontend design defaults
いま受け取れる特典は、全部で8つ。すべて無料です。
- AIが作る見た目を選べる デザイン様式50 … 名前をひとつ添えるだけで、サイトも資料も50通りに。
- AIの仕上がりを毎回そろえる 型プロンプト … コピペするだけ・作成フォーム付き。
- ChatGPT超入門ガイド … 「何ができるの？」がスッキリ分かる入門書。
- AIで仕事をラクにする 業務改善チェックリスト … “任せられる仕事”を見つける。
- 今日から使えるAI活用シーン10選 … まねするだけ。
- NotebookLMでスライドを作ろう … 資料づくりを10倍速に。
- 撮った動画を“見返せる資産”に変える 手順書 … 文字起こし→目次→字幕まで。
- AI活用ガイドブック（全70ページ） … 登録＋3分のアンケートで無料（Kindleでは980円）。
この記事は役に立ちましたか？
コメント