情報活用編

第4章「画像とデザイン」

IT03-03

情報デザインとポスター編集

1 学習目標

2 チャット学習①

3 スライド学習①

4 チャット学習②

5 アクティビティ

6 まとめ動画

7 次回予告

3. スライド学習①

情報デザイン

スライドの学習内容

  • 情報デザインとは
  • 抽象化
  • 可視化
  • 構造化
  • 情報を伝える手段
  • ポスターによる表現
  • Webによる表現

正確に情報を人に伝えることはとても難しいことです。どのようにすれば正しく伝わるのかについて学習しましょう。

情報デザインとは

情報デザインとは、情報をわかりやすく伝えたり、見やすく整理したりする方法のことです。本やWebサイト、ポスターなど日常的に目にする多くの物が情報デザインの一部です。

次のポスターは、学校で吹奏楽部の新入部員を募集しているポスターです。二つを比べてみましょう。

ポスター例1

ポスター例2

二つのポスターを見比べてください。

「ポスター例1」は、見にくく、何が言いたいのかわかりにくいのに対し、「ポスター例2」は、見やすく情報がまとまっています。

ポスター例2は情報デザインのルールに注意しながら作成されています。

どのような点で注意されているか確認しましょう。

参 考

視線移動

人が情報を見るときの自然な視線の流れのことです。視線移動を考えて情報を作成します。

視線は文字が横書きの場合は左上から右下に縦書きの場合は右上から左下に移動します。

「ポスター例2」は視線移動も考えて作られています。

情報を正しく伝える方法に抽象化・可視化・構造化があります。これらについて学習しましょう。

抽象化

抽象化とは、伝えたいことを文字ではなくシンプルな絵や図形などで表現することです。

例えば、スマートフォンのアイコンやピクトグラムがあります。

ピクトグラムは言葉で説明しなくても直感的にわかるようにデザインされています。2021年の東京オリンピックでも使われていましたね。詳しくは「ピクトグラム」の回で学習します。

可視化

可視化とは、数値で表されたデータを見た時にわかりやすいようにグラフやグラフィックを用いてわかりやすくすることです。

例えば、Excelで集めた数値をグラフにしたり、図形で表したりするものがあります。

インフォグラフィックとはデータを単にグラフで表したものではなく、人の目を引く工夫が凝らされた図のことです。

構造化

構造化とは、情報の関係性やつながり、レベル、段落を整理して表現したものです。

次の例は構造化があまりされていない文書と、きちんと構造化された文書です。

構造化された文書は、文字の大きさや段落がはっきりしていてわかりやすくなります。

情報を伝える様々な手段

情報を正しく伝えるための手段には様々なものがあります。例えば、一人に伝える場合は電話をかけたり、複数の知り合いに伝える場合であればTV会議をしたり、不特定多数の人に伝えたい場合は、ポスターを作って掲示したり、Webページを作成したりします。

次のページは金融庁が出している、中高生向けの「基礎から学べる金融ガイド」の1ページです。このページも情報デザインの「抽象化」・「可視化」・「構造化」が使われています。

引用：「基礎から学べる金融ガイド(金融庁)、https://www.fsa.go.jp/teach/kou4.pdf、2024/01/16」

学校で使っている教科書や参考書、雑誌など、目にするものの大多数が情報デザインを考えて作られています。色々な書籍やWebページ、ポスターを見て確認しましょう。

情報を正しく伝えるためには、目的ごとに適した手段を使います。今回はよく利用する「ポスターによる表現」と「Webによる表現」の特徴について説明します。

ポスターによる表現

ポスターは不特定多数の人に情報を伝える場合に適した手段です。ポスターは人通りの多いところに掲示し、足を止めて見てもらうために次の点に注意してデザインします。

  • わかりやすいタイトルを大きくつける。
  • 関心を引くようなイラストや写真を入れる。
  • スペースに限りがあるため適切なデザインが必要。

ポスター例

アクティビティでは指定されたテンプレートをもとに、ポスターを作ります。これらを参考により良いポスターに仕上げましょう！

Webによる表現

Webページは扱える情報量が多く、動画や音声なども利用することができる手段です 。次のことに注意をしてデザインします。

  • 閲覧者が迷わないようにメニューを作る。
  • メニューも含め情報の構造化を適切に行う。
  • 画面サイズがまちまちなので、大きい画面と小さい画面のデザインを考慮する。

Webページ例

Webによる表現はWebページを訪問した人しか伝わらないため、訪問してもらうための工夫も大切です。

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる