【Canva超入門4】もう迷わない色の使い方！Webライターのための配色ルール

これまでの3回で、Canvaの基本操作、テンプレートの活用方法、フォント選びのコツを学んできました。図解を作るための土台は、しっかり身についているはずです。

【Canva超入門1】Webライターのための「伝わる図解」作成と基本操作

【Canva超入門2】Webライターのためのテンプレート活用術と編集の基本

【Canva超入門3】Webライターのための「伝わるフォント」選びの基本

それでも、いざ図解を作り始めると、気になる色をあれこれ使ってしまい、「どこを見せたいのか分からないデザイン」になってしまう…。そんな経験はありませんか？

色の使い方には明確なルールがあります。色の数を絞ること、役割を持たせることといった基本を押さえるだけで、図解の印象は大きく変わります。

この記事では、Webライターが知っておきたい 配色の基礎・色の心理効果・3色ルール・Canvaでの配色設定 をまとめました。色を正しく選べば、図解の説得力は一気に高まります。

第4回の目標は、「配色のルールを理解して、統一感のある図解を作る」ことです。

色を使いすぎて失敗していませんか？配色の基本を学ぼう

図解を作っていると、「ここも強調したい」「この色も入れたい」と色が増えすぎてしまうことがあります。仕上がったデザインを見ると伝わりにくい…。

色が増えれば増えるほど情報が散らばり、視線の流れが乱れます。どこが重要なのか、どこを最初に見てほしいのかが曖昧になり、読み手は「なんとなく見づらい」と感じてしまうのです。

これはセンスの問題ではありません。色には使い方のルールがあり、それを知らないだけなのです。

配色の基本はとてもシンプルです。

• 色の数を絞る
• 役割を持たせる

この2つを押さえるだけで、図解の印象は驚くほど変わります。色が増えるとなぜ失敗するのかを理解し、これから紹介する配色ルールを身につけていきましょう。

色が読者に与える心理効果

色には、人が無意識のうちに受け取ってしまう“印象”があります。同じ言葉や同じ図解でも、使う色が違うだけで、読者の感じ方や受け取るメッセージは大きく変わります。

ここでは、最低限知っておきたい色の心理効果を整理し、記事のテーマに合わせてどのような色を使うべきかを見ていきます。

色には意味がある

色を見たとき、私たちは無意識に「意味」を感じ取っています。

主な色とその印象

色	印象・意味	使う場面
🔴赤	注意、警告、緊急、強調、情熱	注意喚起（デメリット、注意ポイント） 図解内の“ここを見てほしい” 強調 ※使いすぎに注意。アクセントに1ヵ所だけ使うのが基本
🔵青	信頼、誠実、冷静、ビジネス	解説記事の図解 信頼性を出したいとき 落ち着いたトーンの情報系記事
🟢緑	安心、自然、健康、リラックス	初心者向け・やさしい説明 健康・生活・教育系 心理的負荷を下げたい場面
🟡黄色	明るい、注意、元気、ポジティブ	図解のアクセント 注意を集めたいとき（赤ほど強調しない） カジュアルな記事 ※背景に使うと視認性が下がることがあるので注意
🟠オレンジ	親しみ、活発、温かい、カジュアル	やさしい説明 初心者向けの記事 ポジティブな要素の強調
🟣紫	高級、神秘、上品、創造性	美容、ブランド、専門性の高いテーマ 図解に落ち着きと重厚感を出したいとき
💗ピンク	優しい、女性的、柔らか、可愛い	女性向け記事 優しい印象を出したい場面
●黒	高級、重厚、シック、フォーマル	強調したいポイント ノイズのない図解にしたいとき シンプル構成の見出し文字に ※背景に使うと硬い印象が強くなりすぎるので注意
○白	清潔、純粋、シンプル、余白、広がり	図解全体の背景 文字の可読性確保 他の色を引き立てるための“余白”として
グレー（灰色）	落ち着き、中立、洗練、バランス	情報を邪魔しない背景 アイコンや線の“空気”として 抑えたトーンで統一したいとき ※「主役にしない」色として最適

色の意味を意識して使うだけで、読者が受け取る印象が安定します。

記事のジャンルに合わせた色選び

Web記事の内容によって、適した色は変わります。

• 解説・HowTo系　青系（信頼・冷静さ）
• 生活・育児・健康　緑・ベージュ系（安心感）
• 注意喚起・比較　赤やオレンジをアクセントに
• ビジネス・データ系　青×グレーのモノトーン寄り

記事のテーマと色が一致していると、読者はストレスなく読み進められます。

色の違いで図解の印象はここまで変わる

同じレイアウトでも、色を変えるだけで図解の雰囲気や伝わり方は大きく変わります。
青・緑・赤の3パターンを比較し、印象の違いを確認してみましょう。

パターン1. 青系を使った場合

青は「信頼」「誠実」「ビジネスライク」といった印象を持つ色です。
説明系の図解やビジネス系の記事で使いやすく、落ち着いた印象を与えます。

緑は「安心」「自然」「リラックス」といった穏やかなイメージを持つ色です。
柔らかく親しみやすい印象になり、初心者向けやゆっくり読ませたい内容に向いています。

こんな用途に向いています

• 初心者向けの記事
• 美容・健康・暮らし系
• リラックス感を出したい内容

パターン3. 赤を使った場合

赤は「情熱」「注意」「パワー」といった強い印象のある色です。
ステップ図のような流れを見せるときに注目を集めやすく、勢いやスピード感を演出できます。

こんな用途に向いています

• セール告知・重要なお知らせ
• アクションを促す図解（登録・申込など）
• 読者の注意を引きたい場面

図解の目的に合わせて色を選ぶことで、より伝わるデザインになります。

プロっぽく見せる「3色ルール」

配色の基本中の基本は「3色ルール」です。図解がまとまらない原因の多くは、色を使いすぎていること。使う色を絞り、役割を決めて配置することで整った図解になります。

なぜ色を絞るべきなのか

色を3色に絞ることで、統一感が出て情報が伝わりやすくなります。また、図解作成時の作業も楽になります。

理由1. 統一感が出る

色が少ないほど、まとまりのある洗練された印象になります。逆に、4色、5色と増えるほど、バラバラでまとまりのない印象に。

理由2. 情報が伝わりやすい

色の役割が明確になるので、読者が混乱しません。情報が整理されて視線の流れも自然に整うため、内容がスムーズに頭に入ります。

理由3. 作業が楽になる

使う色を最初に決めておけば、「次はどの色にしよう？」と迷わなくなります。制約があることで、むしろスムーズに作業できます。

メインカラー・サブカラー・アクセントカラーの役割分担

色に役割を決めて使い分けましょう。

メインカラー（比率 60～70％）

全体の印象を決める基準の色です。図形・背景・アイコンに使います。

サブカラー（比率 20〜30%）

メインカラーを補助する色です。メインと調和する色を選びます。見出しや区切り線などに使います。

アクセントカラー（比率 5〜10%）

読者に注目してほしい部分に使います。メインとは対照的な色を選びます。重要ワード、強調したいポイントなどに限定しましょう。

この役割分担を守るだけで、統一感のある図解にできます。

実例で見る「3色ルール」の効果（Before→After）

Before：色が多すぎる例

• 赤、黄色、青、ベージュ、黒を使っている
• どこを見ればいいか分からない
• ゴチャゴチャして読みにくい

After：3色に絞った例

• メインカラー（ベージュ）、サブカラー（ブラウン）、アクセントカラー（テラコッタ）に絞る
• キーワードだけをアクセントカラーで強調する
• 全体のトーンを統一する

3色に絞ることでスッキリまとまり、情報が伝わりやすくなります。

迷ったらここから！配色の基本パターン4つ

配色に迷ったときは、この4つの基本パターンから選びましょう。

1. 同系色配色（まとまりのある落ち着いた印象）

同系色配色は、同じ色相（色味）で明るさや濃さだけを変える方法です。
青系、緑系、ベージュ系など、色の方向性がそろうため、図解に自然な統一感が出ます。

こんなときに向いています

• 丁寧・誠実・優しい印象を出したい
• 文章量が多い図解で、視線を散らしたくない
• 配色に迷ったときの安全パターンとして

2. 補色配色（強調したいポイントがあるとき・注意喚起に）

補色とは、色相環で向かい合う色同士（青×オレンジ、赤×緑など）の組み合わせです。
コントラストが強く、視線を引きつける効果があります。

こんなときに向いています

• 図解の中で「ここだけ強調したい」箇所があるとき
• ボタン・重要ワードを目立たせたいとき
• メインの情報とアクセントを明確に分けたいとき

※使いすぎない！アクセントカラーとして1つに絞るのがおすすめです。

3. トーン統一配色（洗練された世界観を作りたいとき）

トーン統一とは、色の明るさ・鮮やかさ（トーン）を合わせる配色のことです。
違う色でも「くすみ系」「パステル系」「ビビッド系」などをそろえると、洗練された印象になります。

こんなときに向いています

• 女性向けメディアやライフスタイル記事で上品に仕上げたいとき
• やさしい・おしゃれ・柔らかい印象を出したいとき
• SNSでシェアされる図解を作りたいとき

4. モノトーン＋1色（失敗しない王道パターン）

白・黒・グレーのモノトーンに、アクセントとして1色だけ加える方法です。
読みやすく、ビジネス資料でも広く使われています。

配色に迷ったら、モノトーン+1色を選びましょう。もっとも失敗しにくい王道のパターンです。

こんなときに向いています

• とにかく見やすく、情報を整理して伝えたいとき
• 説明内容が多く、配色で邪魔をしたくないとき
• ブログデザインがシンプル系・モノトーン系のとき

Canvaで手軽にプロの配色を使う方法

配色に迷った時は、プロの力を借りましょう。Canvaにはプロのデザイナーが作ったカラーパレットや、テーマに合わせた配色提案が用意されています。

ここでは、図解初心者でもそのまま使える3つの方法を紹介します。

カラーパレット機能を使う

Canvaの編集画面で「カラー」を開くと、テンプレートに合う配色やプロが作成したパレットが表示されます。

手順（2024–25 UI対応）

1. 図形やテキストをクリック
2. 左上の「カラー」アイコンをクリック

3. 開いた「カラー」メニューから好みの色をクリックすると、選んだ色がすぐに適用される

また、ワンクリックで全体の配色を変更できる機能もあります。

手順（2024–25 UI対応）

1. 編集画面で左メニュー「デザイン」から「スタイル」タブをクリック
2. 「タブ」メニューを下にスクロールし、「カラーパレット」項目の「すべてを表示」をクリック

3. カラーパレットから、図解に合う配色を選んでクリック。文字も図も色が変わる
4. 再度パレットをクリックすると、色がシャッフルして配色が変わる

特にこだわりがなければ「テンプレートに合わせた色」を選びましょう。
配色に迷ったときの最初の一歩として最適です。

Color Harmonyアプリで配色を提案してもらう

Color Harmony（カラーハーモニー）とは、Canvaのアプリ機能として提供される配色パターン生成ツールです。指定した1色（ベースカラー）から、調和する配色パターン（グラデーション、同系色、ダイナミックなど）を自動生成してくれます。

使い方（2024–2025対応）

1. Canvaのデザイン編集画面を開く
2. 左側メニューの「アプリ」から「Color Harmony」を検索してクリック

3. 「色を選択する」をクリックすると、現在使用されているカラーが表示される
4. 対象の色をクリックすると、「グラデーションと濃淡」などの配色が自動生成される

ベースカラーが決まっていなくても、「人気」や「ランダム」から配色パターンを選べます。

ブランドキットで配色を管理する（Pro版）

Canva Proを利用している場合、ブランドキットを使うことで配色を一括で管理できます。

ブランドキットとは、自分専用の配色、フォント、ロゴを登録できる機能です。一度登録すれば、すべてのデザインで同じ配色を使えるので、シリーズ記事やブログ全体で同じ雰囲気を保ちたいときに便利です。

手順

1. Canvaのホーム画面から、左メニュー「ブランド」アイコンをクリック
2. 「ブランドキット」から「色」を選択、配色を追加
3. デザイン編集画面で、登録した色をすぐ呼び出せる

こんなときに便利

• シリーズ記事で配色をそろえたい
• ブログの世界観を統一したい
• テンプレートを量産するときに時間短縮したい

配色は「センス」ではなく「仕組み」で整えられます。
CanvaのカラーパレットやColor Harmonyを活用すれば、統一感のある図解を作れるようになります。

色選びでやってはいけないNG例

配色のルールを学んだところで、やってはいけないNG例も確認しておきましょう。図解を作るときに避けたいNGパターンを3つ紹介します。

NGパターン1. 原色を多用しすぎる

原色とは、最も鮮やかで明るい色（純色）のことです。赤・青・緑・黄色といった原色をそのまま使うと、画面が派手になりすぎてしまいます。特にスマホで見る場合は刺激が強く、目が疲れてしまうかもしれません。

問題点

• 目がチカチカして疲れる
• 刺激が強すぎて、長時間見ていられない
• 安っぽく見える

回避するには

• 原色はアクセント1ヵ所だけに絞る
• アクセント以外では、彩度や明るさを調整してトーンを落とす
  ・真っ赤（#FF0000）→ 落ち着いた赤（#CC0000）
  ・真っ青（#0000FF）→ 深い青（#0066CC）

NGパターン2. 背景と文字のコントラストが弱い

背景と文字の色が近すぎると、読者は「何が書いてあるのか読み取りにくい」と感じます。
特にグレー背景＋薄いグレー文字などは最も読まれない配色です。

問題点

• 一瞬で読めずに離脱されやすい
• スマホ画面ではさらに視認性が落ちる
• 強調したい箇所も目立たない

回避するには

• 明度差をしっかりつける（例：背景ライト×文字ダーク）
• 白背景に濃い文字、濃色背景に白文字が基本

NGパターン3. ページや画像ごとに違う色を使う

複数の図解を作るとき毎回ちがう配色にすると、見た目に統一感がなく、バラバラな印象になります。

問題点

• 記事全体の統一感がなくなる
• ブランドイメージが定まらない
• 図解を並べたときに雑然として見える

回避するには

• メインカラー、サブカラー、アクセントカラーを最初に決める
• すべての図解で同じ配色を使う

記事のテーマカラーを決めて、ブレないようにしましょう。

あなたの記事テーマに合った配色を決めよう

配色に「絶対の正解」はありません。図解の目的や伝えたいテーマによって最適な色は変わります。ここでは、記事テーマに合った配色を選ぶためのステップを見ていきましょう。

配色を決めるステップ

Step 1. 記事のテーマを明確にする

記事で伝えたい印象を決めます。

• 信頼感を出したい → 青
• 優しさ、安心感 → 緑、ベージュ
• 注意喚起 → 赤、オレンジ
• 親しみやすさ → オレンジ、ピンク

テーマが決まると、自然と「使うべき色の方向性」が見えてきます。

Step 2. メインカラーを1色決める

Step 1. で決めた印象に合う色を、メインカラーとして設定します。
図解の主役となる色で、全体の雰囲気を決める重要な役割があります。

例：ビジネス系の記事 → メインカラーは 青

Step 3. サブカラーとアクセントカラーを決める

• サブカラー メインと調和する色（同系色か、白・グレー）
• アクセントカラー 目立たせたい部分に使う色（補色か、モノトーンなら1色だけ）

例：

• メインカラー：青（#0066CC）
• サブカラー：薄いグレー（#F0F0F0）
• アクセントカラー：オレンジ（#FF9933）

Step 4. 実際に使ってみて微調整する

実際に記事に挿入して、読みやすさを確認します。

「色が強すぎる」「アクセントカラーが目立ちすぎる」「サブカラーが薄い」などと感じたら、明るさや濃さを少し調整しましょう。スマホでの見え方もチェックします。

Step 5. すべての図解で決めた配色を使う

今後作る図解は、すべてこの配色で統一します。Canva Proを使っている場合は、ブランドキットに登録しておくと便利です。

【一覧】テーマ別・おすすめ配色

Webライターがよく扱う記事ジャンルに合わせて、おすすめの配色を紹介します。

記事テーマ	おすすめ配色	理由	相性の良い配色例
ビジネス・働き方・スキル系	🔵青系・ネイビー系 アクセント：オレンジ	信頼・誠実・知性のイメージが強く、落ち着いた印象になる	メイン：#2F80ED サブ：#56CCF2 アクセント：#F2994A
暮らし・心理・健康・ライフスタイル系	🟢緑系・ベージュ系 アクセント：落ち着いたオレンジ、ブラウン	安心感・ナチュラルなイメージにつながる	メイン：#6CBF84 サブ：#A7D8B1 アクセント：#D26A4A
女性向け・自己啓発・デザイン系	🟣くすみパープル・くすみピンク アクセント：グレー	柔らかさや世界観づくりに強い	メイン：#C9A6D8 サブ：#EBD9F6 アクセント：#7A5E8A
注意喚起・トラブル対策・比較系	🔴赤系（アクセントのみ） メインはグレーやネイビー	強い刺激があるため多用すると読みにくい	メイン：#4F4F4F サブ：#828282 アクセント：#EB5757

まとめ｜配色ルールを押さえて、伝わる図解を作ろう

図解は、記事の内容を視覚的にわかりやすくするための大切な要素です。図解の読みやすさは「センス」ではなく、色の選び方で大きく変わります。

色の数をしぼり、役割を決め、比率を整える。
今回紹介した基本ルールを押さえるだけで、図解は読みやすく、統一感のある仕上がりになります。

あなたの記事のテーマに合った色を選び、読者に伝わる図解をぜひ作ってみてください。

※ 掲載している情報は2025年12月時点のものです。