Claude Opus 4.8のデザイン既定値を上書きする方法

Claude Opus 4.8には既定の作風(house style)がある

デザインやフロントエンドの生成を頼むと、指定していないのに毎回似た見た目に寄ることがあります。Claude Opus 4.8の公式プロンプトガイドは、これを一貫した既定の作風(house style)と呼んでいます。中身は次の4点です。

• 暖色系のクリーム/オフホワイト背景(#F4F1EA前後)
• セリフ体の見出し(Georgia・Fraunces・Playfair)
• イタリック体の語のアクセント
• テラコッタ/アンバー系のアクセントカラー

編集記事・ホスピタリティ・ポートフォリオ系のブリーフには合います。一方、ダッシュボード・開発者向けツール・フィンテック・医療・エンタープライズアプリでは浮きます。スライド資料とWeb UIの両方にこの既定が出る点も、同じページに書かれています。

厄介なのは、この既定が一見よくできて見えることです。業種もブランドも違う案件で同じ配色と書体が返ってくると、案件ごとの差が出ません。

「クリームを使うな」が効かない理由

この既定は持続的です。「クリームを使わないで」「もっとクリーンでミニマルに」のような汎用の指示は、別の固定パレットに移るだけで、バリエーションを生みません。

ガイドが書いているのは現象までです。筆者の見立てでは、否定形は避ける対象しか伝えず、選ぶ範囲を渡していないためと考えられます。対話型のコーディングでトークンが増える側の話はOpus 4.8でトークンが増える理由にあります。

確実に効くとされる方法は2つです。具体的な代替案を仕様として渡す方法と、実装前に複数案を提案させる方法です。

具体的な代替仕様を渡す

1つ目は、配色・タイポグラフィ・レイアウトの規則を具体値で渡す方法です。ガイドの例は、サプリメントブランド「AEFRM」のデスクトップ向けランディングページ用に、次のような長さのプロンプトを書いています。

Design a desktop landing page for a supplement brand called AEFRM.
 
The visual direction should come from a cold monochrome atmosphere using
pale silver-gray tones that gradually deepen into blue-gray and near-black,
similar to a misted metallic surface.
 
The page should feel sharp and controlled, with a strong sense of
structure and restraint.
 
Use this tonal system across the full page instead of introducing bright
accent colors.
 
Use the uploaded image on the hero design in black and white.
 
The layout should be built with clear horizontal sections and a centered
max-width container. Use 4px corner radius consistently across cards,
buttons, inputs, and media frames. Margins should feel generous, with
enough empty space around each section so the page breathes.
 
Typography should use a square, angular sans-serif with wider letter
spacing than usual, especially in headings and navigation, so the text
feels more engineered and less compressed. Headline text can be large and
uppercase, while supporting copy remains short and sparse. The sub texts
should be written with Alumni Sans SC in 4-6px like tiny little texts on
corners bottom centre like that.
 
For the structure, start with a hero section containing a strong product
statement, one short supporting paragraph, and a clean product placeholder
or packshot frame. Below that, add a benefit grid with three or four
blocks, then a formulation or ingredients section, and finally a cta.
 
Buttons should be flat and precise, with subtle hover changes using
transition: all 160ms ease out where brightness and border contrast shift
slightly rather than using dramatic motion.
 
Color palette should stay within this range:
#E9ECEC, #C9D2D4, #8C9A9E, #44545B, #11171B.

この例が指定しているのは色だけではありません。何を指定しているかを項目に分けると、次のとおりです。

色を「クリームは避ける」ではなく「この5色の範囲に収める」と肯定形で渡している点がもう1つの特徴です。Claude Opus 4.8は、こうした明示的な仕様に正確に従うと説明されています。

実装前に複数案を提案させる

2つ目は、1案をいきなり作らせず、方向性の違う複数案を先に出させる方法です。ガイドは、これまでtemperatureでデザインのバリエーションを出していた場合にこの方法を使うよう案内していて、実行ごとに意味のある違いが出ると説明しています。

Before building, propose 4 distinct visual directions tailored to this
brief (each as: bg hex / accent hex / typeface — one-line rationale).
Ask the user to pick one, then implement only that direction.

使い分け早見表

具体仕様は「範囲」まで書く

具体仕様の書き方で気をつけたいのは、Claude Opus 4.8の文字どおりの指示解釈です。ガイドによれば、4.8はプロンプトを文字どおり明示的に解釈し、特に低いeffortのときにそれが強く出ます。ある項目の指示を別の項目へ勝手に一般化せず、頼んでいないことも補いません。

逆に、広く効かせたいときは範囲を明示します。例文は「この書式を最初の節だけでなく、すべての節に適用する」です。

デザインに置き換えると、次のような書き分けになります。

• 「見出しをサンセリフに」とだけ書くと、指定の対象は見出しです。本文やボタンの書体はこの一文の外にあります
• 「この5色の範囲に収める。見出し・本文・ボタン・カードの全部に同じ範囲を使う」と書けば、対象が文面に載ります
• AEFRM例も、色の指示を「ページ全体に使う」という文で受けています

文字どおりの解釈が強いと説明されているのは低effortです。高effortでの強さは述べられていないので、effortを上げた場合でも、対象の列挙は省かないほうが安全側です。

否定形の指示が効かない現象も、この性質と整合します(筆者の見立てです)。「クリームを避けて」は避ける対象を1つ示しているだけで、選ぶ値の範囲を渡していません。

汎用の「AI slopを避けろ」指示と併用する

Claude Opus 4.8は、以前のモデルより少ないプロンプトで、紋切り型のフロントエンド(利用者が「AI slop」と呼ぶ見た目)を避けられます。Claude Opus 4.5・4.6向けのベストプラクティスの節には、タイポグラフィなどの観点ごとに指示を並べた長い版が載っています。その中には、Space Groteskのような特定のフォントに生成が寄りがちだという注意もあります。4.8向けのガイドでは、次の短い一文で足ります。

<frontend_aesthetics>
NEVER use generic AI-generated aesthetics like overused font families
(Inter, Roboto, Arial, system fonts), cliched color schemes
(particularly purple gradients on white or dark backgrounds),
predictable layouts and component patterns, and cookie-cutter design
that lacks context-specific character. Use unique fonts, cohesive
colors and themes, and animations for effects and micro-interactions.
</frontend_aesthetics>

この一文は、前述の2つの方法と併用する前提で紹介されています。この指示だけでは、クリーム色の既定は外せません。既定の作風そのものは、具体仕様か複数案提案で外します。この一文が受け持つのは、紫グラデーションのような別の紋切り型です。

AEFRM例を自分の案件に置き換える

AEFRM例は、ブランドも色も固定された見本です。ダッシュボードや開発者向けツールに流用するときは、項目の並びだけを借りて中身を差し替えます。次は、社内の運用ダッシュボードを想定した例です。色や数値は説明用の仮の値です。

Design a desktop dashboard for an internal operations team.
 
Visual direction: neutral, dense, and calm. Light gray surfaces, one
blue accent, no decorative gradients.
 
Use 6px corner radius on cards, buttons, and inputs. Keep 16px gutters.
 
Typography: a neutral sans-serif for all text, tabular figures for
numbers. Apply this to every screen element, not just headings.
 
Structure: a left navigation, a row of four summary tiles, then a table.
 
Color palette should stay within this range:
#F5F6F8, #DDE1E7, #9AA3AF, #2F6FEB, #1B1F27.

差し替える場所は、雰囲気の言葉・角丸と余白・書体・構成・色の範囲の5つです。AEFRM例と同じ順に書き、書体の行には前節の「範囲の一文」(すべての要素に適用する)を入れてあります。避けたい色や書体の名前は、どこにも書いていません。

生成されたコードに既定が混ざっていないか調べる

仕様を渡したあとは、出力に既定の作風が残っていないかをコードから確かめられます。ガイドが挙げている既定の値(#F4F1EA前後の背景、Georgia・Fraunces・Playfairの書体)は、そのまま検索語になります。

grep -rniE "F4F1EA|Fraunces|Playfair|Georgia" src/

ヒットしたら、その箇所だけを直す指示を追加するか、仕様の範囲を示す一文を足して再生成します。色だけがヒットして書体が出ないときは、色の指示は効いていて書体の指示が届いていない、という切り分けになります。逆の場合も同様です。ヒット0件でも、近い別の色(たとえば別のクリーム系)に寄っていないかは、画面で見て確かめます。前述のとおり、否定形の指示では別の固定パレットに移るだけのことがあるためです。

低effortでスピードを優先する場面

文字どおりの解釈は低effortで特に強いと説明されているので、スピード優先で低effortを選ぶ生成パイプラインほど、仕様の書き漏らしが結果に出ます。バッチでUI案を大量に作る構成では、仕様のテンプレートに「対象の範囲」の行を最初から組み込んでおくと、案件ごとに書き足す手間と抜けの両方を減らせます。

テンプレートに入れておくとよいのは、次の3行です。

• 色の範囲(16進数のカラーコード)と、その適用対象(見出し・本文・ボタン・カード)
• 書体の系統と、字間・ウェイトの傾向
• 角丸のpx値と、余白の方針

この3行は、AEFRM例が色・形と余白・書体をそれぞれ具体値で書いていた部分に対応します。構成(ヒーローの次に何を置くか)は案件ごとに変わるので、テンプレートには入れず依頼ごとに書きます。この3行を依頼文の冒頭ではなくシステムプロンプトに置く構成もあります。依頼文が短くなり、デザインを名指ししない依頼にも同じ仕様が付きます。

スライドや間接的な依頼にも仕様を持ち込む

ガイドは、既定の作風がWeb UIだけでなくスライド資料にも出ると明記しています。デザインを名指しした依頼だけが対象ではないので、「レポートをスライドにまとめて」「このデータをダッシュボード風に見せて」のような依頼でも、配色と書体の仕様を同じ形で添える価値があります。

毎回書き直すのが面倒なときは、社内テンプレートやスキルの指示文に、色・書体・角丸・余白を仕様として入れておく方法があります。

別のモデルでは何が同じで、何が違うか

同じガイド群に、Claude Sonnet 5向けにも「デザインとフロントエンドの既定値」の節があります。2つのページを並べると、同じ点と違う点が見えます。

紋切り型を避ける短い指示(<frontend_aesthetics>)は、両方のページに同じ文面で載っています。より長い扱いはClaude Codeのfrontend-designスキルにあると、どちらのページも案内しています。このスキルは旧モデル向けに推奨されていた長い版の置き場でもあります。

Sonnet 5では、temperature・top_p・top_kを既定値以外にするとエラー(400)が返ります。Sonnet系の新しい制約として、同じガイドに書かれています。Sonnet 5へ移る場合は、多様性をtemperatureで出す構成から、複数案の提案へ切り替える必要があります。

Claude Opus 5.5の既定の作風と、そこで効く指示はClaude Opus 5.5でAIっぽいフロントエンドを避ける書き方で扱っています。モデルが変わると既定の重心も変わりうるため、移行時は仕様なしで1回生成し、既定の傾向がどれだけ残るかを見てから対策を選ぶ手があります。

関連する変更点

Claude Opus 4.8全体の性能向上やeffort調整・ダイナミックワークフローについてはClaude Opus 4.8が登場にまとめています。Artifacts上でデザインシステムを組みながら共同編集する運用はClaude Code Artifactsのデザインシステムと共同編集で扱っています。

まとめ

既定の作風は否定形の指示では外れません。案件が決まっているなら色・書体・余白を範囲つきの具体値で、方向性が未定なら複数案を先に出させるのが2つの手です。紋切り型への一文は、その両方の補助に回します。