色の効果ー配色を変えるとここまで印象が違う!

面倒くさいので図解を入れることは少ないが、それでも何度かこのブログのために図を作っている。それらの図からも分かるとおり、私のデザインセンスは壊滅的。

前の会社はドキュメント化へのプレッシャーが強く、業務の半分以上がパワポ。当時は、同僚から頻繁にアドバイスをもらうなどして、何とか通用するような資料を作成する努力していたが、転職後そのプレッシャーがなくなったら坂道を転げ落ちるように、学んだことはどっかに行ってしまった。(残ったのは、図形を素早く操るショートカット術のみ。)

そんな状態だったが、最近、Kindleの整理をしていて、佐藤好彦さんの本のファンだったことを思い出す。特に、デザインのロジックの説明が面白くて、どんどん惹き込まれていく。

本を軽く見返していた影響か、数日前にAmazonを見ていて気になった配色の本をポチッ。

配色のルールよりも、まずはサンプル

まだ大学生の頃だったか、カラーコーディネーター資格試験のために勉強していた姉が、父を送っていくその車中、配色のルールについて学んだことを講義し続け、目的地に着いたときには父も私も疲れ切る、という出来事があった。

そんな苦い経験から、配色のルールと真正面から向き合うことに抵抗感のある私を動かしたのは、次の2冊。

Amazonには他にも同じような配色図鑑・辞典のようなものがあって、この本よりも人気の高いものもあったが、試し読みで見たサンプルの提示方法が私の好みに合致したので、この本を選択。他の本との比較をしていないので強くは言えないが、この手の本はレビューより、自分の好みと合っているかが購入後の満足度につながると思う。

今回実際に配色の変更をしてみて、だんだんとルールにも興味が出てきたので、今後、少しずつルールも見ていきたい。

写真とカラースキームを並べられたところで理解出来ないを解決

デザインセンス、配色センスゼロな私には高度すぎるのが、カラースキームと写真の組み合わせ。

この方法をディスっているわけでは決してなく、単純にその配色を自分の図表に応用させる能力が不足していて使えないのだ。この本はそこの橋渡しをしてくれているところが好き。

image_of_sample_page

上3分の2のスペースで紹介されたカラースキームを利用した模様のデザインサンプルを表示し、最後にウェブページへの応用例が載っている。これを見て、やっとカラースキームと写真の組み合わせの見方が何となくわかってきた。(実際のサンプルはAmazonのなか身検索で確認することができるので、興味があればぜひ。)

とにかくサンプルを見るのが楽しい

とにかくサンプルのデザインがツボで、見ているだけでにやけてくる。「そうそう、こういうデザインのラベルとか思わず手に取りたくなる」とか「この組み合わせのドット柄のペンケースほしい」とか「え、こっちの色を背景にもっていくの?」と本と会話を始めてしまう。

色ばかりでなく、サンプルの模様も見ていて楽しい。単なるドットだったり、シンプルな形を組み合わせただけなのにこんなにかわいくなるんだ、という発見をしたり。

いざ、実践!そして、撃沈

あまりに楽しくて、1ヶ月ほど前に失敗した仕事の資料へ応用しようと早速取り掛かったのだが、ものの見事に撃沈。やっぱり、色見本を見たからってすぐに出来るようになるわけじゃないようだ。

トライしたのがかなり色数が要求される資料だったので、当たり前と言えば当たり前。(上司は、色で情報を整理するのが好きな人なので、イベントなどの際に、役割や担当者ごとに色分けされた全体スケジュールを準備すると喜ぶ。)

そこでもっと単純な練習課題を、と思っていたところ、ブログにいくつかあることに気づいた。

再挑戦!これまで作った資料の色を変えてみよう

単純なものしか作っていなかったので、練習用としては◎。自分のモノグサぶりに助けられた。

スキームを利用してもうまくいかなかった部分もあったので、この本も読み返した。

本で指摘されていることをことごとく無視して進めていたのが原因だった。せっかく得た知識も、使わなくなると本当に面白いほど記憶から消え去ってしまうんだなと反省。

話は逸れるが、この本が今ではKindle Unlimitedで読めるだなんて。軽くショック。

1. ガーリーなファイルの説明

並べてみると、メインの説明文や矢印はもう少し明度が低くても良かったのかなと反省。

 一般に、文字と背景の明度の差が大きいほど読みやすくなります。(『ビジネス教養としてのデザイン』(佐藤好彦、p.110))

比較

colour_revision_nr_1

カラースキーム

参考:『きれいな色の本 デザインと言葉の配色ブック』(p.24)

2. 色が多すぎて手に負えなかったプロセス図

プロセスの部分のボックスを全部違う色にしようと苦労。何とか着地したけど、背伸びしすぎた。

比較

colour_revision_nr_2

カラースキーム

参考:『きれいな色の本 デザインと言葉の配色ブック』(p.114)

3. 色を絞って再挑戦したプロセス図

配色センスゼロにも関わらず欲張っちゃダメだ、と反省して再挑戦。色は増やさず、色の濃度を変更。10%程度だとメリハリが出ないということを知った。

色数を限定することは、デザインのなかでの色の価値を高め、使用した色を際立たせて効果的に見せるということにもつながります。(『ビジネス教養としてのデザイン』(佐藤好彦、p.100))

比較

colour_revision_nr_3

カラースキーム

参考:『きれいな色の本 デザインと言葉の配色ブック』(p.208)

4. 完全にどっちでも良いファイルの説明

元々1色で作っていた図を練習用に変更。

最終版ファイルをとんでもなく強調したい場合には修正後の方がいいが、どっちの図の方がいいかという判断は出来ない2枚だと思う。メッセージと色の組み合わせってあるんだと気付かされた。

情報に色を割り当てていくときには、バリエーションを表現するのか、強弱を表現するのかによって、色を選択する軸を変えることで、色彩が構造化され、「情報の構造=色彩の構造」という関係を作ることができるようになります。(『ビジネス教養としてのデザイン』(佐藤好彦、p.120))

比較

colour_revision_nr_4

カラースキーム

参考:『かわいい色の本 デザインと言葉の配色ブック』(p.32)

5. 苦手な濃い背景色に挑戦したファイルの説明

イラストの上手な人達がよくやっている濃い色の背景。ずっと憧れていたものの、素人が手を出すと大やけど必至。今回は、カラースキームと組み合わせサンプルがあるからと思い切って挑戦。

色云々よりも図のまとめ方が問題だという。

比較

colour_revision_nr_5

カラースキーム

参考:『かわいい色の本 デザインと言葉の配色ブック』(p.192)

所感

色選びが苦手ということで避けていたが、カラースキームを利用した図と並べることでメッセージの伝わり方の違いを実感。

『かわいい色の本 デザインと言葉の配色ブック』『きれいな色の本 デザインと言葉の配色ブック』のテーマがかわいいだったり、きれいであるため、本で紹介されているカラースキームは仕事用としては▲かもしれないが、プライベート用としては◎。

仕事へ応用する際には、使う色をコントラストの強い3色程度に絞ればいいのだろうか。

情報を伝えるデザインにおいて色を使うということは「違いを表現する」という効果があります。したがって、違いのわかりにくい色を使っては意味がありません。ただし、色は必要以上に増やさないということも忘れてはいけません。(『ビジネス教養としてのデザイン』(佐藤好彦、p.116))

昔、頻繁にお世話になっていたサイトにも久しぶりにアクセス。

本も持っているけど、こっちも恐ろしいくらいに記憶から抜け落ちてた。

本にかじりつくだけじゃなく、日常生活の中でも色に注目して色のイメージや組み合わせを吸収していこうと思った。

Advertisements

This site uses Akismet to reduce spam. Learn how your comment data is processed.