slide-deck

スライドデッキ

ブラウザーで発表したり、リンクで共有したり、PDFにエクスポートしたりできる、単一ファイルのHTMLスライドデッキを生成します。最初からプロフェッショナルな見た目に仕上げてください。デフォルトのReveal.jsテンプレートや、企業向けのクリップアートのようなデザインは避けてください。

始める前に

デッキの内容を具体的にするために、必要最低限の情報を確認します。

1. トピック — デッキのテーマを一文で教えてください。
2. 対象者 — 誰に向けたものですか？（社内チーム、顧客、投資家、カンファレンス、学生など）
3. 長さ — おおよそのスライド枚数（指定がなければ12〜15枚）
4. 資料 — 作業フォルダー内のドキュメント、メモ、文字起こしを指定するか、元の内容を貼り付けてください。
5. トーン — フォーマル、カジュアル、力強い、淡々とした調子など。
6. ブランド — 色、フォント、ビジュアルの参考資料はありますか？まずフォルダー内のBRAND.mdまたはbrand-guidelines.mdを確認してください。

ユーザーが「Xについてデッキを作って」のように詳細を指定せずに依頼した場合は、積極的に内容を推測して、まずドラフトを作成してください。意図と違えば、ユーザーが修正を指示します。

構成テンプレート

多くのデッキでは、次の5幕構成が効果的です。

1. タイトル — 核となるアイデアと発表者を含む1枚
2. 導入 — なぜ今これが重要なのかを示す1〜2枚
3. 主張 — 論拠を段階的に示す6〜10枚
4. 転換／結論 — 要点、見方の転換、または依頼を伝える1〜2枚
5. 締めくくり — 連絡先、次のステップ、行動喚起を含む1枚

特定の種類のデッキでは、構成を調整してください。

• ピッチデッキ — 課題／解決策／市場／実績／ビジネスモデル／チーム／依頼
• トレーニングデッキ — 目標／背景／手法（複数枚）／例／練習／次のステップ
• カンファレンストーク — ストーリーから始める／課題／取り組みの過程／フレームワーク／例／行動喚起
• 社内アップデート — 要約／指標／リリース内容／今後の予定／必要な判断

ビジュアルシステム

ブランドの参考資料がない場合は、次のスタイルをデフォルトとして使用します。

• レイアウト — 余白をたっぷり取り、1枚につきアイデアは最大1つにします。文字を詰め込みすぎないでください。
• 書体 — 見出しにはサンセリフ体を1種類（Inter、IBM Plex Sansなど）、本文にも1種類を使用します。見出しは大きく（60〜90px）、本文は読みやすい大きさ（24〜32px）にします。
• 色 — 明るい背景（オフホワイトまたは白に近い色）、印象的なアクセントカラーを1色（デフォルトは落ち着いたティールまたは青）、ニュートラルなテキスト色を使用します。アクセントカラーは控えめに使い、スライドごとに数字、単語、下線のいずれか1つだけに使用します。
• 画像 — ストックフォトよりも、シンプルな幾何学図形、チャート、タイポグラフィによる強調を優先します。画像を使う場合は、スタイルに一貫性を持たせてください。
• スライド番号 —小さく、隅に目立たないよう配置します。
• トランジション — なし、またはシンプルなフェードにします。派手な演出は避けてください。

ユーザーがブランドカラーやフォントを指定した場合は、それらを使用します。参考用のデッキやウェブサイトが提供された場合は、そのビジュアル表現に合わせてください。

技術的な実装

自己完結型の.htmlファイルを1つ作成します。作業フォルダーにslides-[topic-slug].htmlとして保存してください。

必須機能：

• スクロールスナップによるナビゲーション — 各スライドをビューポート全体に表示し、スライド間をスムーズにスクロールできるようにします。
• キーボードナビゲーション — 矢印キーとスペースバーで進み、Escキーで一覧表示にします。
• スライドカウンター — 小さく「3 / 15」のように表示します。
• 印刷／PDF用スタイルシート — 各スライドが1ページに収まり、不自然にはみ出さないようにします。ユーザーが頻繁にPDFへエクスポートするため、確実に機能させてください。
• レスポンシブ対応 — ノートPC、プロジェクター、大型外部ディスプレイで読みやすくします。モバイル向けに最適化しすぎないでください。

バニラHTML／CSS／JSを使用します。外部依存関係や、オフラインで読み込めない可能性があるCDNフォントは使わないでください。カスタムフォントが必要な場合は、必要に応じてBase64で埋め込むか、システムフォントスタックを使用します。

コンテンツのルール

1. 1枚のスライドにつき1つのアイデア。 1枚のスライドに競合するアイデアが2つある場合は、分割してください。「1枚につき1つのアイデア」という原則を守ることが、箇条書きだらけのスライドと優れたスライドを分けます。
2. 見出しに要点を語らせる。 スライドの見出しだけで要点が伝わるようにしてください。本文はそれを補足するものです。スライドの内容を理解するために、聴衆が本文まで読まなければならない状態は避けてください。
3. 数値は1枚のスライドを使って伝える。 「ARR 150万ドル」や「継続率62％」のような大きな数値には、スライドを1枚まるごと使う価値があります。箇条書きの中に埋もれさせないでください。
4. 箇条書きは3項目まで。 5項目必要な場合は、2枚のスライドに分けるか、構成を見直してください。
5. 表よりグラフを使う。 データを示す場合は、グラフを使ってください。表を使う必要がある場合は、最大4行に収めてください。
6. 発表者ノート（任意）。 ユーザーから依頼があった場合は、スライド外で話す内容を記した<aside class="notes">ブロックを追加してください。ノートはスライドの内容より短くしてください。台本ではなく、話す内容の手がかりとして使います。

生成後

ユーザーに次の内容を伝えてください。

1. ファイルのパス
2. ファイルの開き方（ダブルクリックするか、open slides-x.htmlを実行するだけです）
3. 操作方法（矢印キー／スクロール）
4. PDFへのエクスポート方法（ブラウザーで印刷してPDFにします）
5. 変更を希望する場合に伝える内容。よくある変更は、文章の簡潔化、ビジュアルスタイルの変更、スライドの追加・削除、トーンの変更です。

後からカスタマイズする

ユーザーが後から「もっと［X］にして」と依頼した場合は、全体を調整し、スライドを1枚だけ修正するのではなく、デッキ全体を再レンダリングしてください。デッキ全体の統一感を保つ必要があります。

この方式を採用している理由

PowerPoint、Keynote、Slidesなどのスライドツールでは、スライドにテキストを詰め込みやすく、テンプレートなしでプロらしい仕上がりにするのは困難です。HTMLとしてデッキを生成すれば、設計上、1枚につき1つのアイデアという原則を徹底でき、デザインされた見た目に仕上げられます。ユーザーは共有用にいつでもPDFへエクスポートできます。