バイブコーディングの始め方｜非エンジニアが業務アプリを作る5つの手順とプロンプト例

バイブコーディングは、作りたいものを日本語で伝え、AIとやり取りしながらコードを形にしていく作り方です。2025年2月に、OpenAIの共同創業者であるAndrej Karpathy氏がXへの投稿で使った言葉として広まりました。

非エンジニアが業務アプリを作るなら、自分だけが使い、止まっても困らない小さな業務を1つ選びます。誰が・何で・どのデータを使い・どこを正とするかを設計メモに書いてAIに質問させ、画面を1つ作り、ダミーデータで試し、変更前を保存して1回に1つずつ直します。この5手順と、使う道具の選び方を説明します。

バイブコーディングを始める前に用意するもの｜道具は3種類から選ぶ

非エンジニアがバイブコーディングの道具を選ぶときは、チャット画面で部品を作るか、ブラウザ上でアプリを丸ごと作るか、手元のパソコンのファイルを直接扱うかの3種類に分けると迷いません。

道具別の最初の操作

• チャット画面：ClaudeかChatGPTに登録し、新しい会話に「誰が使うか・何で使うか・どのデータとつながるか・どこを正とするか」を書いた設計メモを貼って、作る前にAIに質問だけさせます。
• Bolt.new：トップページの入力欄に、誰が使うか・何で使うか・どのデータとつながるか・どこを正とするかを書いた設計メモを貼って送信し、登録画面が出たら登録します（公式QuickStartの手順）。
• Claude Code：公式ドキュメントに沿って導入し、Claudeの有料プランかAnthropic Consoleのアカウントでログインしてから、作業用フォルダで起動します。

チャット画面の無料プランなら0円から試せます。Claude Codeは無料プランには含まれず、有料プラン（Pro・Max・Team・Enterprise）で使えます。最も安いClaude Proは月払い20米ドル、年払いは年200米ドルです（2026年9月29日時点、公式料金ページで確認）。APIの従量課金でも使えます。税や通貨換算を含む実際の請求額は申し込み画面で確認してください。

アプリを丸ごと作るサービスのBolt.newにも無料枠があります。使える量と料金は改定されるため、始める前に公式の料金ページで確かめてください。

ほかに用意するのは、試しに使うデータのコピーです。顧客名や電話番号は、最初はダミーに置き換えておきます。

バイブコーディングの始め方｜非エンジニアが進める5つの手順

バイブコーディングは、①自分だけが使う小さな業務を1つ選ぶ、②誰が・何で・どのデータ・どこを正とするかを1枚のメモに書いてAIに質問させる、③画面を1つだけ作らせる、④個人情報をダミーに置き換えたデータのコピーを実際の業務と並べて使う（毎日の業務なら1週間程度、週1回の集計なら数週間）、⑤変更前の状態を保存して1回に1つずつ直す、の5手順で始めます。1つずつ確かめてから次へ進むと、手戻りを減らせます。

1. 自分だけが使い、止まっても困らない業務を1つ選ぶ

最初は、自分だけが使い、個人情報をダミーに置き換えたデータのコピーで試せて、止まっても手作業に戻れる業務を選びます。週1回の集計、見積もりの計算、案件の一覧のように、入力と出力が毎回ほぼ同じものが向いています。顧客への自動送信や、請求金額の確定は後回しにします。

2. 誰が・何で・どのデータ・どこが正かを1枚に書く

バイブコーディングでAIにコードを書かせる前に、誰が使うか、何で使うか、どのデータとつながるか、どこを正とするかの4点を1枚のメモに書きます。紙でもメモ帳でも構いません。4点は次のように書きます。

• 誰が使うか：役割ごとに、見てよい項目と直してよい項目を書きます。
• 何で使うか：スマホかパソコンか、どのタイミングで入力するかを書きます。
• どのデータとつながるか：データの箱と、箱どうしの関係を書きます。
• どこを正とするか：同じ情報をExcelとアプリの両方で持つなら、どちらの値を正しいものとするかを書きます。

どのデータとどのデータがつながるかを書いたものは、エンジニアがER図と呼ぶ図です。難しく考えず、顧客・案件・担当者のような箱を並べて線で結び、線の横に「1社に案件は複数」と数の関係を書けば十分です。

誰が使うか・何で使うか・どのデータとつながるか・どこを正とするかを書いた1枚のメモは、すぐにコードを作らせずにAIへ渡し、分からない点を質問させます。「担当者が休んだときは誰が更新しますか」「失注した案件は消しますか、残しますか」といった質問が返ってきたら、決めていなかった箇所をメモに書き足します。質問に答えてメモを直してから、次の手順へ進みます。要件の決め方をもう少し詳しく知りたい場合は要件定義を進める前に決めることも参考になります。

3. 画面を1つだけ作らせる

バイブコーディングでAIに出す最初の依頼は、画面1つに絞ります。一覧画面を作るなら一覧画面だけにし、ログイン・通知・グラフのような「いずれ欲しいもの」は作らないものとして書いておきます。AIは頼まれていないものまで気を利かせて作ることがあり、その分だけ確かめる箇所が増えるためです。

4. ダミーデータのコピーを実際の業務と並べて使う

バイブコーディングの手順4では、AIに作らせた最初の画面を、顧客名や電話番号をダミーに置き換えたデータのコピーで実際の業務と並べて使います。毎日使う業務なら1週間程度、週1回の集計なら数週間かけて試します。本物の顧客情報はまだ入れません。困った所を1行ずつ書き留め、直す順番を自分で決めます。

5. 変更前の状態を保存し、1回に1つずつ直す

バイブコーディングでAIに修正を頼む前に、選んだ道具に合う方法で変更前の状態を保存します。

• チャット画面で作る場合は、直す前のコードを日付付きのファイル名で保存します。
• Bolt.newの場合は、公式のバックアップとVersion History手順で以前の版に戻せるか確認します。直接編集した変更が履歴に残るかも、使う前に確かめてください。
• Claude Codeなど手元で動くAIの場合は、「区切りごとにGitで保存して、戻し方も教えて」と頼みます。

変更前の状態を保存してから、直す依頼は1回に1つだけ「ほかは変えない」と添えて出します。別の所が壊れても原因の変更が分かり、その前の状態に戻せます。

バイブコーディングの始め方に使えるプロンプト例｜手順2〜5の頼み方

営業担当者が自分1人で使う案件一覧アプリを例に、手順ごとの頼み方と、困ったときの頼み方を載せます。設計メモのプロンプトでは【】の見出しを残して中身を自分の業務に置き換え、ほかのプロンプトでは業務名や項目名を置き換えて使ってください。

これから業務アプリを作ります。コードを書く前に、下のメモを読んで、分からない点と決まっていない点を質問だけしてください。まだ作らないでください。

【誰が使うか】
・営業担当の自分だけ。ほかの人にはまだ渡さない
・見てよい項目：全項目／直してよい項目：段階と次の予定日

【何で使うか】
・自分のパソコンで、商談のあとに段階と次の予定を更新する

【どのデータとつながるか】
・顧客：ダミーの会社名、ダミーの窓口名
・案件：顧客、見積金額、段階、次の予定日
・担当者：自分1人。1案件の担当者は1人
・1つの顧客に案件は複数ある

【正とする場所】
・試作中はExcelの台帳を正とし、アプリにはダミーデータのコピーだけを入れる

メモの内容で、案件の一覧画面を1つだけ作ってください。
・データは下に貼る10件のダミーだけを使う
・ログイン、通知、グラフはまだ作らない
・作ったあと、動かし方を3行以内で教えてください

次の1点だけ直してください。ほかの箇所は変えないでください。
・直してほしい所：段階を「商談中」から「見積提出」に変えても、一覧の並び順が変わらない
・期待する動き：次の予定日が近い順に並び直す
直したあと、変えたファイルと変えた理由を1行ずつ書いてください。

画面に次のエラーが出ました。原因の候補を可能性の高い順に3つ挙げ、1つ目だけ試してください。私はプログラムが読めないので、私が確認する作業があれば手順で書いてください。

（ここにエラーの文章をそのまま貼る）

いま作ったアプリについて、次を確認して一覧にしてください。直すのは私が指示してからにしてください。
・パスワードやAPIキーがファイルに直接書かれていないか
・実際の顧客情報が入っていないか
・データを消す操作に、取り消しや確認の画面があるか

人に見せる前の確認で、パスワードやAPIキーがファイルに書かれていると分かった場合の見つけ方と直し方は、APIキーの直書きを確かめる方法で整理しています。

バイブコーディングのコツ｜うまく進まないときに見直すこと

バイブコーディングがうまく進まないときは、次の3つを見直します。画面の見た目より先に、データの箱と線が業務に合っているかを確かめること。直す前の状態を保存して、いつでも戻せるようにすること。会話が長くなったら新しい会話を始め、最初に書いた1枚のメモを貼り直すことです。

1. バイブコーディングが空回りする原因の1つ目は、データの持ち方が合わないまま、画面の見た目から直そうとすることです。ボタンの位置や色を何度直しても、別の画面で同じ問題が出ます。うまくいかないと感じたら、誰が・何で・どのデータ・どこが正かを書いた1枚のメモに戻り、箱と線が今の業務に合っているかを先に確かめます。
2. バイブコーディングが空回りする原因の2つ目は、直す前の状態を残していないことです。残していないと、壊れたときに戻れません。Claude CodeやCursorのような手元で動くAIなら、Gitという変更履歴の仕組みで区切りごとに保存しておけば、前の状態に戻せます。仕組みが分からなければ「区切りごとにGitで保存して、戻し方も教えてください」と頼み、保存の手順を確認します。Gitがパソコンに入っていない場合は、導入方法も確認します。
3. バイブコーディングが空回りする原因の3つ目は、AIとのやり取りが長くなりすぎることです。同じ会話で何十回も直していると、AIが最初に決めた条件を見落とすことがあります。作る前に書いた設計メモ（誰が・何で・どのデータ・どこが正か）を新しい会話の最初に貼り直すと、条件を伝え直せます。

Claude Codeで始めるときに決めておくこと

Claude Codeは、パソコンの中のファイルを直接読み書きし、コマンドも実行できます。チャット画面より作れるものの幅が広い分、始める前に決めておくことが増えます。

始めるには、Claude Codeの公式手順からターミナル版かVS Code拡張機能など、使う場所に合うものを導入します。作業用フォルダを開いて起動し、案内に従ってClaudeのサブスクリプションまたはAnthropic Consoleのアカウントでログインします。

Claude Codeは、ファイルの変更やコマンドの実行の前に許可を求める設定で使い、許可する前に内容を確かめます。最初の依頼を入力する前に、次の3点を決めておきます。

• 作業用のフォルダを1つ作り、その中だけで作業させます。顧客の資料が入ったフォルダでは起動しません。
• 誰が・何で・どのデータ・どこが正かを書いた設計メモを、作業フォルダ直下の CLAUDE.md というファイルに貼っておきます。Claude Codeは起動するたびにこのファイルを読むため、毎回メモを貼り直す必要がなくなります。
• Claude Codeが許可を求めてきたとき、ファイルの削除や外部への送信を含む操作は自分だけで許可せず、コードを読める人に確認してから許可すると決めておきます。

チャット型のAIとの違いと、業務で使うときのルールはClaude Codeで業務ツールを作るときの注意点にまとめています。

バイブコーディングで作ったアプリを、コードを読める人に見てもらうタイミング

バイブコーディングで作ったアプリは、他の人が使い始める前か、止まると業務が止まるようになる前に、コードを読める人に確認してもらいます。確認するのは、パスワードの置き場所、見られる範囲、データの戻し方の3つです。

自分のアプリがいまどの段階にあるかは、バイブコーディングで作ったツールの社内利用と本番公開の境目で4段階に分けて確かめられます。人に渡す前の確認項目はAIで作った社内ツールの本番導入前チェックリストにあります。

始めたあとに、うまく進んでいるかを測る

バイブコーディングがうまく進んでいるかは、1件あたりの業務時間、AIの変更を前の状態に戻した回数、設計メモを書き直した回数の3つを記録すると数字で分かります。

• アプリを使う業務の1件あたりの時間を、始める前の1週間と、使い始めて4週目で比べます。
• AIに頼んだ回数と、そのうち「前の状態に戻した」回数を数えます。戻す回数が減らないなら、1回の依頼が大きすぎる、設計メモ（誰が使うか・何で使うか・どのデータとつながるか・どこを正とするか）が足りない、会話が長くなりすぎている、のどれかを疑います。
• 誰が使うか・何で使うか・どのデータとつながるか・どこを正とするかを書いた設計メモを書き直した回数と、その理由を1行ずつ残します。書き直しの多くが「使う人が増えた」なら、次は権限の確認に進む合図です。

使い始めて4週間たっても1件あたりの業務時間が減らず、AIの変更を前の状態に戻した回数も減らないなら、選んだ業務がバイブコーディングに向いていない可能性があります。その場合は作り込みを止め、業務の流れそのものを見直すほうが早く片づきます。業務を洗い出す手順は業務棚卸しのやり方で紹介しています。

一次情報・公式情報

• Andrej Karpathy氏のX投稿（vibe codingという表現を使った投稿）
• Claude Code ドキュメント「概要」
• Claude Code ドキュメント「Claudeのメモリを管理する（CLAUDE.md）」
• Claude Help Center「Use Claude Code with your Pro or Max plan」
• Claude 料金プラン
• IPA「安全なウェブサイトの作り方」

バイブコーディングの始め方に関するよくある質問