doc-skills / slide-html

slide-html で作る
スライドの見本

部品と決まりを、ひととおり見る

y-ohno2026年11月5日

このスライドで話す2つのこと

    1枚に1つのメッセージ

    スライドの見出しには、
    結論を書く。

    見出しだけを読んでも、話の筋が追えるようにするため。

    1枚の組み立て

    見出しは結論、本文はその根拠を3つまで

    • 見出しは、言い切る文にする「現状」ではなく「問い合わせの半分は設定の誤りだった」
    • 根拠は3つまでにする4つ以上あるときは、スライドを分ける
    • 一文は短く、40字ほどまでにする読ませるのではなく、見てわかるようにする

    出典: How to Design Presentation（社内のガイド）

    結論を書いた見出しのほうが伝わる

    名前だけの見出し

    調査の結果

    何がわかったのかは、本文を読むまでわからない。

    推奨　結論を書いた見出し

    問い合わせの半分は、設定の誤りだった

    見出しを読んだ時点で、話の要点が伝わる。本文は根拠を示すだけでよい。

    数字は大きく出し、何の数かを必ず添える

    図とコードで見せる

    スライドは4つの手順で作る

    1. 構成

      見出しだけを並べ、話の筋を決める

    2. 本文

      writing の決まりで、短い文を書く

    3. HTML

      型を選んで、見本に流し込む

    4. 確認

      全部のスライドを画像にして見る

    コードは、見てほしい行を順に強調する

    <section class="slide">
  <h2>結論を書いた見出し</h2>
  <ul class="points">
    <li data-step="1">根拠 1</li>
    <li data-step="2">根拠 2</li>
    <li data-step="3">根拠 3</li>
  </ul>
</section>

    見出しは1枚に1つ

    data-step の番号の順に、押すたびに出る

    画面は、ブラウザの枠に入れて見せる

    example.com/settings
    通知をメールで受け取る
    週ごとのまとめを送る
    図1　枠の中は画像（img）でも、その場で動く HTML でもよい

    案を同じ観点で比べるときは、表にする

    作り方見た目をそろえる手間手直しのしやすさ1枚にかかる時間
    slide-html推奨型を選ぶだけ文字を書き換えるだけ約2分
    手で PowerPoint毎回そろえる位置がずれやすい約10分

    時間は見本のための仮の値

    まとめ

    見出しに結論を書き、
    1枚で1つだけ伝える