PROMPTON / JOURNAL
HTMLスライドの作り方：5分で伝わる構成と、発表で困らない実装
HTMLスライドをAIに依頼するときの実践ガイド。5分・6枚の構成から、16:9表示、キーボード操作、出典、印刷、オフライン確認までを整理します。
HTMLスライドは、ブラウザーで開いて発表でき、文章や図の修正をコードに反映しやすい形式です。ただし「おしゃれな資料を6枚」だけでは、見た目は整っていても、最後に何を決める資料なのかが曖昧になります。
ここでは「社内の依頼受付を共通フォームへまとめる、5分の改善提案」を例に、内容と動作を一緒に設計します。Promptonでは制作条件を入力して指示文を組み立て、コピーした指示文を外部AIへ渡します。Prompton自体がAIを実行したり、HTMLファイルを生成したりする機能ではありません。
1. 聞き手・決めたいこと・持ち時間を先に固定する
最初に書くのは配色ではなく、発表の成立条件です。例では聞き手をチーム責任者と受付担当者、決めたいことを「一部の依頼で2週間試行するか」、説明時間を5分とします。全社導入の承認まで求めると、必要な根拠も資料の量も変わります。質疑が5分に含まれるかも明記しましょう。
入力欄では「お願いしたいこと」に作るもの、「達成したい目的」に聞き手の判断、「読み手・相手」に予備知識、「背景・参考情報」に現在の流れを分けます。費用や受付件数が未確認なら、そのまま未確認と記載。材料不足を、AIが作った実績で埋めないことが大切です。
2. 1枚1メッセージで、6枚の役割を決める
見出しを「課題」「施策」といった分類名だけにせず、そのページで伝える結論にします。読む文章と話す補足を分け、長い説明は発表者メモへ。以下の時間配分は5分の例であり、枚数の正解ではありません。
- 1枚目・30秒：一部の依頼で共通フォームを試したい。今日求める判断を示す。
- 2枚目・50秒：窓口が分かれ、依頼情報の確認が必要になる。現状の流れを図で示す。
- 3枚目・60秒：必須情報を入口でそろえる。変更後の流れと、変えない業務を示す。
- 4枚目・70秒：2週間の小さな試行で確かめる。対象・担当・相談先を示す。
- 5枚目・60秒：確認の往復回数と担当者の負担を観察する。成果は未測定と明記する。
- 6枚目・30秒：試行の可否と担当者を決める。承認後の次の行動を示す。
3. 16:9の縮小と、文章の折り返しを区別する
固定サイズの16:9キャンバス全体を縮小する方式は配置を保てますが、文字も小さくなります。画面幅に合わせて文章や段組みを組み直す方式は読みやすさを保ちやすい一方、行数やページの高さが変わります。「レスポンシブ対応」だけでは、どちらかが伝わりません。
今回の発表用は16:9を保ち、画面内に全体を収める設計と指定します。スマートフォンでの配布も必要なら、別の閲覧モードで縦に読み進められるよう依頼します。文字が入らないときは縮小で押し込まず、文を削るかページを分けます。図の注記も本番の表示距離で読める大きさにします。
4. 「前へ・次へ」は見た目だけで終わらせない
前へ・次への操作は実際にページが切り替わるbutton要素とし、現在位置も「3 / 6」のように表示します。W3Cのカルーセルパターンも参考に、Tabで操作へ移動できること、フォーカスが見えること、ボタン操作後にフォーカスを勝手に移さないことを条件に入れます。非表示ページ内のリンクにはTabで入れないようにします。
左右矢印を補助操作にするなら、入力欄・選択欄・編集可能領域では反応させず、IME変換中や修飾キー付きの入力も除外します。Spaceはボタン操作やスクロールと競合するため、無条件のページ送りに使いません。自動再生は不要。動きを加える場合は、MDNにあるprefers-reduced-motionを使い、動きを減らす設定では切り替え演出を省きます。
5. 図表に名前と根拠を付け、仮説を実績に見せない
現状と提案を比較する図には、工程名、矢印の意味、誰が担当するかを添えます。色だけで区別せず、ラベルでも読める形にします。画像は目的に合う代替テキスト、表は見出しセルと単位を用意。数字を使う場合は集計対象・期間・出典を確認し、出典名を該当ページに置きます。
今回の例では削減率やROIの実測値はありません。効果を示す棒グラフを創作せず、「試行で測る項目」を表にします。架空の説明用データを使うなら、図表のそばに「説明用の仮データ」と表示。第三者の画像を使う場合も、利用条件と出典を先に確認します。
6. 単一ファイル・印刷・本番リハーサルまで依頼する
持ち運びを優先するなら、CSSとJavaScriptを含む単一HTMLを指定します。画像も埋め込み、フォントは端末の標準書体にして、外部ライブラリやCDNに依存しない条件を付けます。ファイルが1つでも、外部画像を参照していればオフラインでは完結しません。ネット接続を切って開き直す確認が必要です。
MDNの印刷ガイドを参考に、@media printで操作部を隠し、全スライドを表示して、画面用の変形・固定配置を解除します。1枚1ページの改ページと、用紙・余白に収まる寸法も指定。ブラウザーや印刷設定によって結果は異なるため、HTMLがあれば同じPDFになるとは限りません。
仕上げは本番の端末とディスプレイで、5分通して話すことです。前後移動、末尾の挙動、文字の欠け、出典の読める大きさ、印刷プレビューの枚数を確認します。気になる箇所は「4枚目の表を2列にして本文を短く」のように、ページと変更内容を指定して修正します。
TRY IT WITH PROMPTON
Promptonで指示文を組み立てる
以下は記事の考え方を使った入力例です。名前や目的、素材の条件を自分の案件に合わせて書き換えてください。
- 読み手・相手
- チーム責任者と依頼受付担当者。日々の業務は知っていますが、HTMLやシステム開発の知識は前提にしません。
- 達成したい目的
- チーム責任者と受付担当者が、一部の依頼で2週間試行するかを判断し、試行担当者と次の行動を決められること。発表5分、質疑は別枠です。
- お願いしたいこと
- 社内の依頼受付を共通フォームへまとめる改善提案を、5分で説明する全6枚のHTMLスライドにしてください。日本語で、1枚1メッセージ、16:9の発表用表示と狭い画面での縦読み表示を用意してください。
- 背景・参考情報
- 説明用の架空案件です。現状はメールとチャットで依頼を受け、必要情報が足りない場合は受付担当者が確認しています。提案は一部の依頼だけ共通フォームで試すことです。件数、費用、所要時間、削減率、ROIの実測値は未提供です。対象業務、担当者、相談先は未定です。試行期間2週間は提案条件であり、既存の合意ではありません。
- 守ってほしい条件
- 未定の対象業務・担当者・相談先は、それぞれ［対象業務］・［担当者］・［相談先］のプレースホルダーで残してください。構成と発表時間：1.試行の提案30秒、2.現在の受付フロー50秒、3.変更後と変えない業務60秒、4.2週間の試行範囲・担当70秒、5.確認の往復回数と担当者負担の測定計画60秒、6.求める判断と次の行動30秒。各ページに見出しと発表者メモを付ける。前へ・次へはbuttonで実装し、ページ番号、端での操作制限、見えるフォーカスを設ける。Tabを奪わず、非表示ページにフォーカスが入らないようにする。左右矢印は入力欄・select・contenteditable・IME変換中・修飾キー付きでは無効、Spaceは全体のページ送りに使わない。自動再生なし。prefers-reduced-motionでは演出を省く。図表に工程名・単位・出典または未測定の表示を付ける。@media printで操作部を隠し、全6枚を1枚1ページで印刷できるよう画面用の変形や固定配置を解除する。未確認情報は補完せず明示する。出力したコードとは別に、前後移動・フォーカス・キー除外・狭い画面・動きの低減・オフライン・印刷の確認手順を添え、実行していない検証は未実施とする。
- 避けてほしいこと
- 未提供の測定値、削減実績、ROI、承認済みの事実を創作しない。外部CDN・Webフォント・外部画像・必須ライブラリに依存しない。図表を画像化して文字を読めなくしない。本文を極端に縮小して詰め込まない。すべてのブラウザーで同一PDFになると保証しない。
Promptonが作るのは指示文です。コピーした指示文を制作に使うAIへ貼り付けてください。写真・ロゴなどの素材も、そのAIに別途添付します。
この入力例をPromptonで編集する 空の入力から作る完成前のチェック
- 聞き手、求める判断、発表時間と質疑の扱いが書かれている。
- 各ページの結論が1つで、5分の説明を通して試している。
- 16:9表示と狭い画面での閲覧方法を区別している。
- 前後移動、フォーカス、入力中のキー除外を確認している。
- 図表のラベル・単位・出典と、仮データの表示を確認している。
- オフライン表示、動きを減らす設定、1枚1ページの印刷を確認している。