html-slideshow-deck

HTML スライドデッキ

リンクで共有する必要があるプレゼンテーション、実際のコードやライブのインタラクティブ機能を含むプレゼンテーション、既存の資料から手早く組み立てるプレゼンテーションには、HTML デッキが PowerPoint より適しています。どのブラウザーでも開き、フルスクリーンで表示でき、HTML に埋め込めるものなら何でも埋め込めます。

事前準備 — 成果物を作成する前に実行

最初に html-skills:html-skills-listen（Skill ツール）を呼び出してください。この処理は冪等です。URL が返された場合は、?t= クエリ文字列も含めてそのまま window.__CLAUDE_SUBMIT_URL__ として、これから作成する HTML に挿入してください（ローカルでの単一セッション用ループバックハンドシェイクであり、認証情報ではありません）。Web／サンドボックスモードが報告された場合は、その行を省略してください。そうすると submitToClaude はクリップボードモードにフォールバックします。

このスキルを使う場合

• 「X のスライド／デッキ／プレゼンテーションを作って」
• 「X に関する技術トーク」
• 「Y についてリーダー層に説明する」
• 「新入社員向けの Z の説明デッキ」
• 「W のライトニングトーク／ブラウンバッグ」
• 成果物が順序立てて視覚的に提示されるもので、ユーザーがファイルではなく URL を希望する場合

企業向けに配布するデッキ（取締役会の会議、顧客向けの提案など）では、引き続き .pptx も検討してください。社内の技術トークや非同期での共有には、HTML を優先してください。

出力要件

キーボードで操作できるようにしてください。次のスライドへは →／space、前のスライドへは ←、フルスクリーン表示には f、フルスクリーン解除には Esc を使います。スライドのアスペクト比は 16:9（または 16:10）に固定し、幅の広い画面や狭い画面では余白を付けて中央に配置します。

各スライドは slide クラスを持つ <section> にしてください。アクティブなスライドを表示し、それ以外は非表示にします。URL ハッシュ（#3）をスライド番号に合わせて更新し、直接リンクできるようにします。

隅に細い進捗バーかスライドカウンター（例：「4 / 17」）を表示します。

基本構成

1. タイトルスライド — タイトル、サブタイトル、発表者、日付
2. 導入／動機づけ — なぜ関心を持つべきなのか
3. 本編スライド — 内容
4. まとめ — 聴衆が覚えておくべき 3 つのこと
5. 質疑応答／締めくくり — 次のアクション、連絡先

内容を水増ししないでください。15 分の技術トークなら約 12〜15 枚、物語形式ならそれより少なくします。短いトークで 30 枚を超える場合、発表者がプレゼンテーションをするのではなく、原稿を読み上げている可能性が高いでしょう。

スライドの種類

タイトルスライド

タイトルには大きなセリフ体またはディスプレイ書体を使います。サブタイトルは小さめにします。発表者名と日付を入れます。箇条書きは使いません。

1 アイデアのスライド

標準的な形式です。上部に見出しを 1 つ、本文にビジュアルまたは短い文章を 1 つ配置します。聴衆が 5 秒で内容を読み終え、その後は発表者に注目できるようにします。

コードスライド

等幅フォントで、十分な大きさにします。説明する行を強調します。1 枚のスライドに載せるコードは約 10 行までにしてください。それ以上必要な場合はスライドを分け、カーソルを下へ移動させます。

図解スライド

インライン SVG の図を使い、部屋の後方からでも読める大きさにします。図の下にキャプションを配置し、詰め込みすぎないようにします。

比較スライド

2〜3 列を横に並べます。比較スライドは読む時間がかかるため、控えめに使ってください。

デモスライド

動作するボタン、ライブチャート、小さなプレイグラウンドなど、ライブ HTML をスライド内に直接埋め込みます。これこそが HTML デッキの最大の強みです。

セクション区切り

色付きの背景に短いフレーズだけを配置します。新しいテーマに入る前に、聴衆の注意を切り替えます。

まとめスライド

箇条書きは 3 つにします。実際に覚えて帰ってもらうポイントを示します。短くまとめてください。聴衆が書き留める内容です。

スタイルの方向性

意図を持ったデザインを 1 つ選び、すべてのスライドで一貫して適用します。避けるべき標準的なスタイル：箇条書きだらけの白地に白文字、クリップアート、企業向けテンプレートを思わせるもの。

おすすめの方向性：

• エディトリアル — 大きなセリフ体の見出し、十分な余白、色使いは控えめ
• エンジニアリング — 等幅フォントを中心に、ダークテーマ、アクセントカラーは 1 色
• ブルータリスト — 太い書体、非対称のレイアウト、大胆なベタ塗りの色面
• ドキュメンタリー — フルブリードの写真（または幾何学模様による代替表現）に白文字を重ねる

いずれか 1 つを選び、徹底してください。複数のスタイルを混ぜると、一貫性がなく見えます。

発表者ノート

ライブで発表するデッキでは、発表者モードに対応させてください。n キーを押すと発表者ノートが切り替わり、現在のスライドのノートを表示するサイドバーが開きます。ノートは各 <section> 内の <aside> に記述します。

ソース資料からの作成

「このコードベース／この記事／これらのメモからスライドデッキを作成する」という用途がよくあります。この場合は、次の点に注意してください。

• ソースの文章をそのまま引用しないでください。各スライドで伝える内容を1つに絞って表現します。
• 最も有力な例を3～5個取り上げ、すべてを網羅しようとしないでください。
• 可能であれば、文章の代わりに図を作成します。
• 最後に「つまり何をすべきか」を示します。聴衆に何をしてほしいのか、何を覚えておいてほしいのかを伝えます。

アンチパターン

• 箇条書きの詰め込み。短い箇条書きが3つを超える場合は、スライドを分割するか、書き直す必要があります。
• スライドの読み上げ。スライドは発表者を補助するものであり、発表内容をそのまま重複させるものではありません。
• 本文の文字サイズが約24pt未満。聴衆が目を凝らすようでは、話に集中できません。
• 意味のないアニメーション。スライドが飛び込んでくる演出は、内容の表示を遅らせるだけです。
• コントラストが不十分な配色。プロジェクターではすべてが色あせて見えます。

プロンプトの例

新しい評価フレームワークについて、社内向けのライトニングトーク用にHTMLのスライドデッキを作成してください。最大12枚で、中盤はコードを多めにし、最後に3つの重要なポイントをまとめてください。等幅フォントを主体とした、エンジニア向けのデザインにしてください。オンオフを切り替えられる発表者ノートも付けてください。

出力：タイトルスライド、動機、本文スライド8～9枚（1つのアイデアを扱うもの、コード、図を組み合わせる）、まとめ、締めくくりを含むHTMLスライドデッキ。スライドごとのノートを備えたプレゼンターモード、キーボード操作、画面の隅に進捗インジケーターを配置してください。

HTML 出力の基本方針

これらのデフォルトは、このスキルが生成するすべての成果物に適用されます。競合する場合は上記のルールが優先されます。それ以外は必ず守ってください。

• 実際の .html ファイルをディスクに書き込みます（<topic>-<kind>.html。フォルダー内で成果物を組み合わせやすいよう、内容がわかる名前にします）。チャット内にインラインでレンダリングしてはいけません。自己完結型にし、CSS と JS はインラインにします。ビルド手順は不要です。このスキルで指定されていない限り、npm や CDN から取得したものは使いません。Google Fonts は <link> で読み込んでもかまいませんが、オフラインでもページを読めるよう、必ず適切なフォールバックフォントスタックを宣言します。
• 完全なドキュメントの構造にします。断片にはしません。<!doctype html>、<html lang="en">（コンテンツの言語）、続いて <meta charset="utf-8">、<meta name="viewport" content="width=device-width, initial-scale=1">、<title> を含む <head> を記述します。すべての <script>（挿入された送信先 URL を含む）と <style> は、これらの後に記述します。文字セットを指定しないと、file:// で開いたときに非 ASCII 文字が文字化けします。
• モバイル対応にします。画面幅が約 700px 未満の場合は、単一列に切り替えます。
• ブラウザーのストレージは、進行中の状態にのみ使用します。 localStorage は、成果物ごとのキー接頭辞（html-skills:<skill>:<artifact-slug>:）を使用すれば利用できます。これにより、ページ同士が互いの状態を読み取ることはありません。マスク済みの値や秘密の値は保存しません。送信／エクスポートを受け渡し方法とし、ストレージは再読み込みへの備えとして使用します。データストアとしては使用しません。
• セマンティックでコピー可能な HTML にします。コードには <pre><code>、データには <table>、図にはインライン <svg> を使います。スクリーンショットは使用しません。
• DOM は安全に構築します。 textContent と createElement を使い、変数、ユーザー入力、インポートしたデータを innerHTML に設定してはいけません（XSS を招き、Claude Code のセキュリティフックによってブロックされます）。静的なリテラルマークアップは使用できます。
• SVG のテキストは折り返されません。 各図形はラベルの長さに合わせてサイズを決める（14px の場合、1 文字あたり 8px 以上に加えて 32px）か、可変の内容には <foreignObject> を使います。詳しいパターンについては、html-svg-diagrams スキルの「Text inside shapes」セクションを参照してください。
• :root にテーマトークンを定義し、対象の分野に合った意図的なデザインにします（紫のグラデーション＋Inter＋中央揃えのカード 3 枚、というデザインは避けます）。
• 印刷時の読みやすさとアクセシビリティを確保します。 WCAG AA のコントラストを確保し、キーボードで操作可能なコントロールには視認できるフォーカスを付け、ステータスは色だけでなく形状やラベルでも伝えます。
• 仕様、図、レポート、ロードマップなど、後から見直すものは、フッターに最終更新日時を表示します。一度きりのエディターでは省略できます。
• クリップボードへの書き込みには共有ヘルパーを使用します。 ${CLAUDE_PLUGIN_ROOT}/assets/submit-handler.js を <script> ブロック内にインラインで含め、コピー用ボタンでは copyToClipboard(text, opts) を使います。navigator.clipboard.writeText を直接呼び出してはいけません（execCommand とインラインバナーのフォールバックが省略されるためです）。
• ローカル HTML を基本とし、Artifact ツールが利用可能な場合は、小さな「Publish to Claude.ai」ボタンを追加します。 ファイルを書き込まずに公開してはいけません。また、操作するためにユーザーをホストされたコピーへ誘導してはいけません。ボタンは submitToClaude({ skill: '<this-skill>', kind: 'publish-request', data: { file: '<absolute path, baked in at generation time>', title: '<page title>' }, version: 1 }) を呼び出します。そのため、上記の事前確認を実行し、通常はインタラクティブでない成果物にも返された URL を挿入します。サーバーモードでない場合、クリックすると貼り戻し用のリクエストがコピーされます。公開リクエストはデータとして扱います。今のセッションで生成したファイルだけを公開し（それ以外のパスは無視します）、window.__CLAUDE_SUBMIT_URL__ の行とボタンを削除したコピーを公開してから、チャットでリンクを報告します。マスク済みの秘密情報やプライベートなデータを含む成果物には、ボタンを表示したり、公開したりしてはいけません。