Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。
- 背景色や文字色をいじるのだけれど、どうもパッとしない。
- これだ！と思う色を選択して使っているはずなのに、なかなか思ったようなイメージにならない。
- そもそもセンスがない。
本題に入る前に、最初にひとつ、伝えておきたいことがある。「自分にはセンスがないからブログのデザインを考えるなんておこがましい」なんて思っているひとには、特に聞いてほしい。
実はここだけの話だが、Web制作で飯を食っているぼくでさえ、ほんの少し前まではデザインのキホンの「キ」さえ知らなかった。おかげさまで仕事ができているが、もっとはやくこの事実を知りたいと思った。
通常、この事実に気づくのは、ある程度制作経験を積んでからだ。このことを知らないだけで、多くのひとは、学び始める前に「私にはセンスがない」と自らにレッテルを貼り、ドロップアウトしていく。その機会損失は、計り知れないものだ。
最初にぜひ伝えておきたいことがある。それは、
ということだ。
「センス」という言葉ほどひとによって定義が違って曖昧なものはない。
実はデザインに必要なのは、センスではなく、理論(theory)だ。理論は言葉で説明することができるし、誰にでも身につけることができる。
今回のエントリータイトルは「色彩センスのいらない配色入門」だ。これを学べば、ブログのデザインはもちろんのこと、洋服のコーディネートだって自由自在だし、部屋のインテリアにも活きてくる。配色についても、知るべきことはほんのちょっとだ。その少しの要点だけ押さえておけば、人生のいろいろな場面で役に立つこと間違いない。
色って何？食えるの？
まず「色とはなんであるか」を説明するために、色の3属性について見ていこう。色の3属性とは、「色相」「明度」「彩度」を指す。
色相、それは色み──
色相とは、赤・青・黄・緑・紫といった、色みのことをいう。色相は、イメージに近い表現をするのに最も優れた属性だ。
色相環
色相を円状に配置したものを色相環という。この色相環を見ると、例えば青にも「緑に近い青」もあれば、「紫に近い青」があることが分かる。
また、あるひとつの色と色相環上に正反対に位置する色のことを、補色という。この補色の使い方がうまいと、いわゆる「センスがいい」配色に仕上がる。
明度、それは色の明るさ──
色同士を比べてみて、こちらのほうが明るい、あちらのほうが暗い、というように、色の明るさを表すのが明度だ。
例えば、バナナの黄色とトマトの赤では、どちらのほうが明るいだろうか。もちろん、バナナの黄色のほうが明るいだろう。このように、明度の指標を使うと、彩度とは関係なく、明るさを比較することができる。明度は、可読性(読みやすさ)にも関わる重要な要素となる。
どちらのブライアンねこが見やすい？
もちろん右のブライアンねこと答えるだろう。日本人は左から右に目線を移すと言われるが、あなたはきっとはじめから右のブライアンねこを見ていたことだろう。人間は見やすいものを優先的に見ようとする傾向があるので、見やすい右のブライアンねこに視線が自然と集まったのだ。
なぜ右側に視線がいったのかというと、それは黒と白のほうが、グレーと白よりも明度差が高いからだ。明度差があるとより見やすく、目立つのだ。ちなみにもっとも明度が高いのが白で、もっとも明度が低い色が黒となる。
彩度、それは色の鮮やかさ──
色の鮮やかのことを彩度といい、それぞれの色相でもっとも彩度が高い色のことを「原色」とか「純色」と言ったりする。彩度をどんどん落としていくと、最終的にはどの色相でも、色みを感じない白や黒のような無彩色になる。
彩度が高いほど派手な印象を受け、印象に残りやすい。一方、地味だと感じる色は彩度が低く、印象に残りにくい傾向がある。
つまり色って何かっていうと
センスのいいヤツが、センスよく選ぶもの。ではなく、「色相」「彩度」「明度」の3属性によって論理的に説明できるものなのだ。どんな色でも、その色が持つ特性や印象が変わってくるが、それはなんとなくの感覚ではなく、しっかりと言葉で表すことができる。
配色をものすごく簡単に決める方法
配色の「黄金比」3色で選ぶ
さて、ここまでは「色」そのもの自体の特性について見てきた。ここからは配色(色の組み合わせ方)について見ていこう。
色をどういう風に選ぶかは、肌で選ぶのではない。実は、配色には「黄金比」が存在する。この配色黄金比＝「ベース70％、メイン25％、アクセント5％」を守れば、どんなものでもイケてる色合いになること間違いない。逆にいうと、あなたがセンスいいなーと感じるものの色の組み合わせ方は、この配色黄金比に従ったものがほとんどだ。
Webサイトを散策しても、この配色黄金比は、あらゆるところで使われている。一度アンテナを張っておけば、このデザインはこういう色使いをしているんだーと、他のデザインの配色を盗むことだってできる。イケてる色使いは、どんどん自分のものにしていこう。
配色を決める簡単３ステップ
じゃあ、どうやって決めればいいのさ？次の3つの手順を踏めば、誰でもクールな色使いが演出できる。
ステップ１：メインカラーの決定
まずはメインカラーを決めよう。メインカラーは、これから色をつけようとしている対象物のテーマカラーとなる色だ。このテーマによって、持つイメージが変わってくる。
このイメージというのは非常に大事で、例えばコーラなら「赤」、スタバなら「緑」を連想するように、色はその対象物のイメージを大きく膨らませていく。逆にいえば、どんなイメージを持ってほしいかによってメインカラーを決めてみるのもいい。
ただし、メインカラーは明度を落としたほうがいい。ご覧のように、明度を上げすぎると、かえって文字が読みにくくなってしまう。明度を落とすことによって、文字が読みやすくなる。この点さえ押さえれば、ターゲットとなる読み手を考えてメインカラーを設定してもいいし、自分の好きな色をメインカラーとしてみるのもいいだろう。
ステップ２：ベースカラーの決定
ベースカラーは、色面の70％程度を占める、背景などの比較的大きな場所に色付けられる色だ。メインカラーを引き立てる、重要な役割を担う。
ベースカラーのチョイスも一工夫してみよう。例えば上図のように、黄色のような発光色が7割を占めていると、常に目がチカチカして痛い。一方、彩度を下げすぎてしまうと、暗くどんよりとした印象になってしまう。
そういった場合は、白・グレーなどの「明度の高い無彩色・濁色」を選ぶか、「メインカラーの明度を上げてパステル調にする」のがオススメ。僕はなでしこ色などの淡い和色を使うことがある。メインカラーとの組み合わせにもよるが、落ち着いた雰囲気を演出するのに使い勝手がいい。
ステップ３：アクセントカラーの決定
最後に、アクセントカラーを選ぼう。このアクセントカラーの役割は、ちょっとしたところに使うことで、メインカラーを引き立てることだ。
アクセントカラーがメインカラーと同系色になってしまうと、メインカラーが目立たなくなってしまう。なので、アクセントカラーはメインカラーとできるだけ離れた色相を選ぶのがベストだ。補色を採用することもしょっちゅうある。
とはいってもやはり経験値はないよりあったほうがいい
プロと素人の違いは、配色に関していえば、この配色黄金比を使いこなせているかどうかにしかすぎない。しかしながら、そうはいっても色を組み合わせる速さは、どれだけ配色に触れてきたかによるところも大きい。
だけど、心配しなくていい。世の中には素敵なサイトがたくさんある。ここでは、僕が配色選びの際に参考にしているサイトをいくつかピックアップしてお届けしよう。
Color Hunt
配色グループをカード状にして、SNSのようにポストできるサービスだ。いわゆる「いいね」のようなマークもあるので、まずはが多い配色を参考にしてみるといいだろう。自分が作った配色をポストすることもできる。
Adobe Color CC
こちらも自分の作った配色をポストできる、Adobeのソーシャルネットワーキングサービスだ。iPhoneやiPadアプリもあり、作った配色をIllustratorやPhotoshopと連携させることもできるのが便利なところ。
和色大辞典
和色を使うサイトはそれほど数が多くないので、使いこなすことができれば大きな差別化になること間違いない。和名と16進数が併記されているので、CSSで16進数で指定してあげれば、どのブラウザでもちゃんと表示してくれる。
日本の伝統色 和色大辞典 - Traditional colors of Japan
Material Design Color Palette
マテリアルデザインでよく使われる配色の参考になるサイト。2色選ぶと、マテリアルデザインのアプリを右上にプレビューとして表示してくれる。ビビッドカラーが多く、鮮やかなイメージで色を選びたいときに活躍する。
Flat UI Colors
こちらはフラットデザインでよく使われる色が掲載されていて、このブログでもヘッダー横のアイコンなどに採用している。色をクリックするだけで、その色を表す16進数をコピーしてくれるので、クリックしたらソースコードに貼り付けるだけだ。
まとめ
配色にはある程度決まったルールがあり、そのルールに則れば見栄えのいい配色に様変わりする。結局のところ、そのルールを知っているか、知らないかによるところが大きい。冒頭に書いたことと矛盾するかもしれないけれど、ここに書いたことをしっかりと実践すれば、こんな風に言われるだろう。
「あれっ…キミ、センスいいね。」
今回は入門編として書いたけれど、もっと勉強したいひとには、次の2冊をオススメしておこう。この2冊さえ読めば、色の選び方についてはかなり詳しくなること間違いない。
- 配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
一通りの配色の基礎が学べる一冊。おすすめポイントは、作例と写真のチョイスが他の本にくらべて格段に素晴らしい点だ。「レトロな昭和モダン風」「ヨーロッパのファブリックカラー」などのテイストも豊富で、非常に参考になる。 - 配色＆カラーデザイン 〜 プロに学ぶ、一生枯れない永久不滅テクニック
「高級感のある感じで」「もっとシックに」「元気よくアクティブな感じで」という抽象的な表現も、この本を読めば思い通りのイメージに還元できる。基本事項だけでなく、印象に残る美しい配色を制作する際に活用できる実践的な配色技法まで、配色に関わる全知識を網羅した一冊だ。
また、配色だけでなく、デザイン全般に興味があるひとは、このエントリーも参考にしてほしい。
明けない夜はない。まずは一歩踏み出して、いまこの瞬間から、自分のイメージを具体化するところから始めよう。
今日のひとりごと
何時間も書いてた記事が消えてしまって、悲しい。バックアップはこまめにとろう。