概念を組み合わせて作る、
初心者向け演習 3問。

Codex に イベント告知カードの“お手本”を1枚作らせ、ブラウザで開いて「完成の形」をつかむ。次に、同じ構造・デザインのまま中身だけを自分のイベントに変えたカードを作らせる。まず再現、次に少しだけ変更——この順で土台をつくります。（AGENTS.md はすでに用意済みの前提。作業フォルダに置いておけば、日本語説明・上書き禁止の約束がそのまま効きます）

1. 場所を決める デスクトップに codex-q1 という空フォルダを1つ作り、作業場所として Codex に開いてもらう。（用意済みの AGENTS.md をこのフォルダにも置くと約束が効く）
2. 完成例を見る（お手本を作らせる） まず「どんな形になるか」を1枚のお手本で確認する。デザインはCodexに任せてOK。
   ▶ Codexへの指示（コピーして使う）event-sample.html を新しく作ってください。 「イベント告知カード」を1枚。カードの中に、タイトル・日時・場所・ひとこと紹介の4項目を見やすく並べてください。 色や飾りのデザインはお任せします。まずお手本として作ってください。
3. 自分で動かす（お手本を開いて観察） event-sample.html をダブルクリックして開き、「4項目がどう並んでいるか」を目で見る。これが再現の“お手本”になります。
4. 作らせる（再現：中身だけ差し替え） 構造は固定・文字だけ変更、と明示するのがコツ。材料（自分のイベント内容）を渡す。
   ▶ Codexへの指示event-sample.html の構造とデザインはそのままに、中身だけ次の内容へ差し替えた event.html を新しく作ってください（元ファイルは上書きしない）。 ・タイトル：〇〇 ・日時：〇月〇日 〇時 ・場所：〇〇 ・ひとこと：〇〇
5. 条件を1つだけ変える（変更） 「動いた」の先へ。色を変える／項目を1つ足すなど、1箇所だけ変えて狙い通り変わるか確かめる（＝階段2）。1度に全部変えないのがコツ。
   ▶ Codexへの指示event.html のカードの背景色を〇〇色に変えてください。他の部分は変えないでください。

• ✓フォルダに event-sample.html（お手本）と event.html（自分版）の2つがある
• ✓event.html をブラウザで開くと、自分のイベント内容（4項目）が正しく表示される
• ✓お手本と同じ構造を保ったまま、1箇所以上を自分で変更できた（元ファイルは上書きしていない）

わざと1か所壊れたHTMLを用意し、Codexに直させる。直ったら自分で開いて確認し、さらに条件を変えて（空欄・長い文字）試す。「1回動いた」で終わらせず「別の条件でも使える」まで持っていくのがこの問のテーマです。

1. 材料を渡す（壊れたファイルを作る） 新しいフォルダ codex-q3 を作り、下の指示で「わざと壊れた」HTMLを用意させる。まず“壊れている状態”を自分の目で見ます。
   ▶ Codexへの指示codex-q3 フォルダに、わざと1か所だけ壊れた broken.html を作ってください。 ・「あいさつ」という見出しと、名前を入れる入力欄、押すと「こんにちは、〇〇さん！」と表示するボタンを付ける ・ただし閉じタグを1つ抜くなど、ボタンを押しても動かない壊れ方にしてください ・どこを壊したかは、まだ私に教えないでください
2. 自分で動かす（症状を確認） broken.html を開き、ボタンを押して「動かない」ことを体験する。この“症状”が次の指示の材料になります。
3. 失敗を返す（直させる） 「何が起きたか（症状）」と「どうなってほしいか（期待）」の2点を渡すのがコツ。原因当ては人間がしなくてOK。
   ▶ Codexへの指示broken.html を開くとボタンを押しても何も表示されません（症状）。 名前を入れてボタンを押したら「こんにちは、〇〇さん！」と表示される状態にしたいです（期待）。 上書きせず fixed.html という名前で直したものを作り、どこがどう壊れていたかを日本語で説明してください。
4. 条件を変えて試す（ここが本番） 「動いた」の先へ。人間が“意地悪な入力”を判断して渡し、Codexに強くしてもらう。＝Hookの考え方（変更直後に必ず確認する）。
   ▶ Codexへの指示fixed.html を次の3条件でも壊れないようにしてください。 1. 名前を空欄のままボタンを押したとき（「名前を入力してください」と出す） 2. とても長い名前（30文字以上）を入れたとき 3. 記号（< や &）を含む名前を入れたとき 直したら、その3つを自分でも確認した結果を報告してください。
5. 結果を返す 3条件を自分でも実際に試す。1つでも崩れたら、その症状をまた「次の指示」として返す（＝ループを回す）。

• ✓fixed.html でボタンが正しく動き、あいさつが表示される
• ✓空欄・長い名前・記号の3条件でも崩れない（エラーで固まらない）
• ✓Codexが「どこが壊れていたか」を日本語で説明できている

「資料から要点を3つ、出典（何ページ/どこに書いてあったか）付きで抜き出して md にまとめる」という進め方を、SKILL.mdという手順書に固定する。そして別の資料でも同じ形で結果が出ることを確かめます。＝成功を偶然で終わらせない。

1. 入力を決める（何を受け取る手順か） 新しいフォルダ codex-q5 を作る。素材Aとして、短いテキスト（このドリルの説明文や、好きなニュース記事を数段落コピペした material-a.txt）を置く。
2. 手順を並べて Skill を作る 「入力→工程→確認→出力」の型を1ファイルに固定させる。ここが再利用の核。
   ▶ Codexへの指示SKILL.md という手順書を作ってください。中身は「資料から要点をまとめる手順」で、次の4項目を書いてください。 【入力】.txt か .md の資料を1つ受け取る 【工程】(1)全体を読む (2)重要な点を3つ選ぶ (3)それぞれに出典（何段落目/どの文か）を付ける 【確認】要点は必ず3つ／各要点に出典がある／資料に書いていない情報を足していない 【出力】summary.md に「要点」と「出典」を表でまとめる
3. 素材Aで1回実行する（成功例をつくる） まず1回きれいに通す。ここで出た summary.md が“お手本”になります。
   ▶ Codexへの指示SKILL.md の手順どおりに、material-a.txt から summary_a.md を作ってください。 各要点には必ず出典（何段落目か）を付け、資料にない情報は書かないでください。
4. 根拠を確認する（人間の判断） 3つの要点が本当に資料に書いてあるか、出典を1つずつ照らし合わせる。“それっぽいけど資料にない一文”を見つけるのが人間の仕事。
5. 別素材で試す（再現テスト） 違う内容の material-b.txt を置き、同じ SKILL.md で summary_b.md を作らせる。中身は違っても「要点3つ＋出典＋表」の形がそろえば、手順が再利用できた証拠。
   ▶ Codexへの指示同じ SKILL.md の手順で、今度は material-b.txt から summary_b.md を作ってください。 前回と同じ形式（要点3つ・各要点に出典・表）にそろえてください。

• ✓SKILL.md（入力・工程・確認・出力の4項目）がある
• ✓summary_a.md と summary_b.md の両方が、要点3つ＋出典＋表で同じ形になっている
• ✓各要点の出典を人間が照合し、資料にない情報が混ざっていないことを確認できた