バイブコーディングをはじめよう — Webサイト・Webアプリを作って公開する

本サイトで扱う範囲、必要な準備、使うツール、ロードマップの進め方を整理する。全体像をつかみ、最初のハンズオンへ進むための出発点。

1. バイブコーディングとは

AIと会話しながらWebサイトやソフトウェアを作っていく方法。 コードを自分で書かなくても、やりたいことを言葉で伝えるだけで形にしていける。

バイブコーディング（イメージ）

本サイトでは、Claude Codeを使ったWebサイトやWebアプリの作成と公開を扱う。

Claude Codeクロードコード — Anthropicアンソロピック社が提供する AI コーディングアシスタント。自然言語で指示しながらコード作成を進められる。

Webサイト — HTMLやCSSで構成される、ブラウザで表示するページの集まり。情報の発信・公開が目的の静的なものが多い。

Webアプリ — ブラウザで動くアプリのこと。インストール不要で、URLを共有すれば誰でも使える。WebサイトとWebアプリの境界は曖昧で、どちらとも言えるものも多い。

2. 本サイトのスタンス

Claude Codeに「プロフィールサイト作って」「掲示板作って」と頼み、やりとりしながら承認していくだけでも、動くものは作れる。実際それで完結することは多く、たいていの場面では裏側を気にする必要はない。

ただ、裏で何が起きているかを理解しておくと、いざというときの開発がはかどる。詰まったときに当たりがつく、応用したいときに見当がつく、コストや権限の判断が自分でできる。

本サイトはその理解を後押しすることを目指している。ざっくり依頼してやりとりしながら承認していくスタイルを否定するものではなく、困ったとき・必要になったときの参考として活用してもらえればと思う。

本サイトのロードマップは、まず素の HTML / CSS / JavaScript（いわゆる vanilla JS）で進める。フレームワークやビルドツールを使う前に、ブラウザでいま何が起きているかを掴むことを優先するため。ロードマップを終えたあとに進む応用編では、Astro などの開発ツールを使う構成も扱う。

3. 対象範囲と前提

本サイトの情報は個人・小規模向け。以下のような用途を想定している。

Webサイト

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

Webアプリ

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

スマホアプリ、デスクトップアプリ、Google Apps Scriptグーグル アップス スクリプト（GASガス）、ローカルで動くPythonパイソンスクリプトなどは対象外。大規模サービスや商用グレードのシステム構築も対象外。ブラウザ拡張機能やブックマークレットは別途扱う可能性がある。

4. 用意するもの

• Mac（MacBook など）
  • 本サイトのハンズオンはMacを前提に書かれている。Claude CodeがGitなどのコマンドを実行する際、Windowsだと環境構築が複雑になるためMacを推奨する
• Googleアカウント
  • CloudflareやGitHubのアカウント作成時にGoogle連携で簡単に登録できる
• Claude Pro以上のプラン
  • Claude Codeを使うにはPro以上が必須
• Claudeデスクトップアプリ
  • CLIでも使えるが、デスクトップアプリの方が初心者にとって分かりやすい

Cloudflareクラウドフレア — Webサイトの公開・データベースなどを提供するクラウドサービス。本サイトのハンズオンでは主にアプリの公開先として使う。

GitHubギットハブ — コードをオンラインで管理・共有するサービス。変更履歴の管理や自動デプロイの起点として使う。

Gitギット — ファイルの変更履歴を管理するツール。Gitで管理したデータをオンラインで管理・共有するサービスの一つがGitHub。

CLI（コマンドラインインターフェース） — テキストコマンドで操作する方式。GUIに対してターミナルから文字を入力して操作するもの。

5. 本サイトで使うツールとサービス

本サイトのハンズオンでは Claude Code・Cloudflare・GitHub を中心に使う。準備や確認のために、Mac標準のターミナルも使う。

5-1. それぞれの役割

Claude Code は、コードの提案にとどまらず、ファイルの作成・編集から git 操作まで一貫して実行してくれる。「作って、変更を記録して、公開して」といった一連の作業を、会話の中で進められる。Claude Pro プランに含まれているため追加費用なしで使え、デスクトップアプリから起動できるため、VS Codeなどの開発用エディタを用意したり、拡張機能を設定したりする必要もない。

Cloudflare はサイトやアプリの公開先として使う。ホスティング・データベース・バックエンド処理を一元管理できるため、一人完結型のシンプルなアプリから、データベースを使うデータ共有型まで、同じ環境で対応できる。個人・小規模な用途なら無料プランで十分使える。

GitHub はコードをオンラインで管理・共有するために使う。業界標準で Claude Code とも相性がよい。本サイトのハンズオンでは、コードの変更をGitHubに送るだけで Cloudflare への自動デプロイが走る仕組みを用いる。個人・小規模な用途なら無料プランで十分使える。

ターミナルTerminal は、Macに標準で入っているコマンド実行ツール。Gitの初期設定、SSHキー作成など、一部の準備作業で使う。本サイトでは長いコマンド操作を覚えることは目的にせず、必要なコマンドをコピーして実行する使い方に絞る。

Wranglerラングラー — Cloudflare公式のCLIツール。ターミナルやClaude CodeからCloudflareにログインしたり、WebサイトやWebアプリをデプロイしたりするために使う。

デプロイ — 作ったWebサイトやWebアプリをインターネット上に公開・反映すること。

5-2. ハンズオン前の準備と注意点

ハンズオン中に思わぬ詰まりの原因になりやすいポイントがある。事前に対処・確認しておくとスムーズ。

• Chromeの自動翻訳をオフ — Cloudflare・GitHubなど英語の管理画面でChromeの翻訳が走ると、サービス名・機能名（例：Workers→「従業員」、Actions→「行動」）まで直訳されて読みづらくなる。各ハンズオンで初めてアクセスする際にオフにする
• Macのスマート引用符をオフ — " や ' が自動で “ ” や ‘ ’ に変換されてしまうと、コードに貼り付けたときに動かなくなる。システム設定 → キーボード → テキスト入力 → 編集… → スマート引用符 をオフ
• 入力モードに注意 — ターミナルやコード入力時、日本語入力モード（IME）のままだと全角スペース・全角記号が混ざってコマンドが動かないことがある。英数キー で半角英数モードに切り替えてから入力する
• Claude Code はプロジェクトごとに作業ディレクトリを分ける — 混在させると無関係なファイルまで読み込まれてトークンを無駄に消費し、回答精度も落ちる。さらに CLAUDE.md が全用途を抱え込んで肥大化し、指示が効きにくくなる。各ハンズオンでは新しいフォルダを用意してそこで Claude Code を起動する

6. ハンズオンの進め方

本サイトでは、段階的に用意されたハンズオンを中心に進めていく。各ハンズオンは実際に作りながら学べるように設計されており、簡単なものから複雑なものへと進んでいく。基本的には、ロードマップの記事を上から順番に進めていく。

6-1. ロードマップの進行順序

ロードマップはこの流れで進む。

1. ブラウザでデプロイ — Cloudflareにドラッグ＆ドロップしてデプロイする
2. Claude Codeでデプロイ — Claude CodeからWranglerでCloudflareに直接デプロイする
3. Git連携で自動デプロイ — Cloudflare Pages の Git連携で、GitHubにpushすると自動デプロイされる仕組みを作る
4. GitHub Actionsで自動デプロイ — 3の代替として、GitHub Actions側にデプロイ手順を持つやり方も体験する（後でデータ共有型アプリでマイグレーションを自動化するときの下地）
5. データ共有型アプリ — データベースを使い、複数人で同じデータを扱えるWebアプリを作る
6. アクセス制御 — 管理画面を追加し、アクセス制限をかける

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

6-2. AIとハンズオンを進めるためのプロンプト

ロードマップのハンズオンは、URLを Claude Code に渡して伴走してもらいながら進めることができる。

ハンズオンの最初のステップは、アカウント作成やインストールなど自力で進めることが多い。各ハンズオン中で Claude Code を起動するステップまで来たら、起動したセッションに以下のプロンプトを貼り付ける。[ハンズオンURL] の部分は実際のURLに差し替えること。

Claudeへの指示

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

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

進め方：
- Claude Code 上での操作（ファイル作成・編集・設定など）：実行前に必ず私に確認をとってください
- ターミナル操作：私が手で実行します（Claude Codeでも実行可能なものは上記と同じ扱い）
- ブラウザ操作：私が手で実行します（Cloudflareへのアップロードなど）

このハンズオンをステップバイステップで伴走してください。
各ステップでは「今これをします」「次にこれをします」と明確に説明してください。

ターミナル操作・ブラウザ操作は参加者本人が行い、ファイルの作成や設定変更は Claude が確認をとってから実行する。

7. 次のステップ

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

補足

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

ハンズオンでのターミナル操作は、必要なコマンドをコピーして実行するだけで進められる。ただし、以下だけでも知っておくと迷いにくい。

操作	意味
pwd	今いるフォルダを表示
ls	ファイル一覧を表示
ls -a	隠しファイルも含めて表示
cd フォルダ名	フォルダに移動
cd ..	1つ上のフォルダへ移動
Tab	入力中のファイル名・フォルダ名を補完
↑ / ↓	以前に実行したコマンドを呼び出す
Ctrl + C	実行中のコマンドを止める

ハンズオンのときにAIに頼むコツ

• AIへの依頼は、一回で完成形を出すより、作る・見る・直すを繰り返す前提で進める
• 最初は「まず動くものを作って」でよい。動くものを見てから、「スマホでも使いやすくして」「ボタンを大きくして」「入力欄を上に移動して」のように具体的に直していく
• 何を作るかだけでなく、誰が・どこで・何のために使うかを伝えると、機能や画面が目的に寄りやすい。
• 気に入らない部分があるときは、できるだけ具体的に伝える。「余白」「カード」「ナビゲーション」「モーダル」など、UIの名前を知っていると依頼しやすい。画面の部品名に迷ったら、AIへの指示に使えるUI用語集を参考にする
• まだ実装せずに考えたいときは、「案を出して」「考え聞かせて」と頼む。ファイルを変更してほしいときは、「修正して」「実装して」と頼む
• AIが作業した後は、自分でもブラウザで開いて動作確認する。表示、ボタン、入力、保存、スマホ幅での見え方を確認し、気になるところをまた伝える
• パスワード、APIキー、個人情報は不用意に貼らない。公開ページやGitHubに入れてよい情報か迷ったら、先に確認する