3色だけで決める配色キット

色数を3つに絞るだけで、作ったものが急に「整って見える」ようになります。
このキットには、そのまま使える配色の組み合わせを10組と、色をAIに決めさせる指示文を2本入れました。
センスを鍛える話は一旦置いて、役割で決める方法だけを持ち帰ってもらえたらうれしいです。

なぜ3色なのか

色に持たせる仕事は、背景・文字・目立たせたい1か所の3つしかありません。
4色目を足した瞬間、その色は仕事がないまま画面に居座ります。
色数が増えるほど、一番見てほしい所が弱くなる。これだけの話です。

3色の決め方 3ステップ

ステップ1　誰に届けるかで温度を決める

色を選ぶ前に、見る人を先に決めましょう。ここが空っぽのまま色見本を眺めても、好きな色を選ぶだけで終わります。

決めるのは「あたたかい側か、冷たい側か」の2択だけで大丈夫です。

• あたたかい側（赤・オレンジ・黄色・茶・ピンク寄り）…親しみ、やさしさ、食べ物のおいしさ、手づくり感が伝わりやすい
• 冷たい側（青・緑・紺・灰色寄り）…きちんとしている、安心して任せられる、清潔、という印象が出やすい

迷ったら、届けたい相手が「気持ちで選ぶ人」か「条件で選ぶ人」かで分けてみましょう。気持ちで選ぶ人にはあたたかい側、条件で選ぶ人には冷たい側が合いやすいです。

ステップ2　背景と文字の明暗差を作る

ここが一番大事で、一番とばされる所です。

背景を明るくしたら文字は思い切り暗く、背景を暗くしたら文字は白に近づける。この幅が狭いと、どれだけ色が上品でも「読みにくい」で終わります。

判定の仕方はかんたんです。

1. 作ったものをスマホに送る
2. 画面の明るさを半分まで下げる
3. 腕を伸ばした距離から見る

この状態で文字が普通に読めたら合格です。目を細めないと読めなかったら、文字をもっと暗く（または背景をもっと明るく）しましょう。

灰色っぽい文字はおしゃれに見えますが、読みやすさを削って見た目を買っている状態です。読ませたい文字に薄い灰色は使わないでおきましょう。

ステップ3　差し色を1つだけ選ぶ

差し色は「一番押したい1か所」のために取っておく色です。

置いていいのは、次のどれか1つだけ。

• 申し込みのボタン
• 一番伝えたい1行の下線
• 数字や値段のうち、1つだけ

2か所目に使いたくなったら、そこは太字にするか、文字を大きくして対応しましょう。差し色を2か所に置いた時点で、どちらも「一番」ではなくなります。

そのまま使える配色見本 10組

色コードは、制作ソフトの色を指定する欄に「#」から貼り付ければそのまま入ります。

どれを選んでも、背景と文字の明暗差は確保してあります。気に入った1組を決めたら、その3色だけで1枚作り切ってみましょう。

配色をAIに決めさせる指示文 2本

【　】の中だけ書き換えて、そのまま貼り付けて使えます。

指示文①　業種と相手を入れると3色を出してくれるもの

配色を決める担当として答えてください。

【業種・サービス名】
【届けたい相手（年齢・性別・どんな状況で探しているか）】
【見た人にどう感じてほしいか（安心／親しみ／きちんと感／元気　など1つ）】
【使う場所（SNSの投稿画像／チラシ／サイトの上部　など）】

条件
- 色は3つだけ出す。背景・文字・差し色の役割を1つずつ割り当てる
- それぞれ #から始まる6桁の色コードで書く
- 背景と文字は明暗差を大きく取る。背景が明るいなら文字は十分に暗く、背景が暗いなら文字は白に近づける
- 差し色は1か所だけに使う前提で選ぶ。背景に置いた時に沈まない濃さにする
- 差し色の上に文字を乗せる場合、白文字と黒文字のどちらが読めるかも書く
- 3案出す。各案に短い名前を1つと、その色にした理由を1行付ける
- 専門用語を使わず、はじめての人が読んで分かる言葉で書く

出力は表にしてください。列は 案の名前／ベース／文字／差し色／白文字か黒文字か／理由 の6つです。

指示文②　今ある色を3色に減らしてもらうもの

作りかけの画像やチラシを一緒に渡して使います。文字や画像をそのまま扱えるAIなら、この指示文で直す所まで出してくれます（2026年9月8日に出たGPT Image 2.5は、無料プランを含む全プランで使えます。1日に作れる枚数には上限がある場合があります）。

添付した【画像／デザイン】の色を整理してください。

【この制作物の目的（何をしてほしいか。申し込み／来店／保存　など）】
【一番見てほしい場所（見出し／ボタン／値段　など1つだけ）】

手順
1. いま使われている色をすべて読み取り、#から始まる6桁の色コードで一覧にする。それぞれ「どこに使われているか」も書く
2. 一番広い面積を占めている色を、背景の候補にする
3. その背景の上で文字が読めるかを判定する。読みにくい場合は、文字側をどこまで暗く（または明るく）すればいいか色コードで示す
4. 残った色のうち、目的に一番合う色を1つだけ差し色として残す
5. それ以外の色は使わない色として一覧にする

出力
- いまの色の一覧
- 減らしたあとの3色（背景・文字・差し色を色コードで）
- どの部分の色を、どの色に置き換えるかの対応表
- 差し色を置く場所を1か所だけ指定する
- 直す前と直したあとで、見え方がどう変わるかを1行

判断に迷う所があれば、勝手に決めずに質問してください。

やりがちな失敗3つと直し方

失敗1　差し色をあちこちに使ってしまう

見出しにも、ボタンにも、囲みにも同じ色を置いてしまうパターンです。気持ちは分かります。せっかく決めた色なので使いたくなります。

でも、目立つ色が5か所あると、見る人はどこから読めばいいのか分からなくなります。

直し方は、差し色を使っている場所を全部書き出して、1つだけ残すこと。残さなかった所は、文字を太くするか少し大きくして差を付けましょう。

失敗2　背景に写真を敷いて文字が読めなくなる

写真の上に直接文字を置くと、写真の明るい所と暗い所で読みやすさがバラバラになります。

直し方は3つあります。

• 写真の上に黒か白の薄い膜を1枚かけて、写真全体の明るさをそろえる
• 文字を写真の外に出して、無地の帯の上に置く
• 写真の中でも色の変化が少ない所（空・壁・机）を選んで、そこにだけ文字を置く

一番かんたんなのは2つ目です。迷ったら文字は写真の外に出しましょう。

失敗3　色で強弱を付けようとして、全部同じ強さになる

大事な所を全部色で目立たせようとすると、結果的にどれも目立ちません。強調が並ぶと、強調ではなくなります。

強弱は本来、色よりも「大きさ」と「余白」で作るものです。

直し方は、まず色を全部やめて白黒にしてみること。その状態でも一番見てほしい所が一番大きければ、設計は合っています。そのあとで差し色を1か所だけ戻しましょう。白黒で伝わらないものは、色を足しても伝わりません。

まずこれだけやるなら

いま手元にある制作物を1枚開いて、使っている色を数えてみましょう。4色以上あったら、差し色を1か所に減らして、余った色は背景か文字のどちらかに寄せる。今日はこれだけで大丈夫です。

数えるのが面倒なら、上の指示文②にその1枚を渡してしまいましょう。使っている色の一覧が、それだけで出てきます。

9/24・9/26・9/27の3日間、まとさんと一緒にセミナーをやります。3日とも同じ内容なので、都合のいい日に1回だけ来てもらえれば大丈夫です。