「なんか安っぽい」を脱する——ビジュアルヒエラルキーをClaude Designに正確に伝える方法

Claude Designでデザインを生成して、「なんか思ってたより安っぽい」と感じた経験、ほぼ全員あると思う。

原因を突き詰めると、だいたいビジュアルヒエラルキー（視覚的階層）が崩れていることが多い。フォントサイズが全部似たり寄ったり、余白が均一すぎる、重要な要素と補足情報が同じ重さに見える——そういうやつ。

プロのデザイナーは無意識にヒエラルキーを作るが、Claude Designはそれを指示しないと作ってくれないことがある。

なぜヒエラルキーが崩れるのか

最初にやった失敗がこれだった。

「サービス紹介ページを作って。タイトル、キャッチコピー、特徴3つ、お問い合わせボタン」

これだと Claude Design は全要素を「並列」と解釈する。タイトルもキャッチも特徴も、同じくらい重要な情報として扱われる。結果、フォントサイズに大きな差がつかず、全部ふわっとした印象になる。

「情報を並べる」のではなく、情報の重み付けを伝えるのが正しいアプローチだった。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

効いた指示パターン3つ

1. サイズを数値で明示する

「タイトルは72px、キャッチコピーは28px、本文は16px。
タイトルと本文のサイズ差は最低でも4倍以上つけること」

「大きく」「小さく」という曖昧な指示は通じない。数値を使うと安定する。比率で指定するのも良い。

2. 「主役・脇役・エキストラ」で役割を定義する

「このデザインの主役はキャッチコピーのみ。
サービス名は脇役でキャッチの半分の存在感。
特徴リストはエキストラで、目に入るが主張しない」

この「主役・脇役・エキストラ」という言い方が意外と通じる。職場で使える表現なので気に入っている。

3. コントラストを数値で指定する

「背景とのコントラスト比は主役テキストで7:1以上、
脇役テキストで4.5:1、補足情報で3:1を目安に」

コントラスト比まで指定するのは最初は面倒に感じたが、これをやるだけで「なんか読みにくい」が激減した。アクセシビリティ基準（WCAG）の数値をそのまま使えるので調べやすい。

余白もヒエラルキーの一部

余白の均一化も「安っぽい」の原因の一つ。

「要素間の余白は等分にしないこと。
タイトルの下は64px、各特徴の間は24px、
セクション間は96px。メリハリをつけること」

余白に差をつけることで、「ここで一息つく」「ここは密集している」という読み取りやすさが生まれる。

実際にやってみると、プロンプトを書くのに5分かかるが、修正のやり直しが激減した。最初から指定するほうが結果的に速い。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

よくある失敗

• 「目立つように」 — 何を目立たせたいのかを明示しないと、全部が目立とうとする
• 「バランスよく」 — バランスという言葉は均等配置に解釈されがち。「メリハリのある配置」のほうが伝わる
• 太字を多用する指示 — 全部太字にすると何も強調されない。強調は1ページに1〜2箇所まで、と制限を入れると良い

まとめ

ビジュアルヒエラルキーは「感覚」ではなく「数値と役割」で指示できる。

• フォントサイズは数値で差をつける（最低3〜4倍の差）
• 各要素に「主役・脇役・エキストラ」の役割を割り当てる
• 余白も均等にせず、意図的に差をつける
• コントラスト比を数値で指定する

これをやるようになってから、「なんか安っぽい」という感想をクライアントから言われる頻度が明らかに減った。