★このコラムは、「愛される学校づくり研究会」にて発表された、「わかりやすい学校サイト・ポイント講座」を元に、具体例を追加しながら、デザインにつてい解説していくシリーズです。

【第2回】見やすいサイト（その１）

〜〜伝えるためにこれだけは押さえたい色の話〜〜

前回、お店と比較して学校サイトが基本的に必要な情報はなにか　という話で終わりました。

1. 学校名がわかる。
2. 誰に見てほしいかがわかる。
3. 学校の特徴がわかる。
4. どこにほしい情報があるか整理されている

他にも伝えたい学校の情報がいくつかあると思います。
学校案内、校長挨拶、教育方針、学年（だより）、行事カレンダー、学校ブログ、などなど。
今回は、訪問者に見てもらうための色彩計画をトップページを例にお話ししようと思います。初めて学校サイトを訪れた人にも、一瞬で、どのような学校なのかを伝えたい。そのために押さえておきたい色の話です。

今回はトップページに必要な情報を以下のように考えました。
・学校名は「元気中学校」
・学校からのメッセージ（５〜６行の挨拶文）
・サイトには、大きく６つのコーナーがあって、それぞれの入り口のリンクを用意。
画面設計上のポイントを色彩計画の面から解説してみましょう。

見てもらう為には、見えるようにしないといけません。
見えるとはどういうことか。目立つ色を使うという事ではありません。ここで重要なのは明度差（コントラスト）です。
『図１−Ａ』を見て、情報がきちんと見えているでしょうか？
・学校名は赤ですが、緑に囲まれてはっきりと判別できません。
・その下のリード文も明るい背景と明るい文字で読みにくいです。
・学校のイラストは校舎の形ではなく、雲のほうが目立っています。
・学校の特徴を説明する６つのコーナーのなかで「カレンダー」「学校ブログ」が一番先に目に入ってきます。
これを『図１−Ｂ』のようにするとどうでしょうか？

・学校名は一番最初に目に入って来て、きちんと読む事ができます。
・６つのコーナーはそれぞれ同等の扱いで、どのコーナー名の文字も読みやすいです。
・雲よりも立派な校舎の形がはっきりと見えてきました。
これは、明度差（コントラスト）が意図通り設計されているからです。

明度差について説明する前に、色の３属性について、まとめておきましょう。 色には、３つの属性、明度、色相、彩度　があるのは中学校（高校？）の美術で習ったことと思います。 色相は赤＞橙＞黄＞黄緑＞緑＞緑青＞青＞青紫＞紫＞赤紫＞赤　と360度ぐるりと回って、元にもどります。ここでは代表的な１０色しかありませんが、隣り合う色は連続して変化し、色は無限にあります。（図２）

それぞれの色相の一番鮮やかな（彩度の高い）色を純色といい、その純色に白や黒や灰色（白＋黒）を混ぜる事で、例えば明るい赤、暗い赤、くすんだ赤　などを作ることができます。赤などの色相を明度や彩度を変化させると赤についての様々な色が作れます。これをトーンといいます。（図３）

色を人に伝える時に、単に「赤」というだけでなく、赤のトーンを言葉で言えるようにしておくと便利です（図４） 純色に白を混ぜると明るくなり、さらに白を増やすとうすい赤＝桃色になるのは、わかりますね。 赤に黒を混ぜていくと、濃い赤＞暗い赤になっていきます。「濃い赤」というのは深紅のことと思っていませんか？　深紅は色の世界では赤の純色（一番鮮やかな赤）ということです。濃いというのは実は暗い方へトーンを変化させた赤のことなのです。 純色に灰色を混ぜていくと、徐々に彩度が落ちて、くすんだ色（鈍い色＝dull）になっていきます。

また、純色にも固有の明度があり、黄色は明度が高く、青は明度が低く、赤は中間ぐらいの明度を持っています。

見やすさの一番の貢献者　明度

色を選択するということは、この３つの属性を決定することですが、人間の目は「明度」に一番敏感です。物を判別する時には明度差（コントラスト）が一番影響を与えます。ですから、どんなにきれいな赤でも周りとの明度差がないと、見えないのです。
図２を白黒で置き換えたものが図６です。

図１−Ａで学校名が読みにくかったのは、背景と文字色の明度差が少なかったからです。
色彩設計で一番最初にやって置きたいのは、明度差を使って、重要なものがその優先度にしたがって見えるように設計することです。文字や図形の形が見にくいときは、明度差を大きくしていきます。
図６−Ｂの学校名の背景と文字の明度差は大きな差があるので、一番目立っています。その下のリード文が目に入ってくるのも背景と文字に明度差があるからです。
この白黒設計の後に、色を付けていくのですが、最後まで明度は変えないこと。これが重要です。

イメージを決定する　色相と彩度

色相と彩度、この２つの属性は主にイメージを決定するものです。
色には暑い寒いといった心理効果や、飛び出す色、引っ込む色といった視覚効果、また、同系色、反対色、補色など、組み合わせによって様々なイメージを作りだすことができます。

次回は、白黒世界での「明度設計」を活かしつつ、色を選択するときの注意点についてお話します。

【コラム　色の３原色】

全ての色は３つの基本色（原色）から作り出す事ができると言われています。
絵の具ならイエロー、シアン、マゼンタが３原色です。絵の具の混色は減法混色といって、混ぜると黒くなっていきます。しかしそれは理論値であって、完全な黒にするためには、黒が必要です。ですので、オフセット印刷などでは４色（YMCK）のインクが必要になります。インクジェットプリンタでもカラーをきれいに印刷するために４つのインクが入っていますね。
一方、パソコン画面の色は光の３原色（R：赤　G：緑　B：青）で作られています。光の場合、加色混合といって、RBGの量が多ければ白に近づき、量が少なければ、黒に近づきます。３原色で無限の色が作れるわけですが、（といっても、現在のパソコンの画面は、RGBそれぞれ256段階の組み合わせなので、1677万色程。）
赤を３原色の組み合わせで言うと、R=255、G=0、B=0　赤に白を混ぜてピンクにするにはR=255、G=127、B=127とするわけです。

ちなみに、Windowsのアクセサリに入っているペイントで色を選ぶ時のカラーピッカーはこういう数値で３つの属性を指定する事になっています。

（2011年６月13日）