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

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

目次

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

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

カスタマイザーの基本カラー設定
SWELL設定のエディター設定

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

  • 背景色に対する文字色のコントラスト比を高くする
  • ブログのテーマに合った3色のカラーパレットを決める

背景色に対する文字色のコントラスト比を高くする

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

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

サンプルA

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

サンプルB

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

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

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

コントラスト比を確認する

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

「色のコントラストチェッカー」では、背景色と文字色を選択することで、そのコントラスト比を計算し、文章が読みやすいかどうかを確認することができます。

色のコントラストチェッカーの結果サンプル

一般的に、通常文字がコントラスト比4.5以上(AA)のものが読みやすいとされています。色の組み合わせによる文章の読みやすさの目安として利用してみてください。

ブログのテーマに合った3色のカラーパレットを決める

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

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

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

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

3色の役割分担

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

3色の役割分担
1. メインカラー

見出しの装飾や、ボタンなど、ページの中でアクセントとして用いる色を定義します。

2. 背景色

ブログの中で最も面積を占める背景に使用する色を定義します。「SWELL」テーマが元々白などの明るい背景色を想定したテーマなので、白、もしくは白にうっすら色を付けた程度の色にします。

3. サブカラー

同一ページ内で話題を変える部分や、注目してもらいたい部分の背景に使用する色を定義します。

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

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

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

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

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

コントラスト比が4.5以上になるように調整

調整してできた色をメインカラーとして定義します。

メインカラー
#1764c8

背景色

サブカラー

次に、黒文字とのコントラスト比に注意しながら、メインカラーをおもいきり薄めた色、もしくは白を背景色として定義します。

メインカラー
#1764c8

背景色
#effbfe

サブカラー

最後に、メインカラーをおもいきり濃くした色をサブカラーとして定義します。

メインカラー
#1764c8

背景色
#effbfe

サブカラー
#171d5b

これで、同系統の色で3色のお手軽カラーパレットが完成しました。続いてこのカラーパレットをブログに反映していきましょう。

カラーパレットをブログに反映する

「SWELL」カスタマイザーの「サイト全体設定」→「基本カラー」へ進み、メインカラー背景色を反映します。

基本カラーを定義する

同様に、「SWELL」カスタマイザーの「ヘッダー」で、ヘッダー背景色に、基本カラーの背景色と同じ色を反映します。

サブカラーに関しては、カスタマイザーでは項目がないので、使用したい箇所に手動で背景色(と文字色)として定義する必要があります。「SWELL設定」→「エディター設定」のカラーパレット設定で、カラーパレット【濃】に登録しておくと呼び出しやすくなります。

カラーパレットにサブカラーを定義する

カラーパレットを反映したページが以下のようになります。

トップページ
記事ページ

事前に、「SWELL」カスタマイザーの「投稿・固定ページ」→「コンテンツのデザイン」で、見出しのデザイン設定を「左に縦線「や「付箋風」などの控えめな装飾にしておくと良いかもしれません。

見出しの装飾をカスタムする

3色カラーパレットのサンプル

最後に、同様の方法で作成した3色カラーパレットのサンプルをご紹介します。

赤系のカラーパレット

メインカラー
#d3396c

背景色
#fff4f2

サブカラー
#702a42

トップページ
記事ページ

緑系のカラーパレット

サブカラーを、背景色よりも若干濃くして、黒文字と合わせるのも有りです。

メインカラー
#4a6d67

背景色
#eff1f4

サブカラー
#c3d7d9

トップページ
記事ページ

カラーパレット見本のWebサービスを利用する

自分で一から構築するのも良いですが、バランスに優れた様々なカラーパレットを閲覧できるWebサービスも存在します。

ColorDrop

これらのWebサービスを参考にカラーパレットを決めてみるのも良いでしょう。

メインカラー
#d74b4b

背景色
#efefea

サブカラー
#354b5e

トップページ
記事ページ

是非自分なりの3色カラーパレットを作って、ブログを彩ってみてください!

この記事がお役に立てたのならシェアをお願いします!
  • URLをコピーしました!
目次