explainer-infographic

解説インフォグラフィック

優れたビジュアル解説（Bartosz Ciechanowski、The Pudding、distill.pub）のように、スクロール、インタラクティブな図、現実世界のたとえ、段階的な深掘りを通じて概念を説明する、単一ファイルの HTML ページを作成します。5 分以内に、知的好奇心のある非専門家が複雑なトピックを理解できる内容にしてください。

始める前に

次の要点を確認します。

1. 概念 — 何を説明しますか？
2. 対象読者 — 誰が読みますか？（既定では、知的好奇心のある非専門家です）
3. 「今なぜ説明するのか」 — 会議、授業、動画、ブログ記事、個人学習のどれに使いますか？
4. 深さ — 直感的に分かる内容（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 以上、最大幅は 65ch
• アクセントカラーは 1 色 — ハイライト、リンク、各図の重要な要素に使います
• SVG で図を作成 — どの倍率でも鮮明で、CSS でテーマを設定できます
• アニメーションは目的に沿って使い、装飾目的にしない — 時間の経過による変化（進行するプロセス、増加する値、反応するシステム）を示すためにアニメーションを使います。可能だからという理由だけで動かさないでください
• 役立つ場合はスクロールに連動させる — 連続する場面やプロセスには、読者がペースを調整できるようスクロールでアニメーションを開始します。静的な図ではスクロール連動を使いません

インタラクティブ要素（1 ページにつき最大 2〜3 個）

• スライダー／範囲入力 — パラメーターを調整して、その影響を確認します
• 切り替え — 2 つの状態（あり／なし、変更前／変更後）を切り替えます
• クリックして表示 — 興味のある読者向けに、詳しい情報を表示します
• ステップ送りアニメーション — 「次へ」ボタンを使い、読者のペースでプロセスをたどります

使いすぎないでください。よく設計されたインタラクティブな場面が 3 つあれば、仕掛けばかりの 10 個より効果的です。

技術的な実装

自己完結した単一の .html ファイルとして、explainer-[topic-slug].html に保存します。外部依存関係は使用せず、フォントは埋め込み、SVG はインラインで記述し、JavaScript はバニラ JS のみを使います。

必須要件：

• モバイル対応 — 読者の多くはスマートフォンでスクロールします
• アクセシブル — セマンティックな HTML、図の代替テキスト、キーボードで操作できるインタラクティブ要素を使用します
• 高速 — スピナーやアセットの読み込み待ちなしに、すぐ開けるようにします

コンテンツのルール

1. 定義ではなく、たとえから始めましょう。 「ニューラルネットワークは関数近似器です」は正しくても役に立ちません。「ニューラルネットワークは、明るさを自分で調整する方法を学ぶ調光スイッチが積み重なったもののようなものです」なら、役に立ちます。
2. 実際の数字を使いましょう。 「住宅ローンの大半は30年です」では一般論にすぎません。「50万ドル、金利7％の住宅ローンは、30年間で合計120万ドルの支払いになります。そのうち70万ドルは利息です」なら、記憶に残ります。
3. 説明するのではなく、見せましょう。 「もし〜だと想像してみてください」と書きたくなったら、図で示せないか考えてみましょう。
4. 気取らないようにしましょう。 機知に富んだ表現は問題ありませんが、笑いを無理に狙うと説明の邪魔になります。目指すのは明快さであり、娯楽ではありません。
5. 問いかけ、または示唆で締めくくりましょう。 優れた解説は、読者に情報を伝えるだけでなく、考えさせます。

この形式を採用する理由

長文の解説は、流し読みされて忘れられがちです。スライドは細かなニュアンスを伝えるには短すぎます。スクロールして読むビジュアルページなら、内容を十分に掘り下げられる長さがあり、記憶に残るビジュアル表現を盛り込めて、読者の関心を引き出すインタラクティブ性も備えています。うまく作れば、読者がスクリーンショットを撮って共有したくなる形式です。

生成後

ユーザーに次のことを伝えてください。

1. ファイルのパス
2. ファイルの開き方
3. 改善のために具体的に依頼できることを1つ（まだ完成ではありません。解説の初稿ではたいてい、「Xのセクションが弱く感じる」というフィードバックを一度反映する必要があります）
4. 共有方法 — ファイルは単体で完結しているため、メールで送る、Slack に投稿する、任意の場所でホストする、といった方法で共有できます