バイブコーディングを
はじめよう

LEVEL 0 オリエンテーション

Webサイト・Webアプリを作って公開するための出発点。範囲・準備・ツール・ロードマップの全体像を整理する

このスライドで扱うこと

• バイブコーディングとは何か
• 本サイトのスタンス（ざっくり依頼でも動くが、裏を知ると強い）
• 対象範囲と前提（個人・小規模向け）
• 用意するもの・使うツール
• ハンズオンの進め方とロードマップ

バイブコーディングとは

AIと会話しながらWebサイトやソフトウェアを作っていく方法

• コードを自分で書かなくてもよい
• やりたいことを言葉で伝えるだけで形になる
• 本サイトでは Claude Code を使ったWebサイト/Webアプリの作成と公開を扱う

用語の整理

• Claude Code: Anthropic社のAIコーディングアシスタント。自然言語で指示しながらコード作成を進められる
• Webサイト: HTML/CSSで構成され、ブラウザで表示するページの集まり。情報発信が目的の静的なものが多い
• Webアプリ: ブラウザで動くアプリ。インストール不要、URL共有で誰でも使える
• WebサイトとWebアプリの境界は曖昧

ざっくり依頼でも動く、でも裏を知ると強い

• Claude Codeに「プロフィールサイト作って」と頼むだけで動くものは作れる
• たいていの場面では裏側を気にする必要はない
• ただ、裏で何が起きているかを理解しておくと開発がはかどる
  • 詰まったときに当たりがつく
  • 応用したいときに見当がつく
  • コスト・権限の判断が自分でできる

素のHTML/CSS/JavaScriptで進める

• ロードマップは vanilla JS（素のHTML/CSS/JavaScript）で進める
• フレームワーク（React・Next.js・Astro 等）やビルドツールは使わない
• ブラウザでいま何が起きているかを掴むことを優先

応用編で Astro など開発ツールを使う構成も扱う

想定するWebサイト

• 個人のポートフォリオ・プロフィールサイト
• 趣味の作品紹介ページ・個人ブログ的ページ
• 小さな会社・店舗・サークルの紹介ページ
• イベント告知ページ・簡単なランディングページ

想定するWebアプリ

• 個人や少人数のチームで使うアプリ
• 仕事の効率化ツール・趣味のプロジェクト
• アクセス数もユーザー数もそれほど多くないもの

対象外のもの

• スマホアプリ・デスクトップアプリ
• Google Apps Script (GAS)
• ローカルで動く Python スクリプト
• 大規模サービスや商用グレードのシステム構築

ブラウザ拡張機能やブックマークレットは別途扱う可能性あり

4つの準備物

• Mac（MacBook など）
  • 本サイトのハンズオンはMac前提
• Googleアカウント
  • CloudflareやGitHubのGoogle連携で楽に登録できる
• Claude Pro以上のプラン
  • Claude Code を使うには Pro 以上が必須
• Claudeデスクトップアプリ
  • CLIでも使えるがデスクトップアプリが分かりやすい

用語の整理（インフラ）

• Cloudflare: Webサイトの公開・データベースなどを提供するクラウドサービス。本サイトでは主にアプリの公開先
• GitHub: コードをオンラインで管理・共有するサービス。変更履歴管理・自動デプロイの起点
• Git: ファイルの変更履歴を管理するツール
• CLI: テキストコマンドで操作する方式（GUIに対する用語）

それぞれの役割

• Claude Code: コード提案にとどまらず、ファイル作成・編集・git操作まで一貫実行。Claude Proに含まれる
• Cloudflare: ホスティング・DB・バックエンドを一元管理。個人なら無料プランで十分
• GitHub: コードのオンライン管理。業界標準でClaude Codeとも相性良
• ターミナル: Git初期設定・SSHキー作成など、準備作業で少し使う

関連用語

• Wrangler: Cloudflare公式のCLIツール。ターミナル/Claude CodeからCloudflareにログインしたりデプロイしたりするのに使う
• デプロイ: 作ったWebサイト/Webアプリをインターネット上に公開・反映すること

ハンズオン前の事前設定（1/2）

• Chromeの自動翻訳をオフ — Cloudflare/GitHubの管理画面が直訳されて読みづらくなるため（例: Workers→「従業員」、Actions→「行動」）
• Macのスマート引用符をオフ — " が “ ” に、' が ‘ ’ に化けるとコード貼り付けで詰まる
• 入力モードに注意 — IMEのままだと全角スペース混入でコマンドが動かなくなる。英数キー で半角に切り替える

ハンズオン前の事前設定（2/2）

• Claude Codeはプロジェクトごとに作業ディレクトリを分ける
  • 混在させると無関係なファイルまで読み込まれてトークンを無駄に消費し、回答精度も落ちる
  • CLAUDE.md が全用途を抱え込んで肥大化し、指示が効きにくくなる
  • 各ハンズオンでは新しいフォルダを用意し、そこで Claude Code を起動する

ロードマップの進行順序

1. ブラウザでデプロイ — Cloudflareにドラッグ&ドロップ
2. Claude Codeでデプロイ — WranglerでCloudflareに直接
3. Git連携で自動デプロイ — GitHubにpushすると自動デプロイ
4. GitHub Actionsで自動デプロイ — 3の代替方式
5. データ共有型アプリ — DBを使い複数人で同じデータを扱う
6. アクセス制御 — 管理画面とアクセス制限

1〜4のデプロイ方法それぞれの特徴と使い分けは Cloudflareへのデプロイ方法4つ で扱う

AIと一緒に進めるためのプロンプト

各ハンズオンで Claude Code 起動後、このプロンプトを貼る:

このハンズオンの参加者です：
[ハンズオンURL]

現状：
- 作業フォルダは現在のフォルダ
- すでに済んでいるステップがあれば確認の上スキップしてください

進め方：
- ファイル作成・編集：実行前に必ず私に確認
- ターミナル操作：私が手で実行
- ブラウザ操作：私が手で実行

このハンズオンをステップバイステップで伴走してください。

ターミナルで使う最低限の操作

コピー&ペーストで進められるが、これだけ知っておくと迷いにくい

AIに頼むコツ（1/2）

• 一回で完成形を狙わない: 作る→見る→直すを繰り返す前提
• まず動くものを作る: そこから「スマホでも使いやすく」「ボタン大きく」と具体に詰める
• 誰が・どこで・何のために使うかを伝える: 機能や画面が目的に寄りやすい
• 気に入らない部分は具体的に伝える: 「余白」「カード」「ナビゲーション」「モーダル」などUI用語を使うと依頼しやすい。迷ったら UI用語集

AIに頼むコツ（2/2）

• 考えたい時と実装したい時を分ける: 「案を出して」「考え聞かせて」 / 「修正して」「実装して」
• AIの作業後は自分でも動作確認: 表示・ボタン・入力・保存・スマホ幅で確認
• 機密情報は不用意に貼らない: パスワード・APIキー・個人情報。公開してよいか迷ったら先に確認

最初のハンズオンへ

• CloudflareにHTMLファイルなどをブラウザでアップロードしてWebサイトとして公開する

Cloudflareへのドラッグ&ドロップで、まず1ページを公開してみる

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com