「ブログを始めてみたけど、記事どうこう以前にデザインが決まらない」という方！それ「ブロガーあるある」なので心配しなくて大丈夫ですよ。
今となっては大して弄りまわすような箇所もありませんが、ブログ開設当初の私は「それっぽいデザイン」を整えるのに四苦八苦したものです。が、お陰でそれなりにデザイン（？）できるようにもなりました。
ただ、特に悩ましいのが「配色」なんですよね。皆さんも「他の人のブログとは差別化したい」「でもどんな色の組み合わせがいいのかわからない」「いざやってみると野暮ったくなっちゃう」なんて悩んでいませんか？
そこで今回は、私が活用している配色提案ツール「Hello Color」を、実際にどんな風に使っているのかも含めてご紹介したいと思います！
この記事の見出しはこちら
配色ツール「Hello Color」とは
「Hello Color」は画面をクリックする度に、新しい配色を提案してくれるツール（サイト）です。特徴は「コントラスト」に重点が置かれているところですね。
配色を提案してくれるツールなら他にも優秀なものがいくつもありますが（参照：「ferretさんの記事」）、「Hello Color」はコントラストに加えて「グラデーション」と「アクセントカラー」を提案してくれるので使い勝手が◎！
これ↑は「Hello Color」のページ下部ですね。上段の7色はメイン2色の「グラデーション」、下段の5色はメイン2色と相性の良い「アクセントカラー」となっています。
他のツールでもグラデーションやアクセントカラーを提案してくれるものがあるので、それらを組み合わせて使ってもいいのですが、これだけあれば不要でしょう。また、色数がちょうどいいのもポイントです。
しかし、配色の基本的な割合「ベースカラー7割、サブカラー2.5割、アクセントカラー0.5割」に当てはめてイメージしてみると、メイン2色がしっかりした色のせいか、少しばかり「重たい印象」を受けませんか？
ということで、ここからは「使うときにどんなことに気を付ければいいのか」など、私流の「Hello Colorの使い方」をご紹介していきたいと思います。
「Hello Color」の使い方【私の場合】
「カラーコード」について（初心者向け）
本題に入る前に、念のため「カラーコード」について触れておきましょう。カラーコードは「#1234ab」のように「#」以下6桁の英数字によって色を表現する記法のことです。
「RGB（赤緑青）」の「色光の3原色」をそれぞれ「1バイト（256通り）」ずつ加法混色することで複雑な色を表現できます。そのため、使われる英数字は16進法の「0~9、a~f」です。
「#」以下6桁の英数字のうち始めの2桁がR（赤）、真ん中の2桁がG（緑）、最後の2桁がB（青）を表していて、白色が「#ffffff」、黒色が「#000000」となっています。
Webデザインではこのコードを使って色をやりとりします。「Hello Color」を見れば色ごとにカラーコードが表示されていることが分かりますね。気に入った色があれば、それをコピペしてWPテーマのカスタマイズに使いましょう。
「ビビッドカラー」「ネオンカラー」は避ける
とりあえず「Hello Color」を眺めてみて、インスピレーションでちゃちゃっと配色を選んでしまっても構いませんが、できれば気を付けてほしいポイントがあります。それが「ビビッドカラー＆ネオンカラーは避ける」という点です。
「ビビッドカラー」は鮮やかな色、具体的には「高明度・高彩度な色」のこと。「ネオンカラー」はネオンサインを想起させるような色、分かりやすく例えると「目がチカチカするような色」のことです。
ビビッドカラーは上手く使えば「明るい印象」を与えることができますが、失敗すると「垢ぬけない印象」を強めてしまいます。つまり、デザインを修めていない私たちは無難に使用を避けるべき「難易度の高い色」なのです。
ネオンカラーを避けるべき理由は分かりやすいと思います。当たり前ですが、ブログは心地よく見てもらうに限ります。眺めているだけで目の負担になるような配色は百害あって一利なし。避けるに越したことはありません。
「メインカラー」と「中間色」で全体を整える
お気に入りのコントラストが見つかったら、WPテーマのカスタマイズに反映させていきましょう。サイトの全体的なカラーリングは「ヘッダー」「フッター」「背景」で決まります。
サイトの大枠となる「ヘッダー」「フッター」は、メインカラーとグラデーションで統一するとサイト全体が整った印象になるので◎！メイン2色のうち気に入っている方（とそちら側に近いグラデーション）を使いましょう。
ただし、これまた前述したように「Hello Color」のコントラストは重たいことが多いので、「背景」にもそのままもう一方のメインカラーを採用してしまうと、全体的に暗い雰囲気になってしまうことがあります。
そんな時は、シンプルに色を薄めちゃいましょう。「中間色ジェネレーター」なんかが使いやすいですね。
背景にしたいメインカラーと白「#ffffff」の中間色か、それを白でさらに薄めた中間色を「背景」にすることで、サイト全体の雰囲気が格段に明るくなると思います。
このサイトでは「#2c4b82」のコントラストをそのまま使っていますが、そういった場合はサイトの背景ではなく、「投稿ブロックの背景」を「薄めに薄めた中間色」にするのがおすすめです。
そうすることで、メインカラーの「重いコントラスト」と「明るすぎる白」との違和感を中和することができます。ちなみに、このサイトの白は全部「#f9fafc」（メインカラー「#2c4b82」を白「#ffffff」で5回薄めた色）です。
「アクセントカラー」で細かい装飾を攻める
ブログは運営していくうちに、記事のサムネイルや広告で徐々に賑やかになっていきますが、それとは別に「もう少しだけ色味が欲しいポイント」が出てくるものです。そんな時に「アクセントカラー」は使えます。
この記事でいえば「見出し」「カテゴリータグ」「アイキャッチ背景」に「#2c4b82」からアクセントカラーを採用しています。全色使う必要もありませんが、使っても問題ありません。
ただし、アクセントはあくまでアクセントなので使うポイントを限定しましょう。透明度を上げたり、細いライン状の装飾に使ったりすると、よりスッキリした印象になると思います。
コントラストを選ぶ段階でアクセントカラーのバリエーションを確認しておくと万全ですが、「コントラストは気に入ったのに良い感じのアクセントカラーがない」という問題の解決策もあります。
「カラーコード」の項で触れましたが、「#」以下6桁の英数字は2桁ずつR（赤）G（緑）B（青）を表しています。分かりやすく表記すると「#RRGGBB」といった感じです。
そこで、メインカラーかアクセントカラーのコード「#RRGGBB」を「#GGBBRR」や「#BBGGRR」のように入れ替えてみてください。（例：「#1234ab」→「#34ab12」）
検索してみると、似たような味わいの色が見つかると思います。なので、そちらの色も選択肢に入れることができるはずです。
注意点としては、たとえば「RR」が「1e」という値だったとしたら、それを「e1」に変えてしまわないように！ということですね。2桁セットは崩さないようにしましょう。
最後に：ブログの命は「コンテンツ」
最後までご覧いただきありがとうございます。ブログの配色に悩んだときは、ぜひ「Hello Color」を使ってみてくださいね。
と、ここまでいって何ですが、「ベースとサブカラーは白灰、アクセントはビビッドカラー単色」という配色でも人気を博すブログはいくらでもあります。
なぜなら、ブログの価値を決めるのはあくまで「コンテンツ」だからです。デザインやカラーリングも大切ですが、そればかりに気を取られ記事の更新を怠ってしまえば、せっかくのデザインも無意味になります。
なので、今回の内容でいえば「全体を整えた段階」で、記事執筆に注力し始めた方がいいと思います（と反面教師が語っています。笑）。細かい装飾や配色は、記事執筆の息抜きにすると効率が◎です。
