あとで直しやすい HTML スライドを AI に作らせるコツ

1. 1 つの HTML ファイルにまとめてもらう

CSS や画像が別のファイルに分かれていると、チャットの画面から写すときに取りこぼしやすく、HTML だけを開くと見た目が欠ける。メールやチャットで人に渡すときも、フォルダごと渡さなければならない。1 つのファイルにまとまっていれば、どこで開いても同じ見た目になる。

頼むときは「CSS は <style> に書いて、1 つの HTML ファイルにまとめて」と書き添える。フォントやライブラリをインターネット上の配布元（CDN）から読み込む形は、1 つのファイルのままでも動くが、オフラインの環境では見た目が変わる。

2. スライドの区切りをはっきりさせる

「どこからどこまでが 1 枚か」が HTML の構造から読み取れると、編集するツールでページの並べ替えや複製ができ、印刷でもスライドごとに改ページできる。区切りがあいまいだと、資料全体が 1 枚の長いページとして扱われる。

いちばん分かりやすいのは、1 枚のスライドを 1 つの <section class="slide"> にして、body の直下に順に並べる形。chamfer は、reveal.js の section、class に slide や page を持つ要素の並び、body の直下に並んだ section や article、印刷の改ページの指定などを手がかりに区切りを見つける。どの手がかりで区切ったかは、何も選んでいないときの右の欄に出る。

スライドに名前を付けたいときは、data-label="03 まとめ" のような属性を付けてもらうと、chamfer のページの一覧にその名前が出る。

3. スライドの大きさを固定する

画面の大きさに合わせて伸び縮みする作り（100vw・100vh）は、ブラウザで見る分には便利だが、PDF にすると用紙の大きさが決まらず、1 枚が 2 ページに割れることがある。見る画面によって文字の折り返しも変わる。

「各スライドは幅 1280px・高さ 720px（16:9）に固定して」と頼んでおけば、どの画面でも同じ位置で折り返す。chamfer はこの幅と高さを読んで、PDF の用紙をスライドと同じ大きさにし、発表のときは画面に合わせて拡大・縮小する。寸法が書かれていない資料も用紙に合わせる手当てはしているが、元の大きさが決まっている方が、画面・PDF・発表のどこでも同じ見た目になる。

あわせて「中身がはみ出さないように」と書いておく。枠からはみ出した文字は、PDF にすると次のページに出てしまう。

4. 文字は画像にせず、文字のまま書いてもらう

見出しや図の中の文字が画像になっていると、1 文字直すのにも画像を作り直すことになる。HTML の文字であれば、chamfer ではクリックしてその場で書き換えられるし、PDF にしても文字のまま残るので、選択や検索ができる。

同じ理由で、表は <table>、箇条書きは <ul> のように、中身に合ったタグで書いてもらうと直しやすい。図は画像ではなく、HTML と CSS か SVG で描いてもらうと、色や大きさをあとから変えられる。

5. 動きを JavaScript に頼りすぎない

クリックで切り替わるタブや、スライドを送る仕組みを JavaScript で作ってもらうと、編集するツールや印刷では正しく表示されないことがある。chamfer は、知らない HTML が勝手に動かないよう、編集している間は HTML の中のスクリプトを止める（書き出すときには元に戻す）。

見せ方の工夫は CSS で書いてもらうと、どこで開いても同じ見た目になる。スライドを送る仕組みは、あとから chamfer の発表モードや、発表用の書き出しで付けられる。要素が 1 つずつ出てくるアニメーション（フェード・上下左右からのスライド・ズーム）も、chamfer で要素ごとに付けて順番を決められ、書き出した HTML でもクリックごとに再生される。

6. 骨格は AI に、仕上げは手で

内容や構成を変えるのは AI が得意で、言い回しや位置の細かい調整は手で直す方が早い。順番は、AI に構成と骨格を作らせる → 内容の変更は AI とのやりとりで済ませる → 最後に文字・位置・色・画像を手で整える、がいちばん崩れにくい。

手で直したあとに、もう一度 AI に大きな変更を頼みたくなったら、元の会話の続きで頼むのではなく、直したファイルを渡して「この HTML の〇〇だけを変えて、ほかは変えないで」と頼む。元の会話の AI は、手で直したことを知らない。

そのまま使える頼み方の例

上の条件をまとめると、たとえば次のようになる。内容の欄だけを書き換えて使う。

次の内容で、発表用のスライドを HTML で作ってください。

条件:
- CSS はすべて <style> に書き、1 つの HTML ファイルにまとめる
- 1 枚のスライドを 1 つの <section class="slide"> にして、body の直下に順に並べる
- 各スライドは幅 1280px・高さ 720px に固定し、中身がはみ出さないようにする
- 見出しや本文は画像にせず、HTML の文字で書く
- JavaScript は使わない（スライドを送る仕組みも要らない）
- 図は HTML と CSS か SVG で描き、写真は使わない（あとで差し替える）

内容:
（ここに、伝えたいこと・枚数・誰に見せるかを書く）

PDF にする予定があって、chamfer を使わずにブラウザから直接印刷したいなら、条件に次の 1 行を足す。

- 印刷したときに 1 枚 1 ページになるよう、@page の size と break-after を入れ、印刷のときは body とスライドの margin を 0 にする

できあがった HTML の仕上げは、作り直さずに直す方法、PDF にするときは 1 枚 1 ページの PDF にする方法 にまとめてある。

すでに作ってしまった資料は

条件を付けずに作った資料でも、chamfer で開けば多くはそのまま直せる。区切りが見つからない資料は全体が 1 ページになり、寸法の無い資料は PDF の用紙に合わせて整える。うまく開けないときは、その資料を AI に渡して、上の条件に沿って書き直してもらうのが早い。

• CSS や画像が別のファイルになっている → フォルダごと開く
• スライドが 1 ページにまとまってしまう → 「1 枚を 1 つの section に」と頼み直す
• PDF で 1 枚が 2 ページに割れる → 大きさを固定して、はみ出しを直す