- ブログのデザインを決める上で、配色に悩んでいる
- WordPressでテーマの配色に悩んでいる
- Webデザインで配色にセンスがない！と自負している方
WordPressを利用してブログを始めるときや、サイト制作で悩みがちなのが、配色。
後ほど詳しく説明しますが、配色はWebデザインにおいて、見た目だけでなくユーザエクスペリエンス（UX）においても非常に重要です。
とはいえ、どのように色を使うべきか、どんな色を組み合わせるべきなのか分かりませんよね。
この記事では、ブログなどのサイト制作において配色を決定するのに超便利なツール、『Color Hunt（カラーハント）』と、その使い方を紹介していきます。
この記事を読むことで、「サイトの配色に自信が全く無い！」という方でも、一発で納得のできる配色ができるようになります。
コンテンツ
サイト制作の「配色」って、何気難しい。
WordPressを使っていざサイト制作をしてみようとすると、色使いに迷うことがありますよね。
ブログを始める前は、記事の内容や全体的なデザインに悩むのは当然なのですが、サイトの配色が意外と決められません。
ブログなどのサイト制作において、テーマの配色は今後のブログ全体のテーマや印象を左右するだけでなく、読者やユーザーの体験（UX）に大きく関わってくるので、非常に重要です。
サイト制作において、配色は超重要。
断言します。
ブログを含めて、サイト制作をする際には、「配色」は使いやすさ(機能性)の次に重要です。
クリックでサイトへ移動
例えば、これは僕が運営している旅行ブログ『Wanderlust』ですが、このブログのテーマカラーはロゴを含めて全て青緑色に統一しています。
淡い色合いで統一することでシンプルな見た目になっていますが、ユーザーが見たときに一目でブログの雰囲気を把握できるだけでなく、落ち着いた色使いで統一することで「読みやすい」印象を与えています。
ここでの「読みやすさ」は、もちろんユーザーの離脱率やリピート率に直結するので超重要です。
- サイトの雰囲気を視覚的に一発で表現できる
- サイト側が与えたい印象（読みやすさ）を表示できる
とはいえ、どのように色を使うべきか、どんな色を組み合わせるべきなのか分かりませんよね。
デザインを勉強したことがないド素人の僕も、当初はブログの配色にとても悩みましたが、『Color Hunt（カラーハント）』を使えば一発で解決しました。
『Color Hunt（カラーハント）』とは？使い方は？
『Color Hunt（カラーハント）』とは？
『Color Hunt（カラーハント）』とは、様々な配色パターンを提供してくれるカラーパレットツールです。
カラーハントは様々な配色パターンを公開しているツールで、どのように色を使うべきか、どんな色を組み合わせるべきなのかを4色の組み合わせで紹介してくれます。
種類が豊富なので色のパターンが固定化しないですし、配色のインスピレーションを受けられるのでおすすめです。
『Color Hunt（カラーハント）』の使い方
上のボタンからColor Huntにアクセスすると、様々な配色パターンが表示されます。
気になる配色を見つけたら、色の部分にマウスオーバーしてみます。
マウスオーバーすると16進数カラーコードが表示される（右）
マウスオーバーすると、#から始まる16進数カラーコードが表示されるので左クリックでコピーするだけです。
他の配色パターンを開きたいときは、右側にある検索バーからパターン別に検索ができます。
例えば、Autumn（秋っぽい色）で絞るとこんな感じです。
色別の検索はもちろん、季節別やイベント別など、テーマにあった配色パターンを検索することもできるのが嬉しいです。
WordPressでテーマに適用する方法
Color Huntの配色をWord Pressでブログやサイトに適用するには、先ほどの16進数カラーコードをコピペするだけなので非常に簡単です。
Word Pressの管理画面から、「外観」→「カスタマイズ」を選択し、変更したい箇所のパレットに16進数カラーコードをコピペします。
- ここではWord Press有料テーマ「ストーク (旧)」を使っています。ご利用のテーマによって仕様が若干異なりますが、基本は一緒です。
サイトの背景を全体的に白（#ffffff）からベージュ（#f2e3c9）に変えてみました。
ブログの配色に迷ったら、とりあえず『Color Hunt』でOK
- サイトの雰囲気を視覚的に一発で表現するので、印象に影響する
- 読みやすさに関わる。つまり、ユーザーの離脱率やリピート率に大きく影響
→見た目だけでなく、UXに大きく影響する！
ブログなどのサイト制作において、配色は非常に重要です。
ブログの配色に迷ったら、とりあえず『Color Hunt』を使っておけばOKです。
配色パターンを４つで表示してくれる『Color Hunt（カラーハント）』をうまく活用して、ユーザー目線を意識したサイトづくりを心掛けてみましょう。
あわせて読みたい
