ブランドカラーを1色から展開する：補助色・背景色・文字色の配分表の作り方

先に役割を分ける：5つの席

色を「好きかどうか」で選ぶと、色数だけが増えがちです。役割で分けると、足りない席だけを埋められます。

• 背景色、何をする色か：紙面や画面の地。面積が最大、目安の色数：1〜2色
• メイン色、何をする色か：ブランドの顔。ロゴ、見出し帯、ボタン、目安の色数：1色（決定済み）
• 補助色、何をする色か：メインの隣で面を支える。囲み、帯、区切り、目安の色数：1〜2色
• アクセント色、何をする色か：「ここを見て」と示す。価格、期限、ボタン、目安の色数：1色
• 文字色、何をする色か：本文と見出しの読みやすさを担う、目安の色数：1〜2色

数を絞る参考として、Canvaの色づかいの記事では、デザイナーのElena Genovaさんがインテリアデザインのルールをグラフィックにも応用できるとして、支配色60%、副次色30%、アクセント10%を挙げています。4色目が必要なら、アクセントではなく副次色（または支配色）を分けるという考え方です（Canva「10 color inspiration secrets only designers know about」、2026-10-27に閲覧）。これは公的な基準ではなく、出発点にする目安です。

手順1：背景色と文字色を決める

最初に決めるのは、面積が大きい背景と、いちばん長く読まれる本文の文字色です。

• 背景は、純白か、メインの色相をわずかに混ぜたオフホワイトのどちらかにします。小さなブランドは、オフホワイトにすると印象を出しやすくなります。
• 本文の文字色は、真っ黒でなく、ごく濃いグレーなどにすると画面で硬くなりにくいです。
• 文字と背景の組み合わせは、ここで合格させておきます。基準はこの後の手順5で扱います。

手順2：補助色を決める

補助色は、メインを邪魔せずに面をつくる色です。次のどれかから選ぶと破綻しにくくなります。

• メインの明度違い：同じ色相の薄い色（囲みや帯の地に使う）
• メインの隣の色相：少しだけ色味をずらした色
• 低彩度の中間色：ベージュ、グレージュ、くすんだ青など

迷うなら、まず「メインの薄い版」を1色だけ補助色にします。2色目は、必要な場面が出てからで十分です。

手順3：アクセント色を決める

アクセントは、最も使う量が少ない色です。価格、締切、申込ボタンなど、1画面に1〜2か所だけ強調したい要素に限定します。メインと明るさや色相がはっきり離れている色を選ぶと目立ちます。メインが寒色ならアクセントは暖色、というように反対側から選ぶ方法があります。

手順4：配分表を埋める（記入例つき）

次の表が、この記事の中心になる配分表です。以下は、架空の小さな市場イベント「ひなた朝市」を想定した説明用の例です。

• 背景色、色名：クリーム、HEX：#F6F1E7、基本の面積：60%、主な使い道：紙面・画面の地
• メイン色、色名：深緑、HEX：#2F6F5E、基本の面積：25%、主な使い道：ロゴ、見出し帯、フッター
• 補助色、色名：淡い若草、HEX：#DDE8DC、基本の面積：10%、主な使い道：囲み、区切り、表の行
• アクセント色、色名：琥珀、HEX：#F2A541、基本の面積：5%、主な使い道：日時、ボタン、バッジ
• 文字色、色名：墨、HEX：#222222、基本の面積：（文字のため面積では数えない）、主な使い道：本文、見出し

※面積は「文字を除いた色面」の目安です。この例は合計100%です。文字を除いて各色の面積を見積もり、合計が100%になるよう調整します。

媒体ごとに配分を変える場合は、次のように別表にします（これも説明用の例です）。

• A4チラシ、背景：60%、メイン：25%、補助：8%、アクセント：7%
• SNS正方形画像、背景：50%、メイン：35%、補助：10%、アクセント：5%
• 販売ページ、背景：70%、メイン：15%、補助：10%、アクセント：5%（ボタンのみ）

SNS画像の例では、メインの比率を上げています。ここで大事なのは数字そのものではなく、「アクセントをメインより多くしない」といった順位のルールを書くことです。

手順5：文字と背景のコントラストを確認する

色の組み合わせのうち、文字を載せるものだけは数値で確認します。W3CのWCAG 2.2（達成基準1.4.3、レベルAA）では、通常の文字は4.5:1以上、大きな文字は3:1以上が最低限の基準です。大きな文字は、18ポイント以上、または太字で14ポイント以上とされ、日本語など他の文字体系の同等サイズも含みます。ロゴやブランド名の一部である文字は要件の対象外ですが、ブランドの要件でなく作り手の判断で低コントラストにした場合は例外になりません（W3C「Understanding SC 1.4.3: Contrast (Minimum)」、2026-10-27に閲覧）。

先ほどの例の色で、組み合わせごとの比を手計算した概算が次のとおりです。公開前には、必ずコントラストチェッカーなどで再計算してください。

• 墨 #222222、背景色：クリーム #F6F1E7、概算比：約14.5:1、判定の目安：本文に使える
• 白、背景色：深緑 #2F6F5E、概算比：約6.1:1、判定の目安：帯の中の文字に使える
• 深緑、背景色：クリーム、概算比：約5.2:1、判定の目安：見出し・リンクに使える
• 墨、背景色：琥珀 #F2A541、概算比：約7.7:1、判定の目安：ボタンの文字は墨にする
• 白、背景色：琥珀、概算比：約2.3:1、判定の目安：不可
• 琥珀、背景色：クリーム、概算比：約1.9:1、判定の目安：文字には不可（図形のみ）

この例では、アクセントの琥珀は面や図形として使い、その上の文字は墨にします。「アクセントは文字色に使わない」という禁止事項も配分表に1行足すと、現場で迷いません。

AIに任せる範囲と、人が決める範囲

AIには、役割別の候補出しと表の整形を任せられます。色の最終決定、印刷での見え方、コントラスト数値の確認は人が行います。AIの出す数値は誤ることがあるため、HEX値と比は必ずツールで確かめてください。

使える依頼文の例です。

小さな市場イベントのブランドカラーを展開します。
メイン色：#2F6F5E（深緑）
雰囲気：素朴、清潔、朝の空気
使う媒体：A4チラシ、SNS正方形画像、販売ページ
条件：
- 背景色、補助色、アクセント色、文字色を各1〜2案ずつ出す
- 表にして、HEX、役割、基本の面積比、使ってはいけない組み合わせを書く
- アクセントの比率はメインより必ず小さくする
- 文字と背景のコントラスト比は、確認が必要な組み合わせを一覧にする（数値は仮でよい）

返ってきた案は、次の順で確認します。

1. 役割ごとに1案へ絞る（候補を並べたままにしない）
2. 文字を載せる組み合わせだけ、チェッカーで比を測る
3. 実物のサイズで、チラシなら試し刷り、画像ならスマホ画面で見る

画面の色と印刷の色は一致しないことが多く、印刷物を作るなら試し刷りで確認するのが確実です。CanvaのBrand Kitでは、パレットにHEXに加えてCMYKの値も登録できますが、CMYKの追加はProのユーザーとTeams/Businessの管理者に限られます。また、無料プランは1パレット・3色までです（Canvaヘルプ「Setting up and using Brand Kit color palettes」、2026-10-27に閲覧）。5色の配分表をそのまま登録したいときは、プラン条件を確認してください。

空欄の配分表（コピーして使う）

役割　　　　色名　　HEX　　面積　　使い道　　　　　　　禁止事項
背景色　　　　　　　　　　　　％
メイン色　　　　　　　　　　　％
補助色　　　　　　　　　　　　％
アクセント色　　　　　　　　　％（メインより小さく）
文字色　　　　　　　　　　　　―

埋め終わったら、次の3点を点検します。

• アクセントが、画面の中で一番面積の小さい有彩色になっているか
• 文字と背景の組み合わせが、すべて基準を超えているか
• 色が5色を超えて増えていないか（増えたら、役割の重なりを探す）

この表を1枚にまとめて制作メンバーに共有すれば、色を足すときも「どの席に入れるか」で判断できます。