色で失敗しない為に 〜理論に基づく配色フロー〜

Hinweis der Redaktion

1. こんにちは、 hokuriku.net×wcaf 　一番手を勤めさせていただきます。 橘雄大と申します。 本日は、色で失敗しない為にということで、 配色についてのセオリーについて話させて頂きます。 まずは簡単な自己紹介から
2. 先ほどの司会をやっている佐々木と同じ、 株式会社 ALL CONNECT で Web デザイナーをやっております。 去年まで、金沢で雑誌や広告などのデザイン制作会社に勤めておりました。 今日は、会社の上司が見に来ているので、非常に緊張しています。 最近興味あるものは
3. サス、コンパス、グラント！ いずれもターミナルなどを使用してのツールなのです。 デザイナーで言う、いわゆる黒い画面。 これ自体には、もともと苦手意識をもっていました。 ただ、このようなツール触れる事で苦手だったツールに対しても、非常に持つ事が出来たので、 配色が苦手だったり、デザインにも興味があるといったプログラマーの方々も、 今回のセッションで、少しでもデザインのおもしろさに触れて頂ければなと、思っています。
4. 色恐くない！ ということで、セッションの内容の方に進みたいと思います。
5. 本日の内容として、このように組ませて頂きました。 はじめに色についての基礎的な部分に触れます。 その後、色でどうイメージを伝えて行くかという事。 コンテンツに対して、どのように配色して行くのか、 そして、最後の部分で数値的な パラメータでの配色について触れて行きたいと思います。 時間が余っているようでしたら、 簡単に綺麗な配色を作れる配色ツールのデモも 合わせて出来たらと思っていますので、 宜しくお願いします。
6. それでは、まずは色彩についての基礎知識についてです。 色彩設計をするためには、 色についての基礎知識を知らないといけません。 この部分を疎かにしてしまうと、 配色で失敗してしまう事が多々あります。 その為、多少時間を多めに説明をしていきます。
7. では、 なぜ、失敗した配色が生まれるのでしょうか？ 失敗の例を参考に、 色選びにどう失敗しているのか というのを見て行きたいと思います。
8. こちらは愛育会病院という、 デザイナー界隈では有名なサイトです。 Dis ってるわけじゃので、 注意して頂きたいんですけれども、 この病院、意外とちゃんとした病院らしいです。 だからこそ問題があるんですけれども、 このウェブサイトを観た人が、 この病院で診察を受けたいとはまず思いませんよね。 では、どこに問題があるのでしょうか？
9. レイアウト等、色々と問題はありますが、 色に関して大きく分けて言いますと、 秩序や配色ルールが無いという事が無いということです。 更に詳しく観て行くと、
10. 色数が多い。 あか、青、みどりなど様々な色をむやみに使ってしまっているという事。
11. 色の調和が取れていないという事。 色に統一性がないので、どうしてもぎらぎらと眩しいウェブサイトになってしまっています。
12. そして、色の意味を考えずに配色しているという事です。 病院なのに不気味な印象を与えてしまっていますよね。 これではウェブサイト自体の目的を達成出来ません。 ここでいう、目的とはウェブサイトを訪れて 信頼性を感じ診察に来るという事です。 この目的を達成するには、 先ほど申し上げた通り、秩序やテーマが絶対的に必要になってきます。 その秩序やテーマを理解する為に、 まずは色の 3 属性というものを学んで行きましょう。
13. まずは色相です。 これはいわゆる色味の違いの事をいいます。 普段、僕らが言葉に発している、赤や青と言った言葉は、 この色相の一部にあたります。 色相はイメージを伝える上で非常に大きなものを占めており、 暖かいというイメージだと、黄色やオレンジ、いわゆる暖色。 逆に冷たいイメージだと、 青や紺色などコチラは感覚的に良く分かる部分かと思います。
14. 明度。色の明るさの事ですね。 ここに描いてあるように、文字の読みやすさなどは、 明度のコントラストの差で決まる事が多いです。 ですので、文字が読みにくいと感じた場合は、 明度を調節するだけで問題が解決する場合が良くあります。 また、明るい、暗い。軽い、重たいと言った色の印象は、 この部分に大きく左右されます。
15. 彩度です。これは色の鮮やかさのことになります。 こちらの例に挙げているものは、 それぞれ、高彩度の色から、無彩色のグラデーションになります。 僕らが普段よく使うビビットカラーという言葉は、 右の方の色鮮やかな色の部分に当たります。 先ほど、申し上げたとおり、明度がその色の明るさということに対し、 コチラは、色相の色味の濃度のことになります。
16. そして、これら 3 つの要素を組み合わせたのが、 いわゆるトーンというものになります。 配色というものは端的にいうと、これらのトーンの組み合わせで、 良い配色を作り出す為には、 トーンの組み合わせを ルールに基づいて作って行く必要があります。
17. ではどのようにすれば、 良い配色が作れるのでしょうか。 今回は 色彩学で有名なジャッドという人の、 色の調和についての原理というものを用いて、 説明をして行きたいと思います。
18. ジャットさんはこのような事を言っています。 むずかしいことを良いっていますが、 簡潔に言いますと、先ほど説明していた明度、彩度、色相の差があるからこそ、 色によるイメージの伝達を行えるという事です。 実際にどういった原理を用いて、配色をしているかというと
19. 秩序の原理、 馴染みの原理、 類似の原理、 非不明瞭性 この原理の 4 つを使っての配色になります。
20. まず秩序の原理について説明をしていきます。 これは配色に規則性があると、 調和のとれた配色になるというものです。
21. 例えば、色相上でこのように真逆のもの同士で配色したり。 この真逆の色の事を補色と言い、 この色を組み合わせる事で、色鮮やかな配色を生み出す事が出来ます。 また、補足なのですが、 補色の色に対し隣接する色を選ぶ事を類似補色といいます。 黄色の隣接補色だと、こことここの色になりますね。 これを使うと、補色同士で調和した色を作れたりします。 この他にも
22. たとえばこのように 3 角形を作って、 等間隔に配色したり、
23. あるいは 4 角形だったり
24. もしくは 6 角形だったり。 このように色相の上で 規則的に配色する事を秩序の原理といいます。
25. 次に馴染みの原理。 グラデーションや影の部分などを用いた配色方法です。 これは僕たちが日常的に観ているものが多いのです。 夕焼けや海などは、自然の中にもグラデーションが生まれていますよね。 なので
26. このように景色の写真から色を取ると、 その景色をイメージする配色を作りやすかったりします。 自然界の配色が馴染みやすい理由の一つに、 グラデーションの要素や、影の陰影の要素が多く含まれている、 ということが理由にあります。
27. そして類似の原理。 これは色相や明度、彩度の値を揃える事で、 調和がとれるというものです。
28. たとえば、このような配色を見てどういったものを 思い浮かべるでしょうか？ この配色は、いわゆるパステルカラーというもので、 パステル自体を思い浮かべることもよくあるでしょう。 このようにトーンに何かしら共通性を持たせる事で、 色に一体感を演出することができます。
29. 次に非不明瞭性の原理。 これはコントラストの効いた配色のことです。 はっきりと色を認識出来るという事は、 配色したもの自体の認識を強める事になるので、 それにより調和が生まれます。
30. これはフランスの国旗ですね。 非不明瞭性の原理自体が国旗などに多く使われる理由として やはり視認性を高めるという部分で、 シンボルとしての存在感を高めるという理由があります。
31. それでは、 これらの配色における基礎を踏まえて、 どのように、イメージを伝えるかという事に 触れて行きたいと思います。 まずは、色彩が伝えるイメージや意味について 簡単に触れて行きたいと思います。
32. 赤は、非常に強く注意を引きつける色です。 思い浮かべる言葉もエネルギーや刺激など攻撃的な印象が多いですね。 明度を下げる事でグランジテイストを生み出せたり、 ロマンスと言った言葉を思い浮かべる事もあるので、 使い方次第では、大人な感じのイメージも演出出来る色だったりします。
33. 青色は先進性や信頼性といった印象を多く与えます。 企業ロゴによく使われるのも、この理由が大きいです。 先進的なイメージとは言いましたが、 キーワードの中に悲しみ、憂鬱といった言葉があったり、 青色自体が後退色なので、 使い方次第では後ろ向きな印象になってしまうので、注意が必要です。
34. 緑はリラックスさせる印象だったり、 若々しい印象を伝える事が出来ます。 衛生的なイメージを伝えられる事から、 食品メーカーなどが、よく使ったりしていますね。 緑の注意点としましては、色相上で調度真ん中の位置。 つまり中間色なのですが、色相の位置によっては、 温かいイメージにも、冷たいイメージにもなってしまうので、 その選択の際には注意が必要です。
35. 次に黄色ですが、こちらも赤と同様、強い注意をあたえます。 赤に比べ、 軽くポジティブな印象を与えやすいというのが特徴です。 黄色自体が膨張色でもあり、進出色。 つまり非常に前に出やすい色なので、 少ない面積だったとしても、強い視線の誘導を与える事が出来ます。 このように４色についての意味に触れ、 簡単に色彩のもつ意味、イメージを説明して行きましたが、 具体的にどのようにイメージを伝えているかについて、 今回は飲料水を例に説明をして行きたいと思います。
36. こちらはビールのバドワイザーになります。
37. 次にポカリスエット
38. キリンビール
39. シュウェップス。 どうでしょう。 買う商品のもつイメージが非常に伝わりやすい配色になっているかと思います。 こちらの シュウェップスの画面を見てると、 炭酸の弾ける甘酸っぱい酸味などを、 このビジュアルだけで強く感じるかと思います。 このシュウェップスの場合、黄色と黒を組み合わせる事で、 爽やかさの中の苦みやを表現しているかと思います。 黄色で炭酸の軽いイメージやレモンの甘い酸っぱさを伝え、 黒の部分で、爽やかな中での苦みというものも表現しているかと思います。 このように配色において、 色の組み合わせでイメージを固める というのも非常に重要だったりします。
40. では、色の組み合わせについて見て行きましょう。 これは日本カラーデザイン研究所の カラーイメージスケールというものなのですが、 これにより、色の組み合わせ、 トーンの組み合わせによって どういったイメージを伝えるか。 という事を可視化することができます。 この可視化した配色を参考に配色して行くのも、 一つの指標になります。
41. それでは、折角なので、この 3 色を用いて 配色について説明して行こうと思います。 配色には、 綺麗に見える比率というものがありますので、 そちらを見て行きましょう。
42. このようにベースカラー 70% 、 メインカラー 25% 、 アクセントカラー 5% の割合にすることで、 調和された配色を生み出す事が出来ます。 では、ひとつひとつこれらの役割を見て行きましょう。
43. メインカラーは伝えたいテーマの象徴となる色です。 なので、伝えたい対象となるものを最もイメージしやすい色をここに置くと、 より明確にイメージを伝える事ができます。
44. 注意としては、 文字の色としてよく使われていることが多いので、 このように明度が高すぎると、 可読性が弱くなってしまいます。
45. 次ににベースカラーですが、 この部分は広い面積を占める事から、 背景に使われる事が多いです。 なので、無彩色のものや主張の少ない色を選ぶ事が多くあります。 また、メインカラーと同様、イメージを伝える部分の色になるので、 メインカラーに対して共通した色を選ぶということが よくあります。
46. アクセントカラーは、 少ない面積で、部位的な強調を生み出す事が出来る色です。 なので高彩度の色を置く事が多いです。 よく見かけるものとしては、メインカラーに対して補色の色を使って、 色鮮やかに強調するというものがありますね。
47. また、先ほどの カラーイメージスケールなどに頼らない場合は、 メインカラーをどのような色にするか。 ということを決めていると 残りの色が決めやすかったりします。 というのも、先ほど申し上げた通り、 メインカラーは対象のイメージを象徴する色なので、 それを基準に色を決めて行けば、 対象のイメージを伝えやすい配色になるからですね。
48. それでは僕らが普段使う Web サイトに置き換えて、 どうやって、メインカラーを決めているのか、 どう色を組み合わせているのか という事に触れて行きます。
49. まず、 Web サイトに誰かが訪れるという事は、 そこに何かしらの目的があるということです。 そして僕たちはその目的を達成させる為に、デザインをしています。
50. なので、その情報を上手く伝える為には ユーザーの行動の背景だったり、 商品の特徴を踏まえて色を選んで行く必要があります。
51. ではどの用に色を決めるか。 それにはまず、情報の分析が必要です。 商品の特徴、ユーザーの特徴。 こちらに簡単にまとめてみました。 ユーザーに与えたい印象として、 学習コンテンツが売りの商材だっこともあり、 知的で、学習コンテンツに対して信頼感を与えたかった。 というのが一つ。 またターゲットのユーザーが 30 〜 40 代ということで、 落ち着いた印象を与えたかった。
52. そして、そのようなイメージを思い浮かべながら、 連想する言葉を出していきます。 そして、その言葉から連想する色を選んで行きました。 知的、信頼、落ち着いた、グローバルと言った所から、 ベースカラー・メインカラーの青色を選んでいます。 アクセントカラーに赤を選んだのは、 販売を目的としたサイトの為、申し込みへの意欲を高めるという理由があります。 申し込みコンテンツ自体を赤として認識させる事で、 そこへの誘導を強くするという目的があります。
53. ではもう少し深い部分を見て行こうと思います。 ユーザーは、 Web サイトに訪問して、 情報を得て、 そして目的を達成します。 この流れを販売側の視点で見てみましょう。
54. 販売側の視点での目標は、顧客の獲得というものです。 その為には、どのようなユーザーフローを経て、顧客の獲得に向わせるのか。 ということが、重要になります。
55. 先ほどの Web サイトを例に挙げて説明して行きますと、 このようなユーザーフローを予想してのレイアウトになります。 メインビジュアルでまず、ユーザーの目を引きつけ、 その後動画や製品情報で、商品に対する情報を得る。 それに納得したユーザーは契約に向うという流れです。 もちろん、コンテンツはこれだけでは無いので、 これは、ファーストビューだけでの説明になっています。 それでは、このレイアウトに対して どう色を置いていったかについて説明します。
56. それでは、僕が実際に作ったサイトで、 どのように配色を進めて行ったのかを 説明して行きたいと思います。 申し訳ありませんが、 ALL CONNECT で運営を行っている Web サイトではないため、 ツイート等はお控え下さい。 また、公開するスライドでは 別のものを差し込んで公開しますので、 そちらもご了承下さい。
57. メインビジュアルの部分は ウェブサイト全体のイメージを伝えるのに適しているので、 メインカラーを基調とした配色にしています。 また、ここでポイントなのは、 写真もブルーで統一しているという事です。 それによって、メインビジュアルとしてのまとまりを出しています。 一番の引きつけの要素でもあるので、 色による商品イメージを最も伝えやすい部分でもあります。
58. 次に、製品情報の部分ですが、 先ほどのメインビジュアルで使用した青に対して、 アクセントカラーの赤を大きく置く事で、 強い引きつけを行っています。 また、まとまった情報に対して、 この動画の部分を突き出させる事で、視線を誘導しています。 そして右のパッケージ情報には アクセントカラーの一段階暗い色を置く事で、 強調度を少し下げています。 強調度を下げたのには、 左の動画の情報と 下の申し込みの情報に対して 目を行きやすくするという目的があります。
59. そして、一番下の申し込みの情報に関しては、 アクセントカラーの赤に対して、 目立つ色を置いて 情報を前に押し出しています。 ここでいうと、お問い合わせ、お申し込みボタンの部分ですね。 申し込みという行動自体が このサイト自体の目標であり、 情報を手にしたユーザーに対して 申し込みを提案するという意味で、 ボタンが目立つ配色にしています。 ボタンの配色のポイントとしては、類似補色を使っているということ。 背景の赤に対して色相上で反対の位置の色から 隣接する色を選択する事によって、 強調しつつ、 並列するボタンとしての一体感を出しています。
60. このように僕たちデザイナーはユーザーの行動を分析し、 情報をユーザーに伝えています。 その情報を伝える上で、 色彩はどのような役割を占めているのでしょうか。
61. 目的を達成する為にはユーザーは情報を必要とします。 その中で当然、ユーザーは情報の取捨選択をするわけです。 そのため、ユーザーの興味関心を引く事は 非常に重要な要素になっています。 その興味関心を引かせやすくする為に、 僕たちデザイナーは色でイメージをわかせるようにしている訳です。
62. 最後に数値で決める色彩設計ということで、 実際に先ほど例に出した配色が、 どのように調和がとれているのか ということを見て行きます。
63. ここでは、 HSB というパラメータを使って数値を見ていきます。 H が HUE 。色彩。 S が Saturation 。彩度。 B が Brightness 。明度。 それでは数値での落とし込みに映ります。
64. 各、色のパラメータは右のような数値となっています。 大きく分けて、メインビジュアル。 申し込みのコンテンツの配色の説明になります。
65. まずはメインビジュアルですが、 このような配色になっています。 H の部分を見ると、同じ数字になっていますね。 これは同じ色相内での色の組み合わせなので、 類似の原理にあたります。 また、 B の部分を見てみると、 50% 程の開きがあり、 明度差で高いコントラストを生み出しているので、 これは非不明瞭性の原理にもあたります。
66. お申し込みコンテンツでの配色ですが、 先ほど説明した通り、赤、青、緑の類似補色になっています。 H の色相の部分で 180° 反対の 170° を選び、 そこから、大体 25° 程離れた色同士を配色しています。 そしてこれは色相環上で規則的なルールに基づいた配色なので、秩序の原理になります。 また、青、緑の部分を見てみると、 S 、 B が同じ数字ですね。 トーンに共通性があるということで、これは類似の原理に当たります。 どうでしょうか。 このように数値での落とし込みは非常に大切で、 きちんと調和が取れているか ということを客観視して、確認する為にも、 非常に良い指標になったりします。 更に言えば数値の部分が、 色彩調和の原理に基づいてさえ入れば、 調和のとれた色彩は出来上がる訳です。 ですので、最後に 数値の部分で簡単に配色を行えるツールをご紹介します。
67. こちらは Adobe が運営している kuler という配色ツールです。 こちらの特徴として、 投稿された配色パターンが多々ある為、 自分のイメージする配色を見つけやすいという事。 イメージに近い配色パターンを見つけて そこからパラメータを動かして配色を作れるので、 非常に効率良く配色を作れるツールになります。
68. 次にカラースキームデザイナー。 これは選んだ色に対して、秩序の原理に基づいた色を排出できるというものです。 そして明度、彩度、のコントラストを調節する事によって、 その都度、調和のとれた色を排出してくれるといったものになります。
69. 最後に HUE360 です。 こちらは顕色系といわれる色彩パターンを用いた配色ツールです。 顕色系自体が人間の知覚に近い形で色を配置したものなので、 非常に見やすい、目に優しい配色を作ってくれるというものになります。 こちらは非常に感覚的に調和する色を選んで行けるので、 配色が苦手な方にも非常にオススメです。
70. これからまとめの部分に入りたいと思いますが、 先ほど申し上げた通り、これらのツールを使えば、 数値に基づき、簡単に配色を作ることが出来ます。
71. しかし、数値だけで判断し、 色を作り始めてしまうのは、あまり宜しくありません。
72. というのも 先ほど申し上げた通り、僕たちは何かを伝える為に配色を行っている訳です。
73. なので、その根拠付けとして、 数値を用いるのが より良い配色をする為の第一歩となります。
74. 意味を失ったデザインはデザインではありません。
75. 何を伝えたいのかが大事です。 その為の色彩設計です。 このことを忘れなければ、 失敗しない配色は必ず生まれます。
76. ご清聴ありがとうございました。