ブログの配色パレットの作り方｜世界観に合う3色の決め方

本記事にはアフィリエイト広告（プロモーション）が含まれています。

ブログを作るときに、悩みがちなのが「色選び」。

「緑をメインに使いたいけど、具体的にどの色コードを設定すればいい？」
「この色とこの色の組み合わせってあり？」
「何度もカスタマイズしていたら、場所によって、色が微妙に違う・・・」

そんな時はぜひ「配色パレット」を作ってみてください。

ブログの色コード、こんな風に設定していませんか？#

ブログでは、色はカラーコードと言われる、6桁の英数字の組み合わせで表示されます。

例えば、白だと「#FFFFFF」というコードを使います。
黒だと「#000000」というコードを使います。

ブログなどWebで色を使うときにはこのコードで何色かを指定していきます。

さて、ブログのデザインを変えるとき、WordPressなどの設定画面を開いて、カラーパレットを「うーん、このへんのピンクかな？」と直感でクリックしていませんか？

すると、人間の目は無意識に「一番きれいに見える、鮮やかで明るい色」を選んでしまいがちです。ブログ全体で見ると濃すぎたり、目がチカチカしてしまうことがあります。
また、他の色との組み合わせを見ることができないので、全体で見たときにチグハグな印象になりやすいのです。

まずは、ブログの設定画面に入る前に、使う色を決めておきましょう！

あらかじめ、使う色コードを決めておくべし！

理想の世界観に合ったカラーを見つけるには#

まずは、ブログの「外」で、お気に入りの色を探しましょう。
気になる色コードが見つかったらメモ帳にコピペしておきましょう。

配色見本から選ぶ#

一番シンプルで簡単なのは、プロの配色サイトです。

また、本から好きな配色を選ぶのも、簡単にバランスにとれた配色になるのでおすすめです。
ただ、紙面での色とディスプレイで見た時の色は違って見えることも多々あるので、実際に画面で見て、色を調整しましょう。

写真から色を選ぶ#

もし、イメージに近い写真があったら、その写真の中から色を選ぶのもおすすめです。

Coolors Image Pickerを使うと、写真から色コードを出すことができます。

写真をアップロードする
右側の写真から気になる色を◯で選ぶ
左側のパレットから色コードを取得

画面から色をスポイト#

いろんなホームページやブログを見てて「この色いいな」と思うことありますよね。

Google Chromeの拡張機能を使うと、画面上の色をスポイトする（拾う）ことができます。
私が使っているのはColor Zillaです。

拡張機能をインストールした後、スポイトツールを起動
気になるところに●を合わせる
上に色の情報が出てくる
クリックすると色コードがコピーできる

色を選んで配色パレットを作ろう#

気になる色を２〜３色選んだら、配色パレットを作りましょう。

配色パレットとは、使う色を並べて、どれか浮いた色がないか、バランスを確認するためのものです。
また、色コードを記録しておくことで、違う色を選ぶミスを減らせます。

私はcoolorsのPalete Generatorを使っています。

下の方にある太字の英数字のところに色コードを入れていきます。

メインの色
アクセント
ベースカラー（背景色）
文字色

ブログで使う場所を決めて色を選ぶといいです。

メインの色、アクセント、ベースカラーについては、この記事の「カラーは３色にしぼる」をご覧ください。

私らしい世界観をブログで表現する６つのポイント

ここまで準備ができたら、ブログの設定画面を開きます。

カラーピッカーは触らず、メモしておいたカラーコードを奥にペーストしましょう。

実際に色をのせたら「読みやすさ」をチェック#

この色がいいと思って選んでも、実際にディスプレイに載せてみると印象が変わることもしばしばあります。

特に「文字の読みやすさ」「画面の見やすさ」は注意してみましょう。

背景の色が濃すぎたり、文字の色が薄すぎると、中身を読んでもらえない・・・なんてことになりかねません。

先ほど紹介したcoolorsのPalete Generatorでは、マウスを重ねて「View Shade」を選んでみてください。
上下に動かすと、同じ色の濃さを調整できます。

配色パレットを使って統一感のあるブログを作りましょう#

配色パレットは、いろんなところで役立ちます。

例えば、アイキャッチ画像を作るときの色選び。
ブログの記事を書くときも、文字色やマーカーの色。
ブログ内で使う色を、配色パレットの色と揃えることで、簡単に統一感のある印象が作れます。

さらに世界観にこだわったデザインにしたい方はこちらの記事もご覧ください。
一人でもできるデザインのポイントをまとめました。

私らしい世界観をブログで表現する６つのポイント