バイブコーディング コツ｜非エンジニアが成果を出すための指示の出し方9選

冒頭

従業員20人の会計事務所で総務を担当している方が、バイブコーディングを始めて2週間。Claude Codeに「顧客管理アプリを作って」と伝えたら、確かにアプリらしきものが出てきた。でも、思っていたのと違う。検索機能がない。一覧画面が見づらい。スマートフォンで開くとレイアウトが崩れる。修正を頼んでも、直したはずの箇所がまた壊れる。

8人のデザイン事務所を経営している方も、同じ壁にぶつかっていた。「ポートフォリオサイトを作って」と指示を出したら、テンプレートのような画面が返ってきた。自分の事務所らしさがまったくない。「もう少しおしゃれにして」と伝えても、AIが何を変えたのかよく分からない。

バイブコーディングは「AIに日本語で指示を出してアプリやツールを作る開発スタイル」だ。始めること自体は難しくない。だが、始めた後に「思い通りのものが出てこない」と感じる方が非常に多い。

原因のほとんどは、AIへの指示の出し方にある。プログラミングの知識は必要ない。指示の出し方を少し変えるだけで、AIの出力は驚くほど変わる。

この記事では、非エンジニアがバイブコーディングで成果を出すための9つのコツを、具体的なビフォー・アフターの指示例つきで紹介する。記事の最後に、すぐに使える指示テンプレート集PDFを無料でダウンロードできる。

なぜ「思い通りにならない」のか

バイブコーディングがうまくいかない3つの原因

図: バイブコーディングがうまくいかない3つの原因

バイブコーディングがうまくいかないとき、多くの方は「AIの性能が足りないのでは」と考える。しかし、2026年4月時点のAI（Claude Code、Cursor、Geminiなど）の性能は十分に高い。問題はAIの能力ではなく、AIへの伝え方にある。

原因は大きく3つだ。

1つ目。指示が抽象的すぎる。「おしゃれにして」「使いやすくして」「いい感じにして」。人間同士の会話ではこれで通じることもあるが、AIはあなたの「おしゃれ」のイメージを知らない。10人に聞けば10通りの「おしゃれ」がある。AIにとっては、指示が曖昧なまま「とにかく何か変える」しかない状態になっている。

2つ目。一度に全部を求めている。「顧客管理アプリを作って。検索機能と一覧表示と登録フォームとCSV出力と、できればグラフも」。機能を5つも6つも同時に指示すると、AIはどこから手を付けるか迷う。結果として、どの機能も中途半端になりやすい。

3つ目。修正を頼むたびに、AIが関係ない部分まで変えてしまう。「ボタンの色を青にして」と頼んだら、ボタンの色は変わったけれど、隣のテキストの配置まで動いてしまう。AIは指示された箇所だけでなく、コード全体を見直してしまうことがある。

この3つの原因に対して、9つのコツで対処していく。

コツ1: 最初の指示に「誰が・何のために・どう使うか」を入れる

バイブコーディングで最も重要なのは、最初の1回目の指示だ。ここで「誰が使うのか」「何のために使うのか」「どういう場面で使うのか」を伝えるだけで、AIの出力は大きく変わる。

うまくいかない指示の例:

「顧客管理アプリを作って」

これだと、AIは一般的な顧客管理アプリを作る。あなたの業務に合ったものにはならない。

うまくいく指示の例:

「会計事務所の総務担当（私）が使う顧客管理アプリを作って。顧問先は約80社。毎月の訪問日と、前回の打ち合わせ内容をメモしておきたい。朝イチで今週の訪問予定を一覧で確認するのが主な使い方。パソコンのブラウザで使う」

違いは明確だ。後者は「誰が」（会計事務所の総務担当）、「何のために」（顧問先の訪問管理）、「どう使うか」（朝イチで今週の予定を確認）が入っている。AIはこの情報をもとに、訪問日のカレンダー表示や、今週の予定をトップに表示する設計を自分で判断できる。

もう1つ例を挙げる。

うまくいかない指示の例:

「見積書を作るツールが欲しい」

うまくいく指示の例:

「フリーランスのWebデザイナー（私）が使う見積書作成ツールを作って。クライアントは月に3〜5社。見積もり項目は、デザイン費・コーディング費・修正費・ディレクション費の4種類が基本。消費税10%を自動計算して、PDF形式でダウンロードできるようにしたい」

この「誰が・何のために・どう使うか」の3点セットを入れる習慣をつけるだけで、最初の出力の完成度が上がる。やり直しの回数が減り、結果として早く完成する。

コツ2: 一度に1つずつ作る

🔄段階的に作る流れ

バイブコーディング初心者がやりがちな失敗は、最初の指示に10個の機能を詰め込むことだ。

「顧客管理アプリを作って。登録・編集・削除・検索・CSV出力・グラフ表示・メール送信・カレンダー連携・PDF出力・多言語対応をお願い」

この指示を受けたAIは、10個の機能を同時に作ろうとする。結果として、どれも中途半端になり、エラーが連鎖する。1つのバグを直すと別の場所が壊れる、という悪循環に入る。

コツは、1回の指示で1つの機能だけを作ることだ。

ステップ1の指示: 「まず、顧客情報の登録画面だけを作って。入力項目は、会社名・担当者名・電話番号・メールアドレス・メモの5つ。保存ボタンを押すとデータが保存される」

AIが作ったものを確認して、問題なければ次に進む。

ステップ2の指示: 「登録した顧客の一覧画面を追加して。会社名・担当者名・電話番号を表形式で表示。登録日の新しい順に並べて」

このように、1つずつ積み上げていくと、各段階で動作を確認できる。問題があればその場で修正できる。完成まで遠回りに見えるかもしれないが、実際はこのほうが早い。10個同時に作って3日間バグに悩むより、1つずつ作って1日で完成するほうが効率的だ。

目安として、1回の指示で頼む内容は「画面1つ」または「機能1つ」に絞るとよい。

コツ3: 修正は「どこを・どう変えるか」をピンポイントで伝える

AIに修正を頼むとき、「なんか違う」「もう少しいい感じに」と伝えても、AIはあなたの頭の中を読めない。修正依頼は具体的であればあるほど、AIの精度が上がる。

うまくいかない修正依頼の例:

「この画面、もう少し見やすくして」

うまくいく修正依頼の例:

「一覧画面の変更をお願い。(1)テーブルの行間が狭すぎるので、各行の高さを今の1.5倍にして。(2)会社名の列幅を広げて、電話番号の列幅を狭くして。(3)奇数行と偶数行で背景色を交互にして、行を目で追いやすくして」

修正依頼のポイントは3つだ。

  • どの画面のどの部分か（一覧画面のテーブル）
  • 何が問題か（行間が狭い、列幅のバランスが悪い）
  • どう変えてほしいか（1.5倍にする、交互に色を付ける）

さらに重要なのは、修正を頼むときに「それ以外の部分は変えないで」と一言添えることだ。

「一覧画面のテーブルの行間を1.5倍にして。ヘッダーのデザインやボタンの配置など、他の部分は一切変更しないで」

この一言があるだけで、AIが余計な部分を触るリスクが大幅に減る。

コツ4: 参考サイトやスクリーンショットを見せる

「おしゃれにして」「モダンな感じで」という指示が通じにくいのは、あなたの頭の中にある完成イメージをAIが知らないからだ。

解決策は、参考になるサイトや画面の見た目を具体的に伝えることだ。

うまくいかない指示の例:

「トップページをモダンなデザインにして」

うまくいく指示の例:

「トップページのデザインを変更して。イメージは、白い背景にグレーの文字、アクセントカラーはオレンジ。ヘッダーにロゴとメニュー3つ（サービス・料金・お問い合わせ）。メイン部分は大きな見出しと、その下に3つのカード型で特徴を並べるレイアウト。余白は広めに取って、詰め込みすぎない印象にしたい」

Claude Codeのデスクトップアプリでは、スクリーンショット（画面の写真）をチャット欄に直接貼り付けることもできる。「この画面のようなレイアウトにして」と画像を添えるだけで、AIはそのデザインを参考にしてくれる。

色やフォントの指定も効果が大きい。

「背景色は白（#FFFFFF）、文字色はダークグレー（#333333）、ボタンの色はオレンジ（#D97706）にして」

色のコード（#FFFFFFのような記号）が分からなくても大丈夫だ。「Googleで色 オレンジ カラーコードと検索すると出てくるので、気に入った色のコードをコピーしてAIに伝える」という方法でよい。

コツ5: AIの出力を確認してから次に進む

確認せずに進めた場合 vs 毎回確認した場合

図: 確認せずに進めた場合 vs 毎回確認した場合

バイブコーディングでは、AIに指示を出すたびに結果を確認する癖をつけることが大切だ。

AIは指示を受けると、コードを変更して「できました」と報告してくれる。このとき、画面を実際にブラウザで開いて、目で見て確認する。期待通りなら次の指示に進む。違っていたらその場で修正を頼む。

「5つの指示をまとめて出して、最後にまとめて確認する」というやり方は避けたほうがよい。途中で何かがおかしくなっていた場合、どの指示で問題が起きたのかが分からなくなる。やり直しの範囲が広がり、結果的に時間を大幅にロスする。

確認するポイントは4つだ。

  • 画面のレイアウトは崩れていないか
  • ボタンやリンクは正しく動くか
  • データの登録・表示は期待通りか
  • スマートフォンで見たとき（ブラウザの幅を狭くすればOK）も問題ないか

確認に使う時間は1回あたり1〜2分だ。この1〜2分を惜しんで後から2時間やり直すよりも、はるかに効率がよい。

コツ6: CLAUDE.md ファイルにルールを書いておく

Claude Codeには CLAUDE.md（クロードエムディー）という特別なファイルがある。ここにルールを書いておくと、以後のすべてのやり取りでAIがそのルールに従ってくれる。これは、バイブコーディングを効率化する最も強力なコツの1つだ。

CLAUDE.mdとは、プロジェクト（あなたが作っているアプリやツール）のフォルダに置くテキストファイルのことだ。少しだけ操作が出てきるが、そのままコピーすれば動く。意味は分からなくてOKだ。

Claude Codeのチャット画面に以下のように入力する:

「プロジェクトのルートにCLAUDE.mdファイルを作って、以下の内容を書いて」

内容の例:

このアプリは、会計事務所の総務担当（1名）が使う顧客管理ツールです。

デザインルール:

  • 背景色は白、文字色はダークグレー
  • ボタンの色はオレンジ
  • フォントはNoto Sans JP
  • スマートフォンでも使えるレスポンシブデザイン

動作ルール:

  • 一覧画面は登録日の新しい順に表示
  • 1ページに表示する件数は20件
  • 検索は会社名と担当者名で部分一致

文体ルール:

  • 画面に表示するメッセージは丁寧語（「保存しました」「削除してよろしいですか？」）
  • エラーメッセージは「〇〇を入力してください」の形式

一度このファイルを作っておけば、毎回「背景は白で」「フォントはNoto Sans JPで」と指示する必要がなくなる。AIは CLAUDE.md の内容を常に参照しながらコードを書く。

10回の指示のうち、3回を「デザインルールの繰り返し」に使っていたとしたら、その3回分がまるまる節約できる。指示の回数が減れば、料金プランの範囲内でより多くの機能を作れる。

コツ7: 「壊さないで」と明示する

既にある程度できあがったアプリに新しい機能を追加するとき、AIが既存の部分を壊してしまうことがある。これはバイブコーディングで最もストレスがたまる瞬間だ。

対処法は、指示の中に「影響範囲」を明記することだ。

うまくいかない指示の例:

「検索機能を追加して」

うまくいく指示の例:

「顧客一覧画面に検索機能を追加して。一覧画面のテーブルの上に、テキスト入力欄を1つ配置して、会社名で部分一致検索できるようにする。既存の一覧表示のレイアウト、登録画面、編集画面には一切変更を加えないで。新しく追加するのは検索入力欄とその動作だけ」

ポイントは「何を変えるか」だけでなく「何を変えないか」を明確に伝えることだ。

さらに安全策として、大きな変更を加える前にAIにこう頼むとよい:

「これから検索機能を追加する予定。その前に、現在のコードをバックアップとしてまとめてくれる？ もし何かおかしくなったら、このバックアップの状態に戻したい」

Claude Codeは、この指示を受けてコードの状態を記録してくれる。万が一おかしくなっても「さっきバックアップした状態に戻して」と頼めば、安全に元に戻れる。

コツ8: エラーが出たらエラーメッセージをそのまま貼る

バイブコーディング中にエラー（赤い文字の警告やアプリが動かなくなる状態）が出ることがある。このとき、自分の言葉で説明しようとする方が多いが、それは遠回りだ。

うまくいかない伝え方の例:

「なんかエラーが出た。動かなくなった」

うまくいく伝え方の例:

「以下のエラーメッセージが表示された。修正して」 （赤い文字をそのままコピーして貼り付ける）

エラーメッセージは、AIにとって最も正確な情報源だ。どのファイルの何行目でどんな問題が起きているかが書いてある。あなたがその内容を理解する必要はない。コピーして貼り付けるだけでよい。

Claude Codeのデスクトップアプリを使っている場合、エラーはチャット画面に自動で表示されることが多い。その場合は「このエラーを修正して」と一言伝えるだけで済む。

ブラウザで動くアプリの場合、画面を右クリックして「検証」（英語では「Inspect」）を選び、「Console」（コンソール）タブに表示される赤い文字がエラーメッセージだ。これをコピーしてAIに貼り付ける。

ただし、「検証」という操作に不安がある方は、画面のスクリーンショットを撮ってAIに送る方法でもよい。「この画面でエラーが出ている。何が問題か調べて修正して」と伝えれば、AIが問題を探してくれる。

コツ9: 「完成形」を最初に言葉にする

9つのコツの中で、最も見落とされがちだが最も効果が大きいのがこれだ。バイブコーディングを始める前に、完成形を言葉にしておく。

「どんな画面が何枚あって、それぞれの画面で何ができるか」を箇条書きにするだけでよい。

例: 顧客管理ツールの完成形

このツールには4つの画面がある。

画面1: ダッシュボード

  • 今週の訪問予定（直近5件）を表示
  • 顧客の総数を表示
  • 最近登録した顧客3件を表示

画面2: 顧客一覧

  • 全顧客をテーブル形式で表示（会社名・担当者名・電話番号・最終訪問日）
  • 会社名で検索できる
  • 各行をクリックすると詳細画面に移動する

画面3: 顧客詳細・編集

  • 顧客の全情報を表示する
  • 編集ボタンを押すとその場で編集できる
  • 訪問履歴（日付とメモ）を時系列で表示する

画面4: 新規登録

  • 会社名、担当者名、電話番号、メールアドレス、住所、メモを入力する
  • 保存ボタンで登録する

この完成形を最初にAIに見せたうえで「まず画面1のダッシュボードから作って」と指示すると、AIは全体像を把握した状態で各部分を作っていく。画面間のデータの受け渡しや、メニューの構成も、全体像を知っているからこそ適切に設計してくれる。

完成形を言葉にするのに30分かかったとしても、その30分はバイブコーディングの作業時間を2〜3時間は短縮してくれる。

9つのコツを使った指示の全体像

🔄バイブコーディング 成功する指示の流れ

9つのコツをバラバラに使うのではなく、流れとして使うと効果が最大になる。

最初に、完成形を箇条書きにする（コツ9）。次に、CLAUDE.mdファイルにデザインルールや基本設定を書く（コツ6）。そして、AIに完成形を見せたうえで「まずこの画面から作って」と指示する（コツ1・2）。AIの出力を確認し（コツ5）、修正はピンポイントで伝え（コツ3）、参考になる画像があれば添える（コツ4）。新しい機能を追加するときは「他の部分は変えないで」と明記し（コツ7）、エラーが出たらメッセージをそのまま貼る（コツ8）。

この流れを1回やるだけで「バイブコーディングの勘どころ」が掴める。2回目からは自然とこの流れで進められるようになる。

業種別 — 最初の指示テンプレート

9つのコツを踏まえた、業種別の指示テンプレートを紹介する。【】内をあなたの状況に書き換えて使ってほしい。

会計事務所・税理士事務所

私は【会計事務所/税理士事務所】の【職種: 総務/事務/所長】です。 顧問先は約【数字】社。

【作りたいもの: 例「顧問先の訪問スケジュール管理ツール」】を作りたい。

主な使い方:

  • 【場面1: 例「毎朝、今週の訪問予定を確認する」】
  • 【場面2: 例「訪問後に、打ち合わせ内容のメモを記録する」】
  • 【場面3: 例「月末に、今月の訪問実績を一覧で確認する」】

使う人数: 【人数】名 使う端末: 【パソコン/スマートフォン/両方】

まずは【最初に作る画面/機能】から始めて。

マーケティング会社・広告代理店

私は【会社の規模: 例「10人規模のマーケティング会社」】の【職種: マーケター/ディレクター/アカウント担当】です。

【作りたいもの: 例「案件ごとの進捗管理ダッシュボード」】を作りたい。

主な使い方:

  • 【場面1: 例「週次ミーティングで、全案件の進捗を一覧で確認する」】
  • 【場面2: 例「各案件のタスクと期限を管理する」】
  • 【場面3: 例「クライアントへの報告資料のデータを集計する」】

管理する案件数: 常時【数字】件程度 使う端末: 【パソコン/スマートフォン/両方】

まずは【最初に作る画面/機能】から始めて。

士業（弁護士・司法書士・行政書士・社労士等）

私は【事務所の規模: 例「弁護士2名・事務員3名の法律事務所」】の【職種】です。

【作りたいもの: 例「案件管理と期限アラートのツール」】を作りたい。

主な使い方:

  • 【場面1: 例「毎朝、今週期限が来る書類提出を確認する」】
  • 【場面2: 例「新しい案件を登録して、担当者と期限を設定する」】
  • 【場面3: 例「月末に、案件ごとの対応時間を集計する」】

管理する案件数: 常時【数字】件程度 使う端末: 【パソコン/スマートフォン/両方】

注意: クライアントの個人情報は画面に表示しない前提で設計して。ダミーデータで開発して。

まずは【最初に作る画面/機能】から始めて。

フリーランス全般

私はフリーランスの【職種: デザイナー/ライター/コンサルタント/翻訳者等】です。 クライアントは【数字】社。月の売上は【金額】万円前後。

【作りたいもの: 例「見積書・請求書の作成管理ツール」】を作りたい。

主な使い方:

  • 【場面1: 例「新規案件の見積書をPDFで作成する」】
  • 【場面2: 例「月末に請求書を一括で作成する」】
  • 【場面3: 例「入金状況を管理して、未入金のものをリストアップする」】

使う端末: 【パソコン/スマートフォン/両方】

まずは【最初に作る画面/機能】から始めて。

よくある不安と答え

9つのコツを全部覚えないとダメなのか

全部を一度に覚える必要はない。まずはコツ1（誰が・何のために・どう使うか）とコツ2（一度に1つずつ作る）の2つだけ意識してみてほしい。この2つだけで、AIの出力は目に見えて改善する。残りのコツは、バイブコーディングに慣れてきたタイミングで1つずつ取り入れればよい。

指示が長すぎるとAIが混乱しないか

長さは問題にならない。むしろ、短すぎる指示のほうがAIにとっては困る。「顧客管理アプリを作って」（14文字）よりも、「会計事務所の総務担当が使う顧客管理アプリで、顧問先は約80社、毎月の訪問日と打ち合わせ内容をメモしたい」（60文字）のほうが、AIは正確に動ける。情報は多いほどよい。ただし、箇条書きで整理すると、AIもあなたも読みやすくなる。

Claude Code以外のツール（CursorやGemini）でもこのコツは使える？

使える。この記事で紹介した9つのコツは、AIへの指示の出し方に関するものだ。どのAIツールを使っても、指示が具体的であればあるほど結果がよくなる原則は同じだ。CLAUDE.mdはClaude Code固有の機能だが、Cursorには .cursorrules という同様の仕組みがある。

AIが作ったものが気に入らないとき、ゼロからやり直すべき？

全体の方向性が大きく違う場合はやり直したほうが早いこともある。ただし、「8割は合っているけど、2割が気に入らない」という状態なら、修正で対応するほうが効率的だ。コツ3（ピンポイント修正）とコツ7（壊さないで、と明記）を使って、気に入らない部分だけを直してもらおう。

まとめ

バイブコーディングで「思い通りにならない」原因のほとんどは、AIの性能ではなく指示の出し方にある。「誰が・何のために・どう使うか」を最初に伝えること、一度に1つずつ作ること、修正はピンポイントで伝えること。この3つを意識するだけで、AIの出力は大きく変わる。プログラミングの知識は不要だ。あなたの業務を最もよく知っているのはあなた自身なのだから、それをAIに丁寧に伝えることが、バイブコーディング成功の最大のコツになる。

🎁 特典

この記事で紹介した9つのコツをまとめたチェックリストと、業種別の指示テンプレート集をPDFにまとめた。印刷してデスクに置いておけば、バイブコーディングのたびにこの記事に戻る必要がない。テンプレートの【】内をあなたの業務に書き換えるだけで、すぐに使い始められる。

→ バイブコーディング 指示テンプレート集PDF を無料ダウンロード /resources

📚 参考リファレンス

  • Anthropic公式サイト — Claude Codeの製品情報
  • Claude Works「バイブコーディングとは」（/articles/564）— バイブコーディングの基礎解説
  • Claude Works「バイブコーディング 始め方」（/articles/565）— 最初の5ステップガイド
  • Claude Works「Cursor vs Claude Code 比較」（/articles/568）— ツール選びの比較記事
  • Claude Works「Claude Code とは」（/articles/501）— Claude Codeの使い方と料金