実はめちゃくちゃシンプル！9ステップで完結するバイブコーディング開発フロー

2025年7月5日 15:20

はじめに

「バイブコーディングって難しそう...」

そう思っているあなたへ。実は私がやっていることって、たった9つのステップだけなんです。HTMLで動くシンプルなものしか作っていません。

プログラミングの知識？ほぼゼロでOK。
複雑な環境構築？不要です。

今回は、私が実際にやっているバイブコーディングの全工程を、包み隠さずお見せします。

※今回は前準備が済んでいる段階での解説です。
・ClaudeCode / Gemini CLIセットアップ済
・node.jsインストール済
・GitHubアカウント作成＆GihHub CLIセットアップ済
・Vercelアカウント作成＆Vercel CLIセットアップ済

バイブコーディングとは？

バイブコーディングは、AIツール（主にClaude CodeやGemini CLI）を使って、プログラミングの知識がなくても自分のアイデアを形にできる開発手法です。

従来のプログラミング学習では

文法を覚える
エラーと格闘する
環境構築で挫折する

バイブコーディングでは

日本語で指示するだけ
AIがコードを書いてくれる
数分でWebサイトが公開できる

必要なもの（たった3つ）

パソコン（WindowsでもMacでもOK）
VSCode（無料のコードエディタ）
Claude Code（AIアシスタント）

これだけです。プログラミングの知識は不要です。

9ステップの全工程

ステップ1：PC上に空のフォルダを作る

デスクトップに新しいフォルダを作ります。
名前は何でもOK。「my-first-site」とかでいいです。

ステップ2：VSCodeで空のフォルダを開く

VSCodeを起動して、さっき作ったフォルダを開きます。
「File」→「Open Folder」で選ぶだけ。

ステップ3：Claude Codeを起動する

VSCodeのターミナルで以下のコマンドを入力します。

claude

Gemini CLIの場合でしたらこちら

gemini

これでAIアシスタントが起動します。

事前にセットアップしないといけないので詳しくは下記記事を参考に！

ClaudeCodeのセットアップ記事

Mac

Windows

Gemini CLIのセットアップ記事

ステップ4：「空の要件定義書作って」と言う

まずは何を作るか整理します。

空の要件定義書作って

するとAIが要件定義書のテンプレートを作ってくれます。

ステップ5：作りたいものをざっくり言って、構成を確認

例えば：

シンプルな自己紹介サイトを作りたい。
プロフィール、スキル、連絡先を載せたい。
構成をテキストで出力して

AIが以下のような構成を提案してくれます：

- ヘッダー（名前、キャッチコピー）
- プロフィールセクション
- スキルセクション
- 連絡先セクション
- フッター

ステップ6：「ローカル上で実装して」と言う

構成がOKなら：

ローカル上で実装して

たったこれだけで、AIがHTML、CSS、必要ならJavaScriptまで全部書いてくれます。

ステップ7：ブラウザで確認して、必要なら修正

生成されたindex.htmlをブラウザで開いて確認。
修正したい部分があれば：

タイトルの文字をもっと大きくして
背景色を青系にして

などと指示するだけです。

ステップ8：「GitHubでPushして」と言う

満足できたら：

GitHubでPushして

これでコードがGitHubに保存されます。

ステップ9：「Vercelでデプロイして」と言う

最後に：

みんなが見られるようにVercelでデプロイして
リンクはなるべく短めに

数分後には、あなたのサイトが世界中からアクセスできるようになります！

実際の会話例

あなた：空の要件定義書作って

AI：要件定義書を作成しました。

あなた：ポートフォリオサイトを作りたい。
      作品を3つくらい載せて、簡単な自己紹介も入れたい。
      構成をテキストで出力して

AI：以下の構成はいかがでしょうか：
   1. ヒーローセクション（名前、職業）
   2. 自己紹介
   3. 作品ギャラリー（3作品）
   4. お問い合わせ

あなた：いいね！ローカル上で実装して

AI：実装完了しました。index.htmlを開いて確認してください。

あなた：完璧！GitHubでPushして

AI：GitHubへのPushが完了しました。

あなた：Vercelでデプロイして、リンクは短めに

AI：デプロイ完了です！
   https://your-portfolio.vercel.app
   でアクセスできます。

よくある質問

Q: 本当にプログラミング知識ゼロでできる？

A: はい！わたしも最初は「Hello World」すら書けませんでした。（むしろ書いたこともない）日本語で指示するだけなので、LINEでメッセージを送る感覚です。

Q: どんなものが作れる？

A: わたしが作ったもの

ランディングページ
ポートフォリオサイト
簡単なゲーム
忘れ物チェックアプリ
ポモドーロタイマー
占い鑑定書サイトetc.

基本的にブラウザで動くものなら何でも作れます。

Q: 失敗したらどうなる？

A: 大丈夫です！AIに「エラーが出たから直して」と言えば修正してくれます。最悪でも、フォルダを削除してやり直せばOK。

Q: お金はかかる？

A: 基本的に無料です

VSCode：無料
GitHub：無料
Vercel：無料枠で十分
Claude Code：有料　月額20ドル〜
Gemini CLI：無料だけどすぐ上限がくる

まとめ：今すぐ始められる

バイブコーディングは、思っているより100倍簡単です。

空のフォルダを作る
VSCodeで開く
Claude Codeに話しかける
9ステップを順番に実行

これだけで、あなたのアイデアが形になります。

「でも、私にはアイデアがない...」

そんなあなたは、まず自己紹介サイトから始めてみてください。名前と好きなものを3つ書くだけでも立派なWebサイトです。

次のステップ

この記事を読んで「やってみたい！」と思った方へ。

まずはVSCodeをインストール
Claude Codeの準備
この記事を見ながら9ステップを実践

分からないことがあれば、AIに聞けば答えてくれます。「初心者なので分かりやすく教えて」と付け加えるのがコツです。

バイブコーディングで、あなたのアイデアを世界に発信しましょう！

難しく考える必要はありません。まずは気楽に、第一歩を踏み出してみてください。