Claude Codeを体験

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

「自動見積もりシミュレーター」と、それに続く「経営レポート」の2ページを同時に作って下さい。1ページ目＝お客様が選択肢を選ぶと、条件分岐で金額がその場で変わり、最後は印刷でPDFの見積書になるWebアプリ。2ページ目＝この商売で受注30件あった場合の、登録経路別の単価・満足度アンケート・AI経営分析・経営者向けQA10問が入った経営レポート（架空のサンプルデータ）です。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く。2問が終わったら、あとは途中で質問せず一気に完成まで）：
質問1（選択肢で聞く）：デザインの雰囲気はどれにしますか？　A：上品ミニマル／B：明るくポップ／C：シックで高級感（改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」も付けて）
質問2（選択肢で聞く）：何の商売の見積もりシミュレーターにしますか？　A：ClaudeCodeコンサル／B：ハウスクリーニング／C：ホームページ制作／D：イベント・教室／E：引っ越し／F：写真撮影（改行して1行に1つずつ並べ、最後に「お任せ（あなたが面白い題材を決めて）」も付けて。記号1文字で答えるだけでOK。リストに無い商売を自由に書いてもらってもOK、その場合はそのまま採用する）

作り方は、プロのHPデザインの流れで必ずこの順番に：
1. まず DESIGN.md を作成（選ばれた雰囲気をもとに、配色・フォント・余白・角丸・アニメーションのルールを15行前後で言語化。白ベース・文字大きめ（本文18px以上）は固定）
2. 美学プロンプトを適用（余白をぜいたくに、区切りは細いヘアライン、色数はアクセント1〜2色に絞る、雑誌のように上品に）
3. DESIGN.md に従って、セクション単位で1つずつ実装（ヘッダー → 質問コーナー → 見積書 → 印刷）

実装の条件：
・HTMLファイル1つで完結。React を CDN の script タグで読み込んで使う（npm・ビルド・ターミナル操作は増やさない）。選ぶたびに合計金額がカウントアップし、行がふわっと現れるアニメーションでリッチに
・画面は左右2分割。左＝お客様が選ぶ質問コーナー（選択肢ボタン・チェック・数量スライダーで4〜6問）／右＝A4の見積書。左で選ぶたびに、右の品目・金額・合計がその場で書き換わる（合計はいちばん大きく、変わった行は一瞬ハイライト）
・条件分岐を必ず3種類以上入れる：
　① 前の答えで次の質問が出たり変わったりする（例：「お急ぎですか？」→はい→「いつまでに？」が新しく出て、特急料金＋30％）
　② 数量による段階割引（例：10個以上で10％オフ。適用中は「⭐まとめ割 適用中」の行が見積書に現れる）
　③ 松・竹・梅のプラン切替（選ぶと品目リストごと入れ替わる）
・開いた瞬間からおすすめが選択済みで、完成した見積書が見えている状態にする（空っぽの画面にしない）
・🖨️【必須・省略禁止】見積書の近くに、常に見える「🖨️ この内容で印刷（PDF保存）」ボタンを必ず付ける（押すと window.print() で印刷画面が開く）。押すと質問コーナーやボタンが消えて、きれいなA4の見積書だけが1枚に収まって印刷される（印刷用のCSSを必ず入れる。Mac／Windowsとも印刷画面で「PDFとして保存」を選べばPDFになります、という案内も画面に小さく添える）
・見積番号は開くたびに日付から自動で作る。金額は3桁カンマ区切りで表示する
・崩れ防止：見積書の宛名や自社情報（社名・〒住所・TEL・メール）は十分な幅を取り“1行ずつ縦に並べる”配置にする。1文字ずつ縦に折り返されるような極細の列は絶対に作らない
・完成報告の前に自己チェック：①2つのHTMLファイルが両方できているか ②どちらの画面にも 🖨️印刷ボタンが見えているか ③2ページを行き来するボタンが両方にあるか、を必ず確認する。1つでも無ければ「完成」と言わずに、付けてから完成報告する
・🔴【同時に作る2ページ目・省略禁止】同じフォルダに「経営レポート」のHTMLをもう1つ作る（ファイル名は report.html のように分かりやすく。見積もりシミュレーターと同じ DESIGN.md のデザインで統一・依存ライブラリなし・コードは短く）。これは「もしこの商売で受注30件あったら経営者はどんな数字を見るのか」を先に体験するページ。中身は次の5点だけに絞る（一覧表やグラフは作らない）：
　① サンプルデータ：受注30件分を、見積もりシミュレーターと同じプラン（松・竹・梅）と単価の体系で自動生成（登録経路・満足度つき）。画面の目立つ所に「📎 これは架空のサンプルデータです」と必ず表示する（本物の実績と誤解させない）
　② 登録経路別の比較表：「SNS（Instagram／X／TikTok）・広告（Google広告／Meta広告）・紹介・検索・チラシ」の5系統ごとに 件数・売上・平均単価・広告費・1件あたりの獲得コスト（CPA）・満足度の平均 を1つの表で比べる
　③ 満足度アンケート：5段階評価の分布（数字の横棒でよい）＋おすすめ度（0〜10）＋お客様コメントの抜粋（良い声・改善の声を3つずつ）
　④ 「🤖 AI経営分析」＋「❓ 経営者が聞きたいQA 10問」：上の数字だけを根拠に「強み3つ・弱み3つ・次の一手3つ」を短く書き、続けて経営者が実際に聞きそうな質問10個（例：一番もうかっている経路は？／紹介の単価が高いのはなぜ？／広告をやめたらどうなる？／満足度が低い案件の共通点は？／来月30件を40件にするには？ など）に「数字の根拠＋改善案」を2〜3行で答える
　⑤ 🖨️【必須・省略禁止】このレポートにも常に見える「🖨️ このレポートを印刷（PDF保存）」ボタンと印刷用CSS
　・2ページの行き来：見積もりシミュレーターの画面に「📊 受注30件の経営レポートを見る」ボタン、レポートの画面に「🧮 見積もりシミュレーターへ戻る」ボタンを置き、同じフォルダ内の相対リンクで必ず別タブで開く（target="_blank" と rel="noopener"）
・コードは欲張らずコンパクトに、2ページ合わせて全体で15分以内に完成する規模（レポートは上の5点だけ・凝らない）。完成したら生成したHTMLファイルのパスを教えて下さい（ブラウザで開いて確認します）。

すべて完成したら、掲示板にそのまま貼れる「掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
見積もりシミュレーターが完成しました！🧮
・何の商売×どんなデザインにしたか：（1行で）
・お気に入りの条件分岐：（1行で）
・経営レポートで一番おもしろかった数字：（1行で）

そのうえで、最後に大きく「🎉 完成です！左の選択肢をいろいろ変えて、右の見積書が一瞬で変わるのを楽しんでください（お急ぎを選ぶと質問が増えます）。印刷ボタンでPDFになるところまで試したら、📊ボタンから経営レポートも開いて、受注30件の数字とQA10問を眺めてみてください。両方見終わったら、課題ページに戻って『✅ できた！』ボタンを押してください！」と私に必ず案内して下さい。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と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」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

デザインは「おしゃれなキャンペーンサイト（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セクションを必ず置き、さっき作った見積もりシミュレーター（HTMLファイル）へ誘導する（診断結果のタイプに合わせた誘い文句＋大きなCTAボタン。ボタンのリンク先は、同じフォルダに見積もりシミュレーターのHTMLを置く前提の相対リンクにし、ファイル名は私に確認する。リンクは必ず別タブで開く（target="_blank" と rel="noopener" を付ける）＝診断ページを閉じずに見積もりへ行けるようにする。見積もりシミュレーターをまだ作っていない場合は、質問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点だけ・凝らない）。
完成したら生成したHTMLファイルのパスを教えて下さい。

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

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

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と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」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

ブラウザで遊べる「明るくて分かりやすい3Dミニゲーム」を、HTMLファイル1つで作って下さい。道具は Three.js（CDN の script タグで読み込む・npm やビルドは使わない）。🔴 必ず index.html の1ファイルにHTML・CSS・JSを全部入れる（engine.js など別ファイルに分けない）。目指す完成像＝「画面が明るくて、何をすればいいか一目で分かり、操作は1つだけなのに、押すたびに派手に変わる」ゲームです。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：ゲームのテーマはどれにしますか？　A（おすすめ）：時間を止める朝の街（動く障害物を止めて3つの区画の「光のコア」を灯すと、眠っていた街が区画ごとに動き出す）／B：重力を切り替える空の遺跡（重力の向きを変えて3つの区画の封印を解くと、崩れた遺跡が区画ごとに復元していく）／C：風を操る花の庭園（風を起こして3つの区画に種を届けると、枯れた庭が区画ごとに花で満ちていく）（改行して1行に1つずつ並べ、最後に「お任せ（あなたが決めて）」も付けて）
質問2（自由入力で聞く）：好きな色・主人公（例：丸いロボット／ユニコーン／自分のペット）・作品名の候補があれば教えてください。この質問だけは選択式にせず、「なし」や「お任せ」なら、あなたが魅力的な設定を考えて先へ進めてください。
2問が終わったら、そこから先は途中の確認をせず、最後まで一気に作って下さい。

【見た目（最優先＝"明るいのに、くっきり・作り込んで見える"）】
・舞台は「よく晴れた朝」。空は上が鮮やかな水色→地平線が白。地面はパステルでも"薄すぎない"色（ミント #9fe3c9・クリーム #ffe9a8・ペールピンク #ffc4d0 くらいの濃さ）。暗い夜・黒背景・濃い霧は禁止。ただし白く飛ばさない＝露出（toneMappingExposure）は 1.0〜1.1、環境光は HemisphereLight 強度1.2＋太陽の方向光（影あり・影は柔らかく）。完成後に自分でスクショを見て「白っぽく飛んでいる／コントラストが無い」と感じたら露出を下げ・色を濃くしてから完成と言う
・トゥーン調＝MeshToonMaterial＋全ての物に濃い色の縁取り（EdgesGeometry か背面法の黒〜こげ茶の輪郭線）。輪郭があるだけで"ゲームっぽく"見える。建物は色面＋白い窓＋原色の屋根・看板・日よけ、区画ごとに主色を変える（赤の区画／青の区画／黄の区画）
・"にぎやかさ"の最低ライン＝街に次の小物を必ず置く：街灯・ベンチ・丸い木（3色）・ふわふわ雲（空をゆっくり流れる）・鳥（2〜3羽が旋回）・回るコイン・噴水（水の粒子）・信号機・看板。何も置かれていない広い平面を作らない
・主人公は「丸い胴体＋頭＋大きな目＋口＋腕＋足（または耳・しっぽ）」の6パーツ以上で、画面の高さの1/5以上の大きさ。待機中も上下にゆれ・まばたき・歩くと腕が振れて足が動く・能力発動でポーズをとる
・カメラは主人公の斜め後ろ上（見下ろし約35度・主人公が大きく見える近さ）で滑らかに追従。プレイヤーがカメラを回す操作は付けない
・タイトル画面を必ず付ける＝作品名（大きな丸ゴシック・縁取り）＋「▶ はじめる」の大きなボタン＋操作説明2行。押すと画面が明転してゲーム開始
・画面の文字は「操作説明2行・コア0/3・ハート・タイマー・区画の矢印」だけ。建物や道路に小さな名前札を付けない
【操作＝1つだけ（クリックで歩く）＋大きな能力ボタン】
・移動＝地面をクリック（タップ）すると、そこまで主人公が自動で歩く。行き先に光る目印を出し、到着したら消す。壁は自動で避ける
・特殊能力＝画面下中央の大きな丸ボタン（直径90px以上・テーマ名つき・例「⏱ 時間を止める」）を押すと5秒間だけ発動。ボタンに残り時間のゲージ。使い終わると3秒で回復（ゲージで見せる）
・操作説明は画面左上に常時「地面をクリックで歩く／下の丸ボタンで能力」の2行だけ（白地に黒文字・大きめ）。開始直後は最初に行く場所に大きな矢印と「ここをクリック」
・キーボード（WASD・Space）は使える人向けの補助として同じ動きに対応させるが、画面には書かない

【能力を使う意味が"目で見て"分かる】
・3つの区画それぞれに「能力を使わないと通れない場所」を必ず1つ置く。例＝時間停止なら、道をふさいで往復する大きなブロックや回転するファン。ぶつかると体力が1減る（体力3＝ハート表示・0でゲームオーバー→「もう一度」）
・能力を発動した瞬間に画面全体がはっきり変わる＝動いていた物が全部その場で止まって水色に染まり、画面の縁が青く光り、粒子が空中で静止する（重力切替なら画面が回転・風なら風の線）。止まっている間だけ通れることが一目で分かる

【3つの区画＝攻略するたびに"派手に"風景が変わる】
・広場を中心に色の違う3つの区画。各区画の奥に光るコアを1つ置く（常に脈打って目立つ）
・コアを取った瞬間＝①その区画の建物の窓が順番に点灯②区画のシンボル（観覧車が回り出す・噴水が上がる・電車が走り出す など大きく動く物）が動き出す③紙吹雪と「コア GET！」の大きな文字④短いカメラの揺れ。取る前と後で「一目で違う」こと
・攻略した区画の入口に大きな「✓」、未攻略の区画にはコアの方向を示す大きな矢印
・画面右上に「コア 0/3」と経過時間。3つ集めたら大きな「CLEAR!」＋花火＋街全体の窓が光る演出→クリアタイム表示→「もう一度」ボタン（最初から遊べる・ベスト記録は画面に残す）

【おもしろさ（余裕があれば・ここまで入れると"すごい"になる）】
・道にコインを並べる（各区画10枚・取ると音なしで弾けて「+1」が浮く）。コインの数もクリア画面に出す
・能力で止めた物のすぐ横をすり抜けた時に「ナイス！」を出す（ちょっとした気持ちよさ）
・クリアタイムで★1〜3の評価（例：60秒以内で★3）

【作り方の順番と自己チェック】
・まず仮の形で「クリック移動→能力→3区画攻略→クリア→もう一度」が動く版を完成させ、そのあとで色・光・粒子・アニメーションを足す
・コードはコンパクトに、全体で20分以内に完成する規模。未測定のFPSや動作環境を「できた」と言わない（確認した項目だけ報告する）
・完成前の自己チェック（結果を必ず報告）＝①ブラウザで開いてコンソールエラー0 ②開いた瞬間の画面が明るい（暗い部分が画面の2割以下）③地面をクリックすると歩いて到着する ④能力ボタンで画面全体が変わり、止まっている間だけ通れる ⑤区画を攻略するたびに風景が派手に変わる ⑥3つ集めるとクリア演出→「もう一度」で最初から遊べる ⑦画面の文字が「操作説明・コア数・ハート・矢印」だけ ⑧すべて index.html 1ファイル。1つでも未確認なら完成と言わない
・完成したら生成したHTMLファイルのパスを教えて下さい（ブラウザで開いて確認します）。開けない時のために、ファイルをダブルクリックで開く手順も1行そえて下さい

完成したら、掲示板にそのまま貼れる「掲示板コピペ用（約150字）」を必ず出力して下さい。フォーマット：
3Dゲームが完成しました！🕹
・どんなテーマのゲームにしたか：（1行で）
・いちばん気持ちよかった瞬間：（1行で）
・遊んでみて直したくなった所：（1行で）

そのうえで、最後に大きく「🎉 完成です！自分でも最初からクリアまで遊んでみて、画面が明るいか・クリックで歩けるか・能力ボタンで画面が変わるか・区画を攻略すると風景が派手に変わるか確認してください。確認できたら、課題ページに戻って『✅ できた！』ボタンを押してください！」と私に必ず案内して下さい。

【ファイルの置き方と報告の約束（省略禁止）】①前の課題で作ったファイルは上書き・削除しないで、この課題用の新しいフォルダ（または新しいファイル名）に作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて
②アプリ内のプレビューで保存・印刷・ボタンが動かない時は故障ではないので、「いつものブラウザで開き直してください」と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」まで全部入れてください。「選択肢からお選びください」「質問を表示しました」のように選択肢の中身が無いメッセージで終えるのは禁止です。

まず理解チェックをして下さい（合格するまで置き手紙は出さない）：このページでやったこと（準備・見積もりシミュレーター・AI活用タイプ診断・3Dゲーム）から、選択式（A/B/C）のクイズを2問→自由記述（自分の言葉で説明する問題）を1問、1問ずつ出して。答え終わったら100点満点で採点し、点数と理由を短く伝えて。70点以上で合格→置き手紙へ。70点未満なら、間違えた所をやさしく解説してから別の問題でもう一度（何回でも・責めない）。このクイズの選択肢には「お任せ」を付けない。🔴クイズは初心者向けのやさしい振り返りだけにする＝「何を作ったか」「AIにどう頼んだか」「やってみてどうだったか」を問う。プログラムの仕組み・関数名・API名・専門用語（例：setInterval・visibilitychange・DOM 等）を問う問題は絶対に出さない（仕組みの理解は目的ではなく、まず経験を積むのが目的。知識テストにしない）。
合格したら、置き手紙を出す前に必ず1問だけ自由入力で聞いて：「この課題ページで分かりづらかった所・直してほしい所はありませんでしたか？（1行でもOK・思いつかなければ『特になし』でOK）」。この質問だけは選択式にしない。つづけてもう1問だけ自由入力で聞いて：「この課題をこれからやる次の生徒へ、一言お願いします（1行でもOK）」。この質問も選択式にしない。もらった言葉は、メモの最後に「💬 課題ページへの改善案：」の行として原文のまま入れて（『特になし』なら省略OK）。次の生徒への一言は、メモのいちばん最後に「💬 次の生徒へ：」の行として原文のまま入れて（改善案の行より後ろ＝最終行）。

そのうえで、この「ClaudeCodeを体験」をやってみた感想を、次にやる人のための“置き手紙”としてまとめて。※HTMLやファイルにせず、そのままコピペできるテキスト・全体6000字以内で出して。メモの1行目は必ず【「ClaudeCodeを体験」をやってみて】という見出し、2行目にこの課題ページのURL（ https://bbs.unikoukokun.com/claudecode ）を1行で入れて（課題番号は入れない＝番号が変わってもどのページの置き手紙か分かるように）。①やった課題 ②想定外だったこと（詰まった所・分かりにくかった言葉・逆にスムーズだった所）③最初のコピペ用プロンプトへの具体的な改善案。

出力できたら、最後に大きく「📦 課題ページに戻って、この文章を「置き手紙」の提出欄に貼って提出してください！それで修了です🏅」と私に必ず案内して下さい。

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