何も知らない人に何かを説明する — 大きな SVG イラストと最小限のテキストで構成された、単一の自己完結型 HTML ファイルとして。
ELI5 はあらゆるトピックを絵中心・5分で読める形に変換します。手描き風の大きな SVG 図がストーリーを担い、言葉は脇役に徹します。出力は単一の HTML ファイルで外部リクエストはゼロ — オフラインでも、イントラネットでも、ダブルクリックでも開けます。
モデル非依存の設計: HTML を書ける LLM(Claude、GPT、DeepSeek、Gemini、ローカルモデル)なら、SKILL.md の仕様に従うだけで同じ品質の出力を再現できます。Artifacts や専用ツールは不要です。
SKILL.md— 完全な方法論仕様(手順、言語ルール、HTML ハードルール、落とし穴、検証チェックリスト)。任意の LLM にシステムプロンプトとして与えるだけで説明文を生成できます。templates/eli5-template.html— 標準出力スケルトン: インタラクティブ用語集、クイズ、ステップアニメーション、レスポンシブレイアウト、ライト/ダークテーマ。scripts/export.sh— HTML → PDF/PNG 変換ワンコマンド(Chromium を自動検出)。examples/— 実際に生成された説明サンプル(3言語): What is an API?(what-is-api-{en,ja,zh}.html)— ブラウザで開くとフォーマットが分かります。
| 機能 | 説明 |
|---|---|
| 🖼️ 絵中心 | 各ステップ = 大きなインライン SVG + 1行キャプション。テキストは脇役。 |
| 🌍 多言語 | 中国語 / English / 日本語 / 한국어 を自動検出、または同じ SVG から4言語を一括生成。 |
| 🧩 インタラクティブ用語集 | 用語にホバーすると平易な説明がバブル表示。最後に用語集セクションで総括。 |
| ✅ クイズで復習 | 3〜4問の選択問題。即座に正誤フィードバック、「ステップNに戻って」案内付き。 |
| 📦 ゼロ依存の出力 | 単一の自己完結 HTML — CDN なし、フォントなし、外部 JS なし。オフライン対応。 |
| ♻️ モデル非依存 | あらゆる LLM が仕様だけで同じフォーマットを再現可能。 |
方法1 — AI アシスタントに依頼。 SKILL.md をエージェントに読み込ませて(スキルまたはシステムプロンプトとして)、eli5 <トピック> または "explain X like I'm 5" と指示。アシスタントが HTML を書き出します。
方法2 — テンプレートから手書き。 templates/eli5-template.html をコピーし、各ステップに独自の SVG + 1行キャプションを記入。テキストは最小限に。
方法3 — サンプルを学習。 examples/what-is-api-en.html をブラウザで開いて、品質の基準を確認。
./scripts/export.sh examples/what-is-api-en.html pdf
./scripts/export.sh examples/what-is-api-en.html pngスクリプトは chromium / google-chrome / Playwright キャッシュを自動検出します。サーバーにブラウザがない場合は、HTML を開いて Ctrl+P → PDF として保存(印刷設定でヘッダー/フッターを無効化)。
"If you can't explain it simply, you don't understand it well enough." (簡単に説明できなければ、十分に理解していない。)
ELI5 は、理解を確かめる最良の方法は「初心者に絵付きで説明すること」という信念に基づいています。出力は5分以内に読め、予備知識なしで理解でき、共有したくなる美しさを目指します。
MIT