アクセントカラーを分割して、色を増やす方法です。
サブカラーと同じ方法で分割する
アクセントカラーもサブカラーと同じように分割することが出来ます。最初に決めていたアクセントカラーと似た色を選ぶようにしましょう。大きく動かしてしまうと、サブカラーやベースカラーに似てきてしまうので、アクセントカラーとしての機能を損なうことになります。
元々使われる面積が小さいアクセントカラーをさらに細かくするということで、使い方によっては逆に目立たなくなってしまう場合もあります。アクセントカラーを分割するのは2色くらいまでにしておくのがよいでしょう。
アクセントカラーの分割サンプル
サンプルはサブカラーの分割のページで使った物を使います。左右ともアクセントカラーを2分割して、明度が低い方の色を見出しに使ってみました。アクセントは目立たせるための色ですので、小面積でワンポイントで使用することを考えた方が、全体のイメージを損ないません。
« 隠す
アクセントとしてワンポイントで使えるような色の選び方です。
今までの２色とは違う色を見つける
アクセントカラーとは配色の中に少量混ぜて（ここでは5%程度）、その部分を目立たせる色のことです。重要なのは少量というところで、あまり多くなってしまうとサブカラーと存在感が逆転してしまいます。その結果せっかく作った配色イメージが崩れてしまいますので、その分量に常に気を付けて使用します。
アクセントカラーの選ぶ際の注意
このように書いてくるとどんな色を選んでよいかわかりにくくなると思いますが、今まで選んできたベースカラー・サブカラーと離れた色を選ぶのですが、具体的には色相・明度・彩度をサブカラーを決めた時以上に大きく動かして作ります。ただし3つとも動かすと今までの段階となんら関係のない色になりますので、どれか2つを動かし、三属性のうちの1つを共通するものとして残すようにしましょう。
アクセントカラーは派手じゃなくともよい
アクセントカラーは派手であればいいということではありません。Yahoo!を見てみるとロゴの赤のインパクトは大きいですが、それ以外の部分はリンクの青色がほとんどを占めています（何度も申しますように白は計算に入れません）。上部左のカテゴリー分けの部分に「買う」「知る」「楽しむ」「調べる」「暮らす」「集まる」は黒になっており、十分アクセントになっていると言えます。
« 隠す
色彩のイメージは面積によって大きく変わります。その面積比についてご説明いたします。
ベースカラーを中心に配色
メインの１色をベースカラーと呼んでおりますが、インテリア等のカラーでよく使われるのがベースカラー、サブカラー、アクセントカラーという考え方で、その面積の比率を考えて配色を行うという手法です。この手法はウェブサイトの配色でも非常に有効です。
- ベースカラー 70%
- サブカラー 25%
- アクセントカラー 5%
この割合で配色すると調和しやすいのですが、あまり細かい数字にはこだわらなくて良いでしょう。ただし先程決めたベースカラーの割合が減ってきて、他の色が目立ちすぎるようなら注意しましょう。ベースカラーがきっちりと定まっていれば、サブカラーとアクセントカラーを選ぶことはそれほど難しいことではありません。
面積比に従って並べる
色彩を考える時には色をこのように面積比に従って並べていきましょう。大事なことは面積比を重視して適当に色を塗らないということです。同じ２色を使っていても、面積比が変われば印象が全く変わって見えてしまいます。逆の言い方をすれば面積比を守っていけば、イメージがぶれにくくなります。あとで困らないように必ず守るようにしてください。
例では同じ色相と彩度で明度だけ変えた２色を並べていますが、これを入れ替えるだけでも皆さんの受ける印象が違う物になることと思います。
実際に配色を行う時には２色を分離して使うことも多いと思いますが、距離を置かずに並べることは隣り合った色が調和するかどうかを考えるのに有効です。
ご自分で配色を行う時には下の画像のようなものを作り、それに彩色をしていくと面積比もわかりやすいでしょう。
« 隠す
▲このページの先頭に戻る
