読者です 読者をやめる 読者になる 読者になる

大学院生のブログ

人生まるごと今後の課題

ブログのブランディングをする(第2回「配色を決める」)

というわけで、今日はブランディング練習の第2回「配色を決める」。いろいろと勉強しながら、自分のブログに使う色を決めていく。果たして私は、ナウなヤングにバカウケのドラスティックでスタイリッシュなWebサイトを作ることができるのか。

(第1回はこちら ↓)

zarameyuki.hatenablog.com

イメージカラーを決めたはいいが……

さて、前回の記事では、イメージカラーを「黒・白・黄色・紫」の4色にしぼり、イメージフラワーを「ラッパスイセンにした。

で、次は実際に使う色を決めていくわけなのだが……
一晩寝て思ったけど、この4色、なかなか調和しない。以下に示すのはちゃちゃっと作ったイメージ図だが、まあ見てみてほしい。

f:id:zarameyuki:20170215173735p:plain

黒をフチに使うと、重厚感は出るけど、なんかこう、仏具屋さんっぽくなる。じゃあ白をフチに使えばいいのかって言われると、今度は黒が悪目立ちする。

そもそも、「モノトーン「黄色」「紫」ってどれも主張が強すぎて、なんかこう、まとまりがない。ちょっと落ち着けってなる。

それなら今度は、黒はあきらめて灰色にしてみるか?

f:id:zarameyuki:20170215173806p:plain

うーむ。さっきよりは格段に見やすくなったけれど、今度は彩度の高い「黄色」「紫」が悪目立ちしている。イメージカラーを決めたとしても、実際の「色味」を調整しないとこういうことになってしまうらしい。

「色味」を調整していく

トーンを合わせる

というわけで、実際に使う色を考えていく。

ここで配色に関しては、いくつかの決まったセオリーがある(らしい)。
色には「色相」「彩度」「明度」という3つの属性があり、それらを総合して「トーン」と呼ぶ。「淡いトーン」とか「渋いトーン」とか呼ぶ、あれのことだ。

トーンにはそれぞれイメージがあり、例えば春なら淡いトーン、夏ならビビッドなトーン、秋なら渋いトーン、冬なら白っぽいトーンが定石となっている。
たとえば同じ「ピンク」でも、こんな風にバリエーションがある。

f:id:zarameyuki:20170215173846p:plain

特殊な効果を狙ったものでない限り、使う色のトーンは合わせておいたほうがいい。春っぽい色と冬っぽい色が混在していると、「なんかまとまりがないなあ」っていう印象になってしまう。ファッションに例えるなら、水着にムートンブーツ履いてるみたいな感じだろうか。

ファッション上級者ならまだしも、私のように、デザインのイロハが分かっていない人は避けるべきだろうな、と思う。

配色サイト・デザイン本に頼ってみる

さて、トーンの大切さを認識したのはいいが、それを「勘」で合わせるのは心細い。素直に道具に頼ってしまおう。配色サイトやデザイン本の出番だ。たとえばこのサイト。

paletton.com

キーカラーを入力すると、良さげな配色を提案してくれる。「類似色」「反対色」も算出してくれるので、一発で無難な配色が決まる。とても便利。

f:id:zarameyuki:20170215173927p:plain

それから、『キーカラーで探せる 配色見本ハンドブック』

honto.jp

これはあらかじめ、キーカラーを決めてから、いろいろな配色見本を見る本。キーワードもついているので、自分のサイトに合ったキーワードで絞り込んでいける。

たとえば「黄色」と決めてから、「ポップ……陽気……違うな。フレッシュ……あ、このページがいいかも」ってな感じ。これも便利。今回はこの『配色見本ハンドブック』のほうから、いくつか気になる配色をピックアップしてみた。

f:id:zarameyuki:20170215174055p:plain

ぴったり4色で作ったものはなかったが、どれもそれなりによさそうだ。眺めていてわかったけど、やっぱり黄色と紫をダイレクトに合わせるのはビミョーらしい。赤紫っぽい中間色を挟んだり、白を挟んだり。ワンクッション置いてある。

ずいぶん悩んだが、今回は一番上の5色に決定。鮮やかながらもモノトーンの印象が生きており、私のイメージにぴったり合っている。今後はこれらの色を使って、ブログをデザインしていけばいいだろう。

冒頭のイメージ図に、決めた色を合わせてみる。

f:id:zarameyuki:20170215174213j:plain

デザインがアレなのでアレだが、少なくとも最初の段階よりはグッと色同士が馴染んでくれた。ひとまずはこれで決定としておこう。

和の配色に挑戦してみる?

ちなみに今回、自分のサイトイメージを考えるにあたって、知人からは「和風」というキーワードももらった。京都に住んでいることだし、和風の配色もいいかもしれない。そういうわけで、和風のパターンも考えてみることにした。

和の配色に関しては、『配色バイブル 和テイスト』という本などもあったりするが、個人的には「重色目(かさねいろめ)」などを参考にするのがハズレないと思う。

「重色目」とは、着物の表地と裏地の色の組み合わせのことだ。それぞれの組み合わせには名前がついており、着る人の年齢や季節、TPOなどもきまっている。たとえば「蘇芳香(すおうのこう)」という重色目。

f:id:zarameyuki:20170215174313p:plain

これは表地が「蘇芳」、裏地が「黄*1」という組み合わせだ。季節によらず、一年中着ることができる。

「重色目」は美しかったからこそ、王道として定着し、今まで残ってきているものなのだと個人的には思う。それならば、これに乗っかっておくのが間違いないだろう。

というわけで、今回は紫っぽい色と黄色っぽい色の組み合わせ、「蘇芳香」「二つ色」をチョイスした。………………のだが。

どうやら和の色は、ばらつきが大きいらしい。今回は以下の2サイトを参考に、和の色のRGBの値を入力してみたのだが、同じ「蘇芳香」「二つ色」でもこんなに違いが出るのである。

① 日本の伝統色 和色大辞典 - Traditional colors of Japanを参考にした「蘇芳香」と、② NIPPON COLORS - 日本の伝統色を参考にした「蘇芳香」。

f:id:zarameyuki:20170215174418p:plain

f:id:zarameyuki:20170215174313p:plain

同じく、「二つ色」。

f:id:zarameyuki:20170215174453p:plain

f:id:zarameyuki:20170215174553p:plain

このように、出典によってけっこうな違いが出てしまって、いかんともしがたい。植物で染めた色だから、一意に定めるのは難しいのだろう。

あとは、思った以上にこの配色は渋い。ピンクっぽい色やブルーっぽい色には、鮮やかなものもあったのだが……。残念ながら、あまりイメージに合わない。というわけで今回は、和の配色は採用しないことにしたのだった。

次回は「スイセンの図案化」

今回はキーカラーを使って、実際の配色を決めた。

作業をすると分かるけれど、はじめにコンセプトを固めておくのはメチャクチャ大事。何をするにしても、「で、コアイメージは何?」と確認することが大切になるし、自然と選択肢も狭まっていく。そうじゃないと、無数にも思えるデザインイメージから的確なものを選んでいくのは難しくなるのだ。

そのためにも、はじめにイメージカラーを決めてしまったのは良かったと思う。カラーに付随したイメージから、自然と自分がどういうコンセプトを持っているかについて考えることになる。何より、色を選ぶ作業はワクワクする。やっていて楽しかった。次回はイメージフラワーである「ラッパスイセン」を図案化していきたい。

(↓ は第1回)

zarameyuki.hatenablog.com

*1:鬱金、刈安、黄檗など、いろいろな色をひっくるめて「黄」と呼ぶ