Claude Opus 5.5でAIっぽいフロントエンドを避ける書き方
Claude Opus 5.5はフロントエンド生成で既定の作風に寄ります。「AIっぽさを避けて」では別の既定に移るだけで、避けたいパターンを名指しで列挙する指示が有効とされています。
Claude Opus 5.5のフロントエンド生成には既定の型がある
Claude Opus 5.5にデザインの方向性を指定せずフロントエンド生成を頼むと、いくつかの既定スタイルに寄ることがあります。暖色系のクリーム/オフホワイト背景、見出し中のイタリック体アクセント語、「01/02/03」のような番号付きセクションラベル、モノスペースフォントのラベル、端が完全な丸型のピル型ボタン。この5つが、公式のプロンプトガイドが例として挙げている避けたいパターンです。
裏を返せば、指定なしで生成させたときにClaude Opus 5.5が実際に選びやすい既定の候補でもあります。ブランドガイドラインの無いプロトタイプや個人サイトのような依頼内容ほど、この既定は表に出やすくなります。
「AIっぽさを避けて」では別の既定に移るだけ
既定を外そうとして「AIっぽい見た目を避けて」「もっとジェネリックじゃない感じで」といった汎用の否定指示を出しても、効果は薄く、この種の指示は「何を選ぶか」をモデルに渡していません。別の既定に置き換わるだけ、というのが公式の説明です。
同じ傾向は、Claude Opus 4.8の既定の作風を扱ったClaude Opus 4.8のデザイン既定値を上書きする方法でも指摘されています。あちらは配色・書体を16進数やフォント名で仕様化する方法が効く手立てでしたが、Opus 5.5では別の形を取ります。
名指しで外す指示の書き方
有効なのは、避けたいパターンを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.ポイントは「AIっぽさ」という評価語ではなく、背景色・見出しの装飾・ラベルの形式・ボタンの形という具体的な要素を1つずつ名指ししている点です。Claude Opus 5.5はこの形の指示に良く従います。
名指しのリストが効きやすい背景には、指示の解釈に委ねられる余地の大きさの違いがあります。「AIっぽさを避けて」というカテゴリー単位の指示は、大枠こそ伝わっても、実際にどの要素がそのカテゴリーに該当するかの判断をモデル側に残します。背景色・ラベルの形式・ボタンの形を1つずつ名指しするリストは、この判断の余地そのものを狭める指示です。
反復して除外リストを拡張する
もう1つの運用上のポイントは反復です。1回生成させた結果を確認し、リストに挙げていない別の既定パターンが出ていれば、それをリストに追加して再生成する。最初の指示で完全に既定を外し切る必要はなく、生成 → 確認 → 追記のサイクルを回す前提の技法です。
実務では次のような手順になります。まず方向性を指定せずに1回生成させます。次に、先に挙げた5パターン以外にも気になる要素(特定の配色・アイコンの使い方・余白の取り方など)が出ていないか確認します。見つかった要素を「Do not use」の列に追記し、同じ依頼内容で再生成します。狙った見た目に近づくまで、この工程を繰り返します。
汎用の回避プロンプトとどう組み合わせるか
Claude Opus 4.5・Opus 4.6向けの公式プロンプトガイドは、フォント・配色・レイアウト・背景をカテゴリーごとに指定する長文の<frontend_aesthetics>システムプロンプトを提供しています。汎用フォント(Inter・Roboto・Arial)や白背景への紫グラデーション、予測可能なレイアウトを避けるよう求める内容で、モデルを問わない土台としての役割です。
このシステムプロンプトは、避けるべき要素だけでなく選ぶべき方向性も示しています。Typographyでは個性的で美しい書体を選び、Arial・Interのような汎用フォントを避けるよう求めます。Color & Themeでは、色をCSS変数で一貫させたうえで、均等に配色を散らすより大胆なアクセントを効かせる配色を優先し、IDEのテーマや文化的な美学からインスピレーションを得るよう促します。Motionでは、細かなマイクロインタラクションを積み上げるより、ページ読み込み時の1つの演出(段階的なフェードインなど)に集中するほうが効果的だとしています。Backgroundsでは、単色の背景に頼らず、グラデーションや幾何学パターンで奥行きを作るよう求めています。
同じシステムプロンプトには「Avoid generic AI-generated aesthetics」という項目もあります。使い古されたフォントファミリー、ありきたりな配色、予測可能なレイアウト、金太郎飴的なデザインの4つを名指しで避けるよう求める内容で、Opus 5.5のフロントエンド既定パターンと問題意識は同じです。カテゴリー単位の抽象的な回避指示と、具体パターンの名指しという2つの粒度が、同じガイドの中に併存していることになります。
Opus 5.5向けのガイドが追加しているのは、この土台とは別のレイヤーです。カテゴリー単位の広い回避指示だけでは埋まらない、Opus 5.5固有の具体的な既定パターンを、名指しのリストで狙い撃ちする形になります。両者は矛盾しません。カテゴリー単位の土台指示に、モデル固有の既定パターンを名指しで追記する組み合わせのほうが筋が通ります。
使い分け早見表
| 状況 | 向く手法 | 出典 |
|---|---|---|
| Opus 5.5でブランド指定のないプロトタイプを作る | 向く手法既定パターンを名指しで除外 + 反復 | 出典Opus 5.5プロンプトガイド |
| フォント・配色・レイアウトの一般的な傾向から外したい | 向く手法カテゴリー単位の<frontend_aesthetics>指示 | 出典best-practicesガイド(Opus 4.5/4.6基準) |
| 配色・書体をブランド仕様に完全一致させたい | 向く手法16進数カラーコードなど具体仕様を渡す | 出典Opus 4.8デザイン既定値の記事 |
| 方向性が複数考えられ選びたい | 向く手法実装前に複数案を提案させる | 出典Opus 4.8デザイン既定値の記事 |
API以外の面でも同じ考え方が使えるか
このガイドはAPI向けのプロンプト設計を対象にしていますが、示されている指示は自然文のテキストです。Claude CodeのシステムプロンプトやCLAUDE.mdに書く指示にも同じ考え方を持ち込めます。フロントエンド作業を伴うプロジェクトのCLAUDE.mdに、避けたいパターンの列挙をルールとして書いておけば、依頼のたびに同じ指示を繰り返す手間を省けます。
API以外では、Claude Design(canvas上でClaudeと対話しながらデザインを生成・反復するツール)でも同じ考え方が使えます。公式ガイドは、API外のフロントエンドデザイン作業にはClaude Designのcanvasが用意されていると案内しています。対話の中で「この配色は使わず、こちらの方向で」と名指しで伝えるやり取りは、API向けプロンプトの技法と同じ理屈で機能します。
Artifacts上でデザインシステムを育てながら共同編集する運用はClaude Code Artifactsのデザインシステムと共同編集で扱っています。Claude Codeの既定モデルがOpus 5.5に切り替わった経緯はClaude Code v2.1.280にまとめています。effort調整やthinking無効プロンプトの移行など、Opus 5.5への移行に伴う他のプロンプト調整はOpus 5.5でthinking無効のプロンプトを移行するで扱っています。
よくあるつまずき
- 列挙する要素が少なすぎる: 公式の例は5パターンですが、これは1つの具体例であり網羅リストではありません。自分のブリーフで実際に出た要素を追加していく前提です。
- カテゴリーと具体パターンを混同する: 「派手な色を避けて」のようなカテゴリー単位の指示は、Opus 5.5固有の既定パターンには効きにくい部類の指示です。色そのものでなく、背景色・ラベル形式・ボタン形状のように、UIの要素単位で書きます。
- 1回で完成を期待する: 反復前提の技法なので、初回の生成結果を「外し切れていない」とみなして終わらせず、次のリストに反映させる工程を組み込みます。
- カテゴリー指示と名指しリストを1つの指示に無秩序に混在させる: 両者は組み合わせられますが、抽象的な方向性の指示と具体的な除外リストをただ並べるだけでは、モデルがどちらを優先すべきか読み取りにくくなります。カテゴリー指示は方向性の土台、名指しリストは実際に出た既定パターンの上書き、と役割を分けて書きます。
よくある質問
反復は何回繰り返せばよいか
公式ガイドは反復回数の目安を示していません。狙った方向に近づくまで生成 → 確認 → 追記を繰り返す運用だけが説明されており、固定の回数を決め打ちにする根拠はありません。1回目の結果で新しく気づいたパターンをリストに足し、変化がなくなった時点を目安に切り上げる進め方が実務的です。
Opus 4.8で出ていた既定パターンはOpus 5.5でも同じか
Opus 4.8の既定(暖色クリーム背景+セリフ体見出し)と、Opus 5.5のガイドが挙げる5パターン(クリーム背景・イタリック体アクセント・番号付きラベル・モノスペースラベル・ピルボタン)は一致しません。既定の候補自体が世代ごとに変わっているということです。モデルを切り替えた際は、まず指定なしで1回生成させて既定の傾向を確認してから対策を判断するのが確実です。
まとめ
Claude Opus 5.5はフロントエンド生成で、クリーム背景・イタリックアクセント・番号付きラベル・モノスペースラベル・ピルボタンといった既定パターンに寄りやすいモデルです。「AIっぽさを避けて」という汎用の指示は、別の既定への横移動を招くだけで終わります。効くのは、避けたいパターンを1つずつ名指しで列挙し、生成結果を見て反復的にリストを拡張していく指示です。カテゴリー単位の<frontend_aesthetics>指示や、Opus 4.8で効くとされた具体仕様の指定と組み合わせれば、Opus 5.5でも狙った方向のフロントエンドに近づけられます。