デザイン初心者必見!色彩学に基づくブログをおしゃれにする配色の基本

デザイン初心者必見!色彩学に基づくブログをおしゃれにする配色の基本

人気のテーマをインストールして、ブログの見た目がある程度まとまってきた!
でも、みんなが使ってるテーマだから、オリジナリティのないデザインになっちゃったな。
手軽に手を出せる配色でオリジナリティのあるおしゃれなデザインにしたいけど、どうやったらおしゃれな配色にできるんだろう。

 

せっかくブログを作るなら、おしゃれなデザインのブログにしたいですよね。

ブログをおしゃれにするために、ブログの各パーツの配色をああでもない、こうでもないと試行錯誤しながら調整した経験は、皆さんお持ちだと思います。

 

試行錯誤デザインを修正する中で、このように思った方も多いのではないでしょうか。

 

おしゃれなデザインのブログをまねして配色すれば、簡単に自分のブログもおしゃれにできそう!
とはいうものの、おしゃれなデザインのブログを見れば一目でおしゃれだと判断できるけど、実際にそのブログをまねしてデザインしてみてもどうもおしゃれにならないな。

 

実は、人がおしゃれだと感じるデザインは、色彩学という色に関する理論に基づいて設計されていることが多いです。

おしゃれなブログのデザインを完全にまねて自分のブログを作るなら、根底にある色彩学の知識は不要です。

しかし、自分なりにアレンジを加えてデザインしたいなら、色彩学の考え方はある程度理解しておく必要があります。

 

本記事では、ブログの配色を決めていく上で必要な、色彩学の基本的な考え方をご紹介します。

今回ご紹介する情報は、デザイン初心者が何かをデザインするときに知っておくと便利な基本的な知識です。

 

基本的な知識とは言え、個人的には、デザインを専門方でもなければ、ここで紹介するような基本的な配色の知識を知っているだけで十分です。

本記事で紹介する知識を持っているだけでも、デザインの効率、統一感をかなり向上させることが可能です。

 

以下記事のざっくり要約です。

・人がおしゃれだと感じるデザインは、色彩学に基づいている
・配色の基本は、ベース:メイン:アクセント = 70:25:5
・おしゃれに見える配色パターンからベース、メイン、アクセントカラーを決める
・トーンを理解するとデザインの幅が広がる

 

Advertisement

 

ブログをデザインする上で知っておきたい色の基本知識

色彩学は、色や色の組み合わせに対して、人間が抱くイメージに関する分野です。

ここでは、色彩学を理解するために必要な、色の基本的な知識をご紹介します。

コンピューターでの色の表現方法

ブログはコンピューターで動いているわけですから、ブログの配色を考えようと思ったら、まずコンピューターで色がどのように表現されているのかを知る必要があります。

コンピューターで色を表現する方法はいくつかありますが、ここでは、代表的な色の表現方法(RGB、HSV表色系)について触れます。

基本的にこの二つの表現方法さえ理解しておけば、ブログをデザインする上では十分です。

RGB表色系とは?

RGB表色系は、赤(Red)、緑(Green)、青(Blue)の3色の原色の組み合わせで色を表現する表色系です。

基本的には、R、G、Bそれぞれの強度を0~255の256段階で表現し、3つの値を組み合わせることで、色を表現します。

RGBのそれぞれの強度で色を表現しているため、絵の具などの間隔に近く、直観的に色を理解できる表色系です。

 

ブログに直接関係するところだと、RGB表色系は、WordPressのテーマの色を設定するところで使われています。

ここでは、#の後にR、G、Bの順に2桁の16進数で値を指定し、色を表現しています。
(R=60, G=9f, B=9f)

16進数に関する細かい説明は省きますが、詳しく理解したい方は別記事で解説しますので、そちらを参照ください。
(近日作成予定)

 

WordPressで各パーツの色を変更する際には、16進数でのRGB表色系で設定する必要があるので覚えていた方が直感的に変更できますが、ツール等で変換可能なため、必ずしも表記を覚える必要はありません。

HSV表色系とは?

HSV表色系は、色相(Hue)、彩度(Saturation)、明度(Value)の3つのパラメータで色を表現する表色系です。

色の組み合わせを考える際には非常に便利な表色系です。

しかし、RGB表色系と違って直感的に色をイメージし辛いのが難点です。

 

色相、彩度、明度の3つのパラメータは、それぞれ以下のような意味を持ちます。

パラメータ パラメータの意味 値の範囲
色相(Hue) 色の種類(赤、青、緑等の色 0~360
彩度(Saturation) 色の鮮やかさ(色が明度の割合のうち何%か 0~100 [%]
明度(Value) 色の明るさ(白と色が全体の何%か 0~100 [%]

各パラメータとも括弧書きで、かみ砕いた説明を記載してあります。

彩度(色の鮮やかさ)と明度(色の明るさ)は本当に直感的にわかりにくいパラメータです。

彩度と明度については、HSV表色系は黒と白と色の3つの割合で色を表現していると認識した上で、括弧書きのようなイメージを持っていると理解しやすいかと思います。

 

色相は、以下のような色相環の角度で色を表現します。

 

以下に、HSV表色系を使ったいくつかの色の例を提示しておきます。
以下の例が直感的に分かれば、HSV表色系での色の表現は理解できているかと思います。

彩度が0 ⇒ 色相、明度をどの値に設定してもグレースケール。
明度が0 ⇒ 色相、彩度をどの値に設定しても黒。
彩度が100、明度が100 ⇒ 色相で設定した色の原色。

 

ここまでの説明では、HSV表色系は、ただただ直感的に分かり辛い表色系だなという印象にしか持っていないかと思います。

しかし、HSV表色系は、後で説明するトーンを理解する上で、必須の知識です。

そして、トーンは相性の良い色の組み合わせを考える上で、非常に便利な考え方です。

とっつきにくい内容ですが、HSV表色系をしっかり理解しておくことで、デザインの幅が広がるので、是非覚えてみてください。

 

配色を考える上で必要な色に関する説明は以上です。

配色だけに限らず、デザインを考える上で知っていた方が良い色に関する知識は、他にも沢山あります。

それらの情報については、後日別記事にてご紹介予定です。

 

Advertisement

 

ブログをデザインする上で知っておきたい配色の基本知識

ここからは、色と色の組み合わせ、配色に関する知識をご紹介していきます。

ここで紹介する組み合わせの良い配色を考えるアプローチは、以下の二つです。

・色相から配色を考えるアプローチ

・トーンから配色を考えるアプローチ

以下でそれぞれ順番に説明していきます。

色相から考える組み合わせの良い配色

色相には、一般的に組み合わせの良いと言われる配色パターンが存在します。

色相から組み合わせの良い配色を見つける方法は、この配色パターンから自分に適したパターンを決めるだけです。

非常に単純ですね。

 

組み合わせの良い色相のパターンは、色相環を用いて説明されることが多いです。

 

以下が代表的な配色パターンです。(特に名前を覚える必要はないです。)
デザイン初心者なら、基本的には以下のいずれかから選ぶ形で問題ありません。

配色パターン 色相数 角度 備考
同一色相配色 1 同系色。おとなしく、無難な印象。
隣接色相配色 2 15° 近い色相の色を使う。比較的統一感が出やすい。
補色色相配色 2 165, 180° 色相が反対の色を使う。明度で変化をつけるとまとまりやすい。
類似色相配色 3 30, 45° 比較的近い色相の色を使う。比較的統一感が出やすい。
中差色相配色 3 60, 75, 90, 105° やや色相が離れた色を使う。アジアでは伝統的。
対照色相配色 3 120, 135, 150° 色相が離れた色を使う。純色同士の配色はかなり主張が強い。

 

具体的な各配色パターンの例は以下です。
(いずれも赤を基準とした例ですが、他の色を基準とする場合も同様です。)

 

色相が対照的だと、強調したい箇所をより目立たせることができます。

そのため、ブログでは補色色相配色や対照色相配色が使いやすいです。

個人的には、2色でまとめるなら補色色相配色、3色でまとめるなら対照色相配色という使い分けで良いと思います。

基準とする色相は、色が持つイメージ・心理効果から決めると良い

色相から組み合わせの良い配色を見つけるためには、配色パターンをもとに色を決めていけば良いということはわかりました。

しかし、配色パターンが決まっても、基準とする色相が無数にあるため、配色パターンも無数に存在します。

 

配色パターンの基準とする色を自分の好きな色としても良いですが、色が持つイメージや心理効果から自分のブログに適した色を基準の色に選ぶのも一つのアプローチです。

色が持つイメージを有効に利用することが出来れば、見た目がおしゃれなデザインから、発言の説得力を向上させるおしゃれなデザインに進化させることができます。

 

一般的に色は、以下のようなイメージを持つと言われています。

イメージ
危険、興奮、喚起、情熱
オレンジ 容器、健康、喜び、元気
黄色 希望、容器、警戒、注意
安らぎ、若々しさ、新鮮、成長
さわやか、清涼、理性的、清純
高貴、女性的、強さ、不安
罪、絶望、威厳、不信感
清純、清潔、平和、申請

 

色が持つイメージから配色パターンの基準とする色を決める場合には、上記の色のイメージから、読み手にどのような印象を持ってもらいたいかを基準として、決めれば良いでしょう。

配色の基本は、70:25:5

使用する配色パターンが決まれば、あとはその色を使って配色していくだけです。

配色する際のポイントは、ベースカラー、メインカラー、アクセントカラーを70:25:5の比率に設定することです。

各用語とポイントは以下にまとめてあります。

配色カテゴリ 比率 対象 ポイント
ベースカラー 70% 背景 ブログでは、白が使われることが多い。
メインカラー 25% メニュー、見出し、ボタン等 補助的な色なので、低彩度が良い。
アクセントカラー 5% 強調したい箇所 ベースカラー、アクセントカラーと色相やトーンが対照的な色にすると良い。

 

以下は実際にこういった考えのもとデザインされている例です。

ポカリスエット(ベースカラー:青、メインカラー:白、アクセントカラー:黄(補色色相配色))

トーンから考える組み合わせの良い配色

ここまでの説明で、配色を決めていくにあたり、どのような方針で使用する色を決めていけば良いかはわかったかと思います。

ただ、ここまでの説明だけでは、以下のサンリオのウェブサイトのような色々な色相を使ったデザインがなぜ整ったデザインに見えるのか説明できていません。

 

サンリオのウェブサイトのようなデザインを理解するためには、HSV表色系に関する説明の中で名前だけご紹介した『トーン』について理解する必要があります。

 

『トーン』は配色を考える上で便利な考え方の一つです。

ここでは、まずトーンとは何かをご説明し、その後にトーンを使った配色の基本的な考え方をご説明します。

トーンとは?

トーンとは、色の彩度と明度を固定し、色相のみ変化させることで得られる色の集合のことです。

説明が堅苦しいですね。

以下の図を見ると理解しやすいです。

 

上の図では、6角形の角に配置した6色の色の集まりを12個表示してあります。

6色の色の集まりそれぞれがトーンで、各6色に囲まれた文字がトーンの名前です。

 

HSV表色系では、色相(色の種類)、彩度(色の鮮やかさ)、明度(色の明るさ)の3つのパラメータで色を表現するとご説明しました。

そのうち、彩度と明度を固定すると、色の鮮やかさと、色の明るさが決まります。

 

つまり、トーンとは、色の明るさ、鮮やかさが近い色の集まりのことを指します。

トーンから考える組み合わせの良い配色

各トーンの色を見てください。

どのトーンも色に統一感があるように感じませんか?

 

色々な色相の色を使っていても、トーンが揃っていれば、配色に統一感が生まれます。

 

サンリオのウェブサイトが整って見えていたのは、多くの色相を使ってはいるものの、いずれも低彩度、高明度で、トーンが揃っていたためです。

 

この知識は非常に便利です。

補色色相配色や対照色相配色でデザインする中で、もう一色他の色を使いたいというときには、メインカラーとして使っている色と同じようなトーンの別の色相の色を使えば、統一感が損なうことなく、色を追加できます。

 

また、トーンほど統一感は生まれませんが、明度、彩度、色相のどれか一つが一致した色同士も相性が良いです。

知識の一つとして持っておけば、デザインの幅は広がります。

 

Advertisement

 

まとめ

ブログの配色を決めていく上で必要な色彩学の基本的な考え方をご紹介しました。

WordPressを利用されている方なら、人気のあるテーマをインストールして、本記事で紹介した配色に関する知識をもとに配色すれば、ある程度オリジナリティのある整ったデザインにできるのではないかと思います。

 

参考までに、本ブログでは、以下のようにデザインをまとめています。

  • 記事:緑を基準にした補色色相配色
  • Topページ:緑を基準にした対照色相配色
  • トーン:低彩度、中明度

 

本記事が、ブログのデザインを考えている方の参考になれば幸いです。

ITカテゴリの最新記事