【初心者向け】Claude Code 使い方｜申し込みページを作って公開（コード不要・基礎編6）

Claude Code（クロードコード）の使い方、基礎編6「アイデアを形にして公開する」。コードを書かずに、申し込みページを作ってインターネットに公開するまでを言葉だけで進めます。 #ClaudeCode #クロードコード #Webページ作成 スマホで申し込むと、自分のパソコンのファイルに1行増えます。そのノートパソコンが、インターネット経由で申し込みを受け付けたんです。作る→スクショを見せて直す→公開する、の3ステップ。公開は自分のパソコン→トンネルで一時公開→クラウド（Vercel）の3段階です。 ▼ チャプター 0:00 申し込みページと公開リンクを作る 0:30 「あったらいいな」で止まっていたこと 0:44 実演 — スマホの申し込みがファイルに1行 1:22 今日の進め方と準備 1:57 条件がないとありきたりになる理由 2:43 申し込みページを作って 4:01 localhostは家の中 4:28 サーバーの正体 5:06 GitHubは自分の引き出し 5:57 GitHubの登録と連携 7:07 コミットとプッシュでセーブ 7:56 スクショを見せて直す 9:12 実験の前にセーブ 9:41 トンネルで一時公開 10:29 スマホで開いてみる 10:58 自分のPCがサーバーに 11:22 Vercelにデプロイ 13:06 公開の3段階 13:27 プッシュ前のチェック1行 14:18 バイブコーディングとこの回 14:58 3行まとめ 15:34 宿題：LINEグループにリンク ▼ 動画で使った依頼文（そのままコピーして使えます） ・ページを作る: イベントの申し込み受付ページを作って。項目は、名前、連絡先、メモの3つ。申し込みが来たらファイルに1行ずつ保存して、管理者画面で一覧を表にして見せて。 ・GitHubと連携: 自分のGitHubアカウントと連携して。必要なプログラムがあれば、インストールから手伝って。 ・セーブ: このフォルダのバージョン管理を始めて、GitHubに非公開のリポジトリを作って。秘密の鍵や個人情報を含むファイルが保存対象に入っていないか確認して、結果を見せて。僕が確認してから、コミットしてプッシュして。メッセージは「申し込みページ完成」。 ・スクショで直す: この画面のタイトルをもっと大きくして。ボタンはサークルのイメージカラーの緑に変えて、その下に案内文を1行追加して。 ・一時公開: 今のサーバーを一時公開して。 ・クラウドへ: このプロジェクトをVercelにデプロイして。 → クラウドでも申込者の一覧が保存されるように、保存方法を変えて。 ・プッシュ前のチェック: 秘密の鍵や個人情報のファイルが、GitHubに上がらないようにチェックして。 ▼ 画面にだけ出てきたもの（ナレーションは意味だけ読んでいます） ・申し込みが1行ずつたまる記録用のファイル: applications.json ・管理者用の裏口: /admin ・一時公開のツール: cloudflared（Cloudflareの無料トンネル。会員登録なしで trycloudflare.com の一時アドレスが出て、止めると消えます） ・除外リスト: .gitignore — チェックを頼んだあと、個人情報のファイルが本当に外れているか自分の目で確かめてからプッシュしてください ・継続して公開する場所: Vercel（個人の非商用なら無料のHobbyプラン。用途と使用量の制限を確認してください） ・GitHub・Vercelの画面は英語表示のまま撮っています。 ※ 登録画面やAI社員の返答の文言は、バージョンによって変わります。 ▼ 公式ドキュメント Claude Code: https://code.claude.com/docs/ja/overview 画像の貼り付けなど操作の詳細: https://code.claude.com/docs/ja/interactiv... GitHubアカウントの作成: https://docs.github.com/ja/get-started/sta... 一時公開（trycloudflare）: https://developers.cloudflare.com/cloudfla... Vercel Hobbyプラン: https://vercel.com/docs/plans/hobby 🗂 実習ファイル: https://github.com/AI-Dico/claude-code-pra... 6章のフォルダ: https://github.com/AI-Dico/claude-code-pra... 🏠 宿題: 自分たちの集まりで実際に参加者を募集したいイベントを1つ選んで、申し込みページを作ってください。自分で申し込んでファイルに1行増えるのを確かめたら、セーブして、スクショを渡して1か所だけ直し、トンネルで一時公開したリンクをLINEグループに送ってみてください。「え、何これ、どうやって作ったの？」と返ってきたら、コメントに1行残してください。 ▼ シリーズ（全11本） 前回: 基礎編5 調べものを任せる    • 【初心者向け】Claude Code 使い方｜調べものを任せて出典付きの比較表に（基...   次回: 基礎編7 CLAUDE.mdで毎月の仕事を4文字に    • 【初心者向け】Claude Code 使い方｜CLAUDE.mdで毎月の仕事が「精算...   再生リスト（最初から順番に）:    • Claude Code 入門シリーズ｜はじめてのAI社員（全11本）   ※ 2026年10月時点の画面と料金です。メニューの位置や文言は変わることがあります。 ※ この動画のナレーションはAI音声（ElevenLabs）です。効果音・BGMもElevenLabsで作成しています。画面は解説カードとHTMLで再現したアニメーションです。