HTML資料の作り方

AIを使った
HTML資料の作り方

HTMLは、ウェブページを作るために使われる基本的な形式です。 提案書や社内資料も、ウェブサイトを作る感覚で、ストーリー性を持たせながら、図解・比較・動き・スマホ対応まで含めて表現できます。 今あるPowerPoint、PDF、Word、議事録、箇条書きメモをAIに読ませるところから始めても構いません。

作り方を見る用途別の作成例を見る
01ウェブページのように読める

表紙、課題、提案、効果、次アクションを順番に並べ、読み手が自然にスクロールして理解できます。

02ストーリーを設計できる

単なる資料の羅列ではなく、結論から背景、根拠、提案へ流れる構成を作れます。

03図解や動きで伝えられる

比較表、フロー図、グラフ、カード表示などを使い、重要なポイントを視覚的に強調できます。

04スマホでも見やすい

レスポンシブ対応にすれば、PCでもスマホでも崩れにくく、URL共有後もすぐ確認できます。

作り方

ウェブサイトを作る要領で、ストーリーから設計する

HTML資料は、1枚ずつスライドを並べるというより、読み手が順番に読み進めるウェブページとして考えると作りやすくなります。 まず元資料やメモから本文の流れを整理し、そのうえでページ構成、見せ方、HTMLの出力条件をAIに伝えます。

元資料をAIに読ませて、本文のストーリーを整理する

今あるPowerPoint、PDF、Word、商談メモ、議事録、箇条書きをAIに読ませます。 まずは「結論 → 背景・課題 → 訴求ポイント → 根拠 → 次アクション」の順に本文を整理することが重要です。 既存資料から論点を抜き出し、結論から並べ、最後に読み手にどんな行動を取ってほしいかまで決めます。 ここで筋道が固まると、後のHTML化が一気に安定します。整理した本文は、下の用途別カードの各依頼文の【本文】欄に貼り付けて使います。

本文整理用の依頼文を開く
本文整理の依頼文
以下の元資料をもとに、HTML資料にする前の本文ストーリーを整理してください。

【資料の目的】
〇〇を読み手に理解してもらい、〇〇という行動につなげたい。

【読み手】
例: クライアントの決裁者 / 社内役員 / 現場メンバー

【元資料】
ここに既存のPowerPoint、PDF、Word、商談メモ、箇条書き、議事録、提案したい内容を貼り付けます。
ファイルを読み込めるAIの場合は、資料を添付して内容を読み取らせてください。

【整理してほしいこと】
1. 最初に伝えるべき結論
2. 背景と課題
3. 読み手に刺さる訴求ポイント
4. 反論・不安になりそうな点とその回答
5. 最後に取ってほしい次アクション
6. HTML資料にした時のページ構成案
7. 図解、比較表、グラフにすると伝わりやすい箇所
読み手の流れに合わせてページ構成を決める

ウェブサイトのセクションを設計するように、表紙、課題、提案、根拠、効果、費用、次アクションを順番に並べます。 全体は5から10ページ程度を目安にし、1ページ1メッセージで構成すると、読み手が迷わず理解できます。 表紙から次アクションまで、読み進める順番そのものを設計する感覚です。

HTMLならではの見せ方を指定する

提案書をウェブサイトのように見せるために、比較表、グラフ、ステップ図、カード、固定見出し、強調エリアなどを指定します。 数字はグラフ、違いは比較表、流れはステップ図にするなど、情報に合った見せ方を選びます。 PCでもスマホでも読みやすいレスポンシブ表示もここで伝えます。

AIプレゼンターで使いやすいHTMLとして出力する

最後に「HTML 1ファイル・CSS/JS内包・外部依存なし・スマホ対応」を指定します。 画像や外部ライブラリに依存しすぎない形にすると、アップロード後の表示も安定します。 作成したHTMLをAIプレゼンターにアップロードすれば、URL共有と閲覧状況の確認までつながります。

用途別の作成例

用途を選んで、作成依頼文をコピーするだけ

営業提案だけでなく、社内稟議、研修、月次報告、既存資料の作り直しにも使えます。 各依頼文の【本文】欄には、ステップ1で整理した内容を貼り付けてください。会社名・商品名・数字を差し替えれば、上の4ステップに沿った作成依頼文になります。

01

AIプレゼンターの営業提案資料

「提案書を送って終わり」にせず、HTML資料をURLで届け、閲覧状況を見ながら次の提案フォローへつなげる価値を伝える基本形です。

8ページクライアント向け導入提案
別画面で開く提案書・会社案内・サービス説明向け
依頼文を開く
依頼文 01
あなたはBtoB営業資料に強いプロの提案書デザイナーです。
AIプレゼンターをクライアントへ提案するためのHTML資料を1ファイルで作成してください。

【目的】
提案書・説明資料を「送って終わり」にせず、URL共有と閲覧状況の確認までできるサービスとしてAIプレゼンターを伝える。

【読み手】
営業資料、提案書、社内説明資料をメール添付やPDF送付で共有している企業の決裁者・営業責任者。

【本文】
AIプレゼンターは、AIで作成したHTML資料をアップロードし、URLですぐ共有できるサービスです。
相手はブラウザだけで資料を確認でき、送信側は閲覧状況を確認できます。
提案書、会社案内、サービス説明、社内研修、稟議資料などに使えます。

【ページ構成】全8ページ
1. 表紙: 提案書を送って終わりにしない
2. 課題: PDF添付では読まれたか分からない
3. 解決策: HTML資料をURLで共有する
4. 使い方: AIでHTML作成、アップロード、共有、閲覧確認
5. 活用シーン: 営業提案、社内説明、研修、月次報告
6. 期待効果: フォローの優先順位が見える
7. 導入イメージ: 小さく始めて社内展開する
8. 次アクション: まず1資料をHTML化して試す

【デザイン】
- 余白を広く、信頼感のあるSaaS提案資料
- フロー図、比較表、効果カードを入れる
- PCでもスマホでも読みやすいレスポンシブ表示

【出力条件】
- HTML 1ファイルで完結、CSS/JSはHTML内に埋め込む
- 外部ファイルに依存しない
- AIプレゼンターにアップロードして共有できる形にする
02

AIプレゼンター社内導入の稟議資料

PowerPointやPDF共有では見えない「読まれたかどうか」を、導入判断の材料として整理します。小さく試して効果を見たい社内稟議向けです。

6ページ社内向け導入承認
別画面で開く経営会議・部門承認・試験導入向け
依頼文を開く
依頼文 02
あなたは経営会議・社内稟議資料を作るプロです。
AIプレゼンターを社内導入するための稟議用HTML資料を作成してください。

【目的】
営業資料・社内資料の共有方法を改善するため、AIプレゼンターの試験導入承認を得る。

【読み手】
経営者、営業責任者、管理部門、情報システム担当者。

【本文】
現状はPowerPointやPDFをメール添付で共有しており、相手が開いたか、どこまで読んだかが分かりにくい。
AIプレゼンターを使うと、HTML資料をアップロードしてURL共有でき、閲覧状況を確認できる。
まずは営業提案書と社内説明資料から小さく試し、効果を見ながら展開する。

【ページ構成】全6ページ
1. 表紙: AIプレゼンター試験導入のご提案
2. 結論: まず少人数で試験導入したい
3. 現状課題: 資料共有後の反応が見えない
4. 導入効果: フォロー精度、資料品質、社内展開
5. 運用案: 対象資料、担当者、確認フロー
6. 判断事項: 承認してほしいこと、開始時期、次アクション

【デザイン】
- 経営会議向けに装飾を抑えたビジネス資料
- 比較表、判断ポイント、導入ステップを大きく表示
- 重要な結論は各ページ上部に1文で表示

【出力条件】
- HTML 1ファイル／CSS/JSはHTML内に埋め込む
- 外部ファイルに依存しない／スマホ対応
- AIプレゼンターで社内共有する前提で作る
03

情報セキュリティ研修資料

IPAなどの公的資料で扱われる脅威や基本対策を、社員が具体的な行動に移せるHTML研修資料として整理します。

7ページ社内研修向け公的資料ベース
別画面で開く社員教育・注意喚起・社内周知向け
依頼文を開く
依頼文 03
あなたは情報セキュリティ研修資料を作る編集者です。
IPAなどの公的資料を参考に、社員向けのHTML研修資料を作成してください。

【目的】
社員が日常業務で注意すべき情報セキュリティの基本行動を理解し、メール、パスワード、クラウド利用、端末管理で迷わず行動できるようにする。

【読み手】
全社員、新入社員、管理職、在宅勤務を行うメンバー。

【本文】
標的型メール、フィッシング、パスワード使い回し、情報の持ち出し、クラウド共有設定ミスなど、日常業務で起きやすいリスクを扱う。
怖がらせるだけではなく、「何を確認するか」「困った時に誰へ相談するか」まで具体化する。
公的資料の内容をそのまま貼るのではなく、社内で使える言葉に整理する。

【ページ構成】全7ページ
1. 表紙: 今日から守る情報セキュリティ
2. なぜ重要か: 会社、顧客、自分を守る理由
3. よくあるリスク: メール、URL、添付ファイル、共有設定
4. 基本行動: 確認する、止まる、相談する
5. ケーススタディ: 怪しいメール、誤送信、共有リンク
6. チェックリスト: 業務前後に確認すること
7. 相談先: 迷った時の連絡ルート

【デザイン】
- 注意点は赤、推奨行動は緑、判断フローは青で整理
- ケーススタディはカード形式にする
- 最後に日常行動チェックリストを入れる

【出力条件】
- HTML 1ファイル／CSS/JSはHTML内に埋め込む
- 外部ファイルに依存しない／スマホ対応
- 社内研修としてURL共有しやすい構成にする
04

防災・BCP初動対応資料

地震、豪雨、停電などの発生時に、誰が何を確認し、どの順番で行動するかをHTMLマニュアルとして整理します。

6ページ企業・施設向け初動対応
別画面で開く防災訓練・社内周知・施設運営向け
依頼文を開く
依頼文 04
あなたは防災・BCP資料を分かりやすく整理する編集者です。
内閣府や自治体などの公的な防災資料を参考に、社内向けの初動対応HTML資料を作成してください。

【目的】
災害発生時に、社員が「まず何をするか」「誰に連絡するか」「どの情報を確認するか」を迷わず判断できるようにする。

【読み手】
全社員、拠点責任者、総務、施設管理、現場リーダー。

【本文】
地震、豪雨、停電、通信障害などを想定し、発生直後の安全確保、安否確認、情報収集、拠点判断、顧客対応を整理する。
細かい規程ではなく、災害直後に開いて確認できる実用的な資料にする。
公的資料の考え方を参考にしつつ、会社ごとの連絡先や運用ルールを差し込める構成にする。

【ページ構成】全6ページ
1. 表紙: 災害時の初動対応
2. 最初の3分: 身の安全、周囲確認、避難判断
3. 最初の30分: 安否確認、拠点状況、連絡ルート
4. 最初の24時間: 業務継続、顧客対応、情報共有
5. 役割分担: 総務、責任者、現場担当の行動
6. 訓練と備蓄: 定期確認リスト

【デザイン】
- 緊急度が伝わるオレンジ・赤・黒を使う
- 時系列のステップ図を大きく見せる
- 安否確認や備蓄はチェックリストにする

【出力条件】
- HTML 1ファイル／CSS/JSはHTML内に埋め込む
- 外部ファイルに依存しない／スマホ対応
- 災害時にスマホで開いても読みやすい構成にする
→
05

職場の熱中症対策資料

暑さ指数、作業前チェック、休憩・水分補給、異変時の対応を、現場で読めるHTML資料としてまとめます。

6ページ安全衛生向け現場周知
別画面で開く現場作業・屋外業務・社内掲示向け
依頼文を開く
依頼文 05
あなたは職場の安全衛生資料を分かりやすく作る編集者です。
厚生労働省などの公的資料を参考に、職場の熱中症対策を伝えるHTML資料を作成してください。

【目的】
従業員が暑い時期の作業前、作業中、体調不良時に何を確認し、どう行動するかを理解できるようにする。

【読み手】
屋外作業者、現場責任者、総務・安全衛生担当、アルバイト・パートを含む現場メンバー。

【本文】
熱中症は、気温だけでなく湿度、日差し、作業強度、体調、服装などによってリスクが変わる。
暑さ指数、こまめな水分・塩分補給、休憩、声かけ、体調不良時の早期対応を分かりやすく整理する。
公的資料の内容を参考にしつつ、職場ですぐ確認できるチェックリスト型にする。

【ページ構成】全6ページ
1. 表紙: 職場の熱中症対策
2. なぜ危険か: 熱中症が起きる要因
3. 作業前チェック: 暑さ指数、体調、服装、持ち物
4. 作業中の行動: 休憩、水分・塩分、声かけ
5. 異変時の対応: すぐ休む、冷やす、連絡する
6. 現場チェックリスト: 毎朝確認する項目

【デザイン】
- 注意喚起は赤、予防行動は青、チェック項目は緑で整理
- 現場で一目で見られる大きめ文字にする
- 作業前、作業中、異変時を3色で分ける

【出力条件】
- HTML 1ファイル／CSS/JSはHTML内に埋め込む
- 外部画像に依存しない／スマホ対応
- スマホで開いて現場確認しやすい構成にする

作成依頼文をコピーして、HTML資料を作り始める。

生成したHTMLをAIプレゼンターにアップすれば、共有・閲覧確認まで一気につながります。

使い方に戻る