カリキュラム

図解・ビジュアルによる学習の科学 — SVG図解設計ガイドラインのためのエビデンスレポート

PEDAGOGY.md の付録。リサーチエージェントによる調査（2026-07-12、WebSearch/WebFetch で一次情報・メタ分析を確認）。確認できなかった数値は「未確認」と明記。

目的: テキスト教材（Markdown→HTML学習サイト）にSVG図解を追加する際の設計判断を、学習科学のエビデンスに基づいて行えるようにする。

効果量の読み方: d / g（Cohen's d / Hedges' g）は標準化平均差。目安として 0.2=小、0.5=中、0.8=大。Hattie に従い d > 0.40 を「教育的に重要」 とするのが Mayer の基準（Mayer, Multimedia Instruction 章, 2014）。

1. 総論: 「図を足せば良い」は半分だけ正しい

マルチメディア原則（言葉+絵は言葉だけより深く学べる）は最も確立された知見の一つ。Mayer 自身のラボの11実験で 中央値 d = 1.39（Mayer 2014 章 PDF、以下「Mayer 2014」）。独立メタ分析ではより控えめで、テキスト+図解で g = 0.39（Guo et al. 2020、Cromley らの2025年メタ分析経由で確認）。
ただし Mayer 系研究全体を統合した最新メタ分析（Cromley et al. 2025: 92論文・181研究・591効果）では全体 g = 0.37 で、効果量は年々小さくなる傾向。Mayer ラボの「中央値 d」は自験例ベースなので過大評価の可能性を織り込んで読むこと。
独立の傘レビュー（Noetel et al. 2022, Review of Educational Research: 29レビュー・1,189研究・78,177人）では 11原則が有意に学習を改善。効果が大きいのは時間的/空間的近接・シグナリング（+L2動画の字幕）。さらに「教材が複雑なほど、またペースをシステム側が制御する環境ほど設計品質が効く」（自己ペースのWebサイトでは効果はやや小さい）。
決定的に重要な裏面: 図は「足す」だけで害にもなる。装飾目的のイラストの効果は d ≈ 0.00 以下（Levin, Anglin & Carney 1987、Mayer 2014 で確認）、誘惑的詳細は g = −0.33（後述）。

含意: SVG図解は「本文の説明構造をそのまま視覚化する図」に限定して足す。飾りの図は入れないほうが成績が良い。

2. 原則別エビデンスとSVG設計への翻訳

数値の出典: 特記なき d は Mayer 2014 章（各原則の実験群の中央値）。独立メタ分析値は個別に付記。Cambridge Handbook of Multimedia Learning 3rd ed.（2021, Mayer & Fiorella 編）の表そのものはWebで直接確認できなかったため中央値の2021年版更新値は未確認。ここでは検証できた2014年版の値+独立メタ分析を採用する。

2.1 マルチメディア原則（Multimedia）

効果: 正・大（Mayer ラボ d = 1.39 / 独立メタ g = 0.39）。低事前知識の学習者と高品質な図で効果大（境界条件、Mayer 2014）。
Do: 因果・構造・プロセスを説明する本文の「そこ」に、内容対応する図を置く。初学者向けの章ほど図を優先配置。
Don't: 上級者向けの単純な内容にまで機械的に図を義務化しない（効果が縮む。§6 expertise reversal も参照）。

2.2 一貫性原則（Coherence）= 余計なものを削る

効果: 正・大。無関係な文・写真・音を除くと転移テストで d = 0.82〜1.66（実験系列ごと、Mayer 2014）。Noetel 2022 でも頑健と確認。
Do: SVG内の要素は「学習目標の説明に必要な最小集合」に絞る。グリッド線・立体効果・グラデーション・マスコットは原則削除。
Don't: 「面白いから」「余白が寂しいから」で要素を足さない。

2.3 シグナリング原則（Signaling）= 重要箇所の合図

効果: 正・中。Mayer ラボ中央値 d = 0.52。独立メタ分析 Schneider et al. 2018, Educational Research Review（103研究・N=12,201）は「保持で中〜大の有意な効果、認知負荷も有意に低減」と報告（正確な g 値はアクセス制限で未確認）。Noetel 2022 では最大級の効果群。
注意: 矢印などの視覚シグナリング単体は効かないことがある（Mautone & Mayer 2001 等、Mayer 2014）。効くのは「本文の言葉と図のラベルを一致させる」「注目部位だけ彩度/輝度を上げ他をグレーアウトする（スポットライト）」型。
Do: 図中の強調色は1〜2色に限定し、本文のキーワードと同じ語をラベルに使う。工程説明なら「①②③」の番号で本文と図を対応付ける。
Don't: 全要素をカラフルにする（シグナルが消える）。本文と違う言い回しのラベルを使う。

2.4 空間的近接原則（Spatial Contiguity）/ 分割注意効果

効果: 正・大。Mayer ラボ d = 1.12。Ginns 2006 メタ分析（37実験）d = 0.71（転移では d = 1.07、Mayer 2014 で確認）。Schroeder & Cenkci 2018, Educational Psychology Review（58比較・2,426人）g = 0.63。認知負荷理論の split-attention effect と同一の現象（Chandler & Sweller 1991/1992）。
Do: ラベルは図の該当部位に直接埋め込む（SVGの <text> で部品の隣に）。図は説明する段落の直後に置く。凡例が必要なら図内に。
Don't: 「図1参照」で離れた場所に置く／番号だけ振って説明を図の下のキャプションや別リストにまとめる（視線往復=外在負荷）。

2.5 時間的近接原則（Temporal Contiguity）

効果: 正・大（d = 1.31; Ginns 2006 で d = 0.87）。Noetel 2022 で contiguity 全体 g = 0.74。主にナレーション+動画の同期の話で、静的ページでは空間的近接に読み替えて適用。
Do: スクロールで図と本文が同時に視界に入るサイズ・位置にする。

2.6 冗長性原則（Redundancy）

効果: ナレーション+画面文字の重複で d = 0.72 の害（Mayer 2014）。ただし系統的レビューでは半数以上の研究で再現せずという報告もあり（Springer 系統的レビュー 2022）、境界条件が強い原則。
静的教材への含意: 本文の長い説明をそのまま全文図に貼り込むのは冗長。図内テキストは短いキーワードに。
Do: 図中は名詞句ラベル+番号、詳細説明は本文に一本化。
Don't: 本文と同じ文章を図の中に二重掲載する。

2.7 セグメント化原則（Segmenting）

効果: 正・大（d = 0.98 / 9実験横断で d = 0.82、Mayer 2014）。低知識学習者で最大。
Do: 複雑なアーキテクチャは「全体俯瞰1枚→ステップ別の小図数枚」に分割。1枚のSVGに全てを詰めない。
Don't: 10工程を1枚の巨大フロー図で見せて終わりにしない。

2.8 事前訓練原則（Pre-training）

効果: 正・大（d = 0.85 / 10実験で d = 0.88、Mayer 2014）。低知識学習者で最強。
Do: プロセス図の前に「登場する部品の名前と役割」だけの簡単な図/リストを先に出す（例: API図の前に client / server / token の定義）。

2.9 モダリティ原則（Modality）

効果: 音声ナレーション>画面テキストで d = 1.02（17実験）、Ginns 2005 メタで d = 0.72。ただし自己ペース・低速提示では効果が消える（Mayer 2014 で明記の境界条件）。
含意: 自己ペースで読むWebテキスト教材にはほぼ適用されない。「音声を付けるべき」と早合点しないこと。

2.10 パーソナライゼーション/音声/画像原則

会話調の文体 d = 1.11、人の声 d = 0.78、一方講師の顔画像を出す image principle は d = 0.26 で「重要」基準未満（Mayer 2014）。
含意: 図解のキャプションは会話調でよい。講師アバターや人物イラストをSVGに入れる根拠はない。

2.11 期待原則（Expectation / 事前質問）

事前に問いやテスト形式を見せると d = 0.83（Mayer, Dow & Mayer 2003、Mayer 2014）。
Do: 図の直前に「この図で〇〇がどう流れるか説明できるようになる」と目標を書く。

3. 理論的基盤: なぜ図は効くのか（正しい理屈）

3.1 二重符号化理論（Paivio）と CTML の情報処理モデル

Paivio (1971, 1986): 言語と画像は別チャネルで符号化され、両方で符号化された情報は検索経路が2本になる。Mayer の CTML はこれ+作動記憶の容量制限（Baddeley, Sweller）+能動的処理を統合し、「選択→体制化→統合」の処理を図で支援するという枠組み（Mayer 2014 で確認）。
含意: 図の役割は「本文と同じ構造のピクトリアルモデルを作らせ、本文と統合させる」こと。本文と構造が食い違う図は統合を阻害する。

3.2 画像優位性効果（Picture Superiority Effect）

絵は単語より再認・再生されやすい。100年以上の再現 history がある頑健な現象（Wikipedia の研究史まとめ、NN/g の実務解説）。
ただしメカニズムは係争中: 二重符号化説に対し、「絵の知覚的弁別性が高いだけ」とする説があり、単語の弁別性を上げると効果が消失・逆転した実験もある（Ensor et al. 2018, Memory & Cognition）。
含意: 「絵ならなんでも記憶に残る」ではない。互いに視覚的に区別しやすい（弁別性の高い）図であることが効果の条件。同じテンプレの箱と矢印だけが並ぶ図集は弁別性が低く、効果が薄れうる。

4. 描画効果（Drawing Effect）— 学習者に描かせる・再現させる

単語・定義レベル: 描いて覚えると書き写しの約2倍再生できる。信頼できる頑健な効果で、絵の巧拙・年齢は無関係、数秒のラフスケッチでも効く（Wammes, Meade & Fernandes 2016, QJEP 69, 1752–1776; Fernandes, Wammes & Meade 2018, Current Directions — Waterloo大の解説、Edutopia のまとめで確認）。機序は精緻化+画像+運動の三重符号化とされる。
教材テキストレベル（drawing-to-learn）: メタ分析 Cromley, Du & Dane 2019/2020（53研究・166効果・8,111人・全体 g = 0.69、Journal of Science Education and Technology, 29(2), 216-229、Springer）などで概ね有効。ただし描画は認知負荷が高く、無支援だと質の低い図しか描けない。支援付き描画が初期学習・長期保持とも最良で、2025年のメタ分析（14研究・N=1,213）は「支援なし描画 vs 支援あり描画」の差を主題にするほど（ResearchGate）。複雑な科学的内容では教材側が描いた図のほうが良い場合がある。
含意（教材設計）: SVGを見せて終わりではなく、「この図を閉じて白紙に再現せよ」「空欄ラベルを埋めよ」という演習を教材側に組み込むと、提示型の図を能動学習に変換できる。その際は部分完成図（scaffold）を与える。

5. 誘惑的詳細効果（Seductive Details）— 図が学習を害するとき

主要エビデンス: Sundararajan & Adesope 2020, Educational Psychology Review（58研究・7,500人超のメタ分析）: 興味深いが無関係な情報を含む教材は g = −0.33 で学習成績が低い。Rey 2012、Thalheimer 2004 の先行レビューとも整合。
2025年の多水準メタ分析（50研究・177効果）では g = −0.16 とやや小さめの推定（Educational Psychology Review）。方向は一貫して負。
古典的知見: 挿絵は「深い処理を促す設計なら d > 0.50、ページの飾りなら d ≤ 0.00」（Levin, Anglin & Carney 1987、Mayer 2014 で確認）。
含意: 「教科書のマンガカット」に相当するもの — 面白い豆知識の吹き出し、雰囲気イラスト、ネタ画像 — は成績を下げる方向のエビデンスしかない。エンゲージメント目的の装飾は図解とは別枠で慎重に。

6. 認知負荷理論（Sweller）— 図解設計の会計原理

3種の負荷: 内在的（教材固有の複雑さ）・外在的（下手な設計が生む無駄）・学習関連/ジャーメイン（スキーマ構築に使う生産的努力）。設計の仕事は外在を削り、内在を管理し、学習関連に容量を回すこと（Sweller ら CLT の解説、Mayer 2014 の triarchic model でも同型）。
Worked example effect: 初学者は問題を解かせるより手順を示した解例で学ぶほうが良い。図解版は「完成したフロー図+各ステップの説明」。
Split-attention effect: §2.4 と同じ。図とテキストの物理的分離が外在負荷を生む（統合設計 g = 0.63、Schroeder & Cenkci 2018）。
Expertise reversal effect: 初学者に必要な支援（詳細ラベル、逐次説明、解例）は上級者には冗長で逆効果になる（Kalyuga, Instructional Science 特集、Wikipedia 概説）。支援は習熟に応じてフェードアウトさせるのが定石。
含意: 同じ図でも「入門章では全ラベル+番号付き手順、応用章では簡素な俯瞰図」のように章の想定読者レベルで図の情報密度を変える。全章共通の1枚を使い回さない。

7. 学習スタイル神話の否定 — 「ビジュアル学習」の正しい正当化

否定されたのは: 「視覚型学習者には視覚教材、聴覚型には聴覚教材を与えると成績が上がる」という適合（meshing）仮説。Pashler, McDaniel, Rohrer & Bjork (2008, Psychological Science in the Public Interest) は、この仮説を支持する方法論的に妥当な証拠が存在しないと結論（APS の公式リリース）。信念自体が有害でありうるという実験報告もある（APA 2019）。なお高等教育でも神話は根強い（Newton 2015, Frontiers）。
正しい理屈: 図解が効くのは「視覚型の人がいるから」ではなく、ほぼ全員の認知アーキテクチャが二重チャネル+容量制限だから（二重符号化・CTML・画像優位性）。つまり良い図は全員に効き、悪い図は全員に害。
含意: 教材サイトの説明文に「視覚学習者向け」という表現を使わない。「言葉と図の併用は学習の認知科学に基づく」と書くのが正確。個人差で本当に効くのは事前知識の差（expertise reversal）であって「スタイル」ではない。

8. ダイアグラムの種類別・技術教育（プログラミング/API）分野

概念地図/ノードリンク図: 最もエビデンスが厚い。Nesbit & Adesope 2006（55研究・5,818人、SAGE / PDF）で保持の増加を確認。更新版 Schroeder, Nesbit, Anguiano & Adesope 2018（142効果・n=11,814、Springer）で g = 0.58。自分で作る g = 0.72 > 完成品を studying する g = 0.43。STEM・非STEM双方で有効。
アルゴリズム可視化（CS教育）: Hundhausen, Douglas & Stasko 2002 のメタ研究が古典で、結論は「可視化が何を見せるかより、学習者がそれで何をするか（エンゲージメント形態）が効果を決める」。受動的に見せるだけのアニメーションは、情報量が同等の静的な図の系列に勝てないことが多い（レビュー系文献、2024年の系統的レビューも評価の厳密性不足を指摘）。
静的 vs アニメーション: Tversky, Morrison & Bétrancourt 2002「Animation: can it facilitate?」— アニメは一致原則（表現形式は内容の構造と一致すべき）と把握原則（知覚できる速さ・複雑さであるべき）に違反しがちで、静的図に安定して勝てない。効くのは一時停止・速度制御などインタラクティブ制御がある場合（Stanford HCI 掲載PDF）。定量的にも Höffler & Leutner 2007, Learning and Instruction, 17(6), 722-738（26研究・76対比較）が全体効果量 d = 0.37（95% CI 0.25–0.49）とアニメの優位はごく小さいことを確認しており、表現方法が動画的か装飾的かなどのモデレータにより d = 0.40〜1.06まで変動する。
ソースコード理解の図: 制御構造図が理解を助ける実証（Hendrix, Cross & Maghsoodloo 2002, IEEE TSE）。一方、初年次教育でのオブジェクト図 scaffolding は「予想外の結果」（負の側面含む）を報告（Thomas et al. 2004）— 図種別の効果は文脈依存で、フロー図/アーキテクチャ図/タイムラインの種類別直接比較の強いメタ分析は見つからなかった（未確認）。
含意: 静的SVGはむしろ理にかなった選択（アニメより把握原則を満たしやすい）。凝るなら「段階表示のトグル」程度のインタラクションが費用対効果的。概念間の関係整理には概念地図型、手順には番号付きフロー型を使い、可能なら学習者に構築・穴埋めさせる課題とセットにする。

9. 技術学習教材向け SVG図解デザインチェックリスト

Do（やる）

本文が因果・構造・手順を説明している箇所にだけ図を付ける（multimedia 原則: 内容対応する図のみ d>0.4 級）。
ラベルは図の部位に直接埋め込む。凡例・脚注参照ではなく <text> を部品の隣に（spatial contiguity: g=0.63〜d=1.12）。
ラベルの語彙を本文のキーワードと完全一致させる（signaling+統合支援）。
強調は1〜2色+残りは低彩度のスポットライト設計にする（signaling d≈0.52）。
複雑なシステムは「俯瞰1枚+ステップ図」に分割する（segmenting d≈0.8〜1.0）。
図の前に部品名の事前導入（pre-training d≈0.85）と「この図で何が分かるようになるか」の一文（expectation d≈0.83）を置く。
手順には番号①②③を図と本文の両方に振る（対応付け=統合の足場）。
章の想定読者レベルで情報密度を変える: 入門=高支援、応用=簡素（expertise reversal）。
図を使った能動課題を付ける: 白紙再現・ラベル穴埋め・自分で概念地図を描かせる（drawing effect / concept map 構築 g=0.72）。
図同士を視覚的に差別化する（レイアウト・形状・配色の変化で弁別性を確保 — picture superiority の成立条件）。

Don't（やらない）

装飾・雰囲気目的のイラストを入れない（decorative は d≤0.00、seductive details g=−0.33）。
面白い余談・ネタ要素を図に混ぜない（同上）。
本文の文章をそのまま図中に全文再掲しない（redundancy: 図内は短いラベルに）。
図と説明を離さない。「上図参照」「図3を見よ」で視線往復させない（split-attention）。
全要素を同格に彩色しない（シグナルの消失）。
1枚に10工程を詰めた巨大図を作らない（segmenting 違反+把握原則違反）。
矢印を足すだけで「強調した」ことにしない（視覚シグナル単体は効果不安定 — 言語ラベルとの併用が条件）。
自動再生アニメーションに置き換えない（静的図の系列に安定して勝てない。使うなら停止・速度制御必須）。
「視覚学習者向け」を根拠・宣伝文句にしない（学習スタイル適合仮説は棄却済み。根拠は二重符号化・CTMLと書く）。
図の効果を自明視しない: 特に上級者向けページでは図の追加が中立〜逆効果になりうる（expertise reversal / Cromley 2025 の全体 g=0.37 という控えめな現実）。

10. 未確認事項（明示）

Mayer & Fiorella 編 Cambridge Handbook 3rd ed. (2021) の原則別中央値効果量の表そのものは有料のため直接確認できず。本レポートの d 値は Mayer (2014) 章（著者本人執筆、公開PDF）で検証した値。
Schneider et al. 2018（signaling メタ分析）の正確な g 値（保持/転移別）はアクセス制限で未確認。「103研究・N=12,201、保持で中〜大の有意効果・認知負荷低減」までは確認済み。
フロー図 vs アーキテクチャ図 vs タイムライン等、図種別を直接比較した技術教育分野のメタ分析は発見できず（存在自体未確認）。

主要出典

要点の要約: 効くのは「本文と同じ構造・同じ語彙で、必要最小限の要素を、説明箇所に密着させて置いた図」＋「学習者にそれを再現・構築させる課題」。害になるのは「装飾・余談・分離配置・過密・自動アニメ」。根拠は学習スタイルではなく、全員共通の二重チャネル+容量制限という認知アーキテクチャにある。