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

LEVEL 0 オリエンテーション

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

このスライドで扱うこと

• 本サイトについて（バイブコーディングとは）
• 対象範囲と前提
• ロードマップ
• 使うツールとサービス
• 用意するもの・確認しておく設定

想定環境

• Mac（MacBook など）
• Google アカウント
• Claude Pro 以上のプラン
• Claudeデスクトップアプリ

バイブコーディングとは

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

• コードを自分で書かなくてもよい
• やりたいことを言葉で伝えるだけで形になる

本サイトで扱うこと

Claude Code を使ったWebサイトやWebアプリの作成（バイブコーディング）と公開（デプロイ）

• ざっくり依頼して承認していくだけでも動くものは作れる
• 裏で何が起きているかを理解しておくと開発がはかどる
  • 詰まったときに当たりがつく
  • 応用したいときに見当がつく
• 本サイトはその理解を後押しすることを目指す

用語の整理

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

想定するWebサイト

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

想定するWebアプリ

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

対象外のもの

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

ブラウザ拡張機能やブックマークレットは Webアプリと同じ技術で作るものとして、応用編で扱う

進め方の方針

• 各ハンズオンは実際に作りながら学べる設計
• 簡単なものから複雑なものへ
• まず素の HTML / CSS / JavaScript（vanilla JS）で進む
  • フレームワークやビルドツールを使う前に、ブラウザでいま何が起きているかを掴むことを優先
• 応用編で Astro などの開発ツールも扱う

ロードマップの流れ

1. ブラウザでデプロイ — ドラッグ＆ドロップしてデプロイ（公開）する
2. Claude Codeでデプロイ — Claude Code から直接 Cloudflare にデプロイ
3. Git連携で自動デプロイ — GitHub にコードを送ると自動でデプロイ
4. GitHub Actionsで自動デプロイ — 3の代替方式
5. データ共有型アプリ — DB を使い複数人で同じデータを扱う
6. アクセス制御 — 管理画面を追加し、見られる人を制限する

Claude Code

• コード提案にとどまらず、ファイル作成・編集から git 操作まで一貫実行
• 「作って、変更を記録して、公開して」を会話の中で進められる
• Claude Pro プランに含まれるため追加費用なし
• 本サイトのハンズオンでは Claudeデスクトップアプリから起動して使う

Cloudflare と Wrangler

• Cloudflare はサイトやアプリの公開先となるクラウドサービス
  • ホスティング・DB・バックエンド処理を一元管理
  • 個人・小規模なら無料プランで十分
• Wrangler は Cloudflare 公式の CLI ツール
  • CLI = コマンドラインインターフェース（テキストコマンドで操作する方式）
  • ターミナルや Claude Code から Cloudflare にログインしてデプロイするために使う

GitHub と Git

• GitHub はコードをオンラインで管理・共有するサービス
  • 業界標準で Claude Code とも相性がよい
  • コードの変更を GitHub に送るだけで Cloudflare への自動デプロイが走る
  • 個人・小規模なら無料プランで十分
• Git はファイルの変更履歴を管理するツール
  • Git で管理したデータをオンラインで共有するサービスのひとつが GitHub

ターミナル

• Mac に標準で入っているコマンド実行ツール
• Git 操作、GitHub 設定など、一部の作業で使う
• Claudeデスクトップアプリ内のターミナルからも実行できる
• 本サイトでは長いコマンド操作を覚えることは目的にしない
• 必要なコマンドをコピーして実行する使い方に絞る

Mac（MacBook など）

• 本サイトのハンズオンは Mac 前提
  • Claude Code が Git などのコマンドを実行する際、Windows だと環境構築が複雑
• チップは M1 以上を推奨
  • Claude Code やビルドツールの動作が快適になる

Googleアカウント

• Cloudflare や GitHub のアカウント作成時に Google 連携で簡単に登録できる
• 自力で進められるなら、Google アカウント以外で登録してもよい

Claude Pro 以上 / デスクトップアプリ

• Claude Pro 以上のプラン
  • Claude Code を使うには Pro 以上が必須
• Claudeデスクトップアプリ
  • 本サイトのハンズオンの説明はこのアプリを使う前提で書かれている
  • 自力で解決できる人は CLI 版でもよい

ハンズオン中の詰まりやすいポイント

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

最初のハンズオン

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

体験できること:

• Claude Code を使った Webサイト作成
• Cloudflare のアカウント作成
• ブラウザからのデプロイ

デプロイと制作の感覚をまずつかむのが目的

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

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

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

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

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

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

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

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

AIに頼むコツ（1/2）

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

AIに頼むコツ（2/2）

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

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com