Explainer Infographic（解説インフォグラフィック）

複雑な概念を、Bartosz Ciechanowski氏、The Pudding、distill.pubのような優れたビジュアルエクスプレイナーがするように——スクロール、インタラクティブな図、現実世界のアナロジー、段階的な深掘りを通じて——1つのHTMLファイルで説明します。出力は、あまり専門的でない知識層の読者が5分以内に理解できるようにすることを目指します。

始める前に

基本を押さえましょう：

概念 — 何を説明しますか？
読者層 — 誰が読むのですか？（デフォルトは、あまり専門的でない知識層）
「なぜ今」 — これは、会議、授業、動画、ブログ記事、個人学習のどれですか？
深さ — 直感的な理解（1画面）か、深い探求（長いスクロール）か？

未指定の場合は、デフォルトとして、知識層向け、3～5分スクロールするのに十分な深さ、特定の用途なしとします。

構成

ほとんどの概念は5つのビートで説明できます。以下の順序でページを構築してください：

1. フック（1画面）

その概念を理解する価値があると思わせる質問や驚くべき事実で始めます。「Xとは何か」ではなく、「なぜ水上にかかる橋は空の箱から始まるのか？」や「なぜ30年住宅ローンは家の価格の2倍以上になるのか？」のような問いです。

2. アナロジー

読者がすでに知っている事柄に、なじみのない概念を結びつけます。アナロジーは、導入部分だけでなく、ページの残り全体で使用し続けます。例：

LLMを「ステロイド入りの予測テキスト」
キャッシュフローを「パイプを通る水」
DNSを「インターネットの電話帳」

1つの強力なアナロジーを選び、それを貫きます。 アナロジーを混在させると読者が混乱します。

3. メカニズム（3～7セクション）

その仕組みを順を追って説明します。各セクションの要素：

明確な見出し
短い段落
ビジュアル — 図、アニメーション、インタラクティブ要素
（オプション）好奇心旺盛な人のための「クリックして深掘り」

ここがページの核心です。ブログ記事と差別化するのはビジュアルです。

4. よくある誤解

このトピックについて人が間違えがちなことを取り上げる短いセクション。「誤解：X / 現実：Y」のペア形式で記述します。

5. まとめ

セクション1のフックにすべてを結びつける1段落。「ディナーパーティーで他人に話せる一文」を読者に残します。

ビジュアルスタイル

オフホワイトまたはウォームホワイトの背景 — 長文読解では、真っ白より目に優しい
ゆったりしたタイポグラフィ — 本文18～20px、行間1.6以上、最大幅65文字
1つのアクセントカラー — ハイライト、リンク、各図の主要要素に使用
図はSVGで — どのズームでも鮮明、CSSでテーマ設定可能
アニメーションは目的を持って、装飾ではなく — 経時変化（プロセス、値の増加、システムの反応）を示すためだけにアニメーションを使う。できるからといってアニメーションを付けてはいけない。
スクロール駆動は効果的な場面で — シーケンスやプロセスには、読者がペースをコントロールできるスクロールトリガーアニメーションを使う。静的な図にはスクロールトリガーは不要。

インタラクティブ要素（最大ページあたり2～3個）

スライダー／範囲入力 — パラメータを調整して効果を確認
トグル — 2つの状態を切り替え（あり/なし、前/後）
クリックで表示 — 好奇心旺盛な読者のための追加詳細
ステップ実行アニメーション — 「次へ」ボタンで読者のペースでプロセスを進める

やりすぎないこと。よくデザインされた3つのインタラクティブな瞬間は、10個のギミックに勝ります。

技術実装

単一の自己完結型 .html ファイルとして保存（explainer-[トピックのスラグ].html）。外部依存なし — フォントは埋め込み、SVGはインライン記述、バニラJSのみ。

要件：

モバイル対応 — ほとんどの読者はスマートフォンでスクロールする
アクセシブル — セマンティックHTML、図にはaltテキスト、キーボード操作可能なインタラクティブ要素
高速 — 即座に開き、スピナーなし、アセット読み込みの遅延なし

コンテンツルール

定義ではなく、アナロジーで始める。 「ニューラルネットワークは関数近似器である」は正しいが役に立たない。「ニューラルネットワークは、自身の明るさを調整することを学習する調光スイッチのスタックのようなものだ」は役に立つ。
実際の数字を使う。 「ほとんどの住宅ローンは30年続く」は一般的。「金利7%の50万ドルの住宅ローンは、30年間で120万ドルかかる。そのうち70万ドルは利息だ」は印象に残る。
説明するよりも見せる。 「もし～を想像してみてください」と書き始めている自分に気づいたら、代わりに図で示せないか検討する。
気取りすぎない。 機知は良いが、無理に笑わせようとするユーモアは説明の妨げになる。目標は明快さであり、娯楽ではない。
質問や示唆で締めくくる。 優れた解説は、読者に情報を与えるだけでなく、考えさせた状態で終わる。

この構成を採用する理由

長い文章の解説は読み飛ばされやすく忘れられがちです。スライドはニュアンスを伝えるには圧縮されすぎています。スクロールするビジュアルページは、その中間のちょうど良い位置にあります：十分に長く内容があり、視覚的で記憶に残り、インタラクティブでエンゲージメントを促します。うまく作れば、読者がスクリーンショットを撮って共有したくなるフォーマットになります。

生成後

ユーザーに以下の情報を伝えます：

ファイルパス
開き方
改善のために依頼できる具体的なこと1つ（最初のドラフトは、たいてい「Xセクションが弱い」という修正を1ラウンド必要とします）
共有方法 — ファイルは単体で完結しているので、メール、Slack、任意のホスティング先で共有できます

explainer-infographic