AI業務効率化・自動化レシピ
DESIGN DIRECTION

配色パレット

色の組み合わせと画面全体の印象を指定する言葉をまとめます。

COLOR PALETTE

配色は、名前と色の値と使う割合で指定します。

「おしゃれな色で」では毎回違う色になります。配色の名前に加えて、背景・メイン・アクセントの色の値と、どこに使うかを伝えると、狙った印象に近づきます。

配色の決め方

個別の配色を選ぶ前に、色の役割と量を決めます。ここを決めておくと、どの配色でもまとまります。

70:25:5の比率

Base / Main / Accent
向く用途：どの配色でも

背景などのベース色を7割、メイン色を2割5分、アクセント色を5分ほどにすると、まとまりやすくなります。

  • ベース色
  • メイン色
  • アクセント色
AIへの指示例配色の比率は、ベース70%・メイン25%・アクセント5%にしてください。アクセント色はボタンと強調だけに使います。

コントラスト

Contrast
向く用途：文字を読ませる画面

文字と背景の明るさの差です。差が小さいと、おしゃれに見えても読めなくなります。

  • 明るさの差
  • 読みやすさ
  • 薄い灰色に注意
AIへの指示例本文の文字色と背景色は、十分なコントラスト（4.5:1以上）を確保してください。薄い灰色の文字は使わないでください。

色数を絞る

Limited palette
向く用途：資料・業務画面

使う色を3〜4色に絞ると、どこが大事かが伝わりやすくなります。色は意味を持たせて使います。

  • 3〜4色
  • 意味のある色
  • 強調は1色
AIへの指示例使う色は背景・文字・メイン・アクセントの4色だけにしてください。強調したい箇所以外にアクセント色を使わないでください。

この指示を使うレシピ：商品資料から営業スライドを作る／商品情報からSNS告知画像を作る

信頼・落ち着き

情報を正確に伝えたい資料や、企業・業務の画面に向く配色です。

モノクロ

Monochrome
向く用途：ポートフォリオ・上質な案内

白・黒・灰色だけで組みます。写真や内容そのものが主役になります。

  • 白
  • 黒
  • 灰色
AIへの指示例配色はモノクロ。背景は白（#FFFFFF）、面は薄い灰色（#F2F2F2）、線や補足は灰色（#8A8A8A）、文字は濃い灰色（#333333）、ボタンは黒（#111111）。有彩色は使わないでください。

ネイビー

Navy
向く用途：企業・BtoB・金融

濃い紺をメインにし、白を多く取ります。誠実さと安定感が出ます。差し色を1つ加えると硬くなりすぎません。

  • 紺
  • 白
  • 差し色1つ
AIへの指示例配色はネイビー基調。背景は白（#FFFFFF）、見出しと主な帯は紺（#1F3A68）、主ボタンだけ橙（#D9822B）にしてください。

やさしさ・自然

親しみや安心感を出したいサービス、生活・食・教育の分野に向く配色です。

ナチュラル

Natural
向く用途：食品・生活用品・健康

生成りの背景に、くすんだ緑や木の色を合わせます。自然で落ち着いた印象になります。

  • 生成り
  • くすんだ緑
  • 木の色
AIへの指示例配色はナチュラル。背景は生成り（#FAF7F0）、メインはくすんだ緑（#7D8F63）、アクセントは木の色（#C27C4E）。彩度は抑えてください。

アースカラー

Earth tones
向く用途：アウトドア・インテリア・地域

土・砂・れんがのような茶系でまとめます。温かく、手触りのある印象になります。

  • 茶系
  • れんが色
  • オリーブ
AIへの指示例配色はアースカラー。背景は砂色（#F4EDE4）、メインはれんが色（#A0522D）、アクセントはオリーブ（#6B7F3A）にしてください。

パステル

Pastel
向く用途：子ども向け・美容・やさしい案内

白を混ぜた淡い色を組み合わせます。やわらかく親しみやすい印象になります。文字は濃いめにして読みやすさを保ちます。

  • 淡い色
  • やわらかさ
  • 文字は濃く
AIへの指示例配色はパステル。背景は淡いピンク（#FFF8FB）、メインは淡い青（#8FC1E3）、アクセントはピンク（#F29BB4）。文字は濃い灰紫（#5B5570）にしてください。

印象・個性

一覧の中で目を止めさせたい告知や、世界観を強く出したい企画に向く配色です。

ビビッド

Vivid
向く用途：セール・イベント・SNS

彩度の高い色をはっきり使います。目を引きますが、色を増やしすぎると散らかるので、2色までに絞ります。

  • 高い彩度
  • 強い対比
  • 2色まで
AIへの指示例配色はビビッド。背景は白、メインは鮮やかな青（#1E5EFF）、アクセントは赤（#FF3D57）の2色だけ。黄色（#FFF3C4）は面にだけ使ってください。

レトロカラー

Retro
向く用途：カフェ・イベント・企画

クリーム色の背景に、少しくすんだ橙・青緑・からし色を合わせます。懐かしく温かい印象になります。

  • クリーム色
  • くすんだ色
  • 懐かしさ
AIへの指示例配色はレトロ。背景はクリーム色（#F3E9D2）、メインは青緑（#2F6F6A）、アクセントは橙（#E07A3F）。色は少しくすませてください。

ブラック×ゴールド

Black & Gold
向く用途：高級品・招待状・ホテル

黒の背景に金を少しだけ使います。金を広い面に使うと安っぽくなるので、線や文字に限ります。

  • 黒
  • 金は少しだけ
  • 線と文字
AIへの指示例配色はブラック×ゴールド。背景は黒（#0E0E0E）、文字は生成り（#F3EFE6）、金（#B8963E）は細い線と見出しの文字だけに使ってください。