AIスライドを「クリックで深掘りできる資料」にしてみた。動かし方は6つの構造で決まる【保存版】

【動く資料プロンプト v2.1】
文字数の兼ね合いで全文かけていないので、noteからコピペお願いします。

## 追加：動く資料にする
上の資料作成のプロンプトに足して使う。素材は、このブロックの下に貼る（上の「この下に素材を貼り付け」の行はそのままでよい）。

### 優先順位
- 中身（数字の扱い・見出し・論理・型・描く規準・検証）は、上の資料作成のプロンプトに従う
- 出力の形はこのブロックを優先する：1ファイルの動くHTML、3ページ（素材が多いときだけ4ページ）、見出しは1行36字以内（2行にしない）。設計図は別に出さず、出力のページ一覧と数字台帳で代える（上のプロンプトが求める設計の項目は、この2つに入れる）
- 質問は、目的か読み手が素材からも背景からも読めないときだけ、作る前にまとめて1回。それ以外は良識で決めて注記し、1回で最後まで書き切る

### 1ページの型（見た目は下の見本に合わせる）
- 2〜3ページ目：左に主役の図（横幅の6割）、右に根拠パネル（淡い地の枠）。パネルは、大きな数字1つ（88〜96px）→ それが何かの1行 → 補足2〜3行 → 比べる相手と差（計算式つき）→「内訳を見る ›」
- 1ページ目：上に大きな数字の帯（3つ）、下に全体の流れか構造（どこで何が起きているか）。流れの各所に、そのページへ入るカード（「p.2 ›」）を置く
- 図も数字も枠いっぱいに配る。本体の下に空白の帯を残さない
- 素材の数字は全部どこかに使う（図・パネル・吹き出し・根拠パネル）。差や比は計算して式を書く。素材に無い数字は置かない
- 主役は主役色、比べる相手は薄い段階色、それ以外は灰。大きな数字は1ページに1つ
- 押せるものは見て分かるようにする：「›」「押すと〜」の文言、ホバーで枠、ページに入った直後に1回だけ輪で知らせる。棒や点はホバーで「値・名前・出所」の吹き出し

### 1枚1操作（構造から引く）
各ページに、見出しの判断を読み手が自分で確かめられる操作を1つだけ付ける。操作は、見出しが言いたいことの構造で選ぶ。
- ピラミッド（結論と根拠）→ 押すと下の階層へ掘り下げる。右から根拠パネル（出所つき。ほぼ全ページに付ける）
- 分類（切り口）→ 切り口（集計の立場・指標・年）を切り替えると、全部の棒が並び替わる
- 比較（差分）→ 前が後へ形を変え、差や消えた分が点線で残る
- 因果（原因と結果）→ 条件をスライダーで動かすと結果が再計算される。式を画面に出す
- 問題解決（不足と打ち手）→ 打ち手をオン・オフすると、不足が埋まる・残る
- 順序（流れ・工程・時間）→ 順に組み上がる、主体が工程を進む、時間軸に「いま」の線
見出しと関係ない動きは入れない。量を表す動きは値から計算する。

### 根拠パネル（押すと右から出る）
- 幅720px。右から滑り込み、後ろを暗くする。×・Esc・後ろを押すと閉じる
- 上から：どこの話か（「現状 › 項目名」）→ 判断を1〜2行 → タブ（2つまで。例：内訳／出所と前提）→ 小さな図か表 → 出所
- 本体に載せきれない詳しい数字はここに置く。ほぼ全ページに付ける

### 資料全体
- 1ページ目の全体像から、押した場所へズームして各ページへ入れるようにする。打ち手からは根拠のページへ飛べるようにする
- キー：→ と Space で次、← で前、数字で移動、Esc で閉じる・戻る、O で全ページの一覧、D で自動デモ（矢印カーソルが台本どおりに操作し、一覧で終わる。操作する要素に data-demo で名前を付ける）
- ページに入ると3秒前後で組み上がる：見出し → 主役の図（棒は0から伸び、60msずつずらす）→ 数字 → 根拠パネル。CSS の transition と遅延で組み、JS で動かすときは requestAnimationFrame に50msのタイマーを併走させる
- URL の #static と「動きを減らす」設定では、組み上がった最終状態を出す（操作で変わるページは、見出しの判断が見える状態。例：打ち手はすべてオン）。止めても資料として読めること
- 1920×1080 のキャンバスを画面に合わせて縮小する。外部読み込みは Google Fonts の Noto Sans JP だけ

### 上に資料作成のプロンプトが無いときだけ（最低ライン）
1. 素材から数字台帳を作る（項目・値・時点・出所・母集団）。素材に無い数字は作らず「xx」と置いて注記する。ランキングでは値の無い項目を最後に並べる
2. 1ページ1メッセージ。見出しは事実と判断を1文に持つ完全文で、1行36字以内。「A。B」の二段構え、「〜は3つ」の数え上げ、体言止めにしない
3. 見出しだけを先に全部書き、縦に読んで「全体像→根拠→打ち手」の筋が通るか確かめてから図を作る
4. 図は、見出しが言いたいことの構造で選ぶ（上の「1枚1操作」の6つ）
5. 図表タイトルは「何を・いつ・単位」。判断は書かない。出所はページ下と根拠パネルの両方に書く
6. 色は主役色1色と薄い段階3つと灰。主役色は指定が無ければ #1976D2。強調色（アンバー #D97706）は資料全体で1か所。文字は最小18px
7. 相関しか無いデータで因果を言い切らない。試算は「試算」と書き、式と前提を画面に出す

### 出力
- HTML：Claude はアーティファクト、ChatGPT はキャンバスに書く（どちらも無いときは1つのコードブロック）。1回で最後まで書き切る。そのためにページを絞り、同じ部品は関数にまとめて短く書く。途中で止まったら、利用者の「続けて」で同じ文書に続きを書き足す（手で貼り合わせさせない）
- 1行目に作り方を書く：「中身＝上の資料作成プロンプト／動き＝動く資料ブロック」か「動く資料ブロック単体（中身は簡易の規律で作成）」
- ページ一覧（見出し／構造／操作／根拠パネルの中身）、数字台帳、操作方法は、HTMLの外（返答の本文）に短く書く。HTMLの中には入れない
- HTMLは全体で40KB前後を目安にする。長くなりそうなら文章を削る（図・根拠パネル・操作は削らない）
- 最後に、さらに良くする方向を2〜3個挙げて選んでもらう

### 仕上げ
- 出す前に点検し、直してから出す：どのページにも「見出しの判断を確かめる操作」と「出所つきの根拠パネル」がある／素材に無い数字が無い／本体の下に空白の帯・文字の重なり・はみ出し・18px未満の文字が無い／見出しの文末がページ間でそろっていない（全部「〜べきだ」などにしない）／自動デモの台本が存在しない要素を指していない

（ここから先に、見本ページ1枚分のコードが続きます。見本を入れることで品質がグッと上がります。コード込みの完全版は note から）