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

VST

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

1. 本サイトについて

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

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

本サイトでは、Claude Codeを使ったWebサイトやWebアプリの作成（バイブコーディング）と公開（デプロイ）を扱う。Claude Code にざっくり依頼して承認していくだけでも動くものは作れるが、裏で何が起きているかを理解しておくと、詰まったときに当たりがつき、応用したいときに見当がつく。本サイトはその理解を後押しすることを目指している。

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

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

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

2. 対象範囲と前提

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

Webサイト

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

Webアプリ

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

スマホアプリ、デスクトップアプリ、Google Apps Scriptグーグルアップススクリプト（GASガス）、ローカルで動くPythonパイソンスクリプトなどは対象外。大規模サービスや商用グレードのシステム構築も対象外。ブラウザ拡張機能やブックマークレットはWebアプリと同じ技術で作るものとして、応用編で扱う。

3. ロードマップ

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

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

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

ブラウザでデプロイ：Cloudflareにファイルをドラッグ＆ドロップしてデプロイ（公開）する
Claude Codeでデプロイ：Claude Codeから直接Cloudflareにデプロイする
Git と GitHub の基本：バージョン管理を身につけ、GitHubをコードのハブにする。AIに大胆な変更を頼んでもいつでも元に戻せる
データ共有型アプリ：データベースを使って、複数人で同じデータを扱えるWebアプリを作る

4. 使うツールとサービス

本サイトのハンズオンで使う道具を、ここでまとめて紹介する。Claude Code・Cloudflare・GitHub を中心に使い、準備や確認のために Mac標準のターミナルも使う。

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

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

Wranglerラングラー は Cloudflare 公式のCLIツール（コマンドラインインターフェース：テキストコマンドで操作する方式）。ターミナルや Claude Code から Cloudflare にログインして、WebサイトやWebアプリをデプロイするために使う。

GitHub はコードをオンラインで管理・共有するサービス。業界標準で Claude Code とも相性がよい。本サイトのハンズオンでは、変更履歴を GitHub に記録・バックアップして、コードのハブとして使う（Cloudflare と連携させれば、GitHubに送るだけで公開される自動デプロイも組める）。個人・小規模な用途なら無料プランで十分使える。

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

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

5. 用意するもの

ハンズオンを進めるための前提条件。揃っていないと開始できないものもあるので、事前にチェックしておく。

Mac（MacBook など）
- 本サイトのハンズオンはMacを前提に書かれている。Claude CodeがGitなどのコマンドを実行する際、Windowsだと環境構築が複雑になるためMacを推奨する
- チップは M1 以上を推奨。Claude Code やビルドツールの動作が快適になる
Googleアカウント
- CloudflareやGitHubのアカウント作成時にGoogle連携で簡単に登録できる
- 自力で進められるなら、Googleアカウント以外で登録してもよい
Claude Pro以上のプラン
- Claude Codeを使うにはPro以上が必須
Claudeデスクトップアプリ
- 本サイトのハンズオンの説明はこのアプリを使う前提で書かれている
- 自力で解決できる人は CLI 版でもよい

6. 確認しておく設定

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

Chromeの自動翻訳をオフ：Cloudflare・GitHubなど英語の管理画面でChromeの翻訳が走ると、サービス名・機能名（例：Workers→「従業員」、Actions→「行動」）まで直訳されて読みづらくなる。各ハンズオンで初めてアクセスする際にオフにする
Macのスマート引用符をオフ：" や ' が自動で “ ” や ‘ ’ に変換されてしまうと、コードに貼り付けたときに動かなくなる。システム設定 → キーボード → テキスト入力 → 編集… → スマート引用符 をオフ
入力モードに注意：ターミナルやコード入力時、日本語入力モード（IME）のままだと全角スペース・全角記号が混ざってコマンドが動かないことがある。英数キー で半角英数モードに切り替えてから入力する

7. 次のステップ

最初のハンズオンはここから。Claude Code を使った Webサイト作成、Cloudflare のアカウント作成、ブラウザからのデプロイを一通り体験する。デプロイと制作の感覚をまずつかむのが目的。

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

補足

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

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

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

AIとハンズオンを進めるためのプロンプト

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

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

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

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

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

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

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

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

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

2026-05-05 (last updated: 2026-07-13) タツヲ (yto)

☕️ Vibecoding Notes を応援