デザイナーのオモトです。サイト作りやサムネイル作りなど、一般の方でもデザインする機会が増える中で『自己流でやって失敗してしまった…』という方、結構多いのではないでしょうか？
テンプレートはカッコいいのに、色を変えるとカッコ悪くなってしまう人は必見です。
今回は、「なぜあなたの色選びは失敗するのか」の原因を探りながら「失敗しない色の選び方」について解説したいと思います。
色相やアクセントカラーなど基本的な用語解説は、ダウンロード資料『Webデザインに役立つ配色アイディア』をご覧ください。
悲劇の原因①「色の面積」を考慮してない
色見本サイトの例
最初に色を選ぶ際、多くの人が、オンラインの色見本サイトや配色サイトを見ながら選ぶことになります。そして、色見本ではいい色だと思ったのに、実際のデザインに入れるとなんか微妙…という悲劇が起きてしまうのです。
なぜ、色見本と出来上がりのイメージが違ってしまうのでしょう？
それは、「色見本は、実際に使う大きさではない」からです。
サンプルの色見本と実際の色では印象が違って見える
この数センチ四方（もしくは画面全体）の色見本と、実際にテキスト・ボタン・背景などに使う時の色では、同じ色なのに実際の印象に大きな違いがあります。
この同じ色でも小さな面積で見る色と、大きな面積で見る色とでは、明るさや色味の印象に差が生じることを「面積効果」といいます。
面積効果とは？
一番左の四角形が、面積効果の目の錯覚よって濃紺に見えている
「面積効果」は人間の網膜の特性によって起こる現象です。色の面積が小さいと目の感度が低くなるので、同じ色でも、小さい面積は、暗く低明度に感じられ、大きな面積は、明るく高彩度に見える傾向があるということです。
高彩度は大きい面積だと目が痛くなる
同じ色でも背景に入れると目が痛くなる
「この明るく高彩度に見える」というのがミソで、例えば、テキストリンクや、色見本くらいの面積で使う分には問題なかったのに、同じ色を背景色に使った途端「やたら目が痛い、チカチカ眩しい」といった現象が起こるわけです。
プロのデザイナーは「色の面積によってはデザインが破綻する」のを肌感覚で理解しているので、そもそも「テキストとしても背景としても使える事」を考慮して明るく見えるけど実はちょっとくすんでる色を選んだり、高彩度の色を使う場合は、画面上に占める色の比率を全体の○％までなどと、あらかじめ決めているのです。
そういった、デザイナーの暗黙のルールを読み解いて、意図した範囲内の色を選ばないとデザインが破綻するというわけです。
じゃあ色見本って参考にしちゃダメなの？
Sの値が２ずつ機械的に減っている（※HSBとは色をHue（色相）、Saturation（彩度）、 Brightness（明度）で表す方法）
色見本は、あくまで数値上が「綺麗な色」であって、面積による揺らぎを考慮した色ではないことを理解することが大切です。あくまで基準となる色として使うのがベストでしょう。色見本の色は、数値が綺麗な分、色に濁りがないというメリットの一方で、こういう目が痛い現象が起こる事を理解しておくことが必要です。
悲劇の原因②Webサイトで使われる配色には役割がある
「慣れたものが使いやすい」のはWebサイトのデザインにおいても同じことで、Webサイトにも空気のように当たり前になりすぎてしまった「隠れた常識」が存在します。
そしてその常識は、デザイナー側の「これだったら理解できるかな」というデザイン意図と、ユーザー側の「ここにこれがないとおかしい！」などの心理とのすり合わせによって、毎年少しずつアップデートされています。
テキストリンクの色は何色？
写真は世界初のホームページ（復刻版）URL:http://info.cern.ch/hypertext/WWW/TheProject.html
わかりやすい例でいうと、インターネット黎明期においては、「青文字にアンダーライン＝リンクである」という共通認識を作るところからテキストリンクの歴史が始まっています。
赤文字でもリンクだと理解できます。また、強調文字も「リンクではない」ということが直感的にわかるはず。
…が、今現在においてはどうでしょう。「文中の色が変わっている箇所はリンクである」という風に常識が変化していますよね。つまり、青文字にアンダーラインじゃないとリンクとして認識できないということは無くなっているのです。
このように、色が時に「リンク」を表しているように、「色がWebサイトの役割」を表すことがあるのです。
デザイナーはこうした文脈を考慮してデザインを作成しています。
目立たせるために色を変えているが、規則性や役割を見出せないので素人感がある例
それを無視してしまうと、使いにくい・なんか変だなという風になってしまうのです。
コンテキストに従っているか
コンテキストとは、（定義が難しい言葉ですが）ユーザーの動機や、日常生活で慣れ親しんだルール、Webサイトの歴史などをひっくるめた、裏側の文脈を意味する言葉です。
配色に関しても、以下のようなコンテキストが存在します。
右上のCVボタンは、緑色の反対色であるピンクをアクセントカラーとして配色。一番重要なボタンなので、サイト内で一番目立つようにしている（逆にここぞという時以外は使ってはいけない）美しいものにはルールがある。
これの常識を踏まえて作ったのが上の画像です。別の色にしても成立しますし、これらを組み合わせるだけで、デザインを崩さずできそうですよね。あとは、キーカラー・アクセントカラーを自身のサイトに合わせて変更すればいいのです。
実例で見る、デザイナーが選ぶ使い勝手の良い配色パターン
プロがデザインで使う色は、多くても５〜６色以内でまとめていることが多いです。それ以上になると、いい意味で賑やか、悪い意味で煩雑な印象になります。ここでは参考サイトを例に説明していきます。
まとまり・おとなしい・洗練されたイメージ：４色〜５色
シンプルでクリーンな印象になっている
健腸ナビでは、5色でまとめられています。
重要なのは、色自体が持つ意味（緑は自然の色で癒されるなど）ではなく、色に持たせた役割です。
緑は、あちこちに使うメインカラー。クリーム色は目立たせたい背景用。オレンジは目立たせたいボタンやアクセントに。白はベースの背景用。黒は文字用と、色の使い所がルール化されています。
サイトによっては、クリーム色の部分をグレーにしたり、オレンジなどの反対色は使わず、緑と黒で代用するパターンもあります。（ミニマムでシンプルな印象になります）
活発・賑やか・明るく元気な印象：６〜７色
たくさんの色を使って賑やかな印象だが、配色によって情報の重要度をコントロールされている
こちらのイーヨーというサイトでは、同じく緑色がメインカラーとして使われていますが、ピンクや黄色などたくさんの色が使われているので賑やかに見えます。一見すると煩雑に見えますが、緑をメインカラーとして、濃いオレンジは最重要のボタン、そこまでではない情報は黄色…と、色によって情報の重要度がコントロールされているので、不快感はなく読み進められるのです。
また、オレンジを基準とした類似色でまとめられているので、ガチャガチャとした印象はなくまとまりがあるように見えています。
素人が、この配色を弄ろうと思うと、それぞれの色の兼ね合いを考えなければいけないので、なかなか難しいのではないかと思います。
BiNDupのテンプレートは、色の役割がほぼ固定
Dressでは、最大６色まで設定可能。薄い色味は濃い色の不透明度を下げて表現していることが多い
手前味噌ですが、ホームページ作成サービス「BiNDup」のテンプレートは、色を画像のような形で、目立たせたいエリア、パーツなど役割ごとに揃えているので、特に難しく考える必要なく配色を変更することができます。
彩度による印象の変わり方
彩度が一番高い（目が痛い・鬱陶しい）/ 彩度やや高い（明るく元気な印象）/彩度やや低い（大人な落ち着いた印象）
/彩度が低い モノトーン（ミニマルな印象）
何章か前に「そもそも「テキストとしても背景としても使える事」を考慮して明るく見えるけど実はちょっとくすんでる色を選ぶ」というふうに、お伝えしましたが、テキストと背景両方に同じ色を使うかもしれないといった場面が想定される場合には、彩度が高すぎる色は基本的に使いません。ちょっとくすませた色を使うことで、目が痛くなる現象を回避します。
キーカラーの選び方
では、どうやったら間違いのない色選びができるのでしょう。ここまで読んでくださった方なら、ご理解いただけると思いますが、実際の画面で色を探すのが間違いのない方法です。それが叶わないのであれば、実際の画面に近いデザインを見ながら色を決めるのが良いでしょう。
BiNDupのCSS設定ツール「Dress」では、実際の画面を見ながら配色を選べるので、それを例に説明したいと思います。
１.モニターの明るさを最大にする
見落としがちなポイントですが、かなり色の印象が変わってしまうので、モニターをまず最大限明るくしましょう。
2.テキスト・ボタン背景がバランスよく入った場所を探す
サイトの中でテキスト・ボタンなどの要素が、バランスよく一画面に入っている場所を探します。これで準備は万全です。
3.色相のスライダーをいじる
初めは上の四角いエリアは触らず、色相のスライダーを任意の色に変えます。
4.明度を下げる
基本的に3だけで事足りますが、色によっては、明るく見えすぎてしまう場合があります。その場合は四角いエリアを触ります。
四角いエリアはカラーピッカーと呼ばれ、縦軸が明度、横軸が彩度をあらわしています。
彩度は基本的にいじらず、ピンの位置を垂直にずらし、明度を下げます。
水色の方も、スライダーを同じ位置に移動させ、明度を同じ量下げれば完成です。
まとめ
いかがでしたでしょうか。デザイナーが感覚的に理解しているものを言語化した内容でしたので、目から鱗だったかと思います。
面積効果など、ぜひ意識してみてくださいね。
→デザインが自在！ノーコードCMS「BiNDup」無料トライアルを使ってみる
POINT
- 面積効果で、大きい面積のものは高彩度に見える
- 色見本は数値上の綺麗な色であり色の揺らぎは考慮されていない。基準となる色の参考として使う
- モニターの明るさを最大にして色を選ぶ。彩度は基本的にいじらず、明度を下げる