背景・主役・強調色の役割から画像配色を決めるPrompt

画像生成の配色だけを設計してください。色名を並べるのではなく、背景・主役・強調の役割と、縮小しても伝わる明度差を決めます。

媒体、スマホ/印刷などの表示環境：noteの有料記事の見出し画像（1280×670）。読者の大半はスマホで一覧表示から見る。
主題と最初に目を向けてほしい箇所：「家計簿アプリの比較」記事。最初に目を向けてほしいのは画面中央右のスマホのイラスト。
守るべきブランド色（HEXがあれば）と変更可能範囲：自分の note のブランド色は深緑 #2F5D50。背景に使うか主役に使うかは変えてよい。
背景・主体・アクセントの希望：背景は落ち着いた色、主役のスマホは明るく、アクセントに小さなコインのイラストを1か所。
後から文字を重ねる場所と実際の文字色：左側 45% に記事タイトル（白文字 #FFFFFF・太字・2行）を後から載せる。
避ける色、競合色：赤（損失・マイナスを連想させるため）。競合の家計簿アプリのブランド色（黄緑）に寄せない。
色覚や小画面での可読性要件：色だけで意味を伝えない。スマホ一覧の小さい表示でもタイトル領域とスマホが見分けられること。
使用モデルに独立Color設定があるか：Canva の AI 画像生成を使う予定。色を個別に指定する設定があるかは確認していない。

背景/主役/アクセント/文字安全域の4役に色を割り当て、色相・彩度・明度の差を言葉で説明する。主役だけが目立つよう優先度を付け、色だけで意味を伝えない。コピー可能な『画像生成用の色指示』を作り、ブランドHEXは目標値として扱い、生成画像で正確に再現されると保証しない。

出力：役割別パレット、採用理由、色指示、避ける組み合わせ、グレースケール/小画面の確認。文字をWeb画像へ重ねる場合は、実際に使う文字・背景色を別工程で測定し、必要ならWCAG 2.2の通常文字4.5:1/大きな文字3:1と照合する。ここでは実測値が無い限り『WCAG準拠』と言わない。モデル固有Color UIは対応確認後だけ指定してください。

配色は、**「左＝読みやすい暗部」「中央右＝最も明るい主役」「アクセント＝小面積」**の3段階にすると、スマホ一覧でも崩れにくいです。ブランドの深緑 #2F5D50 は背景側に使い、スマホを明度差で浮かせる設計が最も安定します。

役割別パレット
役割	目標色	色の設計	明度優先度
背景	深緑 #2F5D50 を基準	青みをわずかに含む落ち着いた深緑。彩度は中〜低、明度は低め。完全なベタ塗りより、ごく弱い濃淡は可	低
主役：スマホ	アイボリー〜非常に明るい青緑白 #F2F6F3 前後	背景と色相だけでなく明度を大きく離す。彩度は低くし、白に近い面積を大きく取る	最高
アクセント：コイン	muted gold #D6B66A 前後	黄緑ではなく、少しくすんだ黄土〜金色。中程度の彩度・中高明度。1か所だけ、小面積	中
文字安全域	背景は #274C42〜#2F5D50 相当 / 文字 #FFFFFF	左45%では色ムラや明るい装飾を避け、白文字の輪郭が失われない暗さを維持	低
採用理由

ブランド色をスマホ本体に使うより、背景として広く認識させる方が今回の目的に合います。スマホまで深緑にすると、背景との境界を輪郭線や影に依存するため、スマホ一覧まで縮小したときに主役が沈みやすくなります。

そこで、背景を暗い深緑、スマホをほぼ白に近い低彩度色として、主役を「一番鮮やかな物」ではなく「一番明るい物」にします。これは小画面でも残りやすい差です。

コインは金色系ですが、鮮烈な黄色にはしません。鮮やかな黄緑にすると競合アプリのブランド印象へ近づき、さらにスマホよりアクセントが先に見える危険があります。したがって、主役 > コイン > 背景の順で視覚優先度を固定します。

画像生成用の色指示
配色のみ以下を基準にする。

背景はブランドカラーの深緑 #2F5D50 を目標値とした、落ち着いた低〜中彩度・低明度の深緑。
ブランドHEXは厳密な色再現ではなく、生成時の色方向を示す目標値として扱う。

画面中央右のスマートフォンを最も目立つ要素にする。
スマートフォン本体と主要画面は、アイボリーをわずかに含む非常に明るい低彩度色
（目標 #F2F6F3 前後）にし、暗い背景との明度差を十分に大きくする。
鮮やかな色で目立たせるのではなく、「画面内でもっとも明るい大きな面」として目立たせる。

アクセントは小さなコイン1か所だけ。
色は黄緑ではなく、少しくすんだ落ち着いたゴールド〜黄土色
（目標 #D6B66A 前後）。
コインはスマートフォンより目立たせず、使用面積も小さくする。

左側45%は後から白文字 #FFFFFF の記事タイトルを2行で重ねるための文字安全域。
この領域は深緑〜さらに少し暗い深緑を維持し、白っぽい物、明るいグラデーション、
高彩度の装飾、大きなハイライトを置かない。

視覚優先度は
1. 明るいスマートフォン
2. 小さなゴールドのコイン
3. 深緑の背景
の順。

色だけで情報や意味を区別しない。
形、位置、サイズ、輪郭でもスマートフォンとコインを識別できる状態にする。

赤、朱色、ピンク寄りの赤は使用しない。
鮮やかな黄緑、ライムグリーン、ネオングリーンも使用しない。
背景とスマートフォンを近い明度にしない。
画面全体を同じ中明度でまとめない。
避ける組み合わせ

特に避けたいのは、深緑背景＋深緑スマホ、深緑背景＋鮮やかな黄緑アクセント、白スマホ＋大面積の鮮黄色コインです。最初は主役が背景へ沈み、2つ目は競合色に近づき、3つ目はアクセントがスマホより強くなります。

また、「落ち着いた配色」にしようとして背景・スマホ・コインをすべて中程度の明るさに揃えるのも避けます。今回もっとも重要なのは色相の美しさより、暗・明・中の明度階層です。

グレースケール／小画面の確認

完成後は一度グレースケールにして、①左45%が暗い面として残る、②中央右のスマホが最も明るく見える、③コインがスマホを奪わないの3点を確認してください。1280×670だけで判断せず、スマホのnote一覧程度まで縮小して確認するのが重要です。

白文字 #FFFFFF と背景については、この段階では実際の生成背景色が確定していないため**「WCAG準拠」とは言いません**。最終画像を書き出した後、実際にタイトルの背後となる色を測定し、必要に応じて WCAG 2.2の通常文字4.5:1／大きな文字3:1 と照合します。

Canva側の独立したColor指定UIについては、ここでは対応を確認していないため前提にせず、HEXはすべて生成モデルへの目標値として扱う設計です。