Colorableで「読める2色」を見つけたら、AIに役割付きの資料配色ルールへ展開させる
コントラストの良い文字色×背景色だけではスライドは揃わない。メインカラー系統を決めてから、背景・見出し・グラフ系列まで同じ世界観で伸ばす。
どんな問題を解決するか / いつ使うか
Colorable（colorable.jxnblk.com/ など）で「この2色は読めるし雰囲気もいい」まで決まったあと、資料全体の色が決まらず毎回迷うとき。AIに「近い色をいくつか」ではなく、「役割ごとの色と使い分け」まで出させる。
関連: グレー文字は見た目で決めず、Leonardoで色コードのコントラストを確かめる（#777は白背景でギリギリ不合格）、スライドは「タイトルだけ順に読んで話が通る」かで点検し、1枚1メッセージの文章タイトルに組み直す
具体手順
- Colorableで文字色と背景色の組み合わせを試し、コントラスト（AA/AAA）と印象の両方で「読める2色」を1組選ぶ。
- AIへの依頼では、その2色をそのまま増やすのではなく、次を順にやらせる。
- 元配色の印象を診断する
- 資料のメインカラー系統を決める（例: 背景が淡ミントならミントグリーン系）
- 通常背景・薄背景・本文色・見出し色を設計する
- 図解の主役色、グラフの主系列・比較・補助・強調を同じ系統から派生させる
- 「基本カラー設計表」と「グラフ変換表」（どこで・どの面積で使うか）を出させる
- 特に「主役色とメインカラーの統一感」を指示に含める。背景はミントなのに主役だけ急に紫、のようなズレを防ぐ。
- グラフでは「緑＝主役／比較／補助」がページごとに入れ替わらないよう、意味を先に固定する。
注意点
- 「いい2色を見つける」と「資料用の配色システムを作る」は別作業。Colorableだけで完結しない。
- ふじくるりの具体プロンプト本文はnoteメンバーシップ特典。ここでは手順の骨子のみ。自前の依頼文に落としてよい。
- ブランド色が既にある場合は、Colorableの2色をブランド制約の中で選ぶ／ブランドを正として展開する、と明記する。
出典
- @fujikururi · 2026-11-07
- 手法の詳細記事（X Article） @fujikururi · 2026-07-09