事例316
色に関するいろイロ～配色はセンスじゃない
近江兄弟社高校 長谷川友彦先生
本日のテーマは「色」です。
皆さんは、色について授業ではどのように触れていらっしゃいますか。「情報のデジタル化」の文脈で、光の3原色のRGBが、それぞれ256段階の数値で表されている、といったことが多いのではないでしょうか。もしかすると、印刷物では、インクの色がシアン、マゼンタ、イエロー、ブラックの4色で構成されていることから、色の3原色のCMYに黒を加えたCMYKという表し方をしているということを、教えていらっしゃる先生もいるのではないかと思います。
ここでは、「情報デザイン」の文脈で配色をどう考えていくかについて触れていきたいと思います。
色そのものが情報を持っている
まず、こちらをご覧ください。いかがでしょう。この表示を見て、本当に「安全」と思われますか。安心できるでしょぅか。「危険だ!」と感じるでしょうか。違いますよね。
赤は血の色を連想させますから、命の危険が迫っているということを色が教えてくれます。
黄色というのは、色の中で最も明るい色ですから、自然に注目させる効果があります。
また、緑というのは、自然の中にたくさんある色ですから、人に安心感や心地よさを与えてくれます。
つまり色というのは、色そのものが情報を発信しています。こういったことに関しては、生徒には資料を渡せば興味を持ってくれるだろうと思うのであまり深入りはせず、「配色の際にイメージと違うものを選ばない方がいいよ」くらいでよいのかなと思います。
配色の視認性を理解するために、まず色の3属性を知る
問題は、複数の色を組み合わせて配色する方法です。そのためには、まず色の3属性について知る必要があります。
あらゆる色は、「色相」「彩度」「明度」の3つの属性に分けて表すことができます。
「色相」というのは、赤っぽい色とか、緑っぽい色といった「どんな色」ということを表す属性のことです。「彩度」は、色の鮮やかさを表しています。彩度が低いとくすんだ色、彩度が高いと鮮やかな色になります。「明度」は、その名前のとおり明るさの度合いを表します。
配色を考える際には、まず色の組み合わせによって、情報がきちんと認識できるかどうかという「視認性」が非常に重要になります。
例えばこの写真です。ある日突然、道路標識がこんな配色に変えられてしまったのですが、京都・大津方面に向かう矢印と、大阪方面に向かう矢印がとても見づらいですよね。
現在では改善されていますが、最初は角度や天気によって、本当に見づらかったです。
こちらはいかがでしょうか。
上半分の文字は読みやすいですが、下半分の文字はとても読みにくいですよね。なぜこのようなことが起こるのでしょうか。
実は、配色で視認性を上げるためには、明度が鍵となってきます。
こちらの画像は、背景色と文字色の色相・彩度を同じ値に設定して、明度だけを変化させた場合の視認性の変化です。明度に差をつけることによって、読みやすさが向上していることがお分かりいただけると思います。
写真の上に文字を重ねることを考えます。当然、写真にはたくさんの明度の色が混じり合っていますから、その上にどのような明度の文字を重ねても必ずどこかはつぶれてしまいます。
こういう場合どうすればよいかということですが、文字の周りに明度差をつけた縁取りを付けてあげることで、文字がはっきり認識できるようになります。
レイアウト配色をGoogleスライドで実習する
では、レイアウトの配色ではどうでしょうか。
一般にレイアウトの配色では、「ベースカラー」「メインカラー」「アクセントカラー」の3つの色を基本に考えていくとよい、とされています。
「ベースカラー」は、いわゆる背景色、「メインカラー」は、そのコンテンツのテーマになる色です。ここは、色からどのような印象を与えたいか、ということを、コンテンツに応じて考えていただければと思います。
最後に「アクセントカラー」をちょっとした所に使うことで、メインカラーを引き立てる役割があります。
さて、実際にやってみたいと思います。今回は説明にGoogleスライドを使いますが、他のどのアプリでも同様のことはできるかと思いますので、それぞれの学校でお使いの環境で試していただけたらと思います。
まず、ベースカラーはあまり主張し過ぎず、ほんのり色が付いているか、いないか程度の色を選ぶのがよいのかと思います。あまり色が付き過ぎているとベースカラーが主張し過ぎることになりますので、ご注意ください。
次に、メインカラーですが、これに関してはコンテンツに合わせて好きな色を選んでいく、ということになると思います。ここはカスタムで色を作っていきます。今回は、濃い青色でいきたいと思います。
問題はここからです。アクセントカラーをメインカラーとうまく調和するような色にするにはどうすればよいかということですが、まず色を選ぶ際には、メインカラーと同じ色を選んで新規の色を作っていくことになります。
この種のアプリに付属しているカラーパレットは、実は横軸が明度、縦軸が彩度、そして下にあるバーが色相を表しています。うまく調和する配色を考える場合は、上の明度と彩度はそのまま触らずにおいて、色相のバーだけを変更すると、それほどおかしくない配色にすることができます。
本当はここで「色相を何度ずらすとよい」という理論もありますが、授業の中ではそこまで触れる必要はないと思います。もっと深く学びたい生徒はぜひ自分で調べてね、ということで、まずは明度と彩度を固定しておいて、色相だけを変えることで、調和した色を作ることができるということを理解できればよいかと思います。
ベースカラーを濃くする場合も同様です。
ベースカラーのポイントは彩度と明度です。明度は、暗い色を選んでおくのが無難かと思います。
メインカラーには、明るい色を設定します。アクセントカラーは、いったんメインカラーと同じ色に設定した上で、彩度と明度を固定した状態で色相だけ動かすということで、決めていきます。
このようにして、おかしくない配色・レイアウトを作成することができました。
情報デザインを理論から学ぶことの必要性
この実習の生徒の振り返りがこちらです。
「実際に配色の考え方のツールを使ってみることで、自分の感覚でしっかり理解することができました」「彩度・明度を変えずに色相を変えると、反対色でもなじんですごいなと思った」「色にはセンスとかではなく、決まりがあって、私にもできそうだなと思った」「今まで自分は、配色のセンスがないと思っていたけれど、色の3属性を知っていれば、配色は簡単にできると知ってうれしかった」など、多くを学ぶことができたことがうかがわれます。
私たちは「情報デザイン」で、「アートとデザインの違い」ということについて教えます。色も、情報を伝達するための重要な要素の一つであって、これもアートではないわけです。
単に「好きな色を選べばよい」というわけでなく、きちんと情報が伝わって、かつ受け手に不要なストレスを与えないために、きちんとした理論を教えていく必要があるだろうと思っています。
神奈川県情報部会実践事例報告会2023オンライン オンデマンド発表より