教育ICTリサーチ ブログ

学校/教育をFuture Readyにするお手伝いをするために、授業（授業者＋学習者）を価値の中心に置いた情報発信をしていきます。

学校で使えるクリエイティブデザインアイデア #05: レイアウトにルールを設定、スッキリと見やすく読みやすく！（第2回 配色編）

教育ICT クリエイティブデザイン

　フューチャーインスティテュートの前田です。美大卒の教育コンサルタントです。この連載では、学校の先生が普段使えるクリエイティブデザイン観点でのアイデアやポイントを紹介していきます。

　前回から、印刷物をすっきり見やすく読みやすくするために、レイアウトに設定するといい4つのルールを紹介しています。4つのルールを設定することで、情報が見やすく、読みやすくなります。このルールを決めずに、その場の思い付きで作っていくと、まとまりがなくなり、散漫な印象になってしまいます。

　ルール設定については、以下4回に分けてご紹介しようと思います。

  1. フォント・フォントカラー・文字サイズについて
  2. 配色について
  3. グリッドについて
  4. 表現方法について

　前回は、「1. フォント・フォントカラー・文字サイズについて」のルール設定を紹介しました。今回は、2回目「配色について」のルール設定を紹介します。

配色を決める

　カラー印刷する場合は、予め配色を決めておいた方がよいでしょう*1。その場の思いつきで色を使うと、雑多な印象になってしまうので、情報が伝わりづらく、わかりにくくなってしまいます。教科書にマーカーをひきすぎて、結局どこが重要なのかがわからなくなるといった感じです。

　配色を決める際は、メイン・サブ・アクセントの3つを決めます。
f:id:ict_in_education:20151220115850p:plain

　学校で作成する印刷物のほとんどは、白地に、情報が掲載されているものがほとんどだと思いますので、メインカラーは白になると思います。文字の下地に四角を配置したり、画像を配置したりする場合は、その下地の色がメインカラーになります。

  • 面積が多いのが、メインカラー
  • 中くらいがサブカラー
  • 少ないのがアクセントカラー

と思ってください。
　アクセントカラーは、目立たないと意味がないので、使用する色は、メインカラーとサブカラーと比較して目立つ色を選ぶ必要があります。色相・彩度・明度を考慮して選ぶ必要があります。それぞれが異なるほど際立って目立ちます。
　配色は、色数が増えるほど、コントロールするのが難しくなってくるので、できれば増やさない方がいいですが、どうしてもという場合は、それぞれ3色（計9色）くらいまでと思っておくといいと思います。

▼配色の例

  • 白地背景に、黒文字、赤で強調のシンプルな配色を基準として、メインカラーやサブカラーの色を増やしたパターン。f:id:ict_in_education:20151220120020p:plain
  • 白地背景に、黒文字、オレンジで強調。サブカラーの青は文字で使用したり、オレンジをより強調させるために使用するイメージ。これを基準として、メインカラーを増やしたり、アクセントカラーを変えたパターン。f:id:ict_in_education:20151220120135p:plain
  • 春夏秋冬で、配色したパターン。メインカラーに、四季を感じつつ、文字が読めるように明度が高めで彩度を抑えた色を使用、アクセントカラーは彩度が高く明度は中～高くらいの色を使用。f:id:ict_in_education:20151220120151p:plain

彩度と明度を同じくらいの色にする

　上記で述べた配色の各カラーの色数は絶対条件ではありません。例えばカテゴリの異なる情報をA4の1ページ内に6つ掲載したいという場合は、以下のように文字の下地に四角を配置して、メインカラーを6色にし、サブカラーとアクセントカラーは1色ずつというやり方もできます。
f:id:ict_in_education:20151220120229p:plain
　上記のように、異なる情報を、情報の優劣をつけずに見せたいという場合は、下地に配置する四角の色の彩度・明度を同じくらいの色にするといいでしょう。見た目だけで判断するのが難しい場合は、WordやPowerPoint上での機能を使うと、確認することができます。

▼彩度の確認方法

  1. WordやPowerPointで、確認したい図形や文字を選択　※画像は対象外
  2. [図形の塗りつぶしの色]／[フォントの色]で、[その他の色]をクリック
  3. 「色の設定」ダイアログボックスが開いたら、「ユーザー設定」タブをクリック
  4. 左側の「色」の下に表示されている白い十字のマークの位置と、その右側に表示されている縦長のバー黒い三角形の位置を確認するf:id:ict_in_education:20151220121052p:plain
    • 白い十字が上に配置されていて、黒い三角形が真ん中に配置されているほど、彩度が高い
    • 白い十字が下に配置されていたり、黒い三角形が上または下に配置されているほど、彩度が低い

　このようにして、他の図形や文字も同様にして確認し、白い十字と黒い三角形の位置を確認し、位置を揃えて彩度を調整することができます。

▼明度の確認方法

  • PowerPointの「ファイル」タブ→「印刷」で、[グレースケール]をクリック
  • Wordでデータを作成している場合は、色を確認したいオブジェクトをコピーして、PowerPointに貼り付けて、「印刷」で確認することができます。f:id:ict_in_education:20151220121759p:plain

　神経質にまったく同じにする必要はないですが、おおよそでも合わせた方がよいでしょう。また、あまり彩度の高い色を下地に配置すると、目がチカチカして文字が読みづらくなるので、オススメしません。

　参考に、白をメインとした配色のサンプルが掲載されたサイトを紹介します。印刷物ではありませんが、配色の参考にはなると思います。
▼ホームページ配色サンプル ホームページやブログに使える女の子のための無料素材 キャンディストーンマテリアル

まとめ

  • 読みづらい例
    • たくさん色を使いすぎて、カラフルではあるが、まとまりのない書類になってしまっている。f:id:ict_in_education:20151220121948p:plain
  • 読みやすい例
    • メイン白・サブ青＆黒（本文）・アクセント赤でまとめた例f:id:ict_in_education:20151220122050p:plain

（前田）

*1:　白黒印刷する場合は、白・黒・グレーしかないので、カラーに比べて、あまり色について考える必要はありませんが、プリンタによっては、グレーがきれいに印刷されず、ベタ塗りの部分がドット状になったり、かすんだり、パソコン上で見るよりも淡くなってしまうことがあるので、あまりグレーを大きい面で使用しない方がいいと思います。