- ブログのデザインを決める上で、配色に悩んでいる
- WordPressでテーマの配色に悩んでいる
- Webデザインで配色にセンスがない！と自負している方
WordPressを利用してブログを始めるときに悩みがちなのが、配色。
後ほど詳しく説明しますが、配色はWebデザインにおいて、見た目だけでなくユーザエクスペリエンス（UX）においても非常に重要な役割を果たします。
とはいえ、どのように色を使うべきか、どうやって色を決めるべきなのか分かりませんよね。
この記事では、誰でも見やすいサイトが作れるようになる、配色のポイントを4つ紹介していきます。
この記事を読むことで、
- 「サイトの配色の決め方がわからない！」
- 「どんな色にすればいいか分からない！」
という方でも、とりあえず見やすい、納得のできるWebサイトが制作できるようになります。
コンテンツ
ブログの「配色」の重要性は？色使いは奥が深い。
WordPressを使っていざブログを制作してみようとすると、色使いに迷うことがありますよね。実際にやってみると分かるのですが、サイトの配色って意外と決められません。
ブログなどのサイト制作において、テーマの配色は今後のサイト全体のテーマや印象を左右するだけでなく、読者やユーザーの体験（UX）に大きく関わってくるので、非常に重要です。
サイト制作において、配色は超重要です！
断言します。
ブログを含めて、サイト制作をする際には、「配色」は使いやすさ(機能性)の次に重要です。
というのも、配色をあまり考えないと色同士が競合したり、統一感が無くなってしまうので読みにくくなってしまうんです。
分かりやすいように、悪い例と良い例を制作してみました。
《好きな色だけで構成した悪い例》
（クリックで拡大）
- 全体的に色の差が少なく（ほぼ同色）、見にくい。
- 原色が使われていて見にくい。
- サイト全体的に、色の役割が統一されていない。
- 「最新記事」「カテゴリー」の部分が見にくい。
このように配色を意識せず、好きな色だけをとにかく詰め込んでしまうと、全体的に落ち着かないので読みにくいですし、結果として個性だけが強いサイトになってしまいます。
悪い例でダメダメだったポイントを改善したサイトが、こちらです。
《配色のポイントが抑えられた良い例》
（クリックで拡大）
- 全体的に色が差別化されている。
- 淡い色で構成されていて、シンプルな見た目。
- 各色の果たす役割がしっかりしている。
見出しやカラムなど、サイトの構成を変えなくても、「悪い例」で目立ったポイントを変えるだけで、シンプルでまとまりのある見やすい雰囲気になりました。
ここでの「読みやすさ」は、もちろんユーザーの離脱率やリピート率に直結するので超重要なんです。
- サイトの雰囲気を視覚的に一発で表現できる
- サイト側が与えたい印象（読みやすさ）を表示できる
これだけで配色が上手くいく！4つのポイント。
ここで紹介する4つのポイントをしっかり押さえ、順番に配色を考えていけば、「とりあえず納得のいく綺麗なWebサイト」が作れます。
この4つを制する者が、Webデザインの配色を制します！
色は最大で3～4色に絞る
まず、色を決めましょう。ブログやサイトの配色を考えるときは色を3～4色に絞ることがポイントです。
配色に重要なのは統一感であり、色を3色前後に絞り込むことでまとまりのある、すっきりしたデザインになります。
例えば「無印良品」のサイトは、「黒」「グレー」「白」の３色を使うことで、統一感のあるシンプルな見た目になっていますよね。
どんな色を使うべきか分からないあまり様々な色を使ってしまいがちですが、色を多用しすぎると間違いなく失敗します。
とはいえ、どんな色を組み合わせるべきなのか、初心者にはなかなか難しいものです。
『Color Hunt（カラーハント）』なら、4色の組み合わせでベストな配色を表示してくれるので、「どんな色を組み合わせればいいか分からない！」という方でも簡単にセンスの良い配色を決められます。
あわせて読みたい
ベース、メイン、アクセントを理解する。
（クリックで拡大）
色を3～4色に絞ったあとは、それぞれの色の役割を決めることが大事です。
色の役割を決める、つまりサイト上に色を振り分けるときは、3つのポジションについてしっかり知っておくことが大切です。
- ベースカラー …サイトの70～80％。背景など。
- メインカラー …サイトの15％くらい。見出しやボタン。
- アクセントカラー …サイトの5％。小見出しやリンクなど。
色を振り分けるべきポジションには、ベースカラー、メインカラー、アクセントカラーの3つがあり、以下のような役割を持っています。
◆ ベースカラー
サイトの70～80％を占める部分。背景や左右の余白などがこれにあたり、多くの場合は「白」か「白に近い色」が使われます。
◆ メインカラー
サイトのメインになる色。サイトの印象やテーマカラーを決める最も重要なポジションです。好きな色で構いませんが、原色ではなく淡い色合いがおすすめ。
◆ アクセントカラー
サイトのアクセント、差し色になるポジション。サイトのうち5％前後で、小見出しやリンクなどに使うのがおすすめです。5％とはいえ、メインカラーとの調和が大事なので、一番決めるのが難しい色でもあります。
先ほどの「良い例」をもう一度確認してみましょう。
（クリックで拡大）
| ベースカラー | 白 | #FFFFFF |
| メインカラー | ネイビー | #30475e |
| アクセントカラー | 明るめのオレンジ | #f2a365 |
こうやって見てみると、ベースカラーである「白」がいかに比率を占めているのか分かりやすいです。
押さえるべきは色の構成比で、「80％：15％：5％」くらいがベストです。
これは黄金比のようなもので、バランスが崩れてしまうと、特定の色が目立ってしまうため統一感がなくなってしまいます。
▼ざっくり！色を各ポジションに振り分ける順番
ベースカラー（背景など）
70～80％
↓
メインカラー（好きな色、見出しなど）
15％前後
↓
アクセントカラー（メインと調和する色、リンクなど）
5％
ちょっとだけ、色が持つ印象を考えてみる
大まかな色とポジションが決まったら、サイトに適用する前に色が持つ印象を考えてみましょう。
色にはそれぞれの色が与える「印象」みたいなものがあり、ユーザーに与えるサイトの印象を左右するので意外と重要だったりします。
各色が与える印象は以下の通り。
| #eb4559 | 赤 | エネルギー、インパクト、情熱 |
| #46b5d1 | 青 | 信頼、誠実、清潔感 |
| #fc8210 | オレンジ | 陽気、親しみ、活動的 |
| #ffe277 | 黄色 | 明るい、楽しい、陽気 |
| #baf1a1 | 緑 | 癒し、環境、健康、自然 |
| #FFFFFF | 白 | 清潔、落ち着き、シンプル、柔軟 |
例えば、値札ではインパクトを与えるために赤が使われたり、企業サイトでは信頼と誠実さを示すために青が多く使われます。
ただし、あまり意識しすぎる必要はなくて、「サイトの配色が色の与えるイメージとあまりに離れすぎていないか」を確認するくらいでOKです。
コーポレートサイトなどでは色の効果を重視する場合もありますが、ブログなどであれば個性や読みやすさの方が重要なので、好きな色を軸に、色の効果も確認するくらいがちょうどいいです。
背景と文字は明度差（トーン）をつける
リンクやボタンなど、文字の背景に何らかの色がある場合は、明度差（トーン）に注意しましょう。
写真で示したように、文字と背景の色が同色であったり、あまりに明度差が少ない場合は文字が目立たないので見にくくなってしまいます。
書き手からすれば、
- 「そのリンク先に飛んで欲しい」
- 「リンクを目立たせたい」
という意識があってリンクやボタンを設置しますが、読みにくいとユーザーは意識してくれませんし、読みにくさからサイトの離脱に繋がる恐れがあります。
文字が見やすくなる組み合わせとしては、
- 白い文字×濃い色の背景
- 濃い色の文字×白い背景
- 濃い色の文字×薄い色の背景
があり、ベースカラー（背景）や周囲の色使いに合わせて使い分けるのがポイントです。
リンクやボタンを作成する場合や、文字の後ろに何らかの背景がある場合は、読みやすくするためにも明度差を意識してみましょう。
4つのポイントを押さえれば、誰でも美しいサイトを作れる
- 「サイトの配色の決め方がわからない！」
- 「どんな色にすればいいか分からない！」
という方に向けて、見やすいWebサイトが制作できるよう配色のポイントを4つ紹介しましたが、Webデザインは奥深く、これだけが正解ではありません。
デザインは、サイトの目的や種類などで変わりますし、そもそもユーザー側の好みは人によって違うので正解はないです。
とはいえ、Webデザインにおける配色の重要性は大きく、配色で失敗してしまうとユーザーの獲得には繋がりません。ブログやサイト制作で配色に迷った時は、4つのポイントをうまく活用して、ユーザー目線を意識したサイトづくりを心掛けてみましょう。
