教育ICTリサーチ ブログ

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

学校で使えるクリエイティブデザインアイデア #10: 関連要素ごとにまとめてわかりやすくするグルーピング

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

 今回紹介するのは、グルーピングです。グルーピングとは、関連要素ごとに情報を分類・まとめて、わかりやすくすることです。

関連要素は近くする

 グルーピングは、学級通信などの紙面でも、授業で使うスライドでも活用するべき要素です。グルーピングをすることで、パッと見で直感的に情報を理解しやすくすることができます。
 まずは、悪い例から見てみましょう。 

▼悪い例(1)
f:id:ict_in_education:20160508220432p:plain

 これを、見やすくするためにはどうすればいいでしょうか。「じゃがいも」と「ラベンダー」の2つの要素についてまとめて書いてから画像を2つ並べると、その画像が「じゃがいも」と「ラベンダー」のどちらに関する情報なのかがわかりにくくなります。
 それをはっきりさせるためには、修正例(1)のように文字情報と画像をグルーピングして読まれるように配置するといいでしょう。

▼修正例(1)
f:id:ict_in_education:20160508220452p:plain


 もうひとつ、例を見てみましょう。画像とその下につけるキャプションの距離感だけでも、情報のグルーピングをすることができます。悪い例と修正例を並べて見てみましょう。

▼悪い例(2)
f:id:ict_in_education:20160508220505p:plain

▼修正例(2)
f:id:ict_in_education:20160508220519p:plain

 要素同士の距離を近くすることで、それらの要素同士が関連性のあるものだということがわかりやすくなります。逆に、関連のない要素は距離を離すことで関連性がないことがわかりやすくなります。
 レイアウトする際に、関連要素よりも、関連性のない要素の方が近くなってしまっていないか注意しましょう。

 見出し・挿絵・キャプション・箇条書きなど要素が増えてくると、それぞれの距離感を調整することを忘れがちになっているものです。行間を調整したり、テキストボックスを分けたりして距離感を調整するといいでしょう。

(前田)