配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！

April 17, 2012 WEBデザイン

さて、今日は前回に引き続き配色についてのお話です！

つい先日のお話ですが友人とダウンタウンで買い物してた時、青のジーパンに黄色のシャツ、茶色のジャケットを着ていたんですが。「色のセンス無いよね？」と面と向かって言われました。まぁ、普段着で気にしてなかったというのもありますが、WEBデザインならまだしも、服装の配色とか言われても知ったこっちゃ無い！！

でも、配色センスが問われる瞬間って生活してる中で結構ありますよね？

デザイナーなら何かをデザインする時はもちろん、服を買う（選ぶ）時、部屋のインテリアを考える時、色使いを考えないといけないことって結構あると思います。

でも、前回の記事でも書いたんですが、こういう配色ってセンスも大事かもしれませんが、それを培う経験がやっぱ大事だと思うんですよ。

服なら沢山の雑誌を買って色々な服装を見るとか。インテリアなら様々なインテリアデザインをとにかく目にするとか、人の意見を聞いて参考にするとか、かっこいい配色センスを身に付けるのってやっぱりそういう培った経験も大事だと僕は思うわけです。

しかーし！かっこいい配色に何か法則性は無いのか？！

でも、かっこいい配色にも何かしら法則性みたいなのって無いのかなと思っていたところに、先日僕のFacebook Pageでも投稿させて頂いた記事に面白いことが書いてありましたのでご紹介させて頂こうと思います。

As a starting point, you could try following the 60 – 30 – 10 Rule, which has been used by interior and fashion designers for many years and works equally well in web design.

….

The 60% will be the primary color of your site and set the overall tone of your design.

The 30% should contrast with the 60% to create a visually striking effect.

The 10% is an ‘accent color’, which should complement either your primary or secondary color.

How To Choose a Great Color Scheme For Your Website

ざっくり説明すれば、インテリアとか、ファッションデザイナーが昔から使っている配色手法の一つに「60 – 30 – 10 Rule」ってのがあり、これはWEBデザインでも同じことが言えるというお話。

ここで書いてある「60 – 30 – 10 Rule」を使った配色というのが、

60%をメインの色
30%をメインと相対的な目を引く色
10%をアクセントカラー

これらのルールを意識するってことらしいです。

60％はベースの色であり、サイト・デザイン全体のトーンを設定する色として配色する。30％はベース色のコントラストとして配色し、視覚的な印象を考慮して使う。10％は所謂「アクセントカラー」で、文字通りベース、コントラストへの”差し色”として補足的に使用する。

上記の記事でも、手始めにって感じで書いてるし、もちろんこれが全てなんて毛頭言うつもりはないんでしょうけど、僕も含め非デザイナーさんや、配色センスに自信無い人なんかが意識してみると良いかもしれませんね！

っていうか、思えばこういう配色の物って多い気がしますねー。

スーツとかそうじゃないっすか？

言われてみれば、スーツなんかまさにこのルールっすよね！パンツと上着が6割、シャツが3割、ネクタイが1割みたいな色合いが一般的かと思います。

よく、男性が一番かっこいいと思う服装なんかを女性が話ししてる時に「やっぱスーツよねー」という話しを聞くことがありますが、もしかしたらそういう配色の関係性もあったりするのかもしれないと、ふと思いました！

（写真は僕のスーツですが、ネクタイなくしました。僕はこれにピンクのネクタイを着けていましたが、ネクタイあったらこのルールでしたね…なくしたけど。）

参考までに、SUIT SELECTのリンクを貼っておきます。参考というか僕が好きなだけですがね！

思えばCNNとかそうだわなー

このルールを聞いてから真っ先に思いついたサイトはCNN！白ベースの6割と、赤ベースの3割、そして1割（かと言われれば多い気がするけど）リンク系の青。色の配分を正確に測ったわけじゃないですが、言われてみればそんな配色の比率っぽいサイトは北米のサイトには多い気がしますかね。

色々な場面で意識してみよう！

部屋のインテリアなんか考える時には、

60%を壁の色
30%を家具なんかの色
10%を飾り付けの色

スーツ着る時も

60%はジャケットの色
30%はシャツの色
10%はネクタイの色

サイトデザインなら

60%は背景やベースとなる色
30%はコンテンツのメインカラー（コンセプトカラー）
10%はアクセントに使うアイコンとかリンク色とかの色

色々な場面で活用できそうで面白いですね！

以上、いかがでしたでしょか？

今回はWEBデザインもそうですが、配色全般において生活の中でも使えそうな面白いルールをご紹介しました。もちろん、冒頭でも触れたようこれらのルールは絶対ではありません。ただ、配色については全く知識も経験も無いけど、良い感じの配色してみたいって人が覚えておくと、意外にいい感じになったりするのではないでしょうか？

元はファッション、インテリアから来ているらしいこのルール。「60 – 30 – 10 Rule」を是非活用してみてくださいませ！他にも、これもルールに則ってるよねってのが合ったら是非教えて頂けると嬉しいです！

質問：ちなみにこのルール、ローカルの友達に聞いたら「知らなかったの？」って言われちゃいました。もしかしたら結構一般的だったりするんすかね？誰かデザイン系の大学とか出てる人がいたらこういうの習ったか教えて頂けるともっと嬉しいです！