資料やお知らせの色選びで迷っていませんか。
PowerPointの発表スライド、Wordのお便り、Excelの表、Canvaのチラシ、自治体サイトのお知らせなどでは、色の組み合わせで見やすさが大きく変わります。
この記事では、初心者向けに「見やすい色の組み合わせ」を用途別に紹介します。カラーコードとRGBもあわせて載せているので、資料作成やWeb更新にそのまま使えます。
関連するIT用語をまとめて確認したい方は、IT用語一覧もあわせてご覧ください。
迷ったらこの色の組み合わせを選べばOK
色選びで迷ったときは、まず下の3つから選ぶと失敗しにくいです。
#FFFFFF × #333333
長い文章、配布資料、説明文に使いやすい基本の配色です。
#EFF6FF × #1D4ED8
通常の案内、リンク案内、やさしいお知らせに向いています。
#FEF2F2 × #991B1B
注意事項、締切、重要連絡を目立たせたいときに使いやすい配色です。
ポイント：初心者の方は、まず「背景色は薄く、文字色は濃くする」と覚えると選びやすくなります。
背景色と文字色の見やすい組み合わせをチェック
まずは、背景色と文字色の見え方を試してみましょう。
配色カードを選ぶと、上の見本にすぐ反映されます。カラーコードとRGBも確認できるので、PowerPoint、Word、Excel、Webサイトで同じ色を使いやすくなります。
この文字の見え方を確認できます。
資料、スライド、お知らせ欄、チラシなどで使う前に確認しましょう。#FFFFFF
#333333
RGB：255 / 255 / 255
RGB：51 / 51 / 51
見やすい色の組み合わせです。
用途別のおすすめ配色から選ぶ
カードをクリックすると、選んだ配色が上の見本に反映されます。
自分で色を細かく調整する
おすすめ配色を選んだあと、必要な場合だけ背景色や文字色を調整できます。
目的から選ぶ見やすい色の組み合わせ一覧｜2色・3色の配色パターン
ここでは、資料・お知らせ・注意喚起・PowerPointなどで使いやすい色の組み合わせを、目的別に紹介します。 2色パターンは「背景色＋文字色」、3色パターンは「背景色＋文字色＋強調色」として使うと分かりやすくなります。
目的に近い行を選び、カラーコードやRGBを参考にして、PowerPoint・Word・Excel・Canva・Webページなどで使ってください。
2色の組み合わせパターン
| 目的 | 配色 | カラーパレット | カラーコード・RGB |
|---|---|---|---|
| 本文・資料向け 本文や表を読みやすくしたいときの基本配色です。 | 2色 |
|
|
| お知らせ・案内向け 学校プリントや自治体のお知らせに使いやすい配色です。 | 2色 |
|
|
| 注意・警告向け 締切や注意事項など、見落としてほしくない内容に向いています。 | 2色 |
|
|
| 安心・完了向け 申込完了や成功メッセージなど、安心感を出したい場面に向いています。 | 2色 |
|
|
| 補足・メモ向け ワンポイントや補足説明をやわらかく目立たせたいときに使えます。 | 2色 |
|
|
| 確認リスト向け チェックリストや表の見出しなど、事務資料に使いやすい配色です。 | 2色 |
|
|
| 重要ポイント向け 重要なメッセージを強めに見せたいときに使える配色です。 | 2色 |
|
|
| やさしい案内向け 強い印象を避け、落ち着いた雰囲気にしたい案内に向いています。 | 2色 |
|
|
| 目立つ見出し向け 見出しやラベルをはっきり見せたいときに使える配色です。 | 2色 |
|
|
| シンプルなボタン向け リンクボタンや申込ボタンなど、押せる場所を分かりやすくしたいときに向いています。 | 2色 |
|
|
3色の組み合わせパターン
| 目的 | 配色 | カラーパレット | カラーコード・RGB |
|---|---|---|---|
| PowerPoint資料向け 背景・文字・強調色を分けたい発表資料に向いています。 | 3色 |
|
|
| ビジネス資料向け 落ち着いた印象の会議資料や報告書に向いています。 | 3色 |
|
|
| イベント・募集向け 明るく親しみやすい印象にしたいイベント案内に向いています。 | 3色 |
|
|
| 学校・発表向け 発表資料や授業スライドに使いやすい、清潔感のある配色です。 | 3色 |
|
|
| 自治体・公共案内向け 信頼感を出しながら、落ち着いて読める案内に向いています。 | 3色 |
|
|
| 注意つき資料向け 通常の説明に、注意点だけを赤で加えたい資料に向いています。 | 3色 |
|
|
| やさしい資料向け やわらかい印象にしたい説明資料や案内文に向いています。 | 3色 |
|
|
| Web見出し向け Webページやブログの見出し、リンクボタンに使いやすい配色です。 | 3色 |
|
|
| チラシ・告知向け やや華やかに見せたい告知やキャンペーン案内に向いています。 | 3色 |
|
|
| 落ち着いた資料向け 派手さを抑えながら、上品で落ち着いた印象にしたい資料に向いています。 | 3色 |
|
|
PowerPointでそのまま使える3色の組み合わせ
PowerPointでは、背景色、文字色、強調色の3色を決めておくと、資料全体が見やすくなります。
下のパレットを選ぶと、スライドの背景、タイトル・本文、強調部分に使う色が分かります。PowerPointの「その他の色」からRGBを入力すると、同じ色を設定できます。
本文の見本です。背景色、文字色、強調色のバランスを確認できます。
重要ポイント報告書、庁内資料、公式な説明資料に使いやすい配色です。
#FFFFFF
RGB：255 / 255 / 255
#111827
RGB：17 / 24 / 39
#1E3A8A
RGB：30 / 58 / 138
資料の目的から選ぶ
パレットをクリックすると、PowerPointで設定する3色が上に表示されます。
自分で3色を細かく調整する
選んだパレットをもとに、背景色、文字色、強調色を少しだけ調整できます。
白黒印刷でも見やすい色の組み合わせ
資料は、カラーで作っても白黒印刷や白黒コピーをされることがあります。
画面では見やすくても、白黒にすると文字と背景の差が小さくなり、読みにくくなる場合があります。配布資料や回覧資料を作るときは、白黒でも読めるか確認しましょう。
#FFFFFFRGB：255 / 255 / 255#333333RGB：51 / 51 / 51白黒印刷でも見やすい組み合わせです。
白黒印刷で確認したい配色を選ぶ
カードをクリックすると、カラーの見え方と白黒印刷後の見え方を確認できます。
カラーコード一覧｜資料でよく使う色とRGB
ここでは、資料やWebサイトでよく使う色のカラーコードとRGBを紹介します。
PowerPointやWordではRGBを使い、WebサイトやHTML・CSSではカラーコードを使うと便利です。
| 色名 | 色見本 | カラーコード | RGB | 使いやすい場所 |
|---|---|---|---|---|
| 白 | #FFFFFF | RGB：255 / 255 / 255 | 背景 | |
| 黒に近い色 | #111827 | RGB：17 / 24 / 39 | 本文、見出し | |
| 濃いグレー | #333333 | RGB：51 / 51 / 51 | 本文 | |
| 青 | #2563EB | RGB：37 / 99 / 235 | ボタン、リンク | |
| 濃い青 | #1E3A8A | RGB：30 / 58 / 138 | 見出し、公式資料 | |
| 薄い青 | #EFF6FF | RGB：239 / 246 / 255 | 案内ボックス | |
| 赤 | #DC2626 | RGB：220 / 38 / 38 | 注意、重要 | |
| 薄い赤 | #FEF2F2 | RGB：254 / 242 / 242 | 注意ボックス | |
| 緑 | #16A34A | RGB：22 / 163 / 74 | 完了、安心 | |
| ベージュ | #F7F3E8 | RGB：247 / 243 / 232 | 背景、やさしい印象 |
避けたほうがよい色の組み合わせ
色の組み合わせでは、見た目のきれいさよりも読みやすさが大切です。
次のような組み合わせは、資料やお知らせでは読みにくくなりやすいので注意しましょう。
文字と背景の差が小さく、読みにくくなります。薄い背景には濃い文字を使いましょう。
やさしい印象にはなりますが、本文には向きません。文字色を濃くしましょう。
人によっては違いが分かりにくい場合があります。「注意」「完了」などの文字も一緒に入れましょう。
見た目はやわらかいですが、文字が目立ちません。本文には濃い文字色を使いましょう。
色の組み合わせで失敗しない基本ルール
背景色と文字色の差をつける
背景色が明るいときは、文字色を暗めにします。背景色が暗いときは、文字色を明るめにします。
たとえば、白い背景には濃いグレーの文字が合います。薄い青の背景には、濃い青の文字が合います。
色は2色から3色にしぼる
色をたくさん使うと、どこを見ればよいか分かりにくくなります。
初心者の方は、背景色、文字色、強調色の3つに分けると考えやすいです。強調色とは、ボタンや大事な文字に少しだけ使う色です。
大事な情報は色だけで伝えない
注意、完了、危険などの意味を、色だけで伝えるのは避けましょう。
赤い文字だけで注意を示すのではなく、「注意」「重要」などの言葉も一緒に入れると伝わりやすくなります。
Webサイトでカラーコードを使う方法
Webページで色を指定するときは、#FFFFFF のようなカラーコードを使います。
CSSでは、文字色や背景色を次のように指定できます。
文字色を変える書き方
color: #333333;背景色を変える書き方
background-color: #F8FAFC;
色の組み合わせに関するよくある質問
見やすい色の組み合わせはどれですか？
白い背景に濃いグレーの文字を合わせる組み合わせが見やすいです。たとえば、背景色を#FFFFFF、文字色を#333333にすると、本文にも使いやすいです。
PowerPointで使いやすい3色の組み合わせはありますか？
背景色は白や薄いグレー、文字色は濃いグレーや濃い青、強調色は青を使うとまとまりやすいです。
たとえば、背景色を#FFFFFF、文字色を#111827、強調色を#1E3A8Aにすると、公式資料や発表資料に使いやすいです。
カラーコードとRGBの違いは何ですか？
カラーコードは、#FFFFFFのように色を表す番号です。WebサイトやHTML・CSSでよく使います。
RGBは、赤、緑、青の強さを数字で表す方法です。PowerPoint、Word、ExcelではRGBを使うことが多いです。
白黒印刷でも見やすい色の組み合わせはありますか？
白黒印刷でも見やすくするには、背景色と文字色の明るさの差を大きくします。
白い背景に濃いグレーや黒に近い文字を使うと、白黒でも読みやすくなります。
おしゃれな色の組み合わせより大切なことは何ですか？
資料やお知らせでは、おしゃれさよりも読みやすさが大切です。
まずは背景色と文字色の差をつけ、色を増やしすぎないようにしましょう。
色の組み合わせとカラーコードのまとめ
色の組み合わせで迷ったら、まずは読みやすさを考えましょう。
背景色と文字色の差をつけると、文字が読みやすくなります。PowerPointでは、背景色、文字色、強調色の3色を決めておくと、資料全体がまとまりやすくなります。
カラーコードやRGBを確認しておくと、PowerPoint、Word、Excel、Webサイトで同じ色を使いやすくなります。
また、資料は白黒印刷されることもあります。カラーで見やすいだけでなく、白黒でも読めるか確認しておくと安心です。