HTMLスライドとは？
HTMLスライドは、ウェブページとして保存されたプレゼンテーションです。単一ファイルにレイアウト、画像、操作機能をまとめ、ブラウザーで開けます。AIで作成すれば、PowerPoint、Canva、Figma Slidesで作り直さずに発表できます。
フォルダー、Reactプロジェクト、公開プレビューのリンク、PowerPoint書き出しではなく、1つの.htmlファイルを指定してください。ブラウザーがスライドを表示し、HTML Slide Presenterが一時公開、スマートフォン操作、ノートの読み込みを追加します。
手元の資料からスライドを作る
聞き手、伝えたいこと、持ち時間を決め、使用する事実や例を渡します。5分の発表なら、課題、具体例、次の行動の3枚から始めます。
[topic]について[audience]向けの自己完結したHTMLスライドを作成してください。
発表時間：[minutes]分。下記資料の事実だけを使用してください。
読みやすい16:9のレイアウト、インラインCSS/JavaScript、埋め込み素材を使用してください。
各スライドをsection.slideとし、常に1枚だけに.activeを付けてください。
前へ・次へボタン、ArrowLeft/ArrowRight、Homeの操作を実装してください。
各スライド内にscript type="application/json" class="slide-notes"を追加し、
title、script（話す原稿）、notes（短い箇条書き文字列の配列）を含めてください。
ノートはスライド上で非表示にし、全体を2 MB未満にしてください。
フレームワーク、外部フォント、外部画像、API呼び出し、ビルド工程は使わないでください。
構成案だけでなく、完全なdeck.htmlファイルを渡してください。
資料：[内容を貼り付け]ClaudeまたはChatGPTの個別ガイドをご覧ください。HTML Slide Presenter skillには、対応ツールで再利用できるひな形と検証手順があります。通常のチャットではプロンプトを使えます。
小さなサンプルを試す
3枚のサンプルをダウンロードし、ブラウザーで開いて左右の矢印キーを試してください。各スライドに短い話す原稿と補足の箇条書きが入っています。文章や見た目を変える前にコピーを保存します。
既存のスライドなら、内容とデザインを保ち、不足する素材の埋め込みとノートの追加をAIに依頼します。変更を確認してください。AIのプレビューでは正しく見えても、保存されていない別ファイルに依存している場合があります。
アップロード前にファイルを確認
- 保存したファイルをローカルで開き、全スライドを確認します。文字、コントラスト、画像、最初と最後の移動操作をチェックしてください。
- 通信を切って開き直します。自己完結したファイルなら、重要な内容は引き続き表示されます。
- ファイルは2 MB未満にします。大きな画像を圧縮するか、装飾画像を単純な図形に置き換えてください。
- 事実と発表者ノートは自分で確認してください。生成された内容に根拠のない主張が含まれる場合があります。
発表方法を選ぶ
| 方法 | 向いている用途 | 確認事項 |
|---|---|---|
| ローカルのブラウザー | シンプルなオフライン発表 | スライド内のキーボード操作を使用します。公開型のスマートフォンリモコンはありません。 |
| HTML Slide Presenter | スマートフォン操作とノートを使う一時セッション | 無料で、アカウントやアプリは不要です。スマートフォン同期にはインターネットが必要です。 |
| HTMLSlides | ノートPCに発表者ノートを表示するインストール型ツール | 公式サイトでは、デスクトップアプリのオフライン発表と2画面表示を案内しています。 |
スマートフォンを使う場合は、HTML Slide Presenterを開き、ファイルをアップロードし、30分・3時間・1日から選んでボット確認を完了します。表示機器で発表リンクを開き、スマートフォンでQRリモコンを開きます。設定ガイドをご覧ください。
無料の範囲とネット接続が必要な機能
Tiny Design Shopでは、発表用の定期契約、アプリのインストール、アカウントは不要です。AIツールには別の利用条件や上限があります。無制限の無料スライド生成を保証するものではありません。
スライドは一時セッション用にアップロードされます。スマートフォンリモコンには通信と開いた発表タブが必要です。ローカルの予備ファイルを保存してください。ただしスマートフォン同期は引き継がれません。イベントでは登壇チェックリストを使ってください。