Claudeに作らせたWebページが毎回同じ見た目。名指しで直せるか？

「見た目はお任せで」とClaudeにWebページを作らせたら、背景の色も見出しの飾りも、毎回同じ見た目になっていませんか？　Claude Opus 5.5の公式ガイドには、避けたいデザインを具体的に名指しした指示にはよく反応する、と書かれています。校正の赤字でも、通じるのは「読みにくい」より「この語を削って」のほうなんですよ。

Claudeに任せたWebページは、なぜ同じ見た目になるのか？

Claude Opus 5.5向けの公式ガイドに「フロントエンドデザインのデフォルト」という節があります。フロントエンドは、ブラウザで見える画面の部分のことです。デザインの方向性を示さずに頼むと「いくつかのデフォルトのスタイルに頼る」、というのが公式の説明です。

Claude Opus 5.5へのプロンプティング

Claude Opus 5からの動作の違いと、それに対処するプロンプトおよびハーネスのパターン：エフォートの調整、API統合とチャットにおける思考の動作、進捗更新、無人実行およびマルチエージェントのタスク、セーフガードによる拒否、フロントエンドデザイン、複雑な視覚入力、マルチアプリワークフロー、ユーザーメッセージ内の貼り付けテキスト。

platform.claude.com

このガイドは主にAPIで組み込む開発者向けの資料で、想定しているのは素のHTMLとCSSで作るWebページです。claude.aiのチャット画面で同じ傾向が出るかまでは書かれていません。避けたいものを名指しする発想も、2025年10月の公式Cookbook「Prompting for frontend aesthetics」に、よくあるデフォルトを名指しするという趣旨ですでに載っています。

ただ、デフォルトの中身を公式は一覧にしていません。以前の公式ブログでは、指示がないとInterフォント、白地に紫のグラデーション、最小限のアニメーションに寄りがちだと説明されていました。Opus 5.5の節で「使わないで」の例に挙がっているのは、クリーム色の背景や「01/02/03」の番号ラベルです。公式はこれが今のデフォルトだとは明言していませんが、例に選ばれる顔ぶれは変わっています。

固定のNGリストを覚えても、モデルが替われば外れるかもしれません。前回Claudeに作らせた画面の背景が何色だったか、思い出せますか？　赤字はいつも、目の前の画面を見て入れるものです。

AIっぽいデザインを避ける頼み方、赤字にすると3段階

広報誌の校正で入れる赤字にも、質の差があります。「全体的に読みにくい」とだけ書いて返した原稿は、書き手がどこを触ればいいか分からず、別の読みにくさに置き換わって戻ってきます。「『〜において』を『〜で』に」と書けば、その1か所は迷わず直せます。

Claudeへの頼み方も、同じ3段階に並べられます。

落とし穴は真ん中の段です。公式が例に挙げているのは英語の「avoid a generic AI look」という指示で、これではデフォルトが入れ替わるだけ、とされています。日本語の「AIっぽくしないで」も同じ種類のぼかした赤字だ、とわたしは見ています。

あなたが前回Claudeに出した依頼は、どの段だったでしょうか？　お任せかぼかしだったなら、次は1行だけ名指しを足してみる余地があります。

避けたいデザインの名指しは、部品の名前で書く

公式の例文は英語で、こう書かれています。

Output a vanilla HTML/CSS personal website with placeholder data. Do not use a cream or off-white background, italic accent words in headlines, numbered "01/02/03" section labels, monospace labels, or pill-shaped buttons.

仮のデータで素のHTMLとCSSの個人サイトを作らせ、5つのデザインを使わないよう名指ししています。この5つは、画面の4つの部品に分けて読めます。

右の列は、どれも校正でいう「全体的に」の赤字です。受け取った側は、何を消せばいいか決められません。名指しは、赤ペンで丸をつけられる場所を指す言葉で書きます。色、文字の飾り、番号、形のように、見れば誰でも同じ箇所を指せる言葉ですよ。

日本語で頼むなら、たとえばこう書けます。公式の例文をわたしが講座の案内ページ向けに書き直したもので、公式の訳文ではありません。

仮の文章と仮のデータで、素のHTMLとCSSだけを使った講座の案内ページを作ってください。
次のデザインは使わないでください。
- クリーム色やオフホワイトの背景
- 見出しの中で、強調したい語だけを斜体にする飾り
- 「01/02/03」のように番号を振った節ラベル
- 等幅フォントで書いたラベル
- 両端が丸いピル型のボタン

前回の画面で、赤ペンで丸をつけたくなった部品はどれでしょう？　その部品を、上の5行に足すか入れ替えるところから始めてみましょうか。

Claudeの1回目の画面を見て、名指しのリストを1行足す

公式は、最初の結果が代わりにどのスタイルを使ったかを確認し、必要に応じてリストを広げるよう勧めています。校正でいう再校です。初校の赤字が直ったら、今度は別の箇所が目に付く。それが普通の流れです。

試すなら、次の順番がやりやすいかもしれません。

1. 仮の文章と仮のデータで、名指しなしで1回頼む
2. 出てきた画面で気になった部品を、部品の名前で書き出す
3. 同じ依頼文の末尾に「次のデザインは使わないでください」と書き出した部品を足し、もう一度頼む
4. 2回目の画面で、消した部品の代わりに何が出たかを見て、リストに1行足す

2回目で何がどれだけ変わるか、公式ガイドに数字は載っていません。そこは、ご自分の画面で確かめるしかない部分です。

足していったリストはメモに残し、次の依頼に貼れるようにしておくと便利です。校正でいう表記ルール集で、赤字を毎回ゼロから書かずに済みます。

Webページを頼む前に決めること。指定色、読みやすさ、公開の手順

名指しが伝えるのは「使わないもの」だけで、「何を使うか」は別に渡す必要があります。ここから先は公式ガイドに書かれた話ではなく、職場の資料で気をつけたいことです。

• 指定色とロゴ: 会社や役所に決まった色があるなら、色の値を依頼文に書く。避けたい色だけ書くと、残りはClaudeが選ぶことになる
• 読みやすさ: 本文の文字の大きさや、背景と文字の色の差を条件として書く。「見やすく」だけでは好みの赤字になる
• 仮データ: 試す段階では、実在の名簿や個人情報、公開前の数字を貼らない
• 公開の手順: 作ったページを外に出すなら、職場の公開ルールと上長の確認を先に済ませる

あなたの職場には、色やフォントの決まりがありますか？　あるなら、名指しのリストより先にそれを依頼文の頭に書いておくと、Claudeが選ぶ余地を減らせます。

もう1つ、公式ガイドが話しているのはHTMLとCSSで作るWebページです。スライドやWordの資料で同じ書き方が通じるかは書かれていないので、そちらは試して確かめてからにしましょう。

次にClaudeへ頼むときは、赤字3つから

次にClaudeがWebページを作ったら、気になった部品を3つ、部品の名前で書き出してみましょうか。「なんとなくAIっぽい」を「クリーム色の背景」「見出しの斜体」と言い換えられたら、それがそのまま次の依頼文になります。赤字は具体的なほど、受け取った側が迷わずに済みますよ。