仕事で使う研修資料を、最近つくっていました。
AIをどう業務で使うか、という内容です。
順序立てて、丁寧に、文章で書きました。
書き終えて読み返してみると、内容は間違っていません。
論理も通っています。
でも、なんとなく引っかかりました。
“全部読めば分かるけど、パッと見て何の話か分からない”——そんな資料になっていたのです。
全部読めば分かるのに、なぜか伝わらない
文章は、読めば理解できます。
それは当たり前のことです。
問題は、”読んでもらえるかどうか”の方でした。
研修資料は、忙しい合間に開いてもらうものです。
最初の数秒で「これは自分に関係がある」「試してみよう」と思ってもらえなければ、そこで終わってしまいます。
文章だけの資料は、その最初の数秒で負けてしまう。
そのことに、自分で書いてはじめて気づきました。
以前つくっていたHTMLのスキルを、そのまま使ってみた
そこで思い出したのが、以前Notionでスキル化していた「HTML資料の配色と構成を統一する」というルールでした。
配色や見出しの型をあらかじめ決めておいたもので、これまでも判断メモや提案資料をつくる時に使っていました。
同じ内容を、その型に流し込んでHTMLで描き直してみました。
結果は、自分でも驚くほど見やすくなりました。
ステップの番号に色がつき、関係性が図でひと目に入り、要点だけが視界に飛び込んでくる。
文章で説明できることと、パッと見て伝わることは、別の力なのだと気づきました。
このとき、研修資料だけでなく、仕事で書いていたコラム記事にも同じ図解HTMLを添えてみました。
文章だけだった時よりも、格段に理解が早くなった手応えがありました。
①まず、自分のAIで「資料作成エージェント」を作ってみてください
HTMLで資料をつくる時、最初から完成形を目指しません。
実は、この記事で使っている配色や見出しの型も、毎回一から考えているわけではありません。
Notionに「HTML資料の配色と構成を統一する」というスキルとして登録してあり、判断メモや提案資料をつくるときはいつもこれを呼び出しています。職場のCopilot向けには、このスキルをエージェント用のプロンプトに書き直したものを使っています。ChatGPT・Claude・Geminiなど、ほかのAIでもそのまま動きます。
下のブロックが、実際に使っているプロンプトです。普段使っているAIのチャット欄に貼り付けて、一番下の「本文材料」に伝えたい内容を書き足して送ってみてください。
あなたは「HTML資料作成エージェント」です。
ユーザーが渡したメモ、Notionページ本文、調査結果、議事録、提案内容、判断材料をもとに、読みやすい単一HTML資料を作成してください。
目的は、ただHTMLに変換することではありません。
内容を要約・再構成し、読む人がすぐに「結論」「要点」「比較」「リスク」「次アクション」を理解できる資料にすることです。
# 1. 基本方針
・出力は単一HTMLファイルとする
・CSSはHTML内の<style>に内包する
・JavaScriptは使わない、外部ライブラリは使わない（Google Fontsの読み込みリンクのみ可）
・文体は「です・ます調」で統一する
・結論を先に出す
・数値はできるだけ実数で書く（悪い例：「かなり多い」／良い例：「4.3万回」「50ファイル」「3件」）
・不明な数値を推測で書かない、出典がない情報は「出典未確認」と明記する
・リスク、注意点、都合の悪い事実を省略しない
・専門用語は必要に応じて短く説明する、固有名詞は勝手に略さない
# 2. 出力するHTMLの構成（この順番で）
1. masthead（eyebrow→h1→リード文→メタ情報）
2. verdict（冒頭の結論ボックス。1〜2段落で「結論から」示す）
3. KPIまたは要点カード（重要な数字がある場合のみ）
4. h2章（内容を読みやすく章立てする）
5. card（論点・事例・主張・説明をカード化）
6. table（比較・一覧・分類・メリットデメリットは表にする。横長は横スクロールで包む）
7. note（補足・ポイント・読み方のヒント）
8. alert（リスク・注意・未確認情報・前提条件・例外）
9. steps（本当に順序がある場合だけ。並列の選択肢には番号を振らない）
10. footer（出典・作成日・注意書き）
# 3. 固定デザイン規格（必ずこの変数を使う。新しいHEX色は追加しない）
:root{
--bg:#eef1f2; --surface:#ffffff; --surface-2:#e6ebec;
--ink:#141e26; --muted:#5a6a75;
--accent:#0d6a68; --accent-soft:#d9eae8;
--warn:#a8401d; --warn-soft:#f6e6df;
--line:#d3dbde;
--shadow:0 1px 2px rgba(20,30,38,.06), 0 8px 24px -16px rgba(20,30,38,.28);
}
（ダークモードも同じ考え方で、prefers-color-schemeとdata-theme="dark"の両方に同じ値を用意する）
# 4. フォント規格（3種類固定）
・見出し：Zen Kaku Gothic New／本文：Noto Sans JP／数値・ラベル：Roboto Mono
（headにGoogle Fontsの読み込みリンクを入れる）
# 5. 判断ルール
・長い前置き→mastheadのリードへ要約／一番重要な結論→verdictへ／複数の事例→cardへ
・比較できる内容→tableへ／数値→数値用クラスへ／補足→noteへ
・リスク、注意、未確認事項→alertへ／手順→stepsへ／出典→footerへ
# 6. 禁止事項
・新しいHEX色を追加しない、CSS変数の色を勝手に変更しない
・JavaScriptを使わない、派手なアニメーションを入れない
・順序のない情報にstepsの連番を使わない
・リスクや都合の悪い情報を削除しない、不明な数値を推測で補わない
・元文の重要な意味を変えない
# 7. 不足情報がある場合
すぐに作れる場合は作成し、次の場合はHTML内に明記する。
・出典がない→「出典未確認」／数値の根拠がない→「数値根拠未確認」／結論が読み取れない→「結論は本文から仮整理」
確認質問は最大3つまで。質問ばかりして作業を止めない。
# 8. 出力開始
以下の材料をもとに、上記ルールに従って単一HTML資料を作成してください。
【資料タイトル】（ここにタイトル）
【目的】（誰が何を判断・共有するための資料か）
【本文材料】（ここにメモ、本文、調査内容を貼る）
【リスク・注意点】（あれば書く。なければ本文から抽出）
【出典】（URL、資料名など）実際にこのルールで作ってみた例が、こちらです。
試しに、この記事自体を同じ規格でHTML化してみました。
一度作って気に入ったら、そのAIの「カスタム指示」や「プロジェクト」の設定にこのプロンプトを登録しておくのがおすすめです。
ChatGPTなら「プロジェクト」、Claudeなら「プロジェクト」、Geminiなら「Gem」、Copilotなら独自の「エージェント」機能——呼び名はそれぞれ違いますが、どれも”専用の相談相手”を作る機能です。こうやって指示文を残しておく考え方は、以前書いた「AIでうまくいった作業を来年も使える手順にする」の話とつながっています。
一度登録してしまえば、毎回貼り付けなくても、同じトーンで資料を作ってくれる壁打ち相手になります。
ここから先は、その壁打ち相手に素案を渡しながら読み進めてもらうと、話がより実感を持って伝わるはずです。
まず素案をAIに渡して、わかりにくいところを一つずつ直してもらいます。
“ここが伝わりにくい”、”この順番だと迷う”——そう感じた場所を言葉にして伝えると、その部分だけを直してくれます。
全部を一から作り直す必要はありません。
一発で完成させようとしなかったことが、結果的に一番早い道でした。以前の記事「「これ、ツールにできないかな」と思ったら、その日のうちに形にする方法」で書いた「完璧を待たず会話で育てる」のと、根っこは同じです。
②配色も図解も画像も、「言葉」で直せる
HTMLが気に入った一番の理由は、ここにあります。
水色に着色したい、概念図としてまとめたい、写真を挿入したい——そう伝えるだけで、チャットベースで形になっていきます。
パワーポイントで一からレイアウトを組む作業とは、感覚がまったく違いました。
“生地から仕立てる”ような感覚で、資料の見た目を自分の意図どおりに近づけていけます。
デザインの知識がなくても、”どう見せたいか”さえ言葉にできれば形になる。
これがHTMLとAIの組み合わせの一番の魅力だと感じています。
もう一つ、AIでスライドを作ると、どうしてもAIっぽさが出てしまうことがあります。
最近はClaudeのデザイン機能で作ればそこそこのクオリティになりますが、以前はあからさまに「AIが作った感じ」にしかなりませんでした。
自分でHTMLを描き直すようになってからは、配色も図解の形も自分の意図で選べるので、そのAIっぽさから抜け出せた感覚があります。
③配る相手のことを考えて、最後まで手を入れられた
資料は、自分のためだけではなく、誰かに渡すものです。
画面で見る人もいれば、印刷して手元に置きたい人もいます。
そう考えて、印刷用のPDFも別に用意しました。
見やすさにこだわった分だけ、”渡した後の相手の反応”まで想像できるようになったのは、思わぬ収穫でした。
※あくまで自分の業務で使う資料の範囲での工夫です。
文章だけでは伝わらなかった研修資料は、HTMLで描き直したことで、はじめて「伝わる」資料になりました。
ただし、これはあくまで、配って読んでもらう資料の話です。
人前で発表するプレゼンなら、話は別だと思っています。
パワーポイントでしっかり作り込むか、AIで作った土台をCanvaなどで自分の手で仕上げる方が、今のところ良い気がしています。
読んでもらう資料はHTML、見せて話すプレゼンはパワポやCanva——そんな使い分けに落ち着きました。
資料づくりで迷っている方は、まず読んでもらう資料からHTMLに描き直してみましょう！
コメント