情報設計とインフォグラフィック 学習記録 #01

1. はじめに

Web 制作を学ぶ中で、情報設計について理解を深めたいと考えるようになりました。

その中で興味を持ったのがインフォグラフィックです。

インフォグラフィックは「情報を整理し、伝わりやすくするための考え方」です。web 制作と全く同じですね。

今回は、その内容を学習メモとしてまとめておきます。

2. インフォグラフィックとは

インフォグラフィック

インフォグラフィック(Infographic)とは、「Information(情報)」と「Graphic(視覚表現)」を組み合わせた言葉です。

文章や数字だけでは理解しにくい情報を、図やグラフ、アイコン、イラストなどを使って分かりやすく伝える表現手法を指します。

特に次のような情報は、Web サイト制作でも表現方法に悩むことがあります。

  • 統計データ
  • アンケート結果
  • 比較情報
  • 手順や流れ
  • 企業概要
  • サービス説明

SEO を考えるとテキストとして掲載したい一方で、閲覧者の理解しやすさを考えると図やイラストで表現したくなります。

3. デザインより情報整理が重要

インフォグラフィックというと、見た目の美しさに意識が向きがちです。

しかし、まず考えるべきなのは「何を伝えたいのか」という情報整理です。

例えば、

  • 売上推移を見せたいのか
  • 市場シェアを見せたいのか
  • 成長率を見せたいのか

によって、適した見せ方は変わります。

次の流れが基本です。

情報整理
↓
構造化
↓
強調ポイントの決定
↓
デザイン

4. 強調したいポイントを決める

インフォグラフィックは、すべての情報を同じように見せるものではありません。

むしろ、

「何を一番伝えたいのか」

を決めることが重要です。

例えば「北海道の人口推移」というテーマでも、

人口減少を伝えたい場合

  • 人口減少率を大きく表示
  • 減少数値を強調
  • 注意を引く色を使う

人口集中を伝えたい場合

  • 地図を大きく表示
  • 札幌市を強調
  • 地域ごとの比較を見せる

同じデータでも伝えたい内容によって表現方法は変わります。

強調したいポイントを決める

5. 「読む」より「見る」

優れたインフォグラフィックは、長い説明文を読まなくても概要が理解できるように設計されています。

主な要素として、

  • 大きな数字
  • グラフ
  • アイコン
  • 色の強弱

などがあります。

また、

  • 3秒で概要が分かる
  • 30秒で内容が分かる
  • 3分で詳細が分かる

という段階的な情報設計の考え方もあります。

6. 今回整理できたこと

今回、インフォグラフィックについて整理してみて、単なる図解デザインではなく、

  • 情報を整理する
  • 優先順位を決める
  • 視覚的に伝える

ための技術だと理解しました。

特に「デザインの前に情報設計がある」という考え方は、Web 制作にも共通する部分があります。

7. 次に学びたいこと

  • 1画像1メッセージの原則
  • グラフの種類と使い分け
  • 情報の優先順位(視覚的ヒエラルキー)
  • 色数を減らした方が伝わる理由
  • インフォグラフィック制作の具体的手順

■ 学習メモ

インフォグラフィックは「絵を描く技術」ではなく、
「情報を整理して伝える技術」と考えた方が理解しやすそう。