Claude Codeのデザインは賞の一文で変わるのか？

Claude Codeに頼んだサイトって、どれも似た顔になりませんか？クリーム色の背景に茶色の文字、明朝体の見出し。パン屋やカフェだと特に、そうなりがちなんですよね。

では、指示の最後に、Webデザインの賞として知られるAwwwards、Webby Awards、FWAで賞を穫れるくらいの品質を目指して、という一文を足すとデザインは変わるのか。パン屋のサイトで試したところ、見た目ははっきり変わりました。ただ、その一文だけだとスマホの最初の画面から電話番号と営業時間が消えたので、実用の条件を足した書き方まで載せておきます。

賞の名前を足すと、Claude Codeのデザインはどう変わるか？

試したのは、商店街のパン屋「こむぎ堂」（架空のお店です）の1ページサイトです。同じ依頼文で3通り作らせました。Aは依頼文だけ、Bは最後に賞の一文を足したもの、Cは賞の一文に実用の条件まで足したものです。Claude Codeのエージェントに作らせ、Chromiumのスマホ表示（390×664、水曜10時に時刻を固定）で確かめました。

いちばん変わったのはBでした。Bは最初に考えた「クリーム色の背景に明朝体と焦げ茶」を、生成されたサイトによくある配色だとして自分で捨てています。作り直したのは、紙色の地に紺インク1色のパン袋の判子、手書き風の値札、棚板から値札が下がる形。ロゴは「堂」1文字の判子でした。

一方のAは、クリーム色と焼き色の茶色でした。この1回の比較では、賞の一文が「ありがちを避ける」方向に働いたように見えます。ところが、Bのスマホの最初の画面には、紺色の大きな見出し「焼きたては、一日に二回。」と大きなパンの絵、右上に小さな「営業中」の印があるだけで、電話番号も営業時間も定休日も見当たりませんでした。

Claude Codeのプロンプトの最後に足す一文

足すのは、依頼文の最後に貼る一文だけです。共通の依頼文は、店名、営業時間7:00〜18:00と火曜定休、電話番号、住所、人気のパン3つと値段、焼き上がりが朝7時と昼12時の2回、という店の情報を並べたものです。加えて「HTMLファイル1つ」「外部の画像は使わない（Google Fontsは可）」「最後に見直した回数を報告して」と頼んでいます。

Bでは、その最後にこの一文を足しました。

クオリティ基準としては awwwardsやwebby awards、FWAで賞を穫れるくらいのクオリティを目指して、セルフチェックでそのクオリティ基準になるまで自分でクオリティアップを繰り返して

Cでは、同じ一文の続きに実用の条件をつなげています。

クオリティ基準としては awwwardsやwebby awards、FWAで賞を穫れるくらいのクオリティを目指して、セルフチェックでそのクオリティ基準になるまで自分でクオリティアップを繰り返して。ただし、見に来るのは近所のお客さんで、多くはスマホで開く。スマホで開いて最初の画面に営業時間・定休日・電話番号が見えること、電話番号はタップで電話がかけられること、文字は年配の人でも読める大きさであることは、見た目より優先して。セルフチェックではこの3点も毎回確かめて

目標は下げずに、譲れないものだけ先に決めておく書き方です。Cで足した実用条件が何を動かしたのか、数字で見てみます。

スマホの最初の画面から消えた電話番号

ページの上端から何px下にその文字が初めて出るかを測りました。スマホの1画面は664pxなので、664より小さければ最初の画面に入っています。

Bで電話番号が初めて出るのは3485px、スマホでおよそ5画面スクロールした先でした。電話をかける固定ボタンもなく、2つある電話リンクのうち1つは押せる高さが21pxしかありません。

意外だったのはAのほうです。一文なしのAは、ヘッダー右上と画面下の固定ボタンに「電話する」があり、いつでも電話をかけられました。電話のかけやすさで比べると、賞の一文を足したBのほうが下がったんですよね。見た目は上がっても、お店に必要な情報は後回しになっていました。

Cは、店名、「営業中・次の焼きたて 12:00」、営業時間、定休日、電話番号が最初の画面に収まりました。手描きのパンや流れる文字の帯、焼き上がりのタイムラインといった見た目の工夫も残っています。

Cの見直しの記録も面白かったです。1回目はスマホで横にはみ出して画面の幅が487pxに広がっていたのを自分で見つけ、2回目には21pxしかなかった電話番号の押せる高さを広げていました。さらに4回目、画面下の電話バーと別の電話ボタンが同時に2つ見えるのを、片方が見えている間はバーを隠すように直しています。

あなたのサイトを見に来る人は、まず何を探しますか？パン屋なら、たぶん「今日開いているか」と「電話番号」です。電話番号を探して5画面分スクロールする場面を、想像してみてください。そこを一文で指定しないと、見た目の工夫に押し出されることがありました。

Awwwards、Webby Awards、FWAは何を見る賞か

審査基準にも、使いやすさはちゃんと入っています。2026年10月10日に確かめたAwwwardsの評価ページでは、配点はデザイン40%、ユーザビリティ30%、クリエイティビティ20%、コンテンツ10%です。

Webby Awardsの審査基準は、ウェブサイトを内容、構造と導線、ビジュアルデザイン、機能性、双方向性、革新性、総合体験の7項目で見ます。構造と導線の説明には「情報の優先順位」も書かれています。FWAは公式ページを確認できなかったのですが、Wikipediaの説明では2000年に始まった、Webデザインと開発の優れた作品を日ごとに選ぶ賞です。

では、使いやすさが基準に入っているのに、なぜBは電話番号を下へ追いやったのか。Bの報告に理由は書かれていませんでした。一因は、審査基準の「使いやすさ」と、近所のお客さんが探すものが同じではないことかもしれません。パン屋に来る人は、営業時間を見て電話をかけたいだけだったりします。

もう1つ、賞は人が審査するものです。一文は目標を示す指示で、受賞を約束するものではありません。B自身も報告の最後に「賞を穫れる水準かどうかは私の自己評価です。審査に照らした客観的な裏付けではありません」と書いてきました。

お店のサイトをClaude Codeに頼むときの足し方

Cの書き方を分けると、足す順番はこうなります。

1. 賞の一文で、見た目の目標を上げる
2. 誰が、どの端末で見るかを書く
3. 最初の画面に必ず入れるものを書く
4. それを「見た目より優先して」と書く
5. セルフチェックで毎回確かめさせる

5番目も効いていたと思います。Cは3つの条件を見直しのたびに測っていて、見直しの中で21pxの電話リンクに気づき、直していました。電話ボタンの重複も、見直しの中で自分で見つけています。

最初の画面で探されるものは、業種によって違います。そこを入れ替えれば、ほかの業種にも使えます。たとえば美容室なら、条件の部分をこう書き換えられます。

ただし、見に来るのは近くに住む人や通勤途中の人で、多くはスマホで開く。スマホで開いて最初の画面に営業時間・定休日・予約ボタンが見えること、予約ボタンはタップで予約ページか電話につながること、文字は読みやすい大きさであることは、見た目より優先して。セルフチェックではこの3点も毎回確かめて

会社のサイトなら「問い合わせ先と電話の受付時間」、整骨院なら「受付時間と駐車場の有無」のように、最初の画面に入れたいものを3つに絞って差し替えるのがおすすめです。書き換えるのは、この3つだけです。

Claude Codeに賞の一文を足す前の注意

今回の比較は、各条件1回ずつです。同じ依頼でも作るたびに結果は変わるので、「Bは必ず電話番号を隠す」とまでは言えません。確かめたのはChromiumのスマホ表示で、実機のiPhoneやAndroidでは開いていません。5番目のセルフチェックだけを抜いた書き方や、「見た目より優先して」だけを抜いた書き方も試していないので、どの部分がどれだけ効いたかは分かりません。

一文を足すと、時間とやり取りは増えます。作業時間はAが4分18秒、Bが13分24秒で約3倍。ツールの呼び出しはAの18回に対してBが49回、Cが70回でした。一方で作業時間だけを見ると、CはBより5分短く終わっています。

それと、「セルフチェックを繰り返して」と書かなくても見直しはされていました。一文なしのAも自分でスクリーンショットを撮り、4回見直しています。一文の役割は、見直しを増やすことより、見直すときの目標を見た目の側へ引き上げることにある。これが今回の1回ずつの比較からの私の見立てです。

見た目を変えたいなら賞の一文、お店の役に立たせたいなら、その後ろに「見た目より優先して」を1文。次にお店のサイトを頼むときは、Cの文をそのまま貼って、最初の画面に入れたい3つだけ書き換えてみてください。