バイブコーディング 始め方｜非エンジニアが今日から踏み出す5つのステップ
冒頭
従業員15人の会計事務所を経営している方がいるとする。顧問先ごとの決算スケジュールをExcelで管理しているが、繁忙期になると誰がどの案件を担当しているのか分からなくなる。「バイブコーディングで自分用の管理ツールが作れるらしい」と聞いて興味を持ったが、具体的に何から始めればいいのか分からない。
あるいは、フリーランスのライターで、クライアントごとの納品スケジュールと請求状況を一目で確認できるダッシュボードが欲しい。でも、プログラミングの経験はゼロ。パソコンはブラウザとWord、Excelくらいしか使わない。
この記事は、そんなあなたのために書いた。バイブコーディング（AIに日本語で指示を出してアプリを作る方法）を、今日から始めるための5つのステップを解説する。特別な準備は要らない。パソコンとブラウザがあれば、読みながらそのまま手を動かせる。
記事の最後に「バイブコーディング はじめての使い方ガイド」をPDFで無料配布している。画面キャプチャ付きの手順書なので、この記事を読んだ後に見返せば、迷わず進められる。
始める前に確認しておくこと
バイブコーディングを始めるのに、高価な機材や特別なソフトは必要ない。確認しておくのは4つだけだ。
パソコンがあること。Mac でも Windows でもどちらでも構わない。ただし、スマホやタブレットだけでは厳しい。画面が小さすぎて、AIとのやりとりとアプリの確認を同時に行うのが難しいためだ。
ブラウザがあること。Chrome、Safari、Edgeなど、普段使っているもので問題ない。特別なブラウザは不要だ。
メールアドレスがあること。AIツールのアカウント登録に使う。Gmail、Yahoo!メール、会社のメールアドレス、何でもいい。
作りたいもののイメージがあること。「顧客管理ツール」「スケジュール管理画面」「問い合わせフォーム付きのWebサイト」など、ざっくりで構わない。始めてから具体化すればいい。もしまだイメージがないなら、まずは「自分の業務で毎週やっている面倒な手作業」を1つ思い浮かべてほしい。それがバイブコーディングの最初のテーマになる。
費用は0円で始められる。最初は無料プランで十分だ。有料プラン（月額約3,000円）に移るのは、無料の制限が気になってからで遅くない。
ステップ1: Claude Cowork で「AIに指示を出す」感覚をつかむ
バイブコーディングの第一歩として、まずClaude Cowork（クロード・コワーク）を使ってみることを勧める。
Claude CoworkはAnthropic社が提供するWebアプリで、ブラウザ上でAIとチャットしながら作業ができる。アプリのインストールは不要。ブラウザで claude.ai を開くだけだ。
「本格的なバイブコーディングにはClaude CodeやCursorが必要なのでは？」と思うかもしれない。その通りだ。だが、いきなりClaude CodeやCursorを使うのは、車の運転を高速道路で練習するようなものだ。まずは教習所のコース（Claude Cowork）で「AIに指示を出す」という感覚に慣れてから、公道（Claude Code / Cursor）に出るほうが安全だ。
やってみよう: 最初の指示を出す
claude.ai にアクセスして、アカウントを作成する。ログインしたら、チャット画面が表示される。ここに、日本語で指示を入力する。
まず、練習として以下をそのまま入力してみてほしい。
社員10人の営業チーム用の日報入力フォームを作ってください。 入力項目は、日付、担当者名、訪問先、商談内容、次回アクション、の5つです。 送信ボタンを押すと入力内容が一覧表に追加される仕組みにしてください。 HTMLとJavaScriptだけで動くシンプルなものでお願いします。
AIが数秒〜十数秒でコードを生成してくれる。Claude Coworkにはプレビュー機能があり、生成されたHTMLをその場で表示して試せる。フォームに入力してボタンを押すと、下の表にデータが追加されていく。
これが、バイブコーディングの最も基本的な体験だ。日本語で「こういうものが欲しい」と伝えたら、AIが作ってくれた。
次に試すこと: 修正指示を出す
最初の出力に手を加えてみよう。同じチャットの続きで、こう入力する。
追加の修正をお願いします。
- 表に「削除」ボタンを付けて、行ごとに消せるようにしてください
- 担当者名をドロップダウンリスト（選択式）にして、選択肢は「田中」「鈴木」「佐藤」「山田」「高橋」にしてください
- 日付のデフォルト値を今日の日付にしてください
AIが修正版を生成してくれる。このように「作る→確認→修正を伝える→再生成」のサイクルを回すのが、バイブコーディングの基本的な流れだ。
ポイントは「1回の指示で完璧を求めない」ことだ。最初にざっくり作って、細かい部分は後から修正していく。料理のレシピを一度に全部指示するのではなく、「まず材料を切って」「次に炒めて」「最後に味付けして」と段階的に進めるイメージだ。
Claude Coworkの基本的な使い方は「Claude Cowork とは」（/articles/503）でも詳しく解説している。
ステップ2: 「作りたいもの」を言葉にする
Claude Coworkで「AIに指示を出す感覚」が掴めたら、次は自分の業務に使えるものを作ってみる。
ここで重要なのが「何を作るか」の言語化だ。漠然と「便利なツールが欲しい」ではAIも困る。以下の4つの要素を書き出すと、AIが理解しやすい指示になる。
要素1: 誰が使うのか
「自分だけ」「自分と部下3人」「顧問先の担当者」など。使う人数と、その人たちのITスキルのレベルも書くとよい。「パソコンに不慣れなスタッフも使うので、できるだけシンプルにしてほしい」のように。
要素2: 何の作業を楽にしたいのか
「毎月の請求書作成に3時間かかっている」「顧客リストがExcelで3つのファイルに分散していて検索できない」「問い合わせメールの返信に毎日1時間使っている」。具体的な作業名と、今かかっている時間を書く。
要素3: どんな画面がほしいのか
「一覧表があって、検索ボックスで絞り込めるもの」「入力フォームと、入力済みデータの一覧を1画面で見たい」「カレンダー形式で予定を表示したい」。頭の中にあるイメージを、できるだけ具体的に書く。
紙にスケッチを描いてみるのも効果的だ。四角と線だけで構わない。「画面の上に検索バー、その下にテーブル、右端に詳細パネル」のようなレイアウトをAIに伝えると、かなり近いものが出てくる。
要素4: データの項目は何か
「会社名、担当者、電話番号、メールアドレス、契約プラン、契約日」のように、扱うデータの項目を列挙する。これがあるとAIはデータベースの設計まで一気にやってくれる。
実例を1つ示す。会計事務所の経営者なら、こんな指示になる。
私は15人の会計事務所を経営しています。 顧問先60社の決算スケジュールと担当者の割り当てを管理するWebアプリを作ってください。
使う人は私と部下14人です。パソコンに不慣れなスタッフもいます。
今はExcelで管理していますが、繁忙期に誰がどの案件を持っているか分からなくなります。月に5時間くらい確認作業に使っています。
欲しい画面:
- 顧問先一覧（会社名で検索・絞り込みできる）
- 各顧問先の決算月、担当者、進捗ステータスが一目で分かる
- カレンダー形式で今月の締め切りを表示
- 担当者ごとに持ち案件数を表示するダッシュボード
データ項目: 会社名、決算月、担当者名、進捗（未着手/進行中/完了）、期限日、備考
まず動くことを優先してください。デザインはシンプルでいいです。
ここまで具体的に書けたら、Claude CodeやCursorに渡す準備は万全だ。
ステップ3: ツールを選ぶ
図: ツール選びの目安
ステップ1でClaude Coworkを使ったのは「AIへの指示の出し方」を練習するためだった。ここからは、本格的なツールに移る。
選択肢は大きく2つある。
選択肢A: Claude Code
Anthropic社のAIコーディングツール。デスクトップアプリ（Mac / Windows）、Web版（claude.ai/code）、VS Code拡張の3つの入り口がある。
デスクトップアプリが最も手軽だ。ダウンロードしてインストールし、Claude Coworkと同じアカウントでログインすれば使える。月額約3,000円のProプランが必要だが、既にClaude CoworkのProプランを契約しているなら追加費用はかからない。
Claude Codeの特長は「ファイルをまるごと管理してくれる」点だ。アプリに必要なファイルを一通り作成し、それぞれの連携も自動で設定してくれる。「全体を見ながら作る」のが得意だ。
選択肢B: Cursor
AI搭載のコードエディタ。Claude Code同様にAIに指示を出してコードを生成できる。画面上にコードが表示されるため「AIが何を書いたか」を視覚的に確認しやすい。
月額約3,000円のProプランがある。AIモデルはClaude やGPTなど複数から選べる。
エディタの操作に多少の慣れが必要なため、CursorよりもClaude Codeのデスクトップアプリのほうが、非エンジニアには取っつきやすいことが多い。
どちらを選ぶか
この記事では、Claude Codeのデスクトップアプリを勧める。理由は3つ。
1つ目。Claude Coworkと同じアカウントで使えるため、新たに登録が不要。 2つ目。日本語での指示に対する理解力が安定している。 3つ目。デスクトップアプリはインターフェースがシンプルで、余計な操作が少ない。
もちろん、Cursorが合う方もいる。両方とも無料プランがあるので、試してから決めても問題ない。
ステップ4: 実際に作ってみる
ここからは、Claude Codeのデスクトップアプリを使った手順を説明する。
準備: プロジェクトフォルダを作る
デスクトップに新しいフォルダを作る。名前は何でもいい。「my-first-app」「keiri-tool」など、自分が分かるものにする。このフォルダの中に、AIが生成するファイルが保存される。
手順1: Claude Codeを起動する
Claude Codeのデスクトップアプリを開く。初回はClaude Coworkのアカウントでログインする。
起動したら、先ほど作ったフォルダを作業フォルダとして指定する。
手順2: 指示を入力する
ステップ2で準備した「作りたいもの」の指示を、そのまま入力する。コピー&ペーストで構わない。
初回の指示には、以下の一文を加えると安心だ。
「私はプログラミングの経験がありません。専門用語が出てきたら、1行で意味を教えてください。手順を案内するときは、1ステップずつ確認しながら進めてください」
こう書いておくと、AIが「次にこのコマンドを実行してください」と丁寧にガイドしてくれる。
手順3: AIが生成するのを待つ
AIがファイルを生成し始める。複数のファイルが次々と作られていく。この過程は数分〜十数分かかることがある。途中で不安になるかもしれないが、AIが「完了しました」と言うまで待てばいい。
途中でAIが「このコマンドを実行していいですか？」と聞いてくることがある。基本的には「はい」と答えて問題ない。不安なら「このコマンドは何をするのか教えてください」と聞き返せばいい。
手順4: ブラウザで確認する
AIが「ブラウザで http://localhost:3000 を開いてください」のように案内してくれる。localhost（ローカルホスト）とは「自分のパソコンの中で動いているサーバー」という意味で、インターネットには公開されていない。あなたのパソコンの中だけで動いている状態なので、安心してほしい。
ブラウザで開くと、さっきまで頭の中にしかなかったツールが、画面に表示されている。データを入力してみる。ボタンを押してみる。動いている。
この瞬間が、バイブコーディングで一番感動するタイミングだ。
手順5: 修正を伝える
完璧なものが最初に出てくることは稀だ。でも心配はいらない。修正はいくらでもできる。Claude Codeのチャットに修正を伝えるだけだ。
修正指示のコツ:
- 1回に1つの変更を伝える。「ここを変えて、あそこも変えて、あれも追加して」と一度に頼むと、AIが混乱しやすい
- 「何が起きているか」と「どうなってほしいか」を両方書く。「ボタンを押しても何も起きません。ボタンを押したらデータが保存されるようにしてください」
- スクリーンショットを貼り付けるのも効果的。「この画面の赤い部分を修正してほしい」のように
3〜5回の修正で、かなり使えるものに仕上がることが多い。
ステップ5: 使ってみて、育てる
最初のバージョンが動いたら、実際の業務で使ってみる。1週間使ってみると「ここにフィルター機能が欲しい」「この項目も追加したい」「印刷機能が必要だ」といった具体的な改善点が見えてくる。
これらの改善を、1つずつAIに伝えて機能を追加していく。「バージョン1→バージョン2→バージョン3」と、少しずつ育てていくのがバイブコーディングの正しいやり方だ。
育てるときの注意点
動いている状態をこまめに保存する。AIに「今の状態をGitで保存して」と頼めば、変更履歴を残してくれる。Git（ギット）とはファイルの変更履歴を記録する仕組みのことで、詳しく知らなくても「保存して」と頼めばAIがやってくれる。
こまめに保存する理由は「壊れたら戻せる」からだ。機能を追加したら動かなくなった、というのはバイブコーディングでよくあること。保存してあれば「さっきまで動いていた状態に戻して」と頼むだけで復旧できる。保存していないと、最初からやり直しになることもある。
やりすぎに注意
1つのアプリに機能を足し続けると、ある時点でAIの対応が不安定になることがある。目安として、画面が10ページ、機能が20個を超えたら「これ以上は分けたほうがいいかもしれない」と意識する。顧客管理と請求管理を1つのアプリに入れるよりも、2つの別アプリにしたほうが安定して動くことが多い。
よくある失敗と対策
バイブコーディングを始めた人が最初の1週間でつまずきやすいポイントを挙げておく。
失敗1: 指示が抽象的すぎる
「いい感じの管理ツールを作って」「使いやすいアプリが欲しい」。こういう指示では、AIは何を作ればいいか分からない。
対策: ステップ2で書いた4要素（誰が・何の作業を・どんな画面で・どんなデータで）を必ず含める。数字を入れる。「5つの入力項目」「60社分のデータ」「月に1回の頻度」のように。
失敗2: エラーが出てパニックになる
AIが「エラーが発生しました」と言ったり、画面に赤い文字が出たりすると、初心者は「壊れた」と感じて怖くなる。
対策: エラーは正常なプロセスの一部だ。プロのエンジニアでもエラーは日常的に出る。エラーメッセージをそのままAIに貼り付けて「このエラーを直してください」と伝えれば、多くの場合AIが修正してくれる。3回連続でエラーが解消しない場合は、一度会話をリセットして、最初から指示を出し直すと解決することがある。
失敗3: 保存せずに進めて、全部壊れる
AIに「この機能を追加して」と頼んだら、それまで動いていた部分まで壊れてしまった。保存していなかったので、元に戻せない。
対策: 新しい機能を追加する前に、必ず「今の状態をGitで保存して」とAIに頼む。30秒で終わる。この30秒が、数時間の手戻りを防いでくれる。
失敗4: 最初から大きなものを作ろうとする
「顧客管理＋請求管理＋案件管理＋日報＋カレンダー、全部入りのシステム」を最初に作ろうとすると、十中八九うまくいかない。
対策: まず1つの機能だけのシンプルなツールを作る。それが安定して動くようになってから、次の機能を足す。「顧客一覧を表示するだけ」から始めて、「検索を付ける」「新規登録を付ける」「編集機能を付ける」と段階的に進める。
よくある不安と答え
パソコンに詳しくないが大丈夫か？
ブラウザが使えて、ファイルやフォルダの概念が分かれば大丈夫だ。バイブコーディングでやることは「日本語を入力する」「画面を確認する」「修正点を伝える」の3つだけ。特殊なスキルは不要だ。
壊れたら直せるのか？
直せる。エラーメッセージをAIに伝えれば、ほとんどの場合AIが修正してくれる。それでも直らなければ、Gitで保存した過去の状態に戻せる。最悪の場合でも、指示を最初から出し直せば同じものが作れる。データさえ別に保存してあれば、取り返しのつかない失敗は起きにくい。
作ったものをスマホからも使えるか？
できる。Webアプリとして作れば、パソコンのブラウザでもスマホのブラウザでも表示できる。AIに「スマホでも使いやすいレイアウトにしてください」と伝えれば、画面サイズに応じて表示が変わる仕組み（レスポンシブデザイン）を作ってくれる。
インターネットに公開しないと使えないのか？
公開しなくても使える。ステップ4で作ったアプリは、あなたのパソコンの中だけで動いている。パソコンを起動してアプリを立ち上げれば、ブラウザから使える。他の人にも使ってもらいたい場合は、インターネットに公開する必要がある。公開の方法はVercel（ヴァーセル）というサービスを使うのが手軽で、AIに「Vercelにデプロイして」と頼めば手順を教えてくれる。
どのくらいの時間がかかるのか？
初めての場合、ステップ1（Claude Coworkの練習）に30分、ステップ2（言語化）に30分、ステップ3（ツール選びとセットアップ）に30分、ステップ4（実際に作る）に2〜4時間が目安だ。つまり、半日あれば最初のバージョンは完成する。慣れてくると、簡単なツールなら1〜2時間で動くものが作れるようになる。
まとめ
バイブコーディングの始め方は、5つのステップで整理できる。ステップ1でClaude Coworkを使って「AIに指示を出す」感覚をつかむ。ステップ2で「作りたいもの」を4つの要素（誰が・何を・どんな画面で・どんなデータで）で言語化する。ステップ3でツール（Claude Code推奨）を選ぶ。ステップ4で実際に作ってブラウザで確認する。ステップ5で使いながら少しずつ育てる。特別な準備は要らない。パソコンとブラウザがあれば、今日から始められる。
🎁 特典
この記事で解説した5つのステップを、画面キャプチャ付きの手順書にまとめた「バイブコーディング はじめての使い方ガイド」を無料配布している。Claude Coworkの登録手順、Claude Codeのインストール手順、最初の指示テンプレート5パターン、エラーが出たときの対処フローチャートが1冊に入っている。印刷してデスクに置いておけば、この記事を読み返さなくても迷わず進められる。
→ バイブコーディング はじめての使い方ガイド（PDF）を無料ダウンロード /resources
📚 参考リファレンス
- Anthropic公式サイト: claude.ai
- Claude Works 関連記事:「バイブコーディングとは｜プログラミング経験ゼロでもアプリが作れる新しい開発スタイル」（/articles/564）
- Claude Works 関連記事:「Claude Cowork とは｜非エンジニアが今日から仕事に使えるAIアシスタントの全体像」（/articles/503）
- Claude Works 関連記事:「生成AI 業務効率化｜中小企業の社長が知っておくべき全体像」（/articles/558）
- Claude Works 関連記事:「AI を社内で使うならルールが先」（/articles/523）
- バイブコーディング入門 連載ページ（/vibe-coding）— Webの仕組みを非エンジニア向けに解説する連載