情報デザインの方法

ここでは情報デザインの方法を学びましょう。
代表的な方法は次の三つです。

情報デザインの方法

  • 情報の抽象化

  • 情報の可視化

  • 情報の構造化

情報の抽象化

情報の抽象化とは、複雑な情報や大量の情報の中から、重要なことだけを取り出してまとめ直すことです。
一見すると、伝える情報の要素が多ければ多いほど、ものごとが正確に伝わるように思えるかもしれません。
しかし、情報が多いと逆に分かりにくくなったり、重要な事柄が伝わりにくくなることがあります。

例として、最寄り駅に到着した知人に、自宅までの道のりを電話で説明する場面を考えてみましょう。

地図の画像
できるだけ多くの情報を伝えるように説明すると、次のようになります。

駅の南口を出て、交番と郵便局の間の道を進みます。交番、駐車場、花屋の前を通ります。花屋と佐藤さんの家の間の道を左に曲がります。佐藤さん、田中さんの家の前を通り、その隣が自宅です。

……すみません。覚えられません。まずどの道でしたっけ?

情報が多すぎて、かえってうまく伝わりませんでした。
そこで、道案内で重要な情報だけを取り出してまとめ直す「抽象化」を行って説明すると、次のようになります。

駅の南口を出てまっすぐ進みます。花屋の角を左に曲がって3軒目が自宅です。

まっすぐ行って、花屋を左で3軒目ですね。了解です!

「抽象化」を行うことで、情報がスムーズに伝わるようになりました。

情報の抽象化の例

抽象化は、緊急時や機械の操作時など、直感的に判断を行う必要があるときに有効な方法です。

ピクトグラムは、単純な図形を組み合わせて情報を伝える絵文字です。
1960年代以降、言語の制約を受けない視覚表現として注目され、日本では1964年(昭和39年)の東京オリンピックをきっかけに公共施設に導入されました。
下に示す非常口のピクトグラムは、日本のグラフィックデザイナー・太田幸夫氏らによってデザインされたもので、現在では世界中で使用されています。

非常口のピクトグラム
非常口のピクトグラム

ピクトグラムは絵だけで表現するので、外国人にも直感的に情報を伝えることができます。

アイコンは、もとは「肖像、偶像」という意味ですが、コンピュータ分野では機能や操作を表す絵文字を意味します。
よく使う機能や操作をアイコンで表現することで、直感的に使うことができます。

フォルダのアイコン
フォルダのアイコン
設定機能のアイコン
設定機能のアイコン
保存操作のアイコン
保存操作のアイコン

保存操作のアイコンは、フロッピーディスクを表しています。
フロッピーディスクとは、1980年代から1990年代前半にかけて広く利用された記憶媒体です。
今ではあまり使われなくなりましたが、アイコンとして残り続けているんですね。

フロッピーディスクの写真

文字を短縮した表現も抽象化の一つです。
例えば「SNS」は「Social Networking Service」を省略したものですが、日常の会話では省略した方が伝わりやすくなります。

情報の可視化

情報の可視化とは、情報を視覚的に表現することで、その特徴や傾向を把握しやすくすることです。

情報の可視化の例

表(テーブル)は、データを縦横の格子状に表したものです。
正確な値を表示することができ、一覧性が高いため比較しやすいのが特徴です。 表のイメージ画像

グラフは、二つ以上の数量の関係を、点や線、面を使って表したものです。
傾向や比率などの、数値を見ただけでは読み取りづらい情報を表現することができます。
グラフのイメージ画像

インフォグラフィックス(infographics)は、information(情報)とgraphics(視覚表現)を組み合わせた造語です。
複雑な内容やイメージしづらい物事の仕組みなどを、図やイラスト、地図などを用いて、視覚的・直感的に伝える手法です。
インフォグラフィックスのイメージ画像

ナイチンゲールのグラフ

可視化の事例として有名なものに、ナイチンゲールの「鶏頭図(ニワトリのとさか図)」があります。
「クリミアの天使」で知られるイギリスの看護師フローレンス・ナイチンゲールは、数学や統計学にも秀でた人でした。
クリミア戦争の野戦病院に派遣されたナイチンゲールは、戦死者・傷病者に関するデータを分析し、死亡原因の多くが戦闘で受けた傷そのものではなく、傷の治療や病院の衛生状態が不十分だったために起こった伝染病であることを突き止めました。
ナイチンゲールはこの事実を、統計に詳しくない国会議員や役人にもわかりやすいように「鶏頭図」と呼ばれるグラフにまとめて、衛生状態の改善を訴えました。

ナイチンゲールの鶏頭図
このグラフは2年間の月ごとの死者数の変化と、死亡原因の内訳を表している。グラフの赤い部分が負傷による死者数、青い部分が予測可能または軽減可能な伝染病疾患による死者数、黒い部分がその他の要因による死者数。
画像出典:フローレンス・ナイチンゲール - Wikipedia(https://ja.wikipedia.org/wiki/フローレンス・ナイチンゲール)

情報の構造化

情報の構造化とは、情報の内容を関係のあるものでまとめ、わかりやすく整理することです。

例えば文章は、読む人が理解しやすいように、内容をまとまりに分けます。
まとまりに分けた文や図は、読みやすいように配置(レイアウト)します。

情報の構造化のイメージ

代表的な図的表現

情報の要素同士の関係は、図的表現を用いて表すとわかりやすくなります。

並列…同じ種類の情報を並べる 並列のイメージ画像

順序…時間や手順の流れを表す 順序のイメージ画像

分岐…条件によって結果が分かれる 分岐のイメージ画像

階層…親子関係を表す 階層のイメージ画像

情報を整理する方法は色々あることがわかりましたね。
それぞれに特徴があるので、目的に合わせて選ぶことが大切です。
それでは、キーワードを振り返りましょう。

情 報 こ と ば キ ー ワ ー ド

情報の抽象化

複雑な情報や大量の情報の中から、重要なことだけを取り出してまとめ直すこと。
代表的なものに、ピクトグラムやアイコンがある。

ピクトグラム

単純な図形を組み合わせて情報を伝える絵文字。

アイコン

コンピュータの機能や操作を表す絵文字。

情報の可視化

情報を視覚的に表現することで、その特徴や傾向を把握しやすくすること。
代表的なものに、表、グラフ、インフォグラフィックスがある。

インフォグラフィックス

複雑な内容やイメージしづらい物事の仕組みなどを、図やイラスト、地図などを用いて、視覚的・直感的に伝える手法。

情報の構造化

情報の内容を関係のあるものでまとめ、わかりやすく整理すること。

レイアウト

文や図の配置。

次は、情報を整理する具体的な方法を学びます。

Well done!

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

次のステップに進む

← 前のステップにもどる