デザインにおける「色」は、
見た目を飾るための装飾ではありません。
色は情報を整理し、
視覚的に伝わる“設計ツール”です。
第1回で学んだ「デザイン4大原則」の中でも、
特に“繰り返す”をもっとも簡単に実践できるのが配色。
3つの色の役割で整える
この講座では、
デザインを支える3つの色の役割
（メインカラー・ベースカラー・アクセントカラー）を理解し、
Canvaで統一感ある配色を実現する方法を学びます。
資料・動画リンク
資料
📓講座スライド資料（PDF）準備中
👉 ダウンロードはこちら
動画
学びの要点：色の役割と基本構造
1. 配色設計の3つの役割（メイン・ベース・アクセント）
デザインに「統一感」と「メリハリ」を与えるには、
色に明確な“役割分担”を持たせることが鍵です。
| 役割 | 使用比率 | 目的 |
|---|---|---|
| メインカラー | 約25% | ブランドの印象を決める主役の色 |
| ベースカラー | 60〜70% | 背景など大きな面積に使う基盤の色 |
| アクセントカラー | 5〜10% | 目を引かせたい要素（ボタンなど） |
この比率を意識するだけで、
誰でも自然で美しい配色バランスを作れます。
ㅤ
2. 色を構成する3つの属性（色相・明度・彩度）
色には
「色相（Hue）」
「明度（Value）」
「彩度（Chroma）」
の3つの要素があります。
中でも明度差は視認性の核心。
背景と文字の明度差を大きくするほど、
読みやすく伝わるデザインになります。
ㅤ
3. デジタル時代の「色の住所」：カラーコード
Canvaで色の統一感を保つために欠かせないのが、
Hexコード（例：#960A33）。
これは“デジタル上の色の住所”です。
誰がデザインしても同じ色を再現でき、
ブランド全体の一貫性を守ります。
ㅤ
誰もが見やすいデザインを作るための配色鉄則
学びの要点：視認性を最大化するコントラスト
色を美しく見せるよりも、
情報が正確に伝わることが最優先。
1. 輝度コントラスト比 5:1 の黄金ルール
国際基準（WCAG）では、
文字と背景の明度差を5:1以上に保つことが推奨されています。
暗い文字 × 明るい背景（黒字に白背景）が基本です。
2. 視認性が高いおすすめ配色
- 暖色（赤・オレンジ・黄）は目立ちやすく、印象的。
- 青系は信頼感を与えるが、濃い色よりも明るい水色を選ぶ。
- 近い明度の高彩度色同士（例：赤×オレンジ）は避ける。
ㅤ
テーマカラー決定ワーク｜あなたの印象を設計する
【ワーク手順】
- 印象を明確化する
「安心感」「元気」「信頼」「上品」など、
自分のブランドが伝えたい印象を書き出す。 - メインカラー候補を選ぶ
下記の色彩心理を参考に、印象に合う色を1〜2色選定。
| 色 | 印象 | 使用のコツ |
|---|---|---|
| 赤 | 情熱・行動力 | 少量でアクセントに使う |
| 青 | 信頼・誠実 | 明度を上げて見やすく |
| 緑 | 安心・調和 | 自然や健康分野に最適 |
| 黄 | 希望・明るさ | 見出しやボタンに最適 |
| 白 | 清潔・開放感 | ベースに使用して統一感を出す |
- 比率に落とし込む
メイン（25%）・ベース（60〜70%）・アクセント（5〜10%）に割り当てて完成。
ㅤ
【ポイント】
- ベースを白に固定すると失敗しにくい。
- 見やすさを最優先に、明度差を常に意識。
ㅤ
【Canva実践】スポイト機能と写真カラーで統一感を出す
ワーク①：スポイト機能で色を「繰り返す」
- Canvaで色を変えたいオブジェクトを選択。
- 「カラー」→「スポイト」ツールをクリック。
- 画像やロゴから色を抽出して反映。
【ポイント】
ロゴや写真の中の色を抽出し、
見出しやボタンに使うだけで瞬時に統一感が出ます。
ㅤ
ワーク②：「写真のカラー」機能でパレット生成
- 写真を配置すると自動で主要色が抽出されます。
- 「写真のカラー」欄から色を選択し、各要素に適用。
【ポイント】
自然に調和するパレットが自動生成され、
配色理論を知らなくても統一感のあるデザインが完成します。
ㅤ
ハイライト｜今日から実践できる配色チェックリスト
- メイン・ベース・アクセントの比率を守る
- 文字と背景の明度差をしっかり確保
- スポイト機能で色を繰り返す
- ベースは白で統一して清潔感を出す
今日からあなたのデザインに「色の戦略」を取り入れ、
プロのような統一感と洗練された印象をつくりましょう。
次回は「フォントと配置」で、
視覚的な完成度をさらに高めます。