L40：サイト制作SOP（要件→構造→実装→検収）＋更新・版管理（TRAINING ONLY／流用禁止）

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

• このレッスンで作る「要件定義」「構造設計」「SOP」「チェックリスト」「リリースノート」「版管理ルール」「サンプルHTML/JS/CSS」等は訓練専用です。通常業務でそのまま使用することは禁止します。
• 実サイト（本番）を更新しない：WordPress / 本番サーバー / 本番リポジトリ / 本番計測タグ等に触れません（訓練用ダミー環境・ローカルファイルで演習）。
• 実データ・個人情報・未公開情報は扱いません（ダミーのみ）。
• 本番で必要になった場合は、訓練成果物をコピペせず、情報を取り直し、別途の検収（レビュー/承認）を経て新規作成してください。

本レッスンでは、サイト制作を「コードを書く作業」ではなく、要件→構造→実装→検収→版管理の一連を再現可能な運用仕様（SOP）として揃える練習をします。
目的は「速く作る」ではなく、手戻りを減らす（要件・検収・更新のブレをなくす）ことです。

このページの使い方

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

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

• サイト制作を「要件→構造→実装→検収」で説明できる
• 更新作業を版管理（vX.Y）＋状態（DRAFT/REVIEW/FINAL/DEPRECATED）で運用できる
• 検収（QA）をチェックリスト＋品質ゲートで差戻し可能にできる
• 「不明（UNKNOWN）」を推測で埋めず、要確認として止められる
• 訓練と通常業務が混ざらないよう、Handoff Memo（本番で新規作成すべき点）を書ける

受講ルール（共通）

• 実データ禁止：実URL、実ページID、実顧客情報、実注文・実売上、実ログイン情報、実社内共有リンク、未公開企画などは禁止
• 訓練成果物の流用禁止：訓練で作った要件・SOP・コード・チェックリストを通常業務へコピペしない
• 通常業務をしない：訓練日は講義・演習・レビュー・理解度確認に専念する
• 実務は実施しない：受注処理、顧客対応、発注、権利元交渉などの実務は行わない
• 命令系統の具体化をしない：役割は「実務担当」「レビュー担当」「承認担当」など抽象ロールで表現する
• 相互レビュー2件以上：前日までの他者成果物に2件以上コメント（本ページのレビュー観点を使用）

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

受講者のレベル差があるため、強制の提出物は設けません。今日の目標を選び、できた範囲を「今日進めたこと」に記録してください。

1. （A）TRN-WEB40 Spec（v0.1）：要件（目的/対象/範囲/完了条件/UNKNOWN/リスク）を固定
2. （B）サイト制作SOP（Step表：v0.1）：入力/出力/チェックが揃った7〜15ステップ
3. （C）検収チェックリスト＋品質ゲート（v1.0）：OK/差戻し/要相談で止められる
4. （D）更新・版管理セット（v1.0）：変更ログ＋リリースノート＋ロールバック案（訓練用）
5. （E）Handoff Memo（v1.0）：本番で新規作成すべき点（流用防止）

結論：サイト制作は「作る」より先に「揃える」

よくある事故（原因：要件・検収・更新が揃ってない）

• 要件が曖昧で、レビューの度に「期待値」が変わる
• ページ構造が先に決まっておらず、実装が行き当たりばったりになる
• 検収が「雰囲気」になり、差戻しが曖昧で手戻りが増える
• 版管理がなく、どれが最新か分からない／古い版が参照される

本日の型（最短の流れ）

1. 要件（Spec）：目的・範囲・完了条件・UNKNOWN・禁止事項を固定
2. 構造（IA）：見出し・導線・状態（UI）・例外を固定
3. 実装（ダミー）：HTML/CSS/JSはサンプルでOK（本番には使わない）
4. 検収（QA）：チェックリストでOK/差戻し/要相談を判定
5. 更新・版管理：変更ログ＋リリースノート＋ロールバック案を作る（訓練用）

標準テンプレ（TRAINING ONLY）

A) TRN-WEB40 Spec（v0.1：要件定義）

【TRN-WEB40 Spec（v0.1）：サイト制作（訓練専用・流用禁止）】

Spec-ID：TRN-WEB40
版：v0.1
状態：DRAFT / REVIEW / FINAL（訓練内の状態。業務利用の状態ではない）

目的（1〜2行）：

* （例）ダミー告知ページを、要件→構造→実装→検収で再現可能に作る練習をする。

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

* やる：要件定義、構造設計（見出し/導線）、UI要件（状態/例外）、サンプル実装、検収、版管理（訓練用）
* やらない：実サイト更新、実CMS反映、実データ入力、実公開、実計測タグ投入

対象（ダミー）：

* ページ種別：LP / 告知 / 企画ページ（架空）
* 想定閲覧：PC/スマホ

前提（安全）：

* 実URL/実ページID/実アカウント/実顧客情報は禁止。
* 訓練成果物は通常業務に流用しない（コピペ禁止）。

ページ構造（骨子）：

* ファーストビュー（見出し/要点/CTA）
* 内容セクション（3〜5つ）
* よくある質問（任意）
* 注意書き（断定回避・不明の扱い）
* フッター（ダミー）

完了条件（Acceptance Criteria：箇条書き）：

* 目的に対する情報が不足なく揃っている（抜けがない）
* 導線（CTA）が1つ以上あり、クリック後の状態が定義されている（ダミー）
* 重要な注意書きがある（禁止表現なし）
* 検収チェックリストでOK判定が出る

UNKNOWN（要確認：推測で埋めない）：

* （例）掲載期間、価格、数量、権利表記、画像の権利、実運用での承認ルート

リスク（先に出す）：

* 誤認・誇大表現・権利表記漏れ・公開事故（訓練では公開しないが想定して止める）

成果物（訓練用）：

* Spec（v0.1）
* 構造設計メモ（見出し/導線/注意書き）
* サンプル実装（HTML/CSS/JS：任意）
* 検収チェックリスト＋品質ゲート判定
* 変更ログ＋リリースノート＋ロールバック案（任意）

B) 構造設計メモ（IA：v1.0）

【L40 構造設計メモ（v1.0：訓練用）】
ページ名（ダミー）：
目的：
対象ユーザー（ダミー）：

1. 見出し構造（h1→h2→h3）：

* h1：

  * h2：

    * h3：

2. 導線（CTA）：

* CTA1：文言／置き場所／クリック後の状態（完了・エラー・未入力など）
* CTA2（任意）：

3. 注意書き（断定回避／不明の分離）：

* 事実：
* 不明（UNKNOWN）：
* 次アクション：

4. UI状態（あれば）：

* 状態A：
* 状態B：
* 例外（入力不足/失敗/再試行）：

5. 検収観点（このページ固有）：

* 

C) サイト制作SOP（Step表：v0.1）

「迷ったら戻る場所」を作るために、入力/出力/チェックを必ず置きます。

D) 検収チェックリスト（v1.0）

【L40 検収チェックリスト（v1.0：訓練用）】

0. 訓練担保

* 実URL/実ページ/実アカウント情報が混入していない
* 実サイト更新・実公開の手順になっていない（訓練は公開しない）
* 訓練成果物を通常業務に流用しない旨が明記されている

1. 要件（Spec）

* 目的/範囲（やる・やらない）が明確
* 完了条件（Acceptance Criteria）が箇条書きである
* UNKNOWNが推測で埋められていない（要確認として残っている）

2. 構造（IA）

* h1/h2の流れが自然で、目的に沿う
* CTAがあり、クリック後の状態（成功/失敗/未入力）が定義されている
* 注意書きがあり、断定・誇大・誤認がない（ダミーでも守る）

3. 実装（任意）

* UI状態が想定どおりに遷移する（ダミー実装でもOK）
* リンク切れ（ダミーURL含む）がない
* スマホ/PCでレイアウトが破綻しない（最低限）

4. リスク

* 権利/法務/契約に触れる断定がない
* 不明は「要確認」になっている

5. 品質ゲート判定

* OK / 差戻し / 要相談（停止） を自己判定し、根拠を1行で書く

E) 品質ゲート（差戻し基準：v1.0）

F) 更新・版管理セット（v1.0：訓練用）

【L40 更新・版管理セット（v1.0：TRAINING ONLY）】

1. 変更ログ（Change Log）

* 対象：TRN-WEB40
* 版：v0.1 → v0.2
* 変更点（何を）：
* 変更理由（なぜ）：
* 変更方法（どう）：
* 影響範囲（どこに）：
* UNKNOWN（残る不明）：

2. リリースノート（Release Note：訓練用の想定）

* リリース名：
* 版：
* 変更概要（3行）：
* ユーザー影響（ダミー）：
* 既知の制限（UNKNOWN含む）：

3. ロールバック案（Rollback Note：訓練用の想定）

* 戻す条件（例：重大な表示崩れ、CTA不具合、注意書き欠落）：
* 戻す方法（概念でOK。実作業はしない）：
* 再発防止（チェック強化ポイント）：

G) 記録テンプレ（v1.0：項目定義のみ）

【L40 記録テンプレ（v1.0：TRAINING ONLY）】
記録ID：
日付：
Spec-ID：TRN-WEB40
版：v0.1 / v0.2 ...
状態：DRAFT / REVIEW / FINAL（訓練内）
作業者（抽象）：
レビュー担当（抽象）：

対象（ダミー）：

* ページ種別：
* 想定閲覧：

今日進めたこと（要点）：

* Spec：
* 構造：
* 実装（任意）：
* QA：
* 版管理（任意）：

品質ゲート判定（OK/差戻し/要相談）：
差戻し理由（どこ/どう/完了条件）：
要相談（停止）理由：

次アクション（要確認/保留の扱い）：

* 

H) Handoff Memo（本番で新規作成する論点：v1.0）

訓練成果物を流用しないために、本番で改めて作るものを明文化します（このメモ自体は訓練用）。

【L40 Handoff Memo（v1.0：本番で新規作成）】

本番で取り直す情報（訓練成果物はコピペしない）：

* 実URL/実ページID/実CMS手順（公開・更新の実フロー）
* 実掲載内容（期間/価格/権利表記/画像の権利/注意書き）
* 実承認ルート（誰が何を基準にOK/差戻しするか）
* 実計測・タグ・ログ（必要性と導入方法）
* 実リリース手順（バックアップ/復旧/告知）

本番で再設計すべき点：

* 検収チェックリストの本番版（対象ページ固有の観点）
* 版管理・公開状態の運用（どれが最新か迷わない）

リスク（流用禁止の理由）：

* 訓練成果物は前提・情報がダミーであり、本番判断に使えない

ダミー課題（1つ選べばOK）

TRN-WEB40A（易）：告知LP（静的）を作る

• 目的：Spec→構造→検収を揃える（実装は任意）
• 条件：注意書き（不明の分離）を必ず入れる
• 禁止：実URL、実イベント名、未公開情報

TRN-WEB40B（中）：UI状態があるセクションを設計する（JSは任意）

• 目的：CTAクリック後の状態（成功/失敗/未入力）を定義し、検収観点まで作る
• 条件：例外（入力不足/失敗）を先に決める

TRN-WEB40C（中）：v0.1→v0.2の更新（差戻し→修正→リリース想定）

• 目的：差戻しコメントから、変更ログ→リリースノート→ロールバック案まで残す
• 条件：差分（何を・なぜ・どう）を追えるように書く

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

1) Spec（要件定義）を作る

【L40 プロンプト①：TRN-WEB40 Spec（v0.1）】

前提（安全）：

* 教育訓練用のダミー。実URL/実ページID/実アカウント/実データは禁止。
* 訓練成果物は流用禁止。実サイト更新・実公開はしない。
* 不明（UNKNOWN）は推測で埋めない。要確認として残す。

入力：

* 選んだダミー課題（TRN-WEB40A/B/C）

出力形式（必須）：

* TRN-WEB40 Spec（v0.1）

  * 目的/範囲（やる・やらない）
  * ページ構造（骨子）
  * 完了条件（Acceptance Criteria）
  * UNKNOWN（要確認）
  * リスク（先に出す）

2) 構造設計メモ（見出し・導線・注意書き・UI状態）を作る

【L40 プロンプト②：構造設計メモ（v1.0）】

前提：

* 断定や誇大表現を避ける。
* 注意書きで「事実」と「不明（UNKNOWN）」を分離する。

入力：

* TRN-WEB40 Spec（v0.1）

出力形式：

* 構造設計メモ（見出し構造、CTA、注意書き、UI状態、検収観点）

3) サイト制作SOP（Step表）に落とす

【L40 プロンプト③：サイト制作SOP（Step表：v0.1）】

前提：

* 役割は抽象（実務担当/レビュー担当/承認担当）。
* 入力/出力/チェックが揃う7〜15ステップ。
* 実サイト更新・実公開はしない（訓練用）。

入力：

* Spec v0.1
* 構造設計メモ v1.0

出力形式（必須）：

* Step表（Step/作業/担当/入力/出力/チェック/所要目安/メモ）

4) 検収チェックリスト＋品質ゲートを作る

【L40 プロンプト④：検収（QA）＋品質ゲート】

前提：

* 検収は「採点可能」にする（曖昧語を避ける）。
* UNKNOWNは推測で埋めない（要確認で止める）。

入力：

* Spec
* 構造設計メモ
* SOP（Step表）

出力形式：

1. 検収チェックリスト（v1.0）
2. 品質ゲート（OK/差戻し/要相談）

5) 更新・版管理セット（変更ログ＋リリースノート＋ロールバック案）

【L40 プロンプト⑤：更新・版管理セット（訓練用）】

前提：

* v0.1 → v0.2 の差分が追えるように書く。
* 実リリースはしない（訓練用の想定）。

入力：

* 差戻しコメント（ダミー）
* 修正後の成果物

出力形式：

* 変更ログ（何を・なぜ・どう）
* リリースノート（訓練用）
* ロールバック案（訓練用）

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

• 訓練専用の担保：流用禁止が明記され、実在情報が混入していないか
• 要件：目的/範囲/完了条件/UNKNOWNが揃い、推測埋めがないか
• 構造：見出し・導線・注意書きが目的に沿うか
• 検収：チェックリストが採点可能で、差戻し指示が具体になるか
• 更新・版管理：差分が追え、古い版の扱いが分かるか

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

【L40 相互レビューコメント】
対象（Spec / 構造 / SOP / QA / 版管理 / Handoff Memo）：
版：

1. 良い点（1つ）：

*

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

* OK / 要改善
  懸念（あれば）：
*

3. 要件（完了条件/UNKNOWN）は揃ってる？

* OK / 要改善
  不足（1つ）：
*

4. 検収は採点可能？（差戻しが具体になる？）

* OK / 要改善
  曖昧な点（1つ）：
*

5. 更新・版管理（差分追跡）はできる？

* OK / 要改善
  改善案（1つ）：
*

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

* 

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

目次（クリックで移動）

1. 出席・当日選択カリキュラムの内容確認
2. 時間差相互評価（2件以上コメント）
3. 休憩
4. 自分への受領レビュー確認・改善方針メモ
5. L40 レクチャー本編（講師説明・質疑込み）
6. 昼休憩
7. 個人演習①：Spec→構造→SOP
8. 休憩
9. 個人演習②：検収（QA）→差戻し→版管理（任意）
10. 休憩
11. 復習：共有できる形に整形（できた範囲でOK）
12. 質問・コメント・感想の提出（指定スレッド）

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

【実施時間】

この時間にやること

1. 今日の目標（A〜E）を選ぶ（できた範囲でOK）
2. ダミー課題（TRN-WEB40A/B/C）を1つ選ぶ
3. 注意点を1行で書く（例：UNKNOWNは推測しない／検収は採点可能にする／流用禁止を守る）

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

【L40 セルフ棚卸し】
1) 今日選ぶダミー課題：
- TRN-WEB40A / TRN-WEB40B / TRN-WEB40C

2. 自分が弱い点（1つ）：

* （例：要件定義／構造設計／検収（QA）／版管理）

3. 今日の目標（1行）：

* 

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

【実施時間】

この時間にやること

• 前日までの他者成果物を2件選び、L40レビュー観点でコメントする
• 「見た目」より、要件・検収・版管理が揃っているかを見る

3) 休憩

【実施時間】

休憩：学習作業なし

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

【実施時間】

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

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

## 直す理由（要件不足／完了条件が曖昧／検収が採点不能／UNKNOWN推測 等）：

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

* Spec：
* 構造：
* SOP：
* QA：
* 版管理：
* Handoff Memo：

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

* 

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

【実施時間】

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

午後は、ダミー課題で「Spec→構造→SOP→QA→差戻し→版管理」を回します。
目的は“公開すること”ではなく、更新・検収・版管理を含めた運用仕様を作れることです。

6) 昼休憩

【実施時間】

昼休憩：学習作業なし

7) 個人演習①：Spec→構造→SOP

【実施時間】

演習①のやり方（必須）

1. TRN-WEB40 Spec（v0.1）を作る（目的/範囲/完了条件/UNKNOWN）
2. 構造設計メモ（v1.0）を作る（見出し/導線/注意書き/UI状態）
3. サイト制作SOP（Step表：v0.1）に落とす（入力/出力/チェック）

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

【L40 演習① 提出（できた範囲でOK）】
ダミー課題：
Spec-ID：TRN-WEB40

## (1) Spec（v0.1）：

## (2) 構造設計メモ（v1.0）：

(3) SOP（Step表：v0.1）：

* 

8) 休憩

【実施時間】

休憩：学習作業なし

9) 個人演習②：検収（QA）→差戻し→版管理（任意）

【実施時間】

演習②のやり方（必須）

1. 検収チェックリスト（v1.0）で自己判定（OK/差戻し/要相談）
2. 差戻しなら、v+0.1で修正し、差分（何を・なぜ・どう）を残す
3. 余力があれば、更新・版管理セット（変更ログ/リリースノート/ロールバック案）を作る
4. Handoff Memo（本番で新規作成する論点）を書く

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

【L40 演習② 提出（できた範囲でOK）】
Spec-ID：TRN-WEB40

(1) QA自己判定（OK/差戻し/要相談）：

* 判定：
* 根拠：

## (2) 差戻しの場合：v+0.1で直した差分（何を・なぜ・どう）：

## (3) 任意：更新・版管理セット（変更ログ/リリースノート/ロールバック案）：

(4) Handoff Memo（v1.0）：

* 

10) 休憩

【実施時間】

休憩：学習作業なし

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

【実施時間】

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

【L40 最終チェック】
- 訓練専用（流用禁止）が明記されている
- 実データ/実URL/実アカウントが混入していない
- Spec（目的/範囲/完了条件/UNKNOWN）が揃っている
- 構造（見出し/導線/注意書き/UI状態）が揃っている
- 検収（QA）が採点可能で、品質ゲートで止められる
- 差分（何を・なぜ・どう）が追える（版が上がっている）

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

【実施時間】

提出先（参考）

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

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

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

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

*
*
*

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

* 選んだ課題（TRN-WEB40A/B/C）：
* Spec（v0.1→v0.2 など）：
* 構造設計メモ：
* SOP（Step表）：
* QA（判定と根拠）：
* 版管理（変更ログ/任意）：
* Handoff Memo：

3. 一番工夫した点（1つ）
   -（例：完了条件を採点可能にした／UNKNOWNを推測で埋めず止めた／差戻しを具体化した 等）
   理由：

*

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

*

## 理由：

5. 質問（最低1つ）

* 

ページ先頭へ戻る