Claude Opus 5.5でAIっぽいフロントエンドを避ける書き方

Claude Opus 5.5のフロントエンド生成には既定の型がある

Claude Opus 5.5にデザインの方向性を指定せずフロントエンド生成を頼むと、いくつかの既定スタイルに寄ります。公式のプロンプトガイドが避ける対象として例に挙げているのは、クリーム/オフホワイトの背景、見出し中のイタリック体アクセント語、「01/02/03」のような番号付きセクションラベル、モノスペースフォントのラベル、端が完全な丸型のピル型ボタンの5つです。

ブランドガイドラインの無いプロトタイプや個人サイトのように、方向性を決める材料が少ない依頼ほど、この既定は表に出やすくなります。

「AIっぽさを避けて」では別の既定に移るだけ

「AIっぽい見た目を避けて」「もっとジェネリックじゃない感じで」といった汎用の否定指示は、既定のスタイルを別の既定のスタイルに替えるだけに終わる、というのが公式の説明です。

世代をまたいで同じ傾向が指摘されています。Opus 4.8でも、「クリームを使わないで」と書くと別の固定パレットに移るだけでした。配色・書体を16進数やフォント名で仕様化する方法が効いた経緯はClaude Opus 4.8のデザイン既定値を上書きする方法にあります。ただし既定そのものは世代で入れ替わっており、2つのガイドの記述を並べると次のとおりです。

クリーム背景とイタリック体は両世代に出てきますが、セリフ体見出しとアクセントカラーはOpus 4.8側、番号ラベル・モノスペース・ピル型ボタンは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っぽさ」という評価語ではなく、背景色・見出しの装飾・ラベルの形式・ボタンの形という具体的な要素を並べている点が違いです。Claude Opus 5.5はこの形の指示によく従います。

除外リストは反復して育てる

名指しのリストは、最初から完成させる必要がありません。ガイドは、1回目の結果でどのスタイルが代わりに使われたかを確かめ、必要ならリストを延ばす進め方を示しています。

公式のスキルは「既定」をどこまで具体的に挙げているか

Claude Codeのリポジトリには、フロントエンド生成用のスキルfrontend-designが公開されています。best-practicesガイドのFrontend design節も「full skill definition」としてこのスキルへリンクしています。スキルの本文には、生成されたデザインが近ごろ偏りやすい型が5つ列挙されています。Opus 5.5のガイドの5項目より粒度が細かく、除外リストの書き足しの参考になります。

スキルの文面には、ピル型ボタンの名指しはありません。Opus 5.5のガイドの例だけに入っている項目なので、両方を見比べて自分のブリーフに足すと漏れが減ります。

書体まわりでは、見出しの一語や一句だけをイタリック・太字・別の色で目立たせる処理、大文字のラベル、内容の上に置く不要なラベルが、生成ページの「見分けやすい癖」として名指しされています。Opus 5.5の例にあるイタリック体アクセント語は、この癖と同じものを指しています。見出しの強調を外したいときは、要素と書き方の両方を書くと伝わります。

もう1つ、除外リストの扱い方に関わる記述があります。スキルは、これらの型を「特定のブリーフには正当な選択になりうる既定」と位置づけ、ブリーフが方向を指定している軸ではその指定に従い、指定が無い軸でだけ既定に頼らないよう求めています。番号ラベルも、内容が手順や年表のように実際に順序を持つ場合にだけ適切で、付ける前に内容が連番かを確かめるという書き方です。除外リストに番号ラベルを入れる場合は、手順を説明するページまで一律に番号が消えることを織り込んでおく必要があります。

作り方の面では、スキルは二段構えを取ります。まず色(4〜6個の名前付き16進数)・書体と役割・レイアウト案・原則からなる小さな設計計画を出させ、その計画が「似た依頼なら誰でも出す汎用の案」に見えたら直してからコードを書く、という流れです。計画段階を挟めば、除外リストに挙げていない既定を実装の前に見つけやすくなります。

ブリーフに足せる材料: 題材・読み手・ページの役割

除外リストは「何を避けるか」を渡す手段です。スキルは逆側からも手当てしています。ブリーフに題材が書かれていなければ、デザインに入る前に、具体的な題材を1つ、読み手、ページの主な役割を自分で決め、依頼主に確認するよう求めているのです。8〜11歳向けの玩具と金融アナリスト向けのダッシュボードでは見た目がまるで違うはずだ、という例が添えられています。

個人サイトのダミーデータ依頼のように題材が空のままだと、既定に頼る余地が増えます。「誰が、何のために開くページか」を1〜2行で先に渡しておけば、除外リストを短く済ませやすくなります。ヒーロー部分についても、大きな数字・小さなラベル・補足の統計・グラデーションのアクセントという組み合わせは既定の扱いで、題材にとって最適なときだけ使うよう書かれています。

動きと文面の既定も外す対象になる

見た目の配色や書体だけでなく、動きと文面にも既定があります。

動きについて、スキルは、利用者の操作と無関係に動く演出は控えめにし、注意を引く目的がある場面に限るよう求めています。セクションごとのフェードとスライドアップ、全カードへのホバー演出は「AI生成に見える既定」の例です。ページ読み込み時の演出を1回だけ仕立てるほうが印象に残る、という趣旨は、Opus 4.5・4.6向けの<frontend_aesthetics>にも出てきます。一方、開く・展開する・確定するといった操作への反応は、何が変わったかを示すなら歓迎されています。

文面については、プレースホルダーのコピーも「テンプレ臭」の源になると書かれています。ボタンは「送信」より「変更を保存」のように押した結果を言い切り、同じ操作は画面をまたいで同じ名前にし、エラーは何が起きたかと直し方を書く、という方針です。ダミーデータ前提のプロンプトでは、文面のルールも1行添えておくと効きます。

外したあとの仕上げ: 派手さを1か所に絞る

既定を全部外すと、今度は全要素を個性的にしたくなります。スキルはここにも歯止めをかけています。大胆さを使うのは1か所に絞り、記憶に残る要素を1つ決めて、周りは静かに抑えます。目的に役立たない装飾は削ります。

あわせて、品質の下限は宣言せずに満たすよう求めています。モバイル幅までの対応、キーボードフォーカスの可視化、モーション低減設定への対応、視覚的なアクセシビリティ、調和した配色です。作りながら自分の出力を批評し、環境が許せばスクリーンショットで確かめる手順も書かれています。除外リストの反復で「代わりに何が出たか」を見るときも、同じスクリーンショットが使えます。

汎用の回避プロンプトとどう組み合わせるか

Claude Opus 4.5・Opus 4.6向けの公式プロンプトガイドは、フォント・配色・動き・背景をカテゴリーごとに指定する長文の<frontend_aesthetics>システムプロンプトを載せています。Inter・Roboto・Arialのような汎用フォント、白背景への紫グラデーション、予測可能なレイアウトを避けるよう求める内容で、モデルを問わない土台として使えます。

このプロンプトの末尾は、Space Groteskを例にして、生成のたびに同じ書体へ収束することを避けるよう求めています。カテゴリー単位の指示の中でも、収束しやすい具体名は名指しされているわけです。

Opus 5.5向けのガイドが足したのは、土台とは別のレイヤーです。カテゴリー単位の広い回避指示で埋まらない、Opus 5.5固有の既定パターンを名指しのリストで狙い撃ちします。両者は矛盾しないので、土台の指示に名指しのリストを追記する組み合わせが使えます。

APIの外で使うとき

このガイドはAPI向けのプロンプト設計を対象にしていますが、示されている指示は自然文です。Claude Codeでフロントエンド作業をするプロジェクトなら、CLAUDE.mdに避けたい要素のリストを書いておく使い方もあります。次は、上のスキルの考え方を取り入れた書き方の一例です。

## フロントエンドのデザイン
 
- ブリーフに配色・書体・レイアウトの指定があれば、それを優先する
- 指定の無い軸では、次を使わない: クリーム/オフホワイト背景、
  見出し中のイタリック体アクセント語、モノスペースのラベル、
  ピル型ボタン
- 番号付きラベルは、内容が手順や年表のときだけ使う

Claude Code側の事情では、Opusの既定がOpus 5.5に替わったのはClaude Code v2.1.280です。effortの調整やthinking無効プロンプトの移行など、Opus 5.5への移行に伴う他のプロンプト調整はOpus 5.5でthinking無効のプロンプトを移行するにあります。

API以外では、Claude Designも選択肢です。best-practicesガイドは、API外のフロントエンドデザイン作業にはキャンバスとデザインツールを備えたClaude Designがあると案内しています。Artifacts上でデザインシステムを育てながら共同編集する運用はClaude Code Artifactsのデザインシステムと共同編集で扱っています。

まとめ

評価語ではなく要素を名指しし、出力を見て新しい既定を足していくのが、Opus 5.5で既定の作風を外す基本です。ブリーフが方向を決めている軸は除外リストより指定を優先する、というスキルの考え方を添えておけば、必要な番号ラベルまで消えることを避けられます。「AIっぽさ」を言い換えて重ねるより、要素の名指しを1つ足すほうが、次の出力を確実に動かします。