Claude Codeを体験

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

【音声チャットで進めます・必ず守る】私は声で話しかけます（音声チャット・音声入力）。聞き取りの誤字や言い間違いは、意味をくみ取って読み替え、聞き返しは最小限にしてください。あなたの返事は、そのまま読み上げられても分かるように、短い文で区切り、全部敬語の超丁寧な口調（例：「〜でございます」「〜いただけますでしょうか」「ありがとうございます」）で話してください。選択肢には番号を付けて、私が「1番」「お任せ」と声で答えられるようにしてください。

【作るページの名前・必ず守る】このあと作るHTMLは全部、タブの名前（title）と画面の一番上の見出しの頭に「3DAYS 1日目ワーク｜」を付けてください（例：「3DAYS 1日目ワーク｜活用術テンプレート集」）。あとで見返した時に、どの日の何で作ったかが分かるようにするためです。

【このプロンプト1本で最後まで】ページに戻ってボタンを押す必要はありません。私は音声通話で、番号か「お任せ」と答えるだけです。質問はすべて番号つきの選択肢にして、自由に話した答えが来たらそれを優先してください。

【このプロンプトの進め方】このプロンプト1本で、次の4つのステップを順番に進めます（集客LPを4つ＋デザインガイド／予約・申込フォーム／管理ダッシュボード／SNS投稿を4枚）。
・ステップの中に「質問」が書いてある所だけ、その質問をして私の答えを待つ。答えが来たら続きを進める。それ以外は止まらずに進める
・ステップが1つ終わるごとに、そのステップの【区切り】に書いてあることをやってから、次のステップへ進む

【各ステップの区切りでやること（省略禁止）】①作ったHTMLがあれば私のブラウザで自動で開いて（Mac: open ファイル名／Windows: start ファイル名）。開けない時は「デスクトップ→ユニコスクール→ファイル名をダブルクリックで開けます」と1行で書いて
②触って確かめる項目を1つだけ書いて
③「次へ進みますか？ 1：このまま次へ／2：ここを直したい（どこを直すか声で教えてください）／お任せ＝次へ」と番号で聞いて、答えを待つ。答えが来たら次のステップへ

【ファイルの置き方と報告の約束（省略禁止）】①前に作ったファイルは上書き・削除しないで、この課題用の新しいフォルダに作り、最後に保存場所（フォルダ名とファイル名）を一覧で書いて ②アプリ内のプレビューでボタンが動かない時は故障ではないので「いつものブラウザで開き直してください」と1行で案内して ③完成報告は「実際に動かして確認できた項目」と「まだ確認していない項目」を分けて書いて（ファイル名はあなたが分かりやすく決めてOK）

━━━━ ステップ1/4：集客LPを4つ＋デザインガイド ━━━━
今日のテーマで「集客LP（ランディングページ）」を4パターンと、その土台になる「デザインガイド」を作って下さい。1本の流れで、デザインガイド → LP4つ → 4つを見比べるページ、の順に一気に作ります。

まず質問を2回に分けて、1問ずつ私に聞いてください（1問目に私が答えてから2問目を聞く。2問が終わったら、あとは途中で質問せず一気に完成まで）：
質問1（番号で聞く）：あなたのお仕事に近い番号は？（下の8つを改行して1行に1つずつ並べ、「お任せ」と「自由入力でもOK」も添えて）
1：集客・営業（SNS投稿や広告文を毎日つくる）
2：事務・総務（書類の入力とまとめを自動に）
3：経理（月が変わったら集計表をすぐ出す）
4：建築・図面（何枚もの図面を比べて食い違いを見つける）
5：資料・報告書づくり（企画書・報告書・講座資料を、すぐ形に）
6：教育・講師・スクール運営（資料・チラシ・練習問題をつくる）
7：経営・管理部・マーケティング（数字の集計・会議資料・施策の案を自動に）
8：その他（自由に一言）
質問2（番号で聞く）：今日のテーマは何にしますか？ 質問1のお仕事に合う集客の題材をあなたが4つ考えて「1：…」〜「4：…」と1行に1つずつ並べ、「5：ユニコ🦄が放送で発表したテーマ（声で言ってください）」と「お任せ」を添えて。

作り方（この順番で・省略禁止）：
STEP1 デザインガイドを作る：テーマとお仕事から「誰に・何を・どう感じてほしいか」を3行で決め、デザインガイドのHTMLを1枚作る。中身＝①ブランドの一言 ②配色（色見本のタイルとカラーコード）③文字（見出し・本文の書体と大きさの見本）④余白と角丸のルール ⑤ボタン・カード・見出しの部品見本 ⑥写真の雰囲気（画像つき）⑦「4つの方向性」＝A 信頼感・誠実／B 明るく親しみ／C 高級感・上品／D 勢い・インパクト を、それぞれ配色と画像つきのカードで並べる。白ベース・本文18px以上は全パターン共通。同じ内容を DESIGN.md としても保存する
STEP2 集客LPを4つ作る：デザインガイドのA〜Dそれぞれで、同じテーマの集客LPを1つずつ作る（合計4つ）。各LPの構成＝ファーストビュー（キャッチコピー＋写真＋申込ボタン）→ お悩み3つ → 解決策・サービス内容 → 選ばれる理由3つ → お客様の声3つ → よくある質問3つ → 申込ボタン。ヘッダー（ファーストビュー）の画像は、写真・見出し・装飾をまとめた横長16:9の1枚の画像にして、申込ボタンは画像のすぐ下に置く。お客様の声の顔写真は、各カードの上に大きく入れる。まずA案の1つだけを作ってブラウザで開き、配色・文字・余白を私に確かめてもらってから、残りの3案を作る。数字の実績や口コミは架空のサンプルだと分かる書き方にする（「※サンプルです」を小さく添える）。動きは控えめなふわっと表示だけ
STEP3 見比べページを作る：4つのLPを横に並べてサムネイルで見比べられるページを作り、各LPとデザインガイドへのリンクを置く（別タブで開く）。どれが一番良いか、あなたのおすすめと理由を2行で書く

【画像】Claude Code は画像を作れないので、写真やイラストの場所には「ここに写真（内容）」と書いた枠を置いてください（グレーの角丸の枠・比率は16:9か1:1）。すぐ見栄えを良くしたい時は、下の用意済みの画像をそのまま img で入れてOKです：
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-shop.jpg（明るい店内）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-team.jpg（笑顔のスタッフ3人）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-consult.jpg（相談している様子）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-laptop.jpg（パソコン作業の手元）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-product.jpg（商品・小物）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-street.jpg（お店の外観・街並み）

実装の条件：HTMLファイルで完結（ビルドやターミナル操作は増やさない）。今日の内容は次のワークでも使うので、テーマ・お仕事・ターゲット・決めた配色を「今日のメモ」として1つのファイル（例：brief.md）に保存しておく。全体で20分以内に完成する規模にする。

【おまけ・やりたい人だけ】気に入ったLPを1つ、Claude の Artifact（アーティファクト）で公開してURLを教えて（だめな時は GitHub → Vercel の手順を1手ずつ案内して）。

【ステップ1の区切り】作ったHTMLがあれば私のブラウザで開き、触って確かめる項目を1つ書いて、最後に「ここまでできたら、ページの『ワーク1』の『できた！次へ進む』ボタンを押してください」と書いてから、「次へ進みますか？ 1：このまま次へ／2：ここを直したい（どこを直すか声で教えてください）／お任せ＝次へ」と番号で聞いて、答えを待つ。答えが来たら次のステップへ進む。

━━━━ ステップ2/4：予約・申込フォーム ━━━━
さっき作った集客LPに、本当に使える「予約・申込フォーム」を付けて下さい。

まず質問を1つだけ私に聞いてください（答えたら、あとは途中で質問せず完成まで）：
質問1（選択肢で聞く）：4つのLPのうち、どのデザインでフォームを作りますか？ A／B／C／D（改行して1行に1つずつ・「お任せ（一番良かったもの）」と「自由入力でもOK」も添えて）

作るもの：
・前のワークの「今日のメモ」（brief.md など）とデザインガイドを読んで、同じテーマ・同じ見た目で作る
・入力項目はテーマに合わせて5〜7個（お名前・連絡先・希望日時・メニューやプラン・ご要望 など）。希望日時はカレンダーから選べる
・入力ミスはその場で赤字で教える（必須・メールの形・電話番号の形）
・「確認画面 → 送信完了画面」の3ステップ。送信したらこのブラウザの中に保存する（localStorage・外のサーバーには送らない）
・完了画面に受付番号（日付＋連番）を出す
・選んだLPの申込ボタンを押すと、このフォームが開くようにLPのリンクも直す

【画像】Claude Code は画像を作れないので、写真やイラストの場所には「ここに写真（内容）」と書いた枠を置いてください（グレーの角丸の枠・比率は16:9か1:1）。すぐ見栄えを良くしたい時は、下の用意済みの画像をそのまま img で入れてOKです：
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-shop.jpg（明るい店内）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-team.jpg（笑顔のスタッフ3人）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-consult.jpg（相談している様子）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-laptop.jpg（パソコン作業の手元）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-product.jpg（商品・小物）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-street.jpg（お店の外観・街並み）

全体で10分以内に完成する規模にする。

掲示板コピペ用（約100字）：
予約フォームができました！
・入力項目：（1行）
・こだわったところ：（1行）

【ステップ2の区切り】作ったHTMLがあれば私のブラウザで開き、触って確かめる項目を1つ書いて、最後に「ここまでできたら、ページの『ワーク2』の『できた！次へ進む』ボタンを押してください」と書いてから、「次へ進みますか？ 1：このまま次へ／2：ここを直したい（どこを直すか声で教えてください）／お任せ＝次へ」と番号で聞いて、答えを待つ。答えが来たら次のステップへ進む。

━━━━ ステップ3/4：管理ダッシュボード ━━━━
フォームに届いた申込を管理する「管理ダッシュボード」を作って下さい。質問はせず、すぐ作り始めてOKです。

作るもの：
・前のワークのフォームが保存したデータ（localStorage）を読んで一覧にする。まだ少ない時のために、架空のサンプル申込30件を自動で足す（画面の目立つ所に「📎 これは架空のサンプルデータです」と表示）
・上に数字のタイル4つ：今月の申込数・今週の申込数・未対応の数・一番人気のメニュー
・申込一覧：日付・お名前・メニュー・状態（未対応／対応中／完了）。状態はその場で切り替えられ、切り替えたら保存する
・グラフ2つ（日別の申込数の棒グラフ・メニュー別の割合）。ライブラリを使わずSVGで描く
・検索とメニューでの絞り込み、CSVで書き出すボタン
・「🤖 今週のひとこと分析」：数字だけを根拠に、良い点1つ・気になる点1つ・次の一手1つを3行で
・🖨️ 印刷ボタン（印刷用CSSつき）
・デザインはデザインガイドと同じ見た目でそろえる

全体で10分以内に完成する規模にする。

掲示板コピペ用（約100字）：
管理ダッシュボードができました！
・一番見たい数字：（1行）
・分析のひとこと：（1行）

【ステップ3の区切り】作ったHTMLがあれば私のブラウザで開き、触って確かめる項目を1つ書いて、最後に「ここまでできたら、ページの『ワーク3』の『できた！次へ進む』ボタンを押してください」と書いてから、「次へ進みますか？ 1：このまま次へ／2：ここを直したい（どこを直すか声で教えてください）／お任せ＝次へ」と番号で聞いて、答えを待つ。答えが来たら次のステップへ進む。

━━━━ ステップ4/4：SNS投稿を4枚 ━━━━
今日のテーマの集客LPに人を呼ぶ「SNS投稿」を4本、下書きで作って下さい。実際の投稿はしません（下書きを私が確認するところまで）。

まず質問を1つだけ私に聞いてください（答えたら、あとは途中で質問せず完成まで）：
質問1（選択肢で聞く）：どのSNS向けにしますか？ A：Threads／B：Instagram／C：両方（改行して1行に1つずつ・「お任せ」と「自由入力でもOK」も添えて）

4本の中身（テーマに合わせて）：
1本目＝お悩みに共感する投稿／2本目＝サービスの中身を見せる投稿／3本目＝お客様の声（架空のサンプルと分かる書き方）／4本目＝LPと予約フォームへの案内

書き方の決まり（必ず守る）：
・書き出し → 空行 → 説明 → 空行 → 締め、のまとまりで区切る。1段落は1〜2文
・書き出しは次の3つの型から選び、どの型を使ったか投稿ごとに書く：型A「ツール名や手段＋具体的にできたこと」を最初に置く／型B「○○と○○を比べると」「○○ってありますよね？」の共感・比較から入る／型C「日付＋時間＋内容」を最初に置く告知（実在しない日時は作らない＝空欄にして【日時を入れる】と書く）
・語尾は「〜してみました！」「〜お見せします！」のように具体的な行動を短く伝える。話しかける締め（「ぜひ見に来て下さい！」など）を1つ入れる
・絵文字は1本に0〜1個まで、役割のある所だけ（文末か、案内の👇️）
・機能やメニューを並べる時は「・」で短く。Threadsは2〜3項目まで、Instagramは同じ項目に説明を足す
・Threads本文は500字以内。Instagramはキャプションとハッシュタグ案10個を合わせて2200字以内（改行も数える）。ハッシュタグは本文と別枠に置く
・根拠のない売上・反応数・実績・サービス機能を足さない。予定のないイベントや実演を勝手に告知しない
・全部「人の確認待ちの下書き」。最後に、投稿前に私が直すべき所を1つずつ書く

画像：
・投稿ごとに正方形（1080×1080）の「投稿画像」をHTMLとCSSで作る（見出し1行＋背景色＋アイコン・デザインガイドの配色）。画面のスクショでそのまま画像として使える大きさにする。写真が要る所は枠だけ置く
【画像】Claude Code は画像を作れないので、写真やイラストの場所には「ここに写真（内容）」と書いた枠を置いてください（グレーの角丸の枠・比率は16:9か1:1）。すぐ見栄えを良くしたい時は、下の用意済みの画像をそのまま img で入れてOKです：
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-shop.jpg（明るい店内）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-team.jpg（笑顔のスタッフ3人）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-consult.jpg（相談している様子）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-laptop.jpg（パソコン作業の手元）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-product.jpg（商品・小物）
https://bbs.unikoukokun.com/aio/img/kadai-v4/asset-street.jpg（お店の外観・街並み）

まとめのページ：4本を並べて見られる1枚のHTML（投稿文・画像・文字数・使った書き出しの型・コピーボタン）を作る。

全体で10分以内に完成する規模にする。

掲示板コピペ用（約100字）：
SNS投稿を4本作りました！
・一番使えそうな1本：（1行）
・今日4つ作ってみての感想：（1行）

【ステップ4の区切り】作ったHTMLがあれば私のブラウザで開き、触って確かめる項目を1つ書いて、最後に「ページの『ワーク4』の『4つともできた！』ボタンを押してください。これで4つ全部できあがりました。本当におつかれさまでございました」と伝え、作ったファイルの一覧を書く。

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