グラデーションを正確に指定するコツ——なんとなく任せると毎回違う色が出る

グラデーション、難しい。

正確に言うと「指示が難しい」のではなく、何となく指示するとClaude Designが毎回違う解釈をするのが問題だ。「青からオレンジのグラデーション」と書くだけでは、方向が左→右になることもあれば上→下になることもある。青の明度が毎回違う。オレンジが3パターンくらい出てくる。これを最初に理解していなかったせいで、同じバナーを何枚も作り直す羽目になった。

「任せる」と何が起きるか

試しに「青とピンクのグラデーション背景でバナーを作って」と指示すると、こういうことが起きる。

• 1回目: 左→右、深い紺×明るいピンク
• 2回目: 上→下、水色×薄いサーモン
• 3回目: 斜め45度、コバルト×マゼンタ

全部「青とピンクのグラデーション」ではあるが、テイストがまるで違う。ブランドカラーがある仕事では絶対に使えない。

正確な指定に必要な3要素

グラデーションを狙い通りに出すには、最低でも以下を明示する必要がある。

1. 開始色と終了色をhex値で指定

#1A6DB5（青）から#F06A2A（オレンジ）へのグラデーション

色名ではなくhex値にすると、解釈のブレがほぼなくなる。「ブランドカラーの青」という書き方は、Claude Designが独自判断する余地を与えてしまう。

2. 方向を角度か方向ワードで指定

方向: 左から右（0度）
方向: 斜め左上から右下（135度）
方向: 上から下（90度）

CSSのlinear-gradientと同じ感覚で角度を書くと通じやすい。

3. 中間色・カラーストップの位置

2色のグラデーションなら省略できるが、3色以上や「真ん中あたりで急に色が変わる」ような指定はカラーストップの位置も書く。

#1A6DB5（0%）→ #FFFFFF（60%）→ #F06A2A（100%）

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

実際に効いたプロンプト例

以下のテンプレートを使い始めてから、やり直しがほぼなくなった。

【背景グラデーション仕様】
・開始色: #1A6DB5（0%位置）
・終了色: #F06A2A（100%位置）
・方向: 左から右（→）
・グラデーションタイプ: linear（線形）
・opacity: 100%（半透明にしない）

これを本文プロンプトの冒頭に貼るようにしたら、再生成のたびに同じグラデーションが出てくるようになった。

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

ラジアル（放射状）グラデーションの罠

ラジアルグラデーションも同じ問題がある。加えて「中心点の位置」が指定できていないと、毎回ずれる。

放射状グラデーション、中心位置: 左30%・上50%あたり
内側: #FFFFFF（明るい白）
外側: #0F1A2B（暗い紺）

「中央から放射状に」だけだと、どこが中央か解釈が揺れる。コンテナの中央なのか、テキストの中央なのか。

テキストへのグラデーション適用

背景だけでなくテキスト自体にグラデーションをかけるケースも増えてきた。これはより指示が細かくないとぶれやすい。

見出しテキストにグラデーション適用:
・色: #FF6B35（左）→ #9B59B6（右）
・グラデーション方向: テキストに沿って左から右
・他の要素はグラデーションなし（背景は単色 #0A0A0A）

「テキストをカラフルに」という指示だと、文字ごとに色を変えるパターンが出てきたりするので要注意。

まとめ

Claude Designのグラデーション指定は「抽象的に指示するほど毎回違う結果が出る」という性質がある。hex値・方向・カラーストップ位置の3点セットを書くだけで、再現性が大幅に上がる。テンプレート化しておくと使い回しも楽になる。