資料の数字を押すと、裏付けのグラフが開きます。
カードを押すとそのページに入れて、スライダーを動かすと数字が計算し直されます。
うちた氏が考案した「動くAIスライド」は、そういう資料です。
X で見つけて、これを自分の仕事で使えるのか、Claude Code に聞いたところから始まりました。
この記事は、動く資料をコードを書かずに作った手順と、人に渡すときの条件をまとめたものです。
資料は作るけれどコードは書かず、PC で開いてもらう相手に渡したい人向けです。
動く資料は何が動くのか
派手なアニメーションではなく、見出しで言い切ったことに操作が1つ付いている資料です。
うちた氏の整理では、資料の見出しが言いたいことは6つの構造に分けられます。
構造ごとに、付ける操作が決まります。
- ピラミッド（結論と根拠）：押すと根拠が出る
- 分類（切り口）：切り替えて並べ替える
- 比較（差分）：形が変わって差が残る
- 因果（原因と結果）：スライダーで再計算
- 問題解決（不足と打ち手）：オン・オフで不足を埋める
- 順序（流れと時間）：順に組み上がる
1ページに付ける操作は1つです。
どの操作を付けるかはセンスで選ぶのではなく、見出しの構造から決まります。
作り方：指示文は無料で読めます
うちた氏は、作り方を note で公開しています。
試作に使った指示文は2本です。
- 資料作成の「究極プロンプト」は、作者の記載で6,000字、私たちが数えたら6,089字でした。
- 動く資料ブロック v2.1は、作者の記載で約9,000字、私たちが数えたら9,610字で、見本1ページ分のコード込みでした。
どちらも全文が note に載っていて、有料メンバーシップ（月980円）は使っていません。
本文は転載しません。
私たちがやった順番
試作の題材は、「この資料の作り方」にしました。
動く資料の作り方を、動く資料で見せるためです。
題材は私が決めました。
流れは、素材を書き、指示文2本と一緒に AI に読ませ、作った側に点検させ、別の目で数え直すという4段です。
素材は Claude が書きました。
入れたのは、資料の目的、読み手、数字と出所を並べた表（12行）です。
読み手は「PC で開く人。資料は作るがコードは書かない人」です。
作ったのは、Claude Code のサブエージェント（作業を分担する別のAI、Claude Opus 5.5）です。
指示文2本と素材を上から順に読んで、約32分で作りました。
出来上がりは33,491バイトの1ファイルで、目安の40KB前後に収まっています。
私はコードを1行も書いていません。
作った側の点検で6件直した
出来上がったあと、作ったサブエージェント自身に点検させたところ、6件の直しが出ました。
- 日本語が語の途中で改行されること
- 根拠パネルの下半分の空き
- 手順4のサムネイルで、中身が端からはみ出すこと
- p.1 の根拠パネルに図が無いこと
- 見本の図が実データに見えること（「数値は表していない」と注記しました）
- 「PDF にできる」と書いたのに、印刷すると1ページしか出ないこと
最後の1件は、直し方が大事でした。
URL に #static を付けると、動きを止めた最終状態が出ます。
この状態で印刷すると3ページの PDF になるように直しました。
点検はそこで終わりにしませんでした。
作った側とは別に、Claude 本体が Playwright（画面を自動点検する道具）で画面を数え直しています。
結果は、18px 未満の文字が0、はみ出しが0、エラーが0です。
自動デモは最後に一覧で止まり、全ページに出所が付いています。
機械が拾った「重なり」「文字の切れ」の候補は、画面で見るとどれも誤検出でした。
究極プロンプトの決まりのうち、「論点を冒頭で予告して最終ページで回収する」だけは入れませんでした。
この資料で決めてほしいことが1つだけだったからです。
できあがった資料
3ページ構成で、画面は 1920×1080 です。
キーボードの O で一覧、D で自動デモが動きます。
p.1 は棒を押すと根拠パネルが開き、p.2 は行を押すと構造ごとの動きが再生され、p.3 は動く表示と止めた表示を切り替えます。
全ページの下の出所は、「作り方の考案：うちた氏」です。
試作した資料はこちらです。
https://fukuoka-ai-creative.com/samples/moving-deck/
渡すときの条件は3つ
Claude に渡し方を聞くと、条件が3つ出てきました。
1つ目は、スマホで開く相手には渡さないことです。
この資料は横 1920px の画面を縮める作りです。
これを縦持ちの幅 390px のスマホに縮めると、18px の文字が約3.7px になります。
計算で出した数字です。
加えて、スマホにはホバー（マウスを重ねる操作）が無いので、吹き出しも出ません。
私の相手は PC で開く人なので、この壁はなくなりました。
2つ目は、URL で渡すことです。
HTML ファイル（ブラウザーで開くファイル）を添付すると、相手にはダウンロードして開く手間がかかります。
会社のメールでは、添付が止められることもあるそうです。
3つ目は、止めた表示の PDF を添えることです。
URL に #static を付けて印刷すれば、3ページの PDF になります。
動く表示が開けない環境でも、組み上がった資料として読める形です。
この3つ目が成り立つように、点検で「印刷すると1ページしか出ない」を直しました。
渡すと何が変わるか
最初、Claude の評価は低めでした。
考え方は使える、ただ相手が一人で読む資料では押す人がいないので、丸ごと取り入れるほどではない、という内容です。
私が「この資料をプレゼントで渡せたらいいやんか」と言うと、Claude は評価を訂正しました。
HTML のまま渡せば、受け取った人が自分で押せるからです。
会議で「その内訳は？」と聞かれる前に、相手が一人で読む段階で、相手が自分で答えを開けます。
私は、動く資料は渡す資料として使う価値があると思っています。
渡せば、相手が自分の知りたい数字のところで止まって、押せるからです。
私たちも URL で渡して確かめた形になった
Claude は私の PC で開いたつもりでしたが、私の画面には何も出ませんでした。
「実際に資料サンプル見せてよ」と言って、Claude に claude.ai の限定公開 URL に載せてもらい、私が開きました。
条件の「URL で渡す」を、自分たちで確かめた形です。
開いた画面を見て、私は「いいね！」と言いました。
