はじめての“動いた！”― インストールから、5つの体験まで。

【最初に読む約束・最重要】あなたの返事は「最後の1メッセージ」しか私の画面に大きく表示されません。だから私に質問する時は、途中経過や作業報告を別メッセージに分けず、必ず最後の1つのメッセージの中に、質問文と選択肢の全文（A：…／B：…／C：… を改行して1行に1つずつ）と「お任せ（あなたが決めて）」と「自由入力でもOK」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

あなた（Claude Code）が持っている機能——ゴール設定と自己評価、Web検索、バックグラウンドでの見張り、複数作業の同時並行、実装前の計画づくり、フック、ルール、スキル、ワークフロー、権限（許可）の使い分け、記憶、セキュリティへの配慮、タスク管理、サブエージェントへの分担、ファイルの読み書き、コードレビューとセキュリティレビュー、じっくり深く考えるモード——の中から、この仕事に最適なものをあなた自身で選んで使ってください。
・独立した作業は同時並行で進めて、待ち時間をなくしてください。
・最新情報が必要なところは必ずWeb検索で裏を取ってから書いてください（推測で書かない）。
・時間のかかる処理は放置せず裏で見張り、終わったら自動で次へ進めてください。
・削除や上書きなど取り返しのつかない操作の前には、いったん立ち止まって安全を確認してください。
・完成したら、コードの品質チェックとセキュリティチェックの両方でレビューし、規模が大きい場合はサブエージェントに分担させて仕上げてください。
・最後に「どの機能を選んだか／なぜ選んだか／何をしたか／チェックの結果／全体のまとめ」を短く報告してください。

次の流れでデザインを行って 1:DESIGN.md作成 2:Claude Cookbookの美学プロンプトを適用 3:Claude Codeでセクション単位に実行 白ベース,文字大きめ。
デザインは「おしゃれなキャンペーンサイト（LP）」の水準までリッチに：余白をぜいたくに・グラデーションのアクセント・カードのやわらかい影と角丸・マイクロアニメーション（読み込み時や画面切替のふわっとしたフェードイン、質問が切り替わる時のスライド、スクロールで要素がふわっと現れる動き、ボタンのホバーで浮く動き、スコアバーがゼロから伸びる動き）を必ず入れて、安っぽい“素のフォーム”に見せないこと。あわせて、お客様の声・よくある質問・タイプごとに変わるCTA文面も入れて、1枚のキャンペーンサイトとして完成させて下さい。

作るもの＝HTMLファイル1つで動く「AI活用タイプ診断（4問・テーマの既定は『どんなAI社員をClaude Codeで作る？』診断）」を入口にした、1枚のキャンペーンサイト（LP）です。ライブラリ・外部ファイル・AIのAPIは使わず、素のHTML＋CSS＋JSだけで動かして下さい。
ただの診断で終わらせず、診断のあとに【あなた専用の業務効率化プラン】【印刷できる診断レポート】【30日ロードマップ】【次に貼るだけのコピペ用プロンプト】まで出るページにします。
まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：どんな人に向けた診断にしますか？　A：ClaudeCodeコンサルに興味がある方／B：中小企業の経営者／C：営業職／D：士業の先生（改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」も付けて）
質問2（選択肢で聞く）：どんな方向性・テーマの診断にしますか？　A：どんなAI社員をClaude Codeで作るかをタイプ分けしたい（迷ったらこれ）／B：AIをどこまで業務に活かせるかをタイプ分けしたい／C：自社のお客様に配る診断にしたい／D：部下や後輩に配って育成のきっかけにしたい（改行して1行に1つずつ並べ、最後に「お任せ（既定＝Aの『どんなAI社員をClaude Codeで作る？』診断で進めて）」も付けて。記号1文字で答えるだけでOK。リストに無い方向性を自由に書いてもらってもOK、その場合はそのまま採用する）。あわせて、診断の最後で案内したい商品・サービス（あれば名前と一言。例：自社の講座／初回相談／LINE登録）と、誘導したいURL（自分のホームページ・LINE・SNSなど）があれば一緒に教えてください（どちらも、なければ「なし」でOK）。
2問が終わったら、途中の確認をせず最後まで一気に作って下さい。

【作る前に必ずやること＝Web検索で裏を取る】
ページに書く「業務効率化のやり方」は推測で書かず、必ずWeb検索で最新の情報を調べてから書いて下さい。調べるのは、決まった時刻に自動で走らせる定期実行（ルーティン）のやり方、外部サービスとつなぐコネクタ（MCP）のつなぎ方、よく使う手順をまとめて呼び出せるスキルの作り方、複数作業を分担させるやり方などです。
・実在しない機能を書かない（見つからなかった機能は書かずに省く）
・調べて分かったことは、その職種の人が読んで分かる言葉に直してから載せる

【必ず入れる仕様】
（1）診断（4問）
・設問4問は、答えた人の仕事でのAIの使い方が見えてくる内容を、あなたの方で考えて作る（1問ずつ表示して、選ぶと自動で次の問題へ進む）
・上に進捗バーがあり、答えるたびに伸びる。「戻る」ボタンで1問前に戻れる
・回答から4タイプのどれかを判定して結果画面を出す（タイプ名／特徴／向いている使い方／次にやるべき1歩を具体的に）
・結果画面には回答傾向のスコア表示（棒グラフがゼロからスッと伸びるアニメーション付き・外部ライブラリは使わない）と「もう一度診断する」ボタン
・結果が出る瞬間に、紙吹雪のような軽いお祝い演出（外部ライブラリは使わない）

（2）🤖 あなた専用の業務効率化プラン（タイプ別）
・そのタイプの人が、ふだんの仕事のどこをAIに任せると一番ラクになるかを3つ提案する（「何が・どれくらいラクになるか」を1行ずつ添える）
・上のWeb検索で調べた最新のやり方（定期実行・コネクタ・スキルなど）のうち、そのタイプに合うものを選んで、なぜ合うのかを1行で書く
・4タイプ分すべてを用意し、判定されたタイプのものが表示されるようにする

（3）📋【必須・省略禁止】次に貼るだけのコピペ用プロンプト
・結果画面に、コードのような枠（読みやすい等幅フォント・スクロールできる）と「📋 コピー」ボタンを置く
・中身は、そのタイプの人がそのまま貼れば自分の業務の自動化を作ってもらえる、長めの完成した依頼文にする（毎日決まった時刻に走らせるルーティン化／外部サービスとつなぐコネクタ連携／自分専用スキルの作成、のどれかをタイプに合わせて選ぶ）
・依頼文の中には「はじめに私に2問だけ質問して下さい」「終わったら何をしたか短く報告して下さい」も入れておく
・4タイプで中身が変わるようにする。枠の上に「これをコピーして、AIにそのまま貼るだけでOKです」と大きく書く

（4）🖨️【必須・省略禁止】パーソナル診断レポート（印刷／PDF保存）
・結果画面に「🖨️ 診断レポートを印刷（PDFで保存）」ボタンを必ず置く
・押すと印刷画面が出て、A4に「診断日／タイプ名／特徴／スコア／業務効率化プラン3つ／30日ロードマップ」がきれいに1〜2枚で収まる（印刷用CSSで、診断のボタンやヘッダーなど不要な部分は印刷しない）
・レポートはカラフルに：タイプ色のヘッダー帯／色付きのスコアグラフ／週ごとに色分けしたロードマップを入れて、白黒の文字だけのレポートにしない（印刷でも色が出るよう print-color-adjust: exact を指定する）
・完成前に自分でチェック：印刷ボタンはあるか／印刷プレビューで文字が切れていないか

（5）🗺️ あなた専用 AI活用ロードマップ（30日プラン）
・中身は診断結果からあなたが自動で決める＝本人に選ばせない・ここで追加の質問もしない
・見た目はグラフィカルに：1週目〜4週目を横に流れるタイムライン型で描き、週ごとに色分けした帯＋アイコン＋各週3つのステップを配置する（文字だけの箇条書きにしない・外部ライブラリは使わない）
・各ステップはできたらチェックを入れられ、状態はブラウザに保存して次に開いた時も残っている（localStorage）
・「達成 N ／ 12」の進捗バーを付ける。タイプごとに中身を変える

（6）ページ全体の構成とCTA
・「ヒーロー（キャッチコピー＋“診断をはじめる”大ボタン）→ 診断4問 → 結果（タイプ／スコア／業務効率化プラン／コピペ用プロンプト／30日ロードマップ／印刷ボタン）→ CTA」の順にする
・結果画面のいちばん下に「📊 あなた専用の無料お見積もりはこちら」のCTAセクションを必ず置き、課題1-2で作った見積もりシミュレーター（HTMLファイル）へ誘導する（診断結果のタイプに合わせた誘い文句＋大きなCTAボタン。ボタンのリンク先は、同じフォルダに見積もりシミュレーターのHTMLを置く前提の相対リンクにし、ファイル名は私に確認する。リンクは必ず別タブで開く（target="_blank" と rel="noopener" を付ける）＝診断ページを閉じずに見積もりへ行けるようにする。課題1-2をまだやっていない場合は、質問2で聞いた商品・サービスへのCTAにする＝どちらも「なし」なら架空のサンプル商品でCTAの形だけ作る）
・CTAは魅力的に、ただしウソの限定表示やカウントダウンで煽らない（誠実なキャンペーンサイトにする）
・スマートフォンで見ても崩れないようにする
・完成報告の前に自己チェック：①2つのHTMLファイルが両方できているか ②どちらの画面にも 🖨️印刷ボタンが見えているか ③2ページを行き来するボタンが両方にあるか、を必ず確認する。1つでも無ければ「完成」と言わずに、付けてから完成報告する
・🔴【同時に作る2ページ目・省略禁止】同じフォルダに「診断分析レポート」のHTMLをもう1つ作る（ファイル名は report.html のように分かりやすく。診断ページと同じ DESIGN.md のデザインで統一・依存ライブラリなし・コードは短く）。これは「もしこの診断を30人が受けたら、配った側（あなた）はどんな数字を見るのか」を先に体験するページ。中身は次の5点だけに絞る（凝ったグラフは作らない）：
　① サンプルデータ：回答者30人分を、診断と同じ4タイプ・4問の体系で自動生成（流入経路・その後の行動＝見積もりへ進んだ／相談を申し込んだ／離脱・満足度つき）。画面の目立つ所に「📎 これは架空のサンプルデータです」と必ず表示する（本物の実績と誤解させない）
　② タイプ別×流入経路別の比較表：4タイプごとの人数・割合と、「SNS（Instagram／X／TikTok）・広告（Google広告／Meta広告）・紹介・検索・チラシ」の5系統ごとに 回答数・診断完了率・見積もり／相談へ進んだ率（CTAのクリック率）・1人あたりの獲得コスト（CPA）・満足度の平均 を1つの表で比べる
　③ 設問ごとの回答分布＋満足度アンケート：4問それぞれの選択肢の選ばれ方（数字の横棒でよい）と、診断の満足度5段階の分布＋おすすめ度（0〜10）＋回答者コメントの抜粋（良い声・改善の声を3つずつ）
　④ 「🤖 AI経営分析」＋「❓ 配った側が聞きたいQA 10問」：上の数字だけを根拠に「強み3つ・弱み3つ・次の一手3つ」を短く書き、続けて実際に聞きそうな質問10個（例：一番多いタイプは？そのタイプに何を売るべき？／どの経路が見積もりに一番つながる？／途中で離脱される設問はどれ？／満足度が低い人の共通点は？／来月30人を60人にするには？／設問を変えるならどこ？ など）に「数字の根拠＋改善案」を2〜3行で答える
　⑤ 🖨️【必須・省略禁止】このレポートにも常に見える「🖨️ このレポートを印刷（PDF保存）」ボタンと印刷用CSS
　・2ページの行き来：診断ページの結果画面のいちばん下（CTAの下）に「📊 回答30人の診断分析レポートを見る（配る側の画面）」ボタン、レポートの画面に「🧠 診断ページへ戻る」ボタンを置き、同じフォルダ内の相対リンクで必ず別タブで開く（target="_blank" と rel="noopener"）
・コードは欲張らずコンパクトに、2ページ合わせて全体で15分以内に完成する規模（レポートは上の5点だけ・凝らない）。
完成したら“規定のブラウザ（Chrome等）”でサイトOpenして、ファイルのフルパスも教えて下さい。

完成したら、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
課題1-3のAI活用タイプ診断が完成しました！🧠
・誰向けの診断にしたか：（1行で）
・自分は何タイプだったか：（1行で）
・出てきた業務効率化プランで一番やってみたいこと：（1行で）
・診断分析レポートで一番おもしろかった数字：（1行で）

そのうえで、最後に大きく「🎉 完成です！自分でも4問答えてみて、結果画面の『業務効率化プラン』『コピペ用プロンプト』『30日ロードマップ』『🖨️印刷ボタン』まで出るか確認してください。そのあと📊ボタンから診断分析レポートも開いて、回答30人の数字とQA10問を眺めてみてください。両方見終わったら、課題ページに戻って『✅ 課題1-3 完了！』ボタンを押してください！」と私に必ず案内して下さい。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と1行で案内して
③完成報告は「実際に動かして確認できた項目」と「まだ確認していない項目」を分けて書いて（途中で表示が崩れたり動かなかったりしたら、私はそのまま日本語で伝えるだけでよい＝原因は私に調べさせない）

【完成したら必ずやること（省略禁止）】①作ったHTMLファイル（index.html など）を私のブラウザで自動で開いて（Mac: open ファイル名／Windows: start ファイル名 を実行）。開けない時は「デスクトップ→ユニコスクール→ファイル名をダブルクリックで開けます」と1行で書いて
②触って確かめる項目を1〜2個だけ書いて（例：左の選択肢を変えると右が変わる）
③最後に必ず「課題ページに戻って『✅ 完了』ボタンを押し、次の課題へ進んでください」と書いて（ここまで書いて初めて完成です）

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。それに加えて毎回はっきり「自由入力でもOK（思いついた言葉をそのまま書いてください）」も添えて。自由入力が来たら A / B / C / お任せ より優先して。最初の質問では、診断の対象者の例を A / B / C の選択肢で3つ示し、最後に「お任せ（あなたが決めて）」も付けて（もちろん自由に書いてもらってもOK）。「お任せ」が来たら、あなたがベストな案を選んで先へ進めてください。URLを案内する時は、丸カッコや句読点で囲まず単独行に書いてください。英語の画面が出たら、日本語訳を1行そえてください。

【最初に読む約束・最重要】あなたの返事は「最後の1メッセージ」しか私の画面に大きく表示されません。だから私に質問する時は、途中経過や作業報告を別メッセージに分けず、必ず最後の1つのメッセージの中に、質問文と選択肢の全文（A：…／B：…／C：… を改行して1行に1つずつ）と「お任せ（あなたが決めて）」と「自由入力でもOK」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

あなたはプロのニュース記者兼リサーチャーです。いま私がChromeで開いているこのニュースサイトを実際に読んで、調査レポートを作って下さい。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く。2問が終わったら、あとは途中で質問せず一気に調査して下さい）：
質問1（選択肢で聞く）：AI活用のうち、どのテーマのニュースを調べますか？　A：Claude Code・AI開発ツールの最新情報／B：ChatGPT・生成AIの新機能や話題／C：AIの仕事活用・ビジネス事例（改行して1行に1つずつ並べ、最後に「お任せ（あなたが面白いAIニュースを選んで）」も付けて。記号1文字で答えるだけでOK。リストに無いAI関連テーマを自由に書いてもらってもOK）
質問2（自由入力で聞く）：そのニュースについて、特に知りたいこと・気になっていることを一言で教えてください（例：自分の仕事にどう影響するか／初心者にも分かるように背景から）。「お任せ」でもOKです。

答えをもらったら、このサイトの記事を実際に読んで（必要なら気になる記事を2〜3本開いて）調査し、次の構成でまとめて下さい：
1. 今日の要点（3行でまとめ）
2. 選んだニュース3〜5本：それぞれ見出し＋2行の要約
3. 背景解説（なぜ今これが起きているのか、初心者にも分かるように）
4. 私が質問2で聞いた「知りたいこと」への答え
5. 明日から使えるひとこと視点

そして調査結果は、私に見せるだけでなく、最後に必ず【Claude Code に貼るだけのコピペ文】として1つのかたまりで出して下さい。コピペ文の中身は次の2部構成にします：

〔前半＝Claude Codeへの指示文。この内容をそのまま入れる〕
この下に貼ってあるニュース調査レポートをもとに、プロのHPデザインの流れで、見やすい調査レポートHTMLを1枚作って下さい。
作り方は必ずこの順番で：
1. まず DESIGN.md を作成（配色・フォント・余白・角丸・アニメーションのルールを15行前後で言語化。白ベース・文字大きめ（本文18px以上）は固定）
2. Claude Cookbook の美学プロンプトを適用（余白をぜいたくに、区切りは細いヘアライン、色数はアクセント1〜2色に絞る、雑誌のように上品に）
3. DESIGN.md に従って、セクション単位で1つずつ実装（ヘッダー → 今日の要点 → ニュースまとめ → 背景解説 → 知りたいことへの答え → まとめ）
実装の条件：HTMLファイル1つで完結（ダブルクリックで開ける・外部読み込みなし）／レポートの中身は下の調査レポートに忠実に（情報を足したり捏造したりしない）／完成したらブラウザでサイトOpen（アプリ内プレビューだけで終わらせず、規定のブラウザ（Chrome等）で開く）＋ファイルのフルパスも教える。
完成したら、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」も出す。フォーマット：
課題1-4で、ブラウザのAIにニュースを調査してもらって、Claude Codeでレポートページにしました！🗞
・調べたニュースのテーマ：（1行で）
・いちばんの学び：（1行で）
最後に大きく「🎉 完成です！課題ページに戻って『✅ 課題1-4 完了！』ボタンを押してください！」と必ず案内する。

〔後半＝今回の調査レポート全文をそのまま入れる〕

コピペ文を出したら、最後に大きく「🎉 調査完了です！上のコピペ文を全部コピーして、Claude Code（デスクトップアプリ）に貼って送信してください！」と私に必ず案内して下さい。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と1行で案内して
③完成報告は「実際に動かして確認できた項目」と「まだ確認していない項目」を分けて書いて（途中で表示が崩れたり動かなかったりしたら、私はそのまま日本語で伝えるだけでよい＝原因は私に調べさせない）

【完成したら必ずやること（省略禁止）】①作ったHTMLファイル（index.html など）を私のブラウザで自動で開いて（Mac: open ファイル名／Windows: start ファイル名 を実行）。開けない時は「デスクトップ→ユニコスクール→ファイル名をダブルクリックで開けます」と1行で書いて
②触って確かめる項目を1〜2個だけ書いて（例：左の選択肢を変えると右が変わる）
③最後に必ず「課題ページに戻って『✅ 完了』ボタンを押し、次の課題へ進んでください」と書いて（ここまで書いて初めて完成です）

※出力の約束＝太字マーク（**）などの装飾記号は使わず、読みやすい箇条書きで出して下さい。「お任せ」が来たら、あなたがベストな案を選んで先へ進めてください。URLを案内する時は、丸カッコや句読点で囲まず単独行に書いてください。英語の画面が出たら、日本語訳を1行そえてください。

【最初に読む約束・最重要】あなたの返事は「最後の1メッセージ」しか私の画面に大きく表示されません。だから私に質問する時は、途中経過や作業報告を別メッセージに分けず、必ず最後の1つのメッセージの中に、質問文と選択肢の全文（A：…／B：…／C：… を改行して1行に1つずつ）と「お任せ（あなたが決めて）」と「自由入力でもOK」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

ホームページ（表の顔）と、その裏側で動く管理画面（業務効率化ツール）を、続けて2つ作って下さい。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：どんなジャンルのお店・会社にしますか？　A：飲食・スイーツ／B：美容・サロン／C：スクール・教室（改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」も付けて）
質問2（自由入力で聞く）：お店の名前・場所・こだわりなど、詳しい設定を自由に教えてください（例：原宿で1番大きいTikTokでバズっているスイーツのお店）。この質問だけは選択式にせず、「お任せ」なら、あなたが魅力的な設定を考えて先へ進めてください。
2問が終わったら、そこから先は途中の確認をせず、【前半】→【後半】の順で最後まで一気に作って下さい。

【前半：ホームページ】
次の流れでHPデザインを行って 1:DESIGN.md作成 2:Claude Cookbookの美学プロンプトを適用 3:Claude Codeでセクション単位に実行 白ベース,文字大きめ
・必ず入れる機能①：サイト内検索（入力するとページ内を検索して、ヒット箇所をハイライト/絞り込み）
・必ず入れる機能②：さらに“おっ、すごい！”と感じる機能を2〜3個（例：スクロールで要素がふわっと出るアニメ・ダークモード切替・よくある質問の開閉・お問い合わせフォーム・お気に入り保存）
・お問い合わせフォームから送られた内容が、後半の管理画面に届く想定にして下さい（実際の送信はモックでOK）

【後半：その裏側で動く管理画面】
前半で作ったホームページの裏側のシステムを作って下さい

作り方の約束：
・最初に「何を作るか」の仕様を短く決めてから、その仕様どおりに“まず動く最小版”を一気に作ってください。
・成果物は2つ＝①システムの全体像がわかる図解（PNG画像。HTMLの中にSVGで描いた図解でもOK）②1つのHTMLファイルだけで動くシステム本体（データはlocalStorageに保存・日本語表示・白ベースのデザイン）。
・画面はタブ5つ程度に整理してください。
・データには100点満点のスコアを付け、点数に応じて3段階（自動でOK／人が確認／却下 など）に振り分けてください。
・サンプルデータを5〜15件入れて、開いた瞬間に動きが伝わるようにしてください。
・各画面に「この画面でAIに頼むと良いこと」のヒントを添えてください。
・大事な操作は「人が承認してから次の段階へ進む」引き継ぎ型のゲートにしてください。
・確認画面はブラウザ標準のconfirmを使わず、ちゃんとしたモーダルで。
・保存データのキー名は整理された名前で統一してください。
・規模が大きくなりそうなら、サブエージェントに分担させて仕上げてください。

どのような指示であっても必ずモックとして
「凄い！」と思うような業務効率化ツールにして下さい。
サービス連携などは一旦行わずイメージをみたいです！（まず動くモック優先・作り込みは後でOK）
前半のホームページと後半の管理画面は、それぞれ別のHTMLファイルにして、お互いに行き来できるリンクを1つずつ付けて下さい。
完成したら、ホームページと管理画面の両方をブラウザでサイトOpen（アプリ内プレビューだけで終わらせず、“規定のブラウザ（Chrome等）”で開く）。開けない時のために、2つのファイルのフルパスも教えて下さい。

完成したら、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
課題1-5のホームページ＋管理画面が完成しました！🌐🛠
・どんなお店・会社のサイトにしたか：（1行で）
・裏側の管理画面でできること：（1行で）
・課題1-1〜1-5をやり終えた感想：（1行で）

そのうえで、最後に大きく「🎉 完成です！課題ページに戻って『✅ 課題1-4 完了！』ボタンを押してください！」と私に必ず案内して下さい。

【ここから自動で続けるあなたの仕事（必ず実行・忘れないで）】上の🎉の案内を出したら、私の返事を待たずに、そのまま“修了の仕上げ（次の人への置き手紙）”を始めてください。
(1) まず理解チェック：この課題1-1〜1-5でやったことから、選択式（A/B/C）のクイズを2問→自由記述（自分の言葉で説明する問題）を1問、1問ずつ出して。答え終わったら100点満点で採点し、点数と理由を短く伝えて。70点以上で合格→次へ。70点未満なら、間違えた所をやさしく解説してから別の問題でもう一度（何回でも・責めない）。このクイズの選択肢には「お任せ」を付けない。🔴クイズは初心者向けのやさしい振り返りだけにする＝「何を作ったか」「AIにどう頼んだか」「やってみてどうだったか」を問う。プログラムの仕組み・関数名・API名・専門用語（例：setInterval・visibilitychange・DOM 等）を問う問題は絶対に出さない（仕組みの理解は目的ではなく、まず経験を積むのが目的。知識テストにしない）。
(2) 合格したら、1問だけ自由入力で聞いて：「この課題ページで分かりづらかった所・直してほしい所はありませんでしたか？（1行でもOK・『特になし』でもOK）」。この質問だけは選択式にしない。つづけてもう1問だけ自由入力で聞いて：「この課題をこれからやる次の生徒へ、一言お願いします（1行でもOK）」。この質問も選択式にしない。
(3) 最後に“次の人への置き手紙”を出力：この課題1-1〜1-5をやってみた感想を、次にやる人のためのフィードバックとして、HTMLやファイルにせず、そのままコピペできるテキスト・全体6000字以内で。メモの1行目は必ず【「Claude Codeをはじめる」をやってみて】という見出し、2行目にこの課題ページのURL（ https://bbs.unikoukokun.com/kadai.html ）を1行で入れて（課題番号は入れない＝番号が変わってもどのページの置き手紙か分かるように）。①やった課題 ②想定外だったこと（詰まった所・分かりにくかった言葉・逆にスムーズだった所）③最初のコピペ用プロンプトへの具体的な改善案 ④最後の行に「💬 課題ページへの改善案：」として(2)でもらった言葉を原文のまま（『特になし』なら省略OK） ⑤いちばん最後の行に「💬 次の生徒へ：」として、次の生徒への一言を原文のまま。
メモを出力できたら、最後に大きく「📦 課題ページに戻って、この文章をすぐ下の『置き手紙の提出欄』に貼って提出してください！それで修了です🏅」と私に必ず案内して下さい。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と1行で案内して
③完成報告は「実際に動かして確認できた項目」と「まだ確認していない項目」を分けて書いて（途中で表示が崩れたり動かなかったりしたら、私はそのまま日本語で伝えるだけでよい＝原因は私に調べさせない）

【完成したら必ずやること（省略禁止）】①作ったHTMLファイル（index.html など）を私のブラウザで自動で開いて（Mac: open ファイル名／Windows: start ファイル名 を実行）。開けない時は「デスクトップ→ユニコスクール→ファイル名をダブルクリックで開けます」と1行で書いて
②触って確かめる項目を1〜2個だけ書いて（例：左の選択肢を変えると右が変わる）
③最後に必ず「課題ページに戻って『✅ 完了』ボタンを押し、次の課題へ進んでください」と書いて（ここまで書いて初めて完成です）

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。それに加えて毎回はっきり「自由入力でもOK（思いついた言葉をそのまま書いてください）」も添えて。自由入力が来たら A / B / C / お任せ より優先して。「お任せ」が来たら、あなたがベストな案を選んで先へ進めてください。URLを案内する時は、丸カッコや句読点で囲まず単独行に書いてください。英語の画面が出たら、日本語訳を1行そえてください。

【最初に読む約束・最重要】あなたの返事は「最後の1メッセージ」しか私の画面に大きく表示されません。だから私に質問する時は、途中経過や作業報告を別メッセージに分けず、必ず最後の1つのメッセージの中に、質問文と選択肢の全文（A：…／B：…／C：… を改行して1行に1つずつ）と「お任せ（あなたが決めて）」と「自由入力でもOK」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：どの分野でやってみたいですか？　A：仕事の効率化／B：日常・趣味／C：家族・学び（改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」も付けて）
質問2（自由入力で聞く）：あなたの仕事・日常・興味のあることを、ひとことで自由に教えてください。この質問だけは選択式にせず、「お任せ」でもOKです。
2問が終わったら、そこから「Claude Codeでやってみたいこと」の候補を3つ、番号をつけて、それぞれ「何ができて何が嬉しいか」を2〜3行で詳しく説明しながら選択肢として提案してください。私が番号で1つ選んだら、以降は途中の確認質問を一切せず、最後まで一気に最高のシステムとして構築してください。

★重要：1つ完成するたびに、また新しい「次にやってみたいこと」の候補を3つ、番号つきで詳しく説明しながら選択肢で提案してください。私が「もう終わり」と言うまで、これを何度でも繰り返してください（＝終わらないように、次々と新しい案を出し続けてください）。毎回、前に作ったものを活かした発展案も混ぜてくれると嬉しいです。構築は以下の流儀で：

あなた（Claude Code）が持っている機能——ゴール設定と自己評価、バックグラウンドでの見張り、複数作業の同時並行、実装前の計画づくり、フック、ルール、スキル、ワークフロー、権限（許可）の使い分け、記憶、セキュリティへの配慮、タスク管理、サブエージェントへの分担、ファイルの読み書き、コードレビューとセキュリティレビュー、じっくり深く考えるモード——の中から、この仕事に最適なものをあなた自身で選んで使ってください。
・独立した作業は同時並行で進めて、待ち時間をなくしてください。
・時間のかかる処理は放置せず裏で見張り、終わったら自動で次へ進めてください。
・削除や上書きなど取り返しのつかない操作の前には、いったん立ち止まって安全を確認してください。
・完成したら、コードの品質チェックとセキュリティチェックの両方でレビューし、規模が大きい場合はサブエージェントに分担させて仕上げてください。
・最後に「どの機能を選んだか／なぜ選んだか／何をしたか／チェックの結果／全体のまとめ」を短く報告してください。
定期実行（ルーチン）を作る時の約束：
・仕事を「1回で完結する小さな役割」に分解してから自動化してください（同じものが2回動いても壊れない作りに）。
・パソコンを開いている時だけ動けばよいもの（最短1分間隔）か、パソコンを閉じていても動いてほしいもの（クラウド実行・最短1時間間隔）かを選んでください。
・実行間隔・止め方・使ってよい予算の上限を、作る前にはっきり決めて私に伝えてください。
・失敗したら自動でやり直し、本番反映・削除・強制的な上書きなどの危険な操作は必ず私の承認を取ってから。
・実行ログを残し、異常があったら通知が届くようにしてください。
・作ったら一覧で見せて、「何を選んだか・なぜか・結果どうなったか」を報告してください。
作り方の約束：
・最初に「何を作るか」の仕様を短く決めてから、その仕様どおりに“まず動く最小版”を一気に作ってください。
・成果物は2つ＝①システムの全体像がわかる図解（PNG画像。HTMLの中にSVGで描いた図解でもOK）②1つのHTMLファイルだけで動くシステム本体（データはlocalStorageに保存・日本語表示・白ベースのデザイン）。
・画面はタブ5つ程度に整理してください。
・データには100点満点のスコアを付け、点数に応じて3段階（自動でOK／人が確認／却下 など）に振り分けてください。
・サンプルデータを5〜15件入れて、開いた瞬間に動きが伝わるようにしてください。
・各画面に「この画面でAIに頼むと良いこと」のヒントを添えてください。
・大事な操作は「人が承認してから次の段階へ進む」引き継ぎ型のゲートにしてください。
・確認画面はブラウザ標準のconfirmを使わず、ちゃんとしたモーダルで。
・保存データのキー名は整理された名前で統一してください。
・規模が大きくなりそうなら、サブエージェントに分担させて仕上げてください。

1つ完成するたびに、掲示板にそのまま貼れる「📋 掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
【やってみたいこと宣言】（1〜2行）
【できたもの報告】（1〜2行）

そのうえで、毎回「🎉 1つ完成です！課題ページの『✅ おまけ完了！』ボタンを押してください（このあとも、次のやりたいことを一緒に作れます！）」と私に必ず案内し、続けて次の候補3つを提案してください。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と1行で案内して
③完成報告は「実際に動かして確認できた項目」と「まだ確認していない項目」を分けて書いて（途中で表示が崩れたり動かなかったりしたら、私はそのまま日本語で伝えるだけでよい＝原因は私に調べさせない）

【完成したら必ずやること（省略禁止）】①作ったHTMLファイル（index.html など）を私のブラウザで自動で開いて（Mac: open ファイル名／Windows: start ファイル名 を実行）。開けない時は「デスクトップ→ユニコスクール→ファイル名をダブルクリックで開けます」と1行で書いて
②触って確かめる項目を1〜2個だけ書いて（例：左の選択肢を変えると右が変わる）
③最後に必ず「課題ページに戻って『✅ 完了』ボタンを押し、次の課題へ進んでください」と書いて（ここまで書いて初めて完成です）

※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」を足して（「お任せ」なら、あなたがベストを選んで先へ進めて）。それに加えて毎回はっきり「自由入力でもOK（思いついた言葉をそのまま書いてください）」も添えて。自由入力が来たら A / B / C / お任せ より優先して。その3つの質問も、それぞれ A / B / C の選択肢＋「お任せ（あなたが決めて）」付きで、1行に1つずつ並べて聞いて（自由に書いてもらってもOK）。「お任せ」が来たら、あなたがベストな案を選んで先へ進めてください。URLを案内する時は、丸カッコや句読点で囲まず単独行に書いてください。英語の画面が出たら、日本語訳を1行そえてください。