読者です 読者をやめる 読者になる 読者になる

教育ICTリサーチ / 造形教育研究部・考える力研究部 ~クリエイティブな人材育成研究ブログ~

「図工」「美術」「情報」「総合」など、発想力・創造力・考える力を育成する教育プログラムや方法、実践などを紹介します。

学校で使えるクリエイティブデザインアイデア #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

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

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

(前田)