フレームワーク活用ガイドひとことで言うと#
複雑な情報を**「見ればわかる」状態にデザインする**技術。テキストの羅列ではなく、構造・階層・視覚的な手がかりを使って、受け手の認知負荷を最小化する。「伝える」から「伝わる」への橋渡し役。
押さえておきたい用語#
- 認知負荷（Cognitive Load）
- 情報を処理するときに脳にかかる負担の大きさのこと。インフォメーションデザインの目的はこの認知負荷を最小化すること。
- 視覚的階層（Visual Hierarchy）
- サイズ・色・位置・余白を使って情報の重要度を見た目で表現すること。読み手が自然に「最重要→補足」の順で目を動かせる状態が理想。
- データインク比（Data-Ink Ratio）
- エドワード・タフテが提唱した概念で、グラフ内のデータを示すインクの割合のこと。装飾的な要素を減らし、データそのものに注力すべきという原則。
- 5秒テスト
- 資料を見せて5秒後に「何が伝わったか」を確認する簡易ユーザビリティテストのこと。5秒で要点が伝わらなければ、情報設計をやり直す必要がある。
インフォメーションデザインの全体像#
こんな悩みに効く#
- 資料にたくさん情報を詰め込んだのに「わかりにくい」と言われる
- 数字やデータをうまくビジュアルで表現できない
- マニュアルや手順書を作っても、誰も読んでくれない
基本の使い方#
まず伝えたい情報をグルーピングし、階層を作る。
- **MECE（漏れなくダブりなく）**に情報を分類する
- 最も重要な情報を特定し、優先順位をつける
- 情報の流れ（時系列、因果関係、比較など）を決める
ポイント: 人間が一度に処理できる情報は7±2個。1画面・1スライドに詰め込む情報は5つ以下を目安にする。
情報の重要度や関係性を見た目で表現する。
- サイズ — 重要なものを大きく、補足を小さく
- 色 — カテゴリの区別や注意喚起に使う（色数は3〜4色まで）
- 余白 — 情報のグループを余白で区切る。詰め込みすぎない
- 位置 — 左上から右下へ読む自然な流れ（Z型・F型）を活用する
ポイント: 装飾を増やすのではなく、不要な要素を削ることでわかりやすくなる。
伝えたい内容に応じて、最適なビジュアル形式を選択する。
- 比較 → 棒グラフ、表
- 推移・トレンド → 折れ線グラフ
- 割合・構成 → 円グラフ（項目が5つ以下の場合）、積み上げ棒
- プロセス・手順 → フローチャート、ステップ図
- 関係性 → マトリクス、ベン図、ネットワーク図
ポイント: 「なんとなく見栄えが良いから」でグラフを選ばない。伝えたいメッセージに合った形式を選ぶ。
作った資料を第三者に見てもらい、伝わるかを確認する。
- 5秒で要点が伝わるか？（5秒テスト）
- 読む順番に迷わないか？
- 「これは何を意味しているの？」と聞かれる箇所がないか？
- スマホやプロジェクターなど、実際の表示環境で確認する
具体例#
全国42店舗を展開する飲食チェーンの経営企画部が、月次レポートを改善した。
ビフォー（情報の羅列）: A4で8ページのWordレポート。数字がびっしり並び、「売上前年比108%、客数前年比95%、客単価前年比114%、原価率32.1%（前月比+1.2pt）、人件費率28.5%…」と続く。経営会議で「結局、今月は良かったの？悪かったの？」と毎回聞かれていた。
アフター（インフォメーションデザイン適用後）:
- 1ページ目: ダッシュボード（売上・利益・客数の3KPIを大きな数字+前年比の矢印で表示）
- 2ページ目: 店舗別ヒートマップ（42店舗を色分けで「好調/普通/要注意」に3分類）
- 3ページ目: トレンド折れ線グラフ（12ヶ月推移、異常値にだけ吹き出しでコメント）
- 4ページ目以降: 詳細データ（見たい人だけ見る付録扱い）
結果: 経営会議での質疑が平均25分→8分に短縮。「このレポートは3秒で今月の状態がわかる」と社長に評価された。
従業員80名のBtoB SaaS企業が、新規顧客向けオンボーディング資料（初期設定マニュアル）を改善した。
ビフォー: テキスト中心の30ページPDF。設定手順が文章で延々と説明されており、完了率は42%（58%のユーザーが途中で離脱）。サポート問い合わせの67%が「マニュアルを見たがわからない」だった。
インフォメーションデザイン適用:
- 30ページ → 8ページに圧縮（7割の情報を削除ではなくツールチップとFAQに移動）
- 各ステップにスクリーンショット+赤枠で操作箇所を示すアノテーション
- 全体フローを1ページ目に図示し「今どこにいるか」を常に把握できる設計
- 「よくあるつまずきポイント」を黄色の警告ボックスで先回りして表示
結果: オンボーディング完了率が42%→87%に向上（+45pt）。サポート問い合わせが月120件→35件に減少し、カスタマーサクセスチームの工数が月160時間削減された。
従業員35名の精密金属加工工場が、応募者ゼロの状態から採用サイトをリデザインした。
ビフォー: トップページに会社概要・事業内容・製品一覧・沿革・代表挨拶・採用情報が全て並列で配置。文字が小さく、写真は工場の外観1枚のみ。20代の求職者にヒアリングしたところ「何の会社かわからなかった」「採用ページへの行き方がわからなかった」。
インフォメーションデザイン適用:
- 視覚的階層の再設計: トップに大きく「精密加工のプロになりませんか？」のキャッチコピー+作業風景の写真
- 情報の優先順位: 求職者が知りたい情報順に再配置（仕事内容→給与→1日の流れ→先輩の声→会社概要）
- 5秒テスト実施: 5人の20代にサイトを5秒見せて「何の会社？」と質問。全員が「金属加工」と回答できることを確認
- 数字の視覚化: 「有給取得率92%」「残業月平均8時間」を大きなアイコン付き数字で配置
結果: リデザイン後3ヶ月で応募12件（前年同期0件）。うち4名を採用し、採用単価は人材紹介の5分の1（1人あたり18万円）に抑えられた。
やりがちな失敗パターン#
- 情報を減らすことを恐れる — 「これも大事、あれも大事」と全部載せた結果、何も伝わらない資料になる。情報デザインの本質は「何を載せないか」を決めること
- 装飾を目的にする — 3Dグラフ、影、グラデーション、イラストの多用。見た目は派手になるが、情報の読み取りを邪魔している。シンプルが最強
- 受け手の視点を忘れる — 自分が理解している前提で作るので、初見の人が「どこから読めばいいかわからない」状態になる。必ず第三者に見てもらう
- 表示環境を考慮しない — PC画面で美しく見える資料が、プロジェクターやスマホでは文字が読めないことがある。実際の使用環境で必ずプレビューする
まとめ#
インフォメーションデザインは「情報を美しくする」技術ではなく、「情報を伝わりやすくする」技術。分類・構造化・視覚化の3ステップで、複雑な情報も直感的に理解できる形になる。資料作成に迷ったら「5秒で要点が伝わるか？」を基準に、引き算のデザインを心がけよう。