L36：HTML基礎（構造・見出し・導線）＋HTML構造設計メモ（TRAINING ONLY／流用禁止）

【重要：本レッスンは訓練専用】

• このレッスンで作る「HTML構造・見出し設計・導線設計・注意書きテンプレ・チェックリスト・雛形コード等」は訓練専用です。通常業務でそのまま使用することは禁止します。
• 就業中に本番のLP／告知ページ／EC周辺ページを作る場合は、訓練成果物をコピペ流用せず、現場条件・権利条件・表記ルールを取り直し、別途レビュー／承認の手順で新規に作成してください。
• 実データ禁止：実在のIP名、実商品名、実価格、実施日程、実取引先名、未公開企画、個人情報は入力しません（ダミーのみ）。
• 訓練日は通常業務をしない（本番ページ更新、実入稿、社外送付、実運用の告知投稿などは実施しない）。

本レッスンでは、HTMLを「見た目を作る技術」ではなく、構造（見出し・意味・導線）を設計する技術として扱います。
狙いは、誰が見ても・誰が引き継いでも、情報が抜けず／誤認が起きにくく／更新しやすいページを作ることです（訓練用ダミー）。
作るのは「完成した本番ページ」ではなく、HTML構造設計メモ → ダミー文面 → ダミーHTML雛形 → チェック（差戻し基準）までを含む運用仕様です。

このページの使い方

1レッスン＝1LP（1ページ）です。上から順に当日の時間割に沿って進めてください。
各項目の冒頭に EC事業部／文房具カフェ事業部・準備室 の実施時間を併記しています。
※本レッスンはダミーのみで行います（実データ・個人情報・未公開情報・契約条件の具体は入力しない）。

このレッスンの狙い（到達状態）

• HTMLの役割を「装飾」ではなく、構造（意味）として説明できる
• 見出し（h1/h2/h3）の階層を崩さず、情報の親子関係を設計できる
• ページ導線（入口→理解→判断→次アクション）をブロック分解して設計できる
• 注意書き（不明・未確定・条件）を、推測で埋めず誤認防止の型として書ける
• チェックリストと品質ゲート（OK/差戻し/要相談/NG）で、止める基準を置ける

受講ルール（共通）

• 実データ禁止：実在のIP名、実商品名、実価格、実施日程、実取引先名、未公開企画、個人情報は入力しない（ダミーのみ）
• 通常業務をしない：訓練日は講義・演習・レビュー・理解度確認に専念する（実務はしない）
• 流用禁止：訓練で作った雛形・文面・HTMLコード・チェックをそのまま通常業務で使用しない（就業中に新規作成＋検収）
• 命令系統の具体化をしない：役割は「作成担当」「レビュー担当」「承認担当」など抽象ロールで表現する
• 相互レビュー2件以上：前日までの他者成果物に2件以上コメント（本ページのレビュー観点を使用）
• 不明は推測で埋めない：未確定条件は「要確認」として明記し、重大なら「要相談」に倒す

今日の目標（できる範囲でOK）

受講者の理解度・進捗にはばらつきがある前提で、以下は推奨の目標です。全部を完成させる必要はありません。今日いちばん伸ばしたいところを選んで進めてください。

• 目標A（基礎）：HTML構造設計メモ（ページ構成＋見出し）を作る
• 目標B（標準）：導線マップ（入口→次アクション）＋注意書きブロックを作る
• 目標C（発展）：ダミーHTML雛形（セマンティック）を作り、チェックで差戻し→修正を1回回す
• 目標D（運用接続）：品質ゲート＋例外表＋記録テンプレ＋Handoff Memo（本番で新規作成するための不足情報・検収観点）

基本：HTMLは「見出し」と「意味」で読む（＝構造で迷わせない）

1) 見出しは「目次」＝ページの骨格

• h1：ページの主題（1つ）
• h2：大見出し（同列のブロック）
• h3：h2の下位（詳細・手順・FAQなど）
• 禁止：h1の次がh4、h2を飛ばす、見出しを太字代わりに使う

2) 導線は「読む順番」＝判断の順番

• 入口：何のページ？（誤認を止める）
• 理解：何が分かる？（要点→詳細）
• 判断：条件は？（未確定は未確定のまま）
• 次アクション：何をすればいい？（ダミーの次アクション）

3) 注意書きは「免責」ではなく「誤認防止」

• 確定していない条件は「要確認」で明記（推測で埋めない）
• 強い表現（確約・断定・誇大）を避ける
• 権利・金銭・契約・対外発信に触れそうなら要相談（停止条件）

標準テンプレ（TRAINING ONLY）

A) TRN-WEB36 Spec（v1.0：訓練用）

【TRN-WEB36 Spec（v1.0）：HTML基礎（構造・見出し・導線）＋構造設計メモ（訓練専用／流用禁止）】

Spec-ID：TRN-WEB36
版：v1.0
状態：DRAFT / REVIEW / FINAL（訓練内の状態）

目的：

* ページを「見出し構造＋導線＋注意書き＋チェック」で設計し、誤認・抜け漏れ・更新不能を減らす。

範囲（やる/やらない）：

* やる：ページ構造設計メモ、導線マップ、注意書きブロック、ダミーHTML雛形、品質チェック、品質ゲート、例外、ログ、Handoff Memo
* やらない：実案件ページの制作・更新、社外公開、実フォーム/実購入導線の実装

前提（安全）：

* 実データ禁止（実IP名/実商品名/実価格/実日程/実取引先/個人情報/未公開企画）
* 不明は推測で埋めない（要確認／要相談）
* 訓練成果物は通常業務へ流用しない（コピペ禁止）

役割（抽象ロール）：

* 作成担当：
* レビュー担当：
* 承認担当：

入力（Input：ダミー）：

* ダミーのページ種別（告知LP/商品説明/FAQ/店舗案内 など）
* ダミーの条件（未確定を含めてよい）
* ダミーの素材ID（あれば：Asset-IDのみ。実画像は扱わない）

出力（Output：訓練用）：

* HTML構造設計メモ（ページ構成・見出し・導線・注意書き）
* ダミーHTML雛形（セマンティック：header/main/section/footer）
* 品質チェックリスト＋品質ゲート（OK/差戻し/要相談/NG）
* 例外表＋記録テンプレ＋Handoff Memo

ダミー課題（どれか1つ選ぶ）

※すべて訓練用。実在情報は禁止。CTA（次アクション）もダミー。

HTML構造設計メモ（ページ構成・見出し・導線）

1) ページ構造（ブロック設計：テンプレ）

2) 導線マップ（入口→次アクション：テンプレ）

3) 注意書きブロック（誤認防止：テンプレ）

【L36 注意書き（訓練用テンプレ）】
- 本ページは教育訓練用のダミーです（実案件ではありません）。
- 記載の条件は仮であり、確定していない点は「要確認」として扱います。
- 不明点は推測で補完せず、確認が必要な項目として整理します。
- 権利・契約・金銭・対外発信に関わる判断が必要な場合は「要相談」として作業を停止します。

ダミーHTML雛形（セマンティック：最小）

※このコードは訓練用の雛形です。実案件へ流用しない。

<!-- TRN-WEB36：ダミーHTML雛形（訓練専用／流用禁止） -->

<header>
  <nav aria-label="ページ内ナビ（ダミー）">
    <ul>
      <li><a href="#sec-overview">概要</a></li>
      <li><a href="#sec-details">内容</a></li>
      <li><a href="#sec-conditions">条件</a></li>
      <li><a href="#sec-notes">注意書き</a></li>
      <li><a href="#sec-faq">FAQ</a></li>
      <li><a href="#sec-next">次アクション</a></li>
    </ul>
  </nav>

  <h1>（ダミー）ページタイトル：何のページかを一言で</h1>
  <p>（ダミー）サブコピー：対象者と価値を短く。確約・断定はしない。</p>
</header>

<main>

  <section id="sec-overview">
    <h2>概要</h2>
    <p>これは何の案内か（ダミー）。対象外があればここで明記。</p>
  </section>

  <section id="sec-details">
    <h2>内容</h2>

    <h3>ポイント（要点）</h3>
    <ul>
      <li>要点1（ダミー）</li>
      <li>要点2（ダミー）</li>
      <li>要点3（ダミー）</li>
    </ul>

    <h3>詳細</h3>
    <p>詳細説明（ダミー）。未確定は「要確認」。</p>
  </section>

  <section id="sec-conditions">
    <h2>条件（ダミー）</h2>
    <table>
      <thead>
        <tr>
          <th>項目</th>
          <th>内容（ダミー）</th>
          <th>状態</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>期間</td>
          <td>2026/XX/XX〜2026/XX/XX</td>
          <td>要確認</td>
        </tr>
        <tr>
          <td>対象</td>
          <td>対象範囲（ダミー）／対象外（ダミー）</td>
          <td>要確認</td>
        </tr>
        <tr>
          <td>費用</td>
          <td>未確定（推測で埋めない）</td>
          <td>要相談</td>
        </tr>
      </tbody>
    </table>
  </section>

  <section id="sec-notes">
    <h2>注意書き（誤認防止）</h2>
    <ul>
      <li>本ページは教育訓練用のダミーです（実案件ではありません）。</li>
      <li>未確定条件は「要確認」として扱い、推測で補完しません。</li>
      <li>権利・契約・金銭・対外発信に関わる判断が必要な場合は「要相談」として作業を停止します。</li>
    </ul>
  </section>

  <section id="sec-faq">
    <h2>FAQ（ダミー）</h2>

    <h3>Q1：よくある質問（ダミー）</h3>
    <p>A：回答（ダミー）。断定せず、不明は要確認へ。</p>

    <h3>Q2：例外時は？（ダミー）</h3>
    <p>A：要相談条件に該当する場合は作業を停止する旨を書く。</p>
  </section>

  <section id="sec-next">
    <h2>次アクション（ダミー）</h2>
    <p>次に何をするかを1つに絞る（ダミー）。個人情報の取得はしない。</p>
    <ul>
      <li><a href="#">（ダミー）詳細確認を依頼する</a></li>
      <li><a href="#">（ダミー）要相談として相談する</a></li>
    </ul>
  </section>

</main>

<footer>
  <p>（訓練用）作成日：2026/XX/XX　版：v0.1　状態：DRAFT</p>
</footer>

品質チェックリスト（HTML構造・導線・誤認防止）

品質ゲート（OK/差戻し/要相談/NG）

例外表（想定外を想定内にする）

記録テンプレ（項目定義のみ：v0.1）

【TRN-WEB36 記録テンプレ（v0.1：訓練用）】
記録ID：
日付：
Spec-ID・版：
担当（抽象）：
ダミー課題ID（TRN-36A/B/C）：

今日進めた範囲（構造設計メモ/導線/注意書き/HTML雛形/チェック/品質ゲート/例外/Handoff Memo）：
判定（OK/差戻し/要相談/NG）：
差戻し理由（具体）：
要相談理由（あれば）：

改善ログ（何を/なぜ/どう直す）：
次アクション：

Handoff Memo（本番で“新規に作り直す”ための移行メモ：訓練用）

【TRN-WEB36 Handoff Memo（v1.0：訓練用）】
目的：
- 就業中に本番ページを“新規に”作成するための不足情報・検収観点の整理（訓練成果物の流用は禁止）。

本番で追加収集が必要な情報（不足リスト）：

* 対象ページの目的（KPI/読了後にしてほしい行動）：
* 実条件（価格/日程/在庫/提供範囲/対象外）と確定状況：
* 権利条件（IP/画像/ロゴ/クレジット/監修要否）：
* 表現ルール（禁止表現、注意書きの必須項目）：
* 公開フロー（レビュー/承認/更新/差戻し）：
* 相談ルート（要相談の判断ポイント）：

検収観点（レビューで見る点）：

* 見出し構造が正しい（h1は1つ、階層が飛ばない）
* 未確定が要確認として明記され、推測で固定していない
* 誤認防止（確約/断定/誇大）がない
* 条件・注意書き・次アクションが揃い、導線が迷わない
* 権利/契約/金銭/対外発信は要相談で止められる

ChatGPTに投げるプロンプト（コピペ用：TRAINING ONLY）

1) HTML構造設計メモ（見出し＋導線）を作る

【L36 プロンプト①：HTML構造設計メモ（訓練用）】

前提（安全）：

* 教育訓練用ダミー。実在情報（IP名/商品名/価格/日程/取引先/個人情報/未公開企画）は入力しない。
* 不明は推測で埋めない（要確認／要相談）。
* 出力は訓練専用（通常業務へ流用しない）。

入力：

* ダミー課題ID（TRN-36A/B/C）
* 想定入口（SNS/検索/一覧：ダミー）
* 次アクション（ダミー：申込/問い合わせ/相談のいずれか）

出力形式（必須）：

1. ページ構成（h1/h2/h3の見出し構造）
2. 各ブロックの要点（1〜3行）
3. 条件表に入れるべき項目（最低8）
4. 注意書き（誤認防止）の型

2) ダミー文面（マイクロコピー）を作る

【L36 プロンプト②：ダミー文面（訓練用）】

前提：

* 確約・断定・誇大を避ける。
* 未確定は「要確認」として書く（推測で埋めない）。

入力：

* 構造設計メモ（プロンプト①）

出力形式（必須）：

* 各ブロックの本文（短め）
* 注意書き（箇条書き）
* FAQ（5問：要相談への誘導を1つ含む）

3) ダミーHTML雛形を生成する（セマンティック）

【L36 プロンプト③：ダミーHTML雛形（訓練用）】

前提：

* セマンティック：header/main/section/footerを使う。
* navにaria-labelを付ける。
* 見出し階層を守る（h1は1つ）。

入力：

* 構造設計メモ
* ダミー文面

出力形式（必須）：

* HTMLコードのみ（コメントに「訓練専用／流用禁止」を入れる）

4) 構造・誤認防止・導線の自己評価（差戻し観点）

【L36 プロンプト④：自己評価（訓練用）】

入力：

* あなたのHTML（雛形）
* 構造設計メモ

出力：

* 見出し階層の問題点トップ3
* 誤認防止（確約/断定/未確定）で危ない点トップ3
* 導線が迷う点トップ3（改善案つき）
* v+0.1の改善点（3つ以内）＋改善ログ

相互レビュー観点（L36専用）

• 訓練専用の担保：TRAINING ONLY／流用禁止が明記され、実在情報が混入していないか
• 見出し構造：h1が1つで、h2/h3の階層が飛んでいないか
• 導線：入口→理解→条件→注意→次アクションの順で迷わないか
• 未確定の扱い：要確認が残っていて、推測で埋まっていないか
• 誤認防止：確約・断定・誇大がないか／要相談条件があるか

レビューコメントテンプレ（コピペ用）

【L36 相互レビューコメント】
対象（構造設計メモ/HTML雛形/チェック/ログ）：
版：

1. 良い点（1つ）：

*

2. 訓練専用の担保（流用禁止・実在情報なし）はOK？

* OK / 要改善
  気になる点（1つ）：
*

3. 見出し階層は正しい？

* OK / 要改善
  崩れている箇所（1つ）：
*

4. 導線は迷わない？

* OK / 要改善
  迷う箇所（1つ）：
*

5. 未確定の扱い（要確認）と誤認防止は十分？

* OK / 要改善
  危ない表現（1つ）：
*

6. 次の一手（v+0.1で直すなら）：
   -

本日の流れ（タイムライン）

目次（クリックで移動）

1. 出席・当日選択カリキュラムの内容確認
2. 時間差相互評価（2件以上コメント）
3. 休憩
4. 自分への受領レビュー確認・改善方針メモ
5. L36 レクチャー本編（講師説明・質疑込み）
6. 昼休憩
7. 個人演習①：構造設計メモ→導線→注意書き（目標A/B）
8. 休憩
9. 個人演習②：HTML雛形→チェック→差戻し→修正（目標C/D）
10. 休憩
11. 復習：共有できる形に整形（できた範囲でOK）
12. 質問・コメント・感想の提出（指定スレッド）

1) 出席・当日選択カリキュラムの内容確認

【実施時間】

この時間にやること

1. 今日の目標（A/B/C/D）を選ぶ
2. ダミー課題（TRN-36A/B/C）を1つ選ぶ
3. 自分の注意点を1行で書く（例：見出し階層を崩さない／未確定は要確認／確約しない 等）

セルフ棚卸し（コピペ用）

【L36 セルフ棚卸し】
1) 今日の目標（A/B/C/D）：
-

2. ダミー課題ID（TRN-36A/B/C）：

*

3. 自分が弱い点（1つ）：
   -（例：構造が散る／注意書きが弱い／導線が迷う／未確定を断定しがち）

4. 今日の目標（1行）：
   -

2) 時間差相互評価（前日までの他者成果物に2件以上コメント）

【実施時間】

この時間にやること

• 前日までの他者成果物を2件選び、L36レビュー観点でコメントする
• 「文章の良さ」ではなく、構造・導線・誤認防止・止める基準を見る

3) 休憩

【実施時間】

休憩：学習作業なし

4) 自分への受領レビュー確認・改善方針メモ（講師レビュー含む）

【実施時間】

改善方針メモ（コピペ用）

【L36 改善方針メモ】
受領した指摘の要点（最大3つ）：
1)
2)
3)

## 直す理由（構造崩れ／導線不明／注意書き不足／未確定の断定 等）：

直し方（どこを改善する？）：

* 構造設計メモ（見出し）：
* 導線マップ：
* 注意書き：
* HTML雛形：
* チェック/品質ゲート：
* 例外/ログ：
* Handoff Memo：

今日の最優先ルール（1行）：
-

5) 当日選択カリキュラム実施：L36レクチャー本編（講師説明・質疑込み）

【実施時間】

ここからが「読む／聞く」パート

講師の口頭説明・質疑応答を挟みながら進めます。
午後は「構造設計メモ→導線→注意書き→HTML雛形→チェック→差戻し→修正」で、ダミーページを運用仕様として整えます（訓練用）。
※訓練成果物は流用禁止。本番用は就業中に新規作成・検収します。

5-1. 今日の結論

• HTMLは構造（意味）が最優先（見出しは目次）
• 導線は「読む順番」＝判断の順番
• 未確定は未確定のまま（要確認／要相談）
• 注意書きは免責ではなく誤認防止。止める基準を置く

6) 昼休憩

【実施時間】

昼休憩：学習作業なし

7) 個人演習①：構造設計メモ→導線→注意書き（目標A/B）

【実施時間】

演習①のやり方（推奨）

1. プロンプト①で構造設計メモ（見出し＋条件表＋注意書き）を作る
2. 導線マップを作る（入口→次アクション）
3. 注意書きを「誤認防止の型」で整える

提出用フォーマット（演習①：コピペ用／できた範囲でOK）

【L36 演習① 提出（できた範囲でOK）】
ダミー課題ID：
今日の目標（A/B）：

## (1) 構造設計メモ（見出し＋ブロック）：

## (2) 導線マップ：

(3) 注意書き（誤認防止）：
-

8) 休憩

【実施時間】

休憩：学習作業なし

9) 個人演習②：HTML雛形→チェック→差戻し→修正（目標C/D）

【実施時間】

演習②のやり方（推奨）

1. プロンプト②でダミー文面を作る（確約しない／要確認を残す）
2. プロンプト③でHTML雛形に落とす（セマンティック＋見出し階層）
3. 品質チェックで差戻し→修正（v+0.1）を1回回す
4. 可能なら品質ゲート／例外表／ログ／Handoff Memoまで作る

提出用フォーマット（演習②：コピペ用／できた範囲でOK）

【L36 演習② 提出（できた範囲でOK）】
今日の目標（C/D）：

## (1) HTML雛形（訓練用）：

## (2) 品質チェック結果（OK/差戻し/要相談/NG）：

## (3) v+0.1 改善ログ（何を/なぜ/どう直した）：

(4) Handoff Memo（不足情報・検収観点）：
-

10) 休憩

【実施時間】

休憩：学習作業なし

11) 復習：共有できる形に整形（できた範囲でOK）

【実施時間】

最終チェック（コピペ用）

【L36 最終チェック（できた範囲でOK）】
- TRAINING ONLY／流用禁止が明記されている
- 実在情報（IP名/商品名/価格/日程/取引先/個人情報）が混入していない（ダミーのみ）
- h1は1つ、見出し階層（h2/h3）が飛んでいない
- 入口→理解→条件→注意→次アクションの導線が迷わない
- 未確定条件が「要確認」として残っている（推測で埋めていない）
- 確約・断定・誇大がない
- 要相談（停止条件）が置けている（権利/契約/金銭/対外発信）

12) 講師への質問・コメント・感想の提出（指定スレッド）

【実施時間】

提出先（参考）

EC事業部・文房具カフェ事業部：ChatWork の指定スレッド／準備室：Slack の指定スレッド

提出テンプレ（コピペ用）

【L36 提出（本人レポート）】

1. 今日の学習内容（要約：3行）

*
*
*

2. 今日進めたこと（TRAINING ONLY：流用禁止）

* 今日の目標（A/B/C/D）：
* ダミー課題ID（TRN-36A/B/C）：
* 構造設計メモ：作成/更新（直した点）：
* 導線マップ：作成/更新：
* 注意書き：作成/更新：
* HTML雛形：作成/更新：
* チェック/品質ゲート：作成/更新：
* 例外/ログ：作成/更新：
* Handoff Memo：作成/更新：

3. 一番工夫した点（1つ）
   -（例：見出し階層を守った／未確定を要確認に残した／注意書きを誤認防止の型にした 等）
   理由：

*

4. 次に改善したい点（1つ）

*

## 理由：

5. 質問（最低1つ）
   -

ページ先頭へ戻る