★このコラムは、「愛される学校づくり研究会」にて発表された、「わかりやすい学校サイト・ポイント講座」を元に、具体例を追加しながら、デザインにつてい解説していくシリーズです。
【第3回】見やすいサイト（その２）
〜〜伝えるためにこれだけは押さえたい色の話〜〜
色の３属性（明度と色相と彩度）のうち、物の判別には明度差が大切だという話でその１が終わりました。残りの色相や彩度は主にイメージを決める時に重要な役割をもっています。
青い空、青い海、赤い夕日 というふうに、色には物を想起させる性質があります。また「赤」の中にも、神社の鳥居の色もあるし、消防車の赤もあるし、サンタクロースの赤、コカコーラの赤、血液の赤など、微妙なトーンや色相の違いでイメージする物が違ってきます。
さらに、色は使う時は１色ではなく、ほとんどが２色以上の色を組み合わせて（配色して）使いますが、このとき問題になってくるのが、色は周りの色の影響を受けて、１色の時とは違った見え方をするという性質があることです。
知っておくと便利な配色にまつわる性質をあとでいくつか紹介しておきます。（後述コラム参照）
明度設計がしっかりしていれば、色相と彩度設計が多少失敗したとしても、見やすいという意味ではそれほど破綻しないものです。なぜなら、人間の目は、色相、彩度にわりと鈍感に出来ているからです。大きく失敗すると、気持ち悪いサイトや変なセンスのサイトになってしまうかもしれませんが、明度設計が正しければ見えにくくはならないのです。
では、どのように色を選ぶとよいでしょうか。
（１）基調色をきめる（学校のイメージを伝えるため）
色にはイメージがあるといいました。まず学校のイメージを言葉にしてみましょう。
そしてその言葉を連想する色を色相環のなかからさがしましょう。
一色に絞れない時は３色くらいを選んでもいいでしょう。
この作業は慣れないとなかなか言葉にあった色を探す事ができません。私がいつも心がけているのは、身の回りの色が気になった時に、物やイメージと結びつけて「言う」ということです。
「燃えるような赤」「不真面目な黄色」「石ころの青」「さわやかなピンク」「腐った赤」「冷たい緑」「重い緑」「甘い黄色」など個人的な感じ方でよいので、色に名前を付けて楽しんでみてください。
きっと色の微妙な違いや、見た時のシチュエーションも記憶に残り、色を使う時の手助けになるはずです。
次の例は、前回の明度設計を保ったまま、いろいろなイメージで配色してみた例です。もちろん、これが唯一の正解ではありませんので、他にも色の組み合わせは無数にあります。
青を中心として緑青から青紫あたりの色は寒色系と呼ばれます。寒い冷たいといった印象の他に、真面目やお堅いというイメージもあります。
色相環の反対側、オレンジを中心とした色は暖色系と呼ばれています。暖かみのある色相が画面のほとんどを占めている状態を「基調色は暖色系」とか「オレンジを基調色とした」といいます。
基調色を決める時に同系色（色相の近い色）でまとめると、統一感のある配色になり安定します。
基調色をきめるということは、他の色を捨てるということです。
逆に、色相環をぐるりと万遍なく色を選んでしまうと派手な配色になってしまい、どの色も主張するので目立ちはしますが、何をイメージさせたいのか分からなくなる可能性があります。
彩度を全体に低めにして配色すると、落ち着いたイメージになります。
しかし、統一させる事だけが必ずしも良いとは限りません。甘いだけの料理に、隠し味があるように、配色に隠し味としてアクセントをつけるとピリッとしまった感じになり、基調色がより強調されることがあります。
こんな感じです（アクセントとして基調色の反対側の色を選ぶと、効果的。）
全体が彩度の低い配色中に、彩度の高い色があっても目立ちます。
ただし、ここでいうアクセントは隠し味的な使い方ですので、一番に目立たせたいという時には、明度差（コントラスト）を高くして、目立たせるのが一番良いのはいうまでもありません。
（２）公共サイトとして
学校のような公共サイトの配色を進めるにあたって、注意しておきたい事があります。
残念ながら、どんなに色彩論的な設計で配色を決めても、全ての人に同じ様に見えているとはかぎりません。それは、微妙な色の区別がつかない人や、年齢によって、色の判別能力が衰えたりと、一定ではありませんし、色覚障害の人もいます。
日本人の場合、大きく分けると 赤がグレーに見える（第１色覚異常） 緑がグレーに見える（第２） という色覚異常がありますが、男性では20人に１人、女性でも400人に１人がそうであると言われてます（遺伝学上の割合として）
教室内でも１、２名がいる割合ですが、一般の人が見る公共サイトでは特に配慮しておくとことが必要です。
（日本では割合からいって、男性300万人ほどが色覚異常の可能性がある。）
（３）他人の目
そして、最後にかならず他人の目からどのように見えているかを評価してもらうこと。
その際に基準となるのは、きれいとか、かわいいとか、楽しそうという意見ではなく、配置された要素の重要度（明度設計）の通りにに見えているかという評価してもらうのが肝心です。
デザイナーでもそうですが、自分の配色した色は、客観的に評価できないものです。
色彩のセンスを評価してもらうのではなく、見えるか見えないかをチェックしてもらうわけですから、より多くの人に意見をもらうとよいでしょう。
分かりやすい色彩設計をする時に、これだけは押さえておきたい画面デザインのポイントを、２回にわたって解説しました。以下の４つです。
- 配置する要素の重要度に合った明度設計
- 学校のテーマにあった基調色の選定（色相・彩度によるアクセントや演出）
- 色覚異常への配慮
- 仕上げ（他人からの評価）
次回は、学校の様子を伝えるための効果的な「写真の選び方」を解説したいと思います。
【コラム 対比された色の性質】
 |
中の四角の大きさは同じですが、黒の中にある白のほうが大きく感じます。白は膨張し、黒は収縮する性質があります。 |
 |
黄色は前進（飛び出して）してみえます。青は後退（引っ込んで）見えます。モニター上の青い文字が見えにくいのは、このせいです。 |
 |
グレーの四角は同じ明度ですが、黒のなかではより明るく感じ、白の中ではより暗く感じます。 |
 |
紫と黄色の四角はそれぞれ同じ色ですが、黒の中では白の中にあるよりも鮮やかに感じます。（彩度対比と呼ばれます。） |
 |
グレーの四角は同じ明度ですが、青の中ではオレンジがかったグレーに感じ、赤のなかでは青っぽいグレーに感じます。 |
配色する時に、このような性質を利用すると、より効果的な見せ方をすることができます。
（2011年７月11日）
