カラーパレットを正確に指定する方法

「いい感じの青」は伝わらない

Claude Designは色の曖昧な指定が苦手だ。「さわやかな青」「温かいオレンジ」みたいな感覚的な表現で指示すると、毎回違う色が返ってくる。ブランドカラーを再現したいとき、これが地味に困る。

解決策はシンプル：HEXコードで直接指定すること。

プライマリカラー: #2563EB
セカンダリカラー: #10B981
テキスト: #1F2937
背景: #FFFFFF

これだけで精度がぐっと上がる。

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

カラーパレットの渡し方3パターン

パターン1: HEXコードを箇条書きで渡す

最もシンプルで確実。プロンプトの冒頭に置くと効きやすい。

以下のカラーパレットを必ず使用してください：
- Primary: #2563EB（メインアクション・見出し）
- Secondary: #10B981（成功・アクセント）
- Neutral: #6B7280（本文・補助テキスト）
- Background: #F9FAFB
- White: #FFFFFF

パターン2: 役割とセットで渡す

色コードだけでなく「何に使う色か」を明示すると、Claude Designが判断に迷わない。ボタン色・背景色・テキスト色がバラバラにならなくなる。

パターン3: CSS変数形式で渡す

--color-primary: #2563EB;
--color-success: #10B981;
--color-text: #1F2937;

エンジニアとの連携があるなら、最初からCSS変数で渡すと後工程がラク。コピペでそのまま使える。

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

よくある罠：「参考に」と言うと使われない

「参考程度にこの色を使って」という指示は危険。Claude Designが勝手に「調整」して全然違う色を選ぶことがある。

ブランドカラーを忠実に使わせたいときは**「必ず使ってください」「このカラーパレットから外れないでください」**とはっきり書く。

実際にやらかした失敗の例：

• プロンプト：「コーポレートブルーの雰囲気で、参考色として #2563EB」
• 結果：全然違うトーンの青緑が出てきた

修正後のプロンプト：

• 「プライマリカラーは必ず #2563EB を使用。他の色はこのカラーから派生させてください」

この一言で精度がかなり変わった。

グラデーションを指定するとき

グラデーションは特に指定が難しい。「グラデーション」とだけ言うと Claude Design が独自解釈する。

有効な指定：

グラデーション: #2563EB から #7C3AED（左から右）
使用箇所: ヘッダー背景のみ
テキストカラー: 白 (#FFFFFF)

「どこに」「どの方向に」「何色から何色へ」を全部書く。面倒に見えるが、これを省くと3回修正することになる。

どうしても色がズレるとき

HEXコードを指定しても微妙にズレることがある。そのときの対処法：

1. 絶対指定を使う：「もう少し明るく」より「#3B82F6 を使って」のほうが確実
2. ブラウザの開発者ツールで色値を確認：スクリーンショットの色が本当に合っているか検証
3. プロンプトの先頭にカラーパレットを置く：末尾に書くと読み飛ばされやすい

カラーパレット指定は最初の一手が肝心。曖昧な指定でスタートすると、後から直すのが意外とつらい。最初から HEX コードで固めておくと、修正ループが減って結果的に時間を節約できる。