SWELL:３色カラーパレットでお手軽コーディネート

自分のブログを印象付けるための、最も手軽で効果が出やすい方法が「ブログの色」をカスタムすることです。
この記事では、WordPressテーマ「SWELL」において、３色のカラーパレットを作って、お手軽にブログ全体の色を整える方法をご紹介します。

ブログの色をカスタムするときの２つのポイント

「SWELL」ではカスタマイザーや、設定のエディター内でいくつかの色を定義することができます。もちろん、デフォルト設定のままでも問題ありませんが、いざカスタムしようとすると、設定箇所が多過ぎて迷ってしまうことがあります。

そんなときは、以下の２つのポイントを意識してみると良いかと思います。

カラフルなデザインにはなったけど、文章としての視認性・可読性が悪いと、どんなに良い記事を書いても非常に読み難いものになってしまいます。背景色に対する文字色のコントラスト比とは、要するにどれだけ文字がくっきり見えるか？ということです。

例えば、以下のサンプルのAとBはどちらが読みやすいでしょうか？

ジョバンニはまるで夢中で橋の方を見てくすっとわらいました。あなたくじら見たことのあるような気がしてだまってしまいました。

ジョバンニはまるで夢中で橋の方を見てくすっとわらいました。あなたくじら見たことのあるような気がしてだまってしまいました。

おそらく、サンプルBの方が読みやすい、と感じたのではないでしょうか。この場合、Bの方が背景色に対する文字色のコントラスト比が高い、と言えます。

このように、単に好きな色を組み合わせるのではなく、文字の可読性（読みやすさ）を意識して、基本的には明るい背景色と黒文字、暗い背景色と白文字の組み合わせにすると良いと思います。

コントラスト比を確認するための便利なWebサービスをご紹介します。

最初にお伝えしたように、「SWELL」ではカスタマイザーや、設定のエディター内でいくつかの色を定義することができますが、一度にたくさんの色をカスタムするのではなく、まず「３色のカラーパレット」を決めてみることをお勧めします。

たった３色と思いますが、３色の組み合わせがあれば、デザインとしてまとまりやすく、色の持つイメージが見ている人に伝わりやすくなります。

その際に、例えばガジェット系のブログであればモノトーンや青や紫などの寒色系でクールなイメージ、ガーデニングについてのブログであれば緑や黄色、茶色などの自然をイメージさせるような組み合わせなど、ブログの持つテーマに合わせて３色を構成していきます。

ブログテーマが複数あるような場合は、自分の最も好きな色をベースに、それと合う色を組み合わせていくと良いかもしれません。

では、具体的に３色をどのように割り振っていくかですが、以下のように考えてみます。

３色の役割分担

1. メインカラー: 見出しの装飾や、ボタンなど、ページの中でアクセントとして用いる色を定義します。
2. 背景色: ブログの中で最も面積を占める背景に使用する色を定義します。「SWELL」テーマが元々白などの明るい背景色を想定したテーマなので、白、もしくは白にうっすら色を付けた程度の色にします。
3. サブカラー: 同一ページ内で話題を変える部分や、注目してもらいたい部分の背景に使用する色を定義します。

どの色から決めていくかは人によって違うかもしれませんが、ここではまず「メインカラー」を決めて、その後で残りの色を決めていく最もお手軽な方法をご紹介します。

メインカラーの決め方としては、

そのブログを１つの色で表すとしたら何色？

を考えてみましょう。テーマに沿った青や赤や緑がなんとなく浮かんだのではないかと思います。

ではその浮かんだ色を元にして、先ほどご紹介した「色のコントラストチェッカー」で、白文字と組み合わせたときのコントラスト比が4.5を超えるように調整してみましょう。