Claude Codeを導入して、見積もりシミュレーター・AI診断・HP＋管理画面を作る。

スタートです！Claude Code を自分のパソコンで使える状態にします。

1. パソコンにダウンロード ＆ インストール下記から Mac か Windows を選んでダウンロード → そのままインストールまで済ませる（ダウンロードしただけでは使えません。ダウンロードしたファイルを開いてインストールを完了させてください）：⬇️ ダウンロードページを開く →https://code.claude.com/docs/ja/desktop-quickstart
   🪟 Windowsで下のような「Installation failed」エラーが出て失敗する時は
   ダウンロードしたインストーラーを右クリック →「管理者として実行」で入れ直してください（Claude Code だけでなく、この後の Git のインストールで失敗した時も同じ方法で解決できます）。

   それでも入らない時は、エラー画面のスクショ（できるだけ画面全体）を添えて相談👇
   📸 スクショで相談する（AIサポートを開く）→

   🪟 こんなエラー画面が出た人はこちら（実際に届いた7種類・自分のと同じ絵を探してください）押して開く

   下の画面のどれかが出ていれば、ほぼ全部「右クリック →『管理者として実行』」で解決します（※5️⃣だけ別対応）。

   

   1️⃣ Trusted app installs must be…
   「はい(Y)」を押す → 開いた設定で「開発者モード」をオン → もう一度インストール。

   

   2️⃣ 1️⃣と同じ（Windows 10 の表記）
   「はい(Y)」→ 設定で「アプリのサイドロード」または「開発者モード」をオン。

   

   3️⃣ Installation failed: AddPackage…
   数字（0x8007…）は人によって違います。右クリック →「管理者として実行」で入れ直し。

   

   4️⃣ Administrator access is required…
   「OK」で閉じて、右クリック →「管理者として実行」→「はい」。

   

   5️⃣ 管理者のユーザー名とパスワードを求められる
   これは会社などで管理されているパソコンです。ここだけは管理者として実行しても入りません。個人のパソコンで進めるのが最短です。

   

   6️⃣ GitHub Desktop の Installation has failed
   あとの手順で使う Git 側のエラーです。同じく右クリック →「管理者として実行」。

   

   7️⃣ Git の Runtime error（アクセスが拒否されました）
   これも権限のエラーです。右クリック →「管理者として実行」で入れ直し。

   どれとも違う画面が出ていたら、その画面のスクショ（できるだけ画面全体）を添えて相談してください👇
   📸 スクショで相談する（AIサポートを開く）→
2. アカウントを作成（Googleアカウント連携で簡単）🌐 アカウントを作る（claude.ai を開く）https://claude.ai/loginアプリ（またはブラウザ）を開いて、「Googleで続ける（Continue with Google）」をクリック → 普段使っている Googleアカウントを選ぶだけ。
   1️⃣ 「Sign up（新規登録）／ Log in」の画面で 🔵 Continue with Google を押す
   2️⃣ 自分の Google アカウントを選んで「続行」
   3️⃣ これで パスワード設定もメール認証も不要でアカウント作成完了です（次の課金に進めます）
   ※ Googleアカウントが無い方は、メールアドレスでの登録もできます。
3. Claude を課金（Proプラン）💳 Pro プランに課金する（Billing を開く）https://claude.ai/new#settings/billing1番安いプラン（Pro・月払い・約22ドル）をクレジットカードで決済。
   ※これは Claude（ツール）自体の利用料です。
   🔑 課金しないと Claude Code は使えません。無料プランのままでは動かないので、必ず Pro 以上に課金してください。

⚠️

申込み画面の上に 「月間／年間」の切り替え があります。
最初は 年間 が選ばれていることが多いので、必ず 月間（月払い） に切り替えてから決済してください！
※ 年間のままだと一度に1年分の請求になります。まずは月払い（約22ドル/月）でOKです。
💡 「約22ドル」の表示が見つからない時：下の画像の赤丸の「月間」をクリックすると月払いの金額に切り替わります（「$19/月・$220 年間一括払い」と出ているのは年間が選ばれている状態です）。プラン一覧はこちら → https://claude.com/pricing

💬 課金が心配な方は、決済する前でもOK。サイドバーの「📸 全画面スクショで相談」から、その画面のスクショ（できるだけ画面全体）を添えてお気軽に聞いてください。

📸 スクショで相談する（AIサポートを開く）→

まず下の「準備（1回だけ）」を上から順にやります。
最後にプロンプトを1回送ると、AIから「どんな商売か」「どんなデザインか」の2つだけ質問が来ます。
答えると、お客様が選択肢を選ぶたびに金額がその場で変わる「自動見積もりシミュレーター」が完成します（印刷ボタンを押すとPDFの見積書になります）。

1. 作業フォルダ作成デスクトップか書類フォルダに「ユニコスクール」という名前のフォルダを作る。
   💡 デスクトップ＝全部のアプリ・ソフトを隠した“パソコンの壁紙”の画面のことです。
2. Claudeデスクトップアプリを立ち上げる課題1-1-1で入れた Claude デスクトップアプリを起動します。
   ここからは⚠️ デスクトップアプリで！
   Chrome や Safari で claude.ai を開いた画面にも「Code」はありますが、それはクラウド版＝この課題で使う「ローカル」（自分のパソコンのフォルダ）が選べません。課題1-1-1でパソコンに入れた「Claude デスクトップアプリ」本体を起動してください（Mac＝Dock や Launchpad／Windows＝タスクバーやスタートメニューの Claude アイコン）。
   👉 まだ入れていない／起動のしかたが分からない人だけ開く（Mac / Windows別）押して開く

   📥 まだアプリを入れていない人
   1️⃣ claude.ai/download を開いてダウンロード → インストール。
   2️⃣ 入れ終わったら、下の手順で起動します。
   
   🍎 Mac
   1️⃣ Launchpad（Dockのロケット）か アプリケーションフォルダから Claude を起動（⌘+スペース→「Claude」でもOK）。
   2️⃣ Dockに固定：Dockのアイコンを右クリック → オプション → Dockに追加。
   
   🪟 Windows
   1️⃣ スタート（⊞）→「Claude」と打って Enter。
   2️⃣ タスクバーに固定：Claudeを右クリック →「タスクバーにピン留めする」。
   
   ※ どうしても見つからない・起動できない時は、サイドバーの「📸 全画面スクショで相談」へ。サポート放送でスタッフが画面共有でお手伝いします。
3. Code に切替起動したアプリの左上のツールバーにある </>（コード）を押します。💬（チャット）と </> が並んでいて、</> が白く選ばれている状態が Code 画面です。最初から Code 画面が開いている場合は、そのまま次へ進んでOK。
   👉 「Code」が見つからない／この先の「ローカル」が出ない人だけ開く押して開く

   ⚠️ ブラウザ版（claude.ai）を開いているかも
   最新のUIでは、Chrome や Safari の claude.ai にも「Code」がありますが、それはクラウド版＝この課題で使う「ローカル」（自分のパソコンのフォルダ）が選べません。
   
   🔍 見分け方
   画面の上にURLの入力バーがあればブラウザ版です。
   
   ↩️ 直し方
   デスクトップアプリ本体（手順1-1-2-2で立ち上げたもの）を開き直してください。
4. 「Git が必要です」と表示された人へ（一部のパソコンだけ・出なければ飛ばしてOK）⚠️ これはパソコンによっては一部の人だけに表示されます。出ていない人は、このステップを飛ばして次へ進んでOKです。
   1️⃣ チャット入力欄の上に、この赤い表示が出ていますか？

   

   ローカルセッションにはGitが必要です。
   と表示されていますか？

   ⚠️ 表示されている 🙆 表示されていない

   2️⃣ 次に「今はしない」を押しましたか？

   ⬇️ 下の画面が出たら、もっと簡単な方法があるので「今はしない」を押して終了してください（このあとの手順でご案内します）。Mac・Windows どちらも同じ見た目です。

   

   😅 「Gitをダウンロード」を押してしまっても大丈夫です。開いたページは閉じてしまってOK。このあとの手順どおりに進めれば問題なく直ります。

   ✅ 「今はしない」を押した 🙆 このポップアップは出ていない 😅 「Gitをダウンロード」を押してしまった

   3️⃣ お使いのパソコンはどちらですか？

   下のボタンから選んでください👇 選んだ方の手順だけが表示されます。

   🍎 Mac 🪟 Windows

   🍎 Macの方の手順

   🪟 Windowsの方は押さないでください！（Mac専用の手順です）
   🪟 Windowsの方はこちら → Windows用の手順を開く

   1. GitHub Desktop のダウンロードページを開く🌐 GitHub Desktop を開く →
   2. 白いボタン 「Download for Apple silicon」 を押す
      💡 少し前のIntel入りMacの方は、下の 「Download for Mac with Intel chip」 を押してください（どちらか分からない時は、まず「Apple silicon」でOK）。
      
   3. ダウンロードした「GitHub Desktop」を開く（初回は「開く」）
      → 初回に設定画面が出ても、「Continue（続ける）」を連打でOK（サインイン画面は「Skip」で飛ばして大丈夫です）
      → Git も一緒に入ります

   インストールが終わったら 「✅ インストールした（次へ）」 を押して、最後の再起動へ進んでください。

   💡 Git はアイコンが出ないソフトです。デスクトップやアプリ一覧を探す必要はありません（見当たらなくて正常です）。
   うまくいったかどうかは、次の画面で「赤い表示が消えたか」だけで判断します。

   🪟 Windowsの方の手順

   🍎 Macの方は押さないでください！（Windows専用の手順です）
   🍎 Macの方はこちら → Mac用の手順を開く

   1. Git for Windows のページを開く🌐 Git for Windows を開く →
   2. 水色の 「Click here to download」 をクリック
   3. ダウンロードした .exe をダブルクリック →「はい」
   4. あとは 「Next」連打 →「Install」→「Finish」

   ⚠️ 途中で「Installation failed」等のエラーが出て失敗する時は、ダウンロードした .exe を右クリック →「管理者として実行」で入れ直してください。

   💡 Git はアイコンが出ないソフトです。デスクトップやアプリ一覧を探す必要はありません（見当たらなくて正常です）。
   うまくいったかどうかは、次の画面で「赤い表示が消えたか」だけで判断します。

   🔁 最後に、かならずパソコンを再起動

   

   ✅ 再起動できたら、ここを見てください：チャット入力欄の上（下の画像の赤枠のところ）から赤い表示が消えていれば完了です。

   

   再起動して初めて Git が認識されます（ここを忘れる人がとても多いです）。
   この教科書サイトは再起動後にブラウザで開き直せば、進み具合もそのまま続きから進められます。安心して再起動してください。

   再起動しても赤い表示が消えない方へ
   よくあることなので大丈夫です。原因はだいたい3つのどれかなので、下のボタンから順番に確認してください。

   😵 再起動しても消えない人はこちら →

   🙆 この手順は飛ばしてOKです

   赤い表示が出ていない方は、Gitのインストールは必要ありません。下の画像のように、チャット入力欄の上（赤枠）に何も出ていなければOKです。
   そのまま次の手順へ進んでください。

   

   あとから赤い表示が出てきたら、この枠に戻って 「⚠️ 表示されている」 を押してください。↩︎ 最初の質問に戻る

   😵 再起動したのに、赤い表示が消えない人へ

   よくあることなので大丈夫です。原因はだいたい下の3つのどれかです。上から順に1つずつ確認してください（ほとんどが1️⃣か2️⃣で解決します）。

   1. 🪟 Windowsの方：入れたのは「GitHub Desktop」ではありませんか？
      Windowsは Git for Windows を入れないと、この赤い表示は消えません。🌐 Git for Windows を入れ直す →
   2. 🍎 Macの方：GitHub Desktop を一度も開いていませんか？
      ダウンロードしただけ・アプリケーションフォルダに入れただけでは Git は入りません。アプリを1回開く（「開く」→「Continue」連打 → サインイン画面は「Skip」）まで進めてください。
   3. Claudeを「完全に」終了してから開き直す
      ウィンドウの × だけでは終わっていません。
      🍎 Mac＝⌘ + Q／🪟 Windows＝タスクバーの Claude を右クリック →「終了」
      → もう一度起動して、左上の ＋新規 から新しいセッションを開いてください。

   ✅ 1️⃣〜3️⃣を全部やっても消えない場合は、あなたのせいではありません。画面全体のスクリーンショットを添えて下のCSへ送ってください。すぐお手伝いします。

   📸 全画面スクショで相談 →

   ◀ 前へ 次へ ▶
5. 作業フォルダを指定して、チャット欄の下を「自動」「Opus 5.5」「中」にする1️⃣ チャット欄のすぐ下の「このコンピューター」をクリック。
   2️⃣ 出てきたメニューの「＋新しい環境」をクリック。
   3️⃣「フォルダ」の右にある「＋追加」をクリック。
   4️⃣「選択…」をクリックして、先ほどの「ユニコスクール」フォルダを指定 →「環境を作成」をクリック。
   💡 フォルダを指定すると「このワークスペースを信頼しますか？」という画面が出ることがあります。黒いボタン「ワークスペースを信頼する」（赤枠）を押して進んでください。
   5️⃣ チャット欄の下を「自動」にします（左の表示を押して「自動モード」を選ぶ。最初から「自動」ならそのままでOK）。右下は「Opus 5.5」「中」に。まずは脳死でこの3つでOKです（意味は分からなくて大丈夫）。
   💡 どうしても見つからない時は、画面全体のスクショを添えてAIサポートへ。
6. いちばん最後に：プロンプトを送信して開発！準備ができたら、下のプロンプトをチャット欄に貼り付けて送信します。

   👇 下記のコピーボタンをクリックし、そのまま Claude Code に投稿👇

   ☝️ 貼り先＝上の「準備（1回だけ）」で開いた Claude Code の会話。1-1-2〜1-1-4 はこの同じ会話で続けます。理由＝フォルダ・設定・さっき作った作品を AI が覚えたまま次を作れる（新しい会話にすると、最初から説明し直しになる）。
   📋 1-1-2 のプロンプトコピー

   「自動見積もりシミュレーター」を作って下さい！お客様が選択肢を選ぶと、条件分岐で金額がその場で変わり、最後は印刷でPDFの見積書になるWebアプリです。
   
   まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く。2問が終わったら、あとは途中で質問せず一気に完成まで）。作業フォルダに既存のシミュレーターがあるか無いかは私に聞かず、あなたが確認して（無ければ新規で作る）。この2問は省略しないで（先に他の質問を挟まない）：
   質問1（選択肢で聞く）：デザインの雰囲気はどれにしますか？　A：上品ミニマル／B：明るくポップ／C：シックで高級感（改行して1行に1つずつ並べ、最後に「D：お任せ（AIが最適な案を選ぶ）」も付けて。お任せにも必ず続きのアルファベット記号を付け、記号1文字で答えられるようにして）
   質問2（選択肢で聞く）：何の商売の見積もりシミュレーターにしますか？　A：ハウスクリーニング／B：ホームページ制作／C：イベント・教室／D：引っ越し／E：写真撮影（改行して1行に1つずつ並べ、最後に「F：お任せ（あなたが面白い題材を決めて）」も付けて（お任せにも必ず続きの記号を付ける）。記号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保存）」ボタン。押すと質問コーナーやボタンが消えて、きれいなA4の見積書だけが1枚に収まって印刷される（印刷用のCSSを必ず入れる。Mac／Windowsとも印刷画面で「PDFとして保存」を選べばPDFになります、という案内も画面に小さく添える）
   ・見積番号は開くたびに日付から自動で作る。金額は3桁カンマ区切りで表示する
   ・崩れ防止：見積書の宛名や自社情報（社名・〒住所・TEL・メール）は十分な幅を取り“1行ずつ縦に並べる”配置にする。1文字ずつ縦に折り返されるような極細の列は絶対に作らない
   ・コードは欲張らずコンパクトに、全体で15分以内に完成する規模。完成したらブラウザでサイトOpen（アプリ内プレビューだけで終わらせず、“規定のブラウザ（Chrome等）”で開く）。開けない時のために、ファイルのフルパスも教えて下さい。
   
   できあがって私がブラウザで開けたら、次の「プロンプトの逆引き」を短く見せて（貼っただけで終わらせない＝次に自分で頼む時に真似できる形で）：
   ・私が貼ったプロンプトのどの行が、成果物のどこになったか＝Markdownの表（|プロンプトの行|成果物のどこ|）で3〜5行だけ（全部は書かない）
   ・このプロンプトで効いていたポイント3つ（1行ずつ・「◯◯と書いたから△△になった」の形）
   ・次に自分で頼む時の型を1行（何を・どの順番で伝えると形になりやすいか）
   ・プロンプトの中に出てきた専門用語（色の指定 #ffffff・CSS・API など）は、上の表の中で日常語に訳して（例：#ffffff＝白。訳せない言葉を残さない）
   
   すべて完成したら、あとで“✉️次の人への置き手紙”に貼り足せる「📋 ふりかえりメモ（約150字）」を必ず出力して下さい。フォーマット：
   課題1-1-2の見積もりシミュレーターが完成しました！🧮
   ・何の商売×どんなデザインにしたか：（1行で）
   ・お気に入りの条件分岐：（1行で）
   
   そのうえで、最後に大きく「🎉 完成です！左の選択肢をいろいろ変えて、右の見積書が一瞬で変わるのを楽しんでください（お急ぎを選ぶと質問が増えます）。印刷ボタンでPDFになるところまで試したら、課題ページに戻って『✅ 課題1-1-2 完了！ シミュレーターができた』ボタンを押して、課題1-1-3に進んでください！」と私に必ず案内して下さい。
   
   ※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「D：お任せ（AIが最適な案を選ぶ）」を足して（お任せにも必ず続きのアルファベット記号を付けて、記号1文字で答えられるようにする。「D」なら、あなたがベストを選んで先へ進めて）。それに加えて毎回はっきり「E：自由入力もOK（E：の後ろに思いついた言葉をそのまま書いてください）」も添えて。自由入力が来たら A / B / C / お任せ より優先して。URLを案内する時は丸カッコや句読点で囲まず単独行に。英語の画面が出たら日本語訳を1行そえて。

   🚀 もっと実務で使えるようにしたい人へ（完成後の追撃プロンプト）押して開く

   🚀 完成したシミュレーターが、実務仕様にパワーアップします
   

   📋 パワーアップ版（シミュレーターの完成後にそのまま貼る）コピー

   この見積もりシミュレーターをパワーアップして下さい！途中で質問せず一気に：
   ・管理者モード：画面上のスイッチで管理者に切り替えると、単価・品目・割引ルールを自分の商売に合わせて編集できて、ブラウザに保存される（localStorage）。「初期に戻す」ボタン付き
   ・見積もり結果から、お客様に送る丁寧なメール文面を自動で組み立てて「📋 コピー」できるようにする
   ・見積書に宛名・自社情報（社名・〒住所・TEL・メール）を入力できる欄（1行ずつ縦に並べ、極細の列は作らない）
   ・値引き行と、源泉徴収10.21％のチェックにも対応
   ・アニメーションをもう一段リッチに（合計金額のカウントアップ、プラン切替でカードが入れ替わる 等）
   最後にあなたのアイデアで、実務で嬉しい工夫を1つだけ足して下さい。完成したらブラウザでサイトOpen（アプリ内プレビューだけで終わらせず、“規定のブラウザ（Chrome等）”で開く）。開けない時のために、ファイルのフルパスも教えて下さい。
   
   ※出力の約束＝太字マーク（**）などの装飾記号は使わない（記号がそのまま見えて読みにくいため）。もし私に質問する時は、必ず A / B / C の選択肢を改行して1行に1つずつ並べ、最後に「D：お任せ（AIが最適な案を選ぶ）」を足して（お任せにも必ず続きのアルファベット記号を付けて、記号1文字で答えられるようにする。「D」なら、あなたがベストを選んで先へ進めて）。それに加えて毎回はっきり「E：自由入力もOK（E：の後ろに思いついた言葉をそのまま書いてください）」も添えて。自由入力が来たら A / B / C / お任せ より優先して。URLを案内する時は丸カッコや句読点で囲まず単独行に。英語の画面が出たら日本語訳を1行そえて。

   ※ まず軽い版で「動いた！」を体験→物足りなくなったらこれを貼るだけ。時間内に終わらなくても、あとでゆっくりでOKです。
   🖨 印刷ボタンでPDFになります：Mac は印刷画面の左下「PDF」→「PDFとして保存」、Windows は「プリンター」で「Microsoft Print to PDF」または「PDFとして保存」を選ぶだけです。

💡 途中でAIから質問が来たら

下のプロンプトをそのままコピペで送る → 質問に答えるだけで、10問の診断ページが完成します（結果画面から自分のHP・LINEへ誘導OK＝集客・PRにもそのまま使えます）。

👇 下記のコピーボタンをクリックし、そのまま Claude Code に投稿👇

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

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

作るもの＝HTMLファイル1つで動く「AI活用タイプ診断（10問）」を核にした、最後が購入・申込みのCTA（呼びかけボタン）で締まる1枚のキャンペーンサイトです。ライブラリ・外部ファイル・AIのAPIは使わず、素のHTML＋CSS＋JSだけで動かして下さい。
まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：どんな人に向けた診断にしますか？　A：中小企業の経営者／B：営業職／C：士業の先生（改行して1行に1つずつ並べ、最後に「D：お任せ（AIが最適な案を選ぶ）」も付けて。お任せにも必ず続きのアルファベット記号を付け、記号1文字で答えられるようにして）
質問2（選択肢で聞く）：どんな方向性・テーマの診断にしますか？　A：AIをどこまで業務に活かせるかをタイプ分けしたい／B：自社のお客様に配る診断にしたい／C：部下や後輩に配って育成のきっかけにしたい（改行して1行に1つずつ並べ、最後に「D：お任せ（あなたがベストな方向性を決めて）」も付けて（お任せにも必ず続きの記号を付ける）。記号1文字で答えるだけでOK。リストに無い方向性を自由に書いてもらってもOK、その場合はそのまま採用する）。あわせて、診断の最後で案内したい商品・サービス（あれば名前と一言。例：自社の講座／初回相談／LINE登録）と、誘導したいURL（自分のホームページ・LINE・SNSなど）があれば一緒に教えてください（どちらも、なければ「なし」でOK）。
2問が終わったら、途中の確認をせず最後まで一気に作って下さい。
【必ず入れる仕様】
・設問10問は、答えた人の仕事でのAIの使い方が見えてくる内容を、あなたの方で考えて作る（1問ずつ表示して、選ぶと自動で次の問題へ進む）
・上に進捗バーがあり、答えるたびに伸びる。「戻る」ボタンで1問前に戻れる
・回答から4タイプのどれかを判定して結果画面を出す（タイプ名／特徴／向いている使い方／次にやるべき1歩を具体的に）
・ページ全体は「ヒーロー（キャッチコピー＋“診断をはじめる”大ボタン）→ 診断10問 → 結果 → 購入・申込みCTA」のキャンペーンサイト構成にする
・結果画面のいちばん下に、質問2で聞いた商品・サービスの「購入・申込みCTAセクション」を必ず置く（商品名＋選ばれる理由3点＋大きなCTAボタン。誘い文句は診断結果のタイプに合わせてあなたが考える。URLがあればそのURLへ飛ばし、商品もURLも「なし」の場合は架空のサンプル商品でCTAの形だけ作る）＝この診断を自分の集客・PRにそのまま使える形にする
・CTAは魅力的に、ただしウソの限定表示やカウントダウンで煽らない（誠実なキャンペーンサイトにする）
・結果画面には、その人の回答傾向を示すスコア表示（棒グラフがゼロからスッと伸びるアニメーション付き・外部ライブラリは使わない）と「もう一度診断する」ボタン
・結果が出る瞬間に、紙吹雪のような軽いお祝い演出を入れる（外部ライブラリは使わない）
・スマートフォンで見ても崩れないようにする
完成したら“規定のブラウザ（Chrome等）”でサイトOpenして、ファイルのフルパスも教えて下さい。

できあがって私がブラウザで開けたら、次の「プロンプトの逆引き」を短く見せて（貼っただけで終わらせない＝次に自分で頼む時に真似できる形で）：
・私が貼ったプロンプトのどの行が、成果物のどこになったか＝Markdownの表（|プロンプトの行|成果物のどこ|）で3〜5行だけ（全部は書かない）
・このプロンプトで効いていたポイント3つ（1行ずつ・「◯◯と書いたから△△になった」の形）
・次に自分で頼む時の型を1行（何を・どの順番で伝えると形になりやすいか）
・プロンプトの中に出てきた専門用語（色の指定 #ffffff・CSS・API など）は、上の表の中で日常語に訳して（例：#ffffff＝白。訳せない言葉を残さない）

完成したら、あとで“✉️次の人への置き手紙”に貼り足せる「📋 ふりかえりメモ（約150字）」を必ず出力して下さい。フォーマット：
課題1-1-3のAI活用タイプ診断が完成しました！🧠
・誰向けの診断にしたか：（1行で）
・自分は何タイプだったか：（1行で）

そのうえで、最後に大きく「🎉 完成です！自分でも10問答えてみて、結果画面まで出るか確認してください → 課題ページに戻って『✅ 課題1-1-3 完了！ 診断ページができた』ボタンを押して、課題1-1-4に進んでください！」と私に必ず案内して下さい。

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

💡 途中でAIから質問が来たら

お客様が見るホームページ（表）と、社内が使う管理画面（裏）をひと続きで作ります。下のプロンプトをそのままコピペでOK。終わると、そのまま✉️次の人への置き手紙（修了）まで自動で進みます。

👇 下記のコピーボタンをクリックし、そのまま Claude Code に投稿👇

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

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く）：
質問1（選択肢で聞く）：どんなジャンルのお店・会社にしますか？　A：飲食・スイーツ／B：美容・サロン／C：スクール・教室（改行して1行に1つずつ並べ、最後に「D：お任せ（AIが最適な案を選ぶ）」も付けて。お任せにも必ず続きのアルファベット記号を付け、記号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つのファイルのフルパスも教えて下さい。

できあがって私がブラウザで開けたら、次の「プロンプトの逆引き」を短く見せて（貼っただけで終わらせない＝次に自分で頼む時に真似できる形で）：
・私が貼ったプロンプトのどの行が、成果物のどこになったか＝Markdownの表（|プロンプトの行|成果物のどこ|）で3〜5行だけ（全部は書かない）
・このプロンプトで効いていたポイント3つ（1行ずつ・「◯◯と書いたから△△になった」の形）
・次に自分で頼む時の型を1行（何を・どの順番で伝えると形になりやすいか）
・プロンプトの中に出てきた専門用語（色の指定 #ffffff・CSS・API など）は、上の表の中で日常語に訳して（例：#ffffff＝白。訳せない言葉を残さない）

完成したら、あとで“✉️次の人への置き手紙”に貼り足せる「📋 ふりかえりメモ（約150字）」を必ず出力して下さい。フォーマット：
課題1-1-4のホームページ＋管理画面が完成しました！🌐🛠
・どんなお店・会社のサイトにしたか：（1行で）
・裏側の管理画面でできること：（1行で）
・課題1-1-1〜1-1-4をやり終えた感想：（1行で）

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

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

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

💡 途中でAIから質問が来たら