tufte-slide-design

Tufte スライドデザイン

「The Visual Display of Quantitative Information」における Edward Tufte の原則を適用し、複雑なアイデアを明快、正確、効率的に伝えるプレゼンテーションを作成します。

基本理念

Tufte の中心的な洞察は次のとおりです。「雑然さや混乱は、情報の属性ではなく、デザインの失敗です。」

情報過多が問題であることはまれで、情報デザインの質の低さこそが問題です。目標はグラフィカルな優秀さ、つまり内容、統計、デザインを組み合わせた、興味深いデータの優れたプレゼンテーションです。

データインクの5つの法則

データを含むスライドをデザインするときは、次の点に従います。

1. 何よりもまず、データを見せる - データを主役にします
2. データインク比を最大化する - すべてのピクセルで情報を伝えます
3. データ以外のインクを取り除く - 情報を伝えない装飾を削除します
4. 冗長なデータインクを取り除く - 重複した情報伝達要素をなくします
5. 見直して編集する - シンプルになるよう、継続的に洗練させます

データインク比の計算式

Data-Ink Ratio = Ink presenting data / Total ink used

目標：できる限り 1.0 に近づけます。各要素には、そこにある理由が必要です。

スライドデザインのワークフロー

ステップ1：データが語るストーリーを特定する

スライドを作成する前に、次の問いに答えます。

• このスライドで伝えるべき、最も重要な洞察は何ですか？
• その洞察を裏付けるデータは何ですか？
• このスライドを削除したら、何が失われますか？

ステップ2：チャートジャンク除去チェックリストを適用する

次の要素を削除するか、最小限に抑えます。

チャートジャンク要素	対応
3D 効果	2D に平坦化する
グラデーション塗りつぶし	単色を使う
太いグリッド線	薄くするか削除する
装飾的な枠線	完全に削除する
背景画像	データでない限り削除する
ドロップシャドウ	削除する
不要な凡例	グラフ上に直接ラベルを付ける
過剰な目盛り線	必要最小限に減らす
モアレ模様	単色の塗りつぶしを使う

ステップ3：グラフィカルな整合性を確認する

Tufte のグラフィカルな整合性に関する6つの原則：

1. 比例した表現 - 視覚的な大きさを数値と一致させます
2. 明確なラベル - グラフィック上でデータに直接ラベルを付けます
3. デザインの変化ではなく、データの変化を示す - デザインによってデータを歪めてはいけません
4. 適切な金額単位を使う - 時系列で金額を示す場合は、インフレ調整や標準化を行います
5. 次元を一致させる - 1次元のデータを表すために2Dや3Dを使ってはいけません
6. 文脈を保つ - データを文脈から切り離して引用してはいけません

ステップ4：嘘の係数を計算する

Lie Factor = Size of effect in graphic / Size of effect in data

• 嘘の係数 = 1.0：正確
• 嘘の係数 > 1.0：効果を誇張している
• 嘘の係数 < 1.0：効果を過小評価している

違反例：数値上の変化が 53% なのに、視覚的には 783% の変化として示されている場合、嘘の係数は 14.8 です

ステップ5：高度な手法を適用する

スモールマルチプル

関連するデータを比較するときに使います。

• データの切り口を変えながら、同じグラフィック構造を繰り返します
• 視野の範囲内で視覚的に比較できます
• 「視覚的な推論の核心へと進み、見て、区別し、選ぶ」

スパークライン

文中でデータを表示する、単語サイズのグラフィックです。

• 小さなスペースで高い解像度を実現します
• 表やテキストに埋め込めます
• 「データワード：データ密度が高く、デザインはシンプルで、単語サイズのグラフィック」

直接ラベル付け

凡例の代わりに、データに直接ラベルを付けます。

• 視線の移動を減らします
• 凡例を読み解く必要がなくなります
• 注意が向けられる場所に情報を配置できます

スライドの種類と Tufte のアプローチ

データ量の多いスライド

1. 不要なグリッド線を取り除きます
2. レンジフレーム軸を使います（データの範囲のみを表示します）
3. 比較にはスモールマルチプルを検討します
4. 凡例ではなく、データに直接ラベルを付けます
5. 可能であれば横向きにします

テキスト量の多いスライド（アンチパターン）

Tufte による箇条書きへの批判（「The Cognitive Style of PowerPoint」）：

• 箇条書きは思考を分断します
• 階層化された箇条書きは関係性を見えにくくします
• 情報密度が低くなります

代替アプローチ：

• 複雑なアイデアは、通常の文体の文章で表現します
• 代わりに詳細な配布資料を用意します
• 文脈をすべて含むデータ表を示します
• 関係性を示す視覚的な図を使います

タイトルスライド

同じ原則を適用します。

• 装飾的な要素を取り除きます
• 装飾ではなく、階層を示すためにタイポグラフィを使います
• すべての言葉に意味を持たせます

クイックリファレンス：改善前／改善後のパターン

棒グラフ

改善前：3D の棒、グラデーション塗りつぶし、太いグリッド線、下部の凡例 改善後：2D の棒、単色、グリッド線なし、直接ラベル

折れ線グラフ

改善前：複数の色、太い線、データポイントのマーカー、凡例 改善後：線上に直接ラベルを表示、マーカーを最小限に、色数を削減

円グラフ

タフテの見解：基本的に避けます。必要な場合：

• 3D は使用しない
• スライスは最大 3～4 個に制限する
• 代わりに棒グラフを検討する

表

改善前：太い罫線、交互の行の色、中央揃えのテキスト 改善後：罫線を最小限に、テキストを左揃えにし、余白で区切る

リソース

詳しい原則や例については、以下を参照してください：

• references/tufte-principles.md - 例を含む原則の完全なドキュメント
• references/slide-checklist.md - スライド確認用の簡易チェックリスト

避けるべきアンチパターン

1. PowerPoint の既定設定 - すべての既定テンプレートや効果を上書きする
2. グラフのテンプレート - テンプレートではなく、データをもとにデザインする
3. 関心を引くための装飾 - 適切に提示すれば、データ自体が関心を引く
4. 複雑さを隠すこと - 複雑さを示し、うまくデザインする
5. 強調のためのアニメーション - 代わりに視覚的な階層を使う