改正個人情報保護法「AI開発特例」を扱った2つの自作HTML（v1=zukai-clarity／v2=editorial-navy）を、実測データと5つのフレームワークで科学的に比較し、V3統合の設計判断につなげる。
同じ事実を扱いながら、v1は「構造を見せる図解」、v2は「理解を積み上げる読み物」。情報量・組織化・認知経路・デザイン言語のすべてが対照的で、優劣ではなく役割分担だった。
両ファイルの見出し・本文からトピックを抽出し、「v1のみ／共通／v2のみ」にモレなくダブりなく分解した。
※ 判定基準：同一トピックでも粒度が明確に違うもの（例：課徴金はv1が詳しい）は「共通」に置き、詳しい側をV3の採用元とした。
2026-07-30に両ファイルをスクリプトで機械計測した値（方法は末尾の方法論参照）。数値が2つの設計思想をそのまま映している。
| 指標 | v1（図解版） | v2（読み物版） | 解釈 |
|---|---|---|---|
| ファイルサイズ | 24.6 KB | 38.3 KB | v2が1.6倍。本文量の差が主因 |
| 可視本文文字数（タグ・空白除去） | 3,457字 | 7,186字 | v2はv1の2.08倍。v1は「読む量を減らす」設計 |
| 大見出し h2 | 9 | 8 | 章の数はほぼ同じ＝トピック粒度は同水準 |
| 小見出し h3 | 15 | 33 | v2は章内を細かく刻む＝階層が1段深い |
| h3あたり本文文字数 | 約230字 | 約218字 | 1ブロックの重さは同等。差は「ブロック数」で生まれている |
| CSS行数 | 171行 | 255行 | v2は部品種類が多い（17種 vs 14種） |
| ユニーク色数（CSS内hex） | 26色 | 44色 | v2は明暗2モード分の色定義を持つため多い。ただし系統は3系統+金に抑制 |
| border-radius使用箇所 | 18 | 3 | v1=角丸カード基調（柔）／v2=直線基調（硬）。v2の3箇所は円形バッジのみ |
| 絵文字・記号アイコン | 28 | 1 | v1は絵文字を分類記号として使用。v2はほぼ排除し文字だけで組む |
情報の整理法は5種類しかない——場所(Location)・五十音(Alphabet)・時間(Time)・カテゴリ(Category)・階層(Hierarchy)。両者は主軸が明確に違う。
①〜⑧の番号付きセクションを並列に置き、どこから読んでも成立する。Before/After・OK/NG・賛否と「左右対比」を多用し、最後だけ時間軸（タイムライン）で締める。ページ自体が1枚のダイアグラム。
主軸: Category副軸: Time読み方: 拾い読み可
SECTION 01→08が論理の積み上げになっており、順番に読む前提。「何が変わった→本当の射程→ユースケース→なぜ生データ→担保→世界比較→残る課題」と、疑問が次の章で回収される構成。用語ボックスで階層の土台（定義）を都度固定する。
主軸: Hierarchy副軸: Category読み方: 通読前提
「図解 vs 読み物」の差を、学習科学の2理論で説明する。
人は言語情報と視覚情報を別チャネルで符号化し、両方使うと記憶に残りやすい。v1はフロー図・意味色・絵文字・左右対比で視覚チャネルに載せる情報が多く、「壁→ゲート」のような空間的メタファーで構造そのものを画像として記憶させる。一方で細部のニュアンス（例：LLMがグレーである理由）は削ぎ落とされる。
法律という題材は要素間の相互作用が多く内在的負荷（本質的な難しさ）が高い。v2は用語ボックスで前提知識を都度供給し、章の順序で理解を積み上げることで負荷を分割統治する。代わりに文章量が多く、読了への時間コストは約2倍。v1は情報を捨てることで外在的負荷を下げるが、捨てた部分の理解は保証しない。
Webの読者の多くは流し読み（スキャン）から入る。v1はカード・数字・色でZ字走査に引っかかる「アンカー」が多く、30秒で要点に到達できる。v2は明朝の見出しと余白で「読ませる」構えを作り、腰を据えた読者の満足度と信頼感（編集された印象）で勝る。読者の投入時間によって最適解が反転する。
同じ「ネイビー基調・見出し明朝×本文ゴシック」でも、トークンの思想が正反対に近い。
| トークン | v1（zukai-clarity） | v2（editorial-navy） | 設計思想の差 |
|---|---|---|---|
| 背景 | ブルーグレー #f8fafc（1色固定） | 生成り #f7f4ee ×ネイビー #131e36 の交互 | v1=無地のキャンバス／v2=章のリズムを背景で作る |
| 色の役割 | 意味色5系統（青=変更/緑=OK/赤=NG/琥珀=注意/紫=相手方） | 抑制3色（藍・弁柄・金）＋明暗 | v1=色が情報（凡例的）／v2=色は品位（装飾的最小限） |
| 形状 | 角丸10〜14px・ピル多用（柔・親しみ） | 角丸ゼロ・直線基調（硬・格調） | 丸み＝カジュアルさの調整弁 |
| アイコン | 絵文字28個を分類記号として使用 | ほぼ不使用（○△✕と英字ラベルで代替） | v1=瞬間識別優先／v2=文字の統一感優先 |
| ラベル言語 | 日本語＋丸数字（①②…） | 英字レタースペース（SECTION 01 / WHAT CHANGED） | v1=誰でも読める／v2=誌面の「編集感」を演出 |
| 本文密度 | 15px・行間1.7・短文 | 14px・行間2.0・長文 | v2は行間で長文の圧迫感を逃がす |
横軸=読者の投入時間（走査→通読）、縦軸=情報の見せ方（構造の可視化→文脈の言語化）でマッピングすると、両者は対角に位置し、V3はその中間を埋める。
※ 推奨の使い分け：初見の相手への説明・スライド代わり＝v1／じっくり学ぶ・配布資料＝v2／1本だけ残すなら＝V3。
MECE分解の結果に基づき、各トピックの「詳しい側」を採用元にした。ベーストンマナは editorial-navy（読み物の骨格に図解部品を移植）。
| V3のセクション | 採用元 | 統合時の処理 |
|---|---|---|
| S01 何が変わったか（用語・柱） | v2＋v1 | v2の用語・PILLARに、v1の執行強化詳細・その他改正を柱として吸収（4本→6本） |
| S02 Before/After フロー図 | v1 | 絵文字を除去し、editorial-navyトークンで再スタイリング |
| S03 本当の射程（○△✕）＋OK/NG例 | v2＋v1 | v2の○△✕の直後にv1のOK/NG2カラムを接続し「原則→実例」の流れに |
| S04 スキーム図＋4つのガード | 統合 | v1の「4つの鍵」とv2の「GUARD」は同一内容のため1回に統合。スキーム図はv1由来 |
| S05 業界ユースケース6枚 | v2 | そのまま採用 |
| S06 生データの理由＋加工4分類 | v2 | そのまま採用 |
| S07 賛否の対立＋残る課題 | v1＋v2 | v1の賛否カード（会派名・付帯決議）とv2の引用・課題3点を1章に接続 |
| S08 日・米・欧・中比較 | v2 | そのまま採用 |
| S09 タイムライン＋チェックリスト | v1 | v1の詳細タイムラインを直線スタイルに変換。チェックリストは両版共通のため1本化 |