ブランドカラーと違う色が出続ける——原因と対処法

やってしまいがちな指定方法

最初、こんなふうに書いていた。

コーポレートカラーの青で作って

当然ズレる。「青」の解釈はClaude Designに委ねられるので、毎回微妙に違う色が出てくる。次にHEXコードを使ったら改善したが、それでも完全には一致しなかった。

メインカラー: #1E3A8A で統一してください

これで大体あっているんだが、影や補色の部分で勝手に調整が入る。

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

本当の原因

Claude Designは「見た目のバランス」を優先する。指定した色が「重すぎる」「コントラストが低すぎる」と判断すると、自動的に近似色に置き換える仕様になっている。

最初は「バグだ」と思ってサポートに問い合わせたが、仕様だと返ってきた。これを知らずに「また違う色が出た」と無駄に試行錯誤を繰り返していた時期が1ヶ月ほどあった。

効いた対処法

1. RGBも一緒に渡す

メインカラー: #1E3A8A (rgb: 30, 58, 138) — 絶対にこの値を使用すること

HEXだけより格段に精度が上がった。なぜかは分からないが、経験上これが一番効く。

2. 「カラーを変えるな」と明示する

指定したカラーコードは変更しないこと。
視認性の問題があると判断した場合も、色は変えずに
他の要素（サイズ・余白・背景）で調整すること。

この一文を冒頭に入れるだけで、勝手な色変換がほぼなくなった。

3. スタイルガイドとして最初に渡す

毎回プロンプトに色を書くのではなく、セッション冒頭でブランドカラー定義として渡す形式が安定する。

## ブランドカラー定義（変更禁止）
Primary:    #1E3A8A
Secondary:  #60A5FA
Accent:     #F59E0B
Background: #FFFFFF
Text:       #1F2937

これ以降のすべてのリクエストにこの定義が効くので、毎回書く手間も省ける。

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

まだ残っている問題

グラデーションの指定は、まだ不安定。「#1E3A8Aから#60A5FAへのグラデーション」と書いても、向きや比率が毎回変わる。これは今のところ解決策が見つかっていない。

現状の妥協策は「グラデーションはFigmaで後乗せする」。完璧を求めるなら、単色で生成してエクスポート後に手で調整するのが現実的だと思う。

※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。