バイブコーディング × Claude Code 実践ガイド｜非エンジニアが業務ツールを自分で作る方法

冒頭

従業員8人の社労士事務所で、顧問先40社の手続き状況をExcelで管理している方がいる。社会保険の届出、労働保険の年度更新、就業規則の改定。手続きの種類ごとにシートが分かれていて、繁忙期になると「あの会社の届出、もう出した？」という確認だけで毎日30分を取られる。管理画面を外注すれば50万円。「もう少し安くならないか」と3社に見積もりを取ったが、一番安くても35万円だった。

あるいは、フリーランスのマーケティングコンサルタントで、10社のクライアントごとに月次レポートを作成している方。データの収集はGoogleスプレッドシート、レポート作成はパワーポイント、進捗管理はNotionと、ツールが3つに分散している。1社あたり2時間、月に20時間がレポート作業だけで消える。

Claude Code（クロード・コード）というAIツールを使えば、こうした業務ツールを自分で作れる。月額約3,000円。プログラミングの知識は要らない。日本語で「こういうものが欲しい」と伝えるだけだ。

この記事では、Claude Codeを使ったバイブコーディング（AIに日本語で指示を出してアプリを作る方法）の実践手順を解説する。3つの入り口の選び方、業種別のプロンプト例、失敗しない修正の伝え方、そして「AIに自分のルールを覚えさせる」中級テクニックまで。記事の最後に、業種別のプロンプト集Excelを無料配布している。

Claude Codeとは何か、30秒で理解する

Claude Codeの全体像

図: Claude Codeの全体像

Claude Codeは、Anthropic（アンソロピック）社が開発したAIコーディングツールだ。Anthropicは、ChatGPTで有名なOpenAIの元メンバーが立ち上げた会社で、AIの安全性研究で知られている。

仕組みはシンプル。あなたが日本語で「こういうアプリが欲しい」と伝える。Claude Codeが必要なファイルを設計し、コードを書き、動くアプリを仕上げる。あなたが確認して「ここを直して」と伝える。Claude Codeが修正する。これを繰り返す。

プログラミング言語の知識は不要だ。Claude Codeは「何を作りたいか」を理解して、必要な技術を自分で選んでくれる。Webアプリが必要ならJavaScript（ジャバスクリプト、Webページを動かすプログラミング言語）を、データ処理が必要ならPython（パイソン、データ分析が得意なプログラミング言語）を、自動的に使い分ける。

バイブコーディングで使えるツールはいくつかあるが、Claude Codeが非エンジニアに向いている理由は3つある。

1つ目。日本語の理解力が群を抜いている。「なんか、前に作ったやつと似た感じで」「ここ、もうちょっとスッキリした感じにして」といった曖昧な指示でも、意図を正確に読み取ってくれる。

2つ目。ファイル管理を全部やってくれる。どんなファイルが必要か、どこに保存するか、ファイル同士をどう連携させるか。全部AIが判断して実行する。あなたはフォルダの中身を気にする必要がない。

3つ目。チャット形式で使える。LINEやChatGPTと同じ感覚で、テキストを入力して送信するだけ。特別な操作画面を覚える必要がない。

3つの入り口、あなたに合うのはどれか

Claude Code 3つの入り口

図: Claude Code 3つの入り口

Claude Codeには3つの使い方がある。全部同じAI（Claude）が動いているので、どれを選んでも作れるものは同じだ。違うのは「どこで作業するか」だけ。

入り口1: デスクトップアプリ（最もおすすめ）

Mac、Windowsの両方に対応。Anthropicの公式サイトからダウンロードしてインストールする。起動するとチャット画面が開く。ここに日本語で指示を入力する。

デスクトップアプリの利点は「ファイルが自分のパソコンに保存される」ことだ。作ったアプリのファイルがデスクトップやドキュメントフォルダに保存されるので、管理しやすい。バックアップも自分の好きな方法（外付けハードディスク、Dropbox等）で取れる。

初めてバイブコーディングをする方には、この入り口を勧める。

入り口2: Web版（claude.ai/code）

ブラウザで claude.ai/code にアクセスするだけ。インストール不要で、どのパソコンからでも使える。出先のパソコンやサブのパソコンで作業したいときに便利だ。

操作感はデスクトップアプリとほぼ同じだが、ファイルの保存先がクラウド上（Anthropicのサーバー）になる。自分のパソコンにファイルをダウンロードすることも可能だ。

「まずClaude Codeを体験してみたい」という方は、インストール不要のWeb版から始めるのもよい。

入り口3: VS Code拡張

VS Code（ブイエスコード）という、プログラマーが使うソフトの中にClaude Codeを組み込む方法。VS Codeを普段から使っている方向けだ。非エンジニアの方がわざわざVS Codeをインストールしてまで使う必要はない。

ここから先の解説は、デスクトップアプリを前提に進める。Web版をお使いの方も、操作手順はほぼ同じだ。

料金: **月額3,000円**で何ができるか

Claude Codeを使うには、Claude の有料プラン（Proプラン）が必要だ。月額20ドル（約3,000円）。年払いにすると月額16ドル（約2,400円）になる。

Proプランに含まれるもの:

  • Claude Code（今回の主役。バイブコーディング用）
  • Claude Cowork（チャット型AI。メールの文章作成、資料の要約、データ分析などの日常業務に使える）
  • 月あたりの利用量に上限がある。通常の業務ツール制作なら、月に5〜10個のアプリを作れる量だ

つまり、月3,000円で「バイブコーディング」と「日常のAI活用」の両方がカバーできる。外注すれば数十万円の業務ツールを自分で作りながら、日々のメール作成や資料要約にもAIを使える。

追加でかかる可能性のある費用:

  • サーバー代: 自分のパソコンだけで使うなら0円。他の人にも使ってもらう場合はVercel（ヴァーセル）というサービスで無料〜月1,000円程度
  • ドメイン代: 自社のURLで公開したい場合は年1,500〜3,000円程度。不要なら0円

実演: 経理担当者の請求書管理ツールを作る

Claude Codeで業務ツールを作る流れ

図: Claude Codeで業務ツールを作る流れ

ここからは、実際にClaude Codeを使って業務ツールを作る過程を見せる。

想定する読者: 従業員15人の商社で経理を担当している方。毎月、取引先30社への請求書を手作業でExcelから作成しており、月末に8時間かかっている。請求データの一覧管理と、PDF形式での請求書出力ができるツールが欲しい。

手順1: Claude Codeを起動する

デスクトップアプリを開く。初回はClaude のアカウントでログインする。

起動したら、作業用のフォルダを指定する。デスクトップに「invoice-tool」（名前は自由）というフォルダを作って、それを指定する。このフォルダの中に、AIが生成するファイルが保存されていく。

手順2: 最初の指示を入力する

チャット画面に、以下のように入力する。そのままコピーして貼り付けてよい。

私は従業員15人の商社で経理を担当しています。 毎月、取引先30社への請求書をExcelで手作業で作成しており、月末に8時間かかっています。

以下の機能を持つ請求書管理ツールをWebアプリとして作ってください。

使う人: 私（経理担当）1人

欲しい画面:

  1. 取引先マスタ（会社名、住所、担当者名、メールアドレス、振込先情報）
  2. 請求データ入力画面（取引先を選択、品目、数量、単価、税率を入力）
  3. 請求書一覧（月別で絞り込み可能、ステータス: 未発行/発行済/入金済）
  4. 請求書PDF出力（会社ロゴ入り、品目明細付き）

データは保存できるようにしてください。 デザインはシンプルで構いません。日本語表示でお願いします。

私はプログラミングの経験がありません。 手順を案内するときは、1ステップずつ確認しながら進めてください。

この指示のポイントを解説する。

「私は従業員15人の商社で経理を担当しています」— 自分が誰かを伝えている。AIはこれを読んで、経理業務に適した用語やレイアウトを選んでくれる。

「毎月、取引先30社への請求書をExcelで手作業で作成しており、月末に8時間かかっています」— 何に困っているかを具体的な数字で伝えている。数字があると、AIは規模感を理解して適切な設計をしてくれる。

「使う人: 私（経理担当）1人」— 利用者の人数を明示している。1人用なら認証機能（ログイン画面）は不要だとAIが判断できる。

「欲しい画面」— 画面構成をリストで書いている。AIはこれをそのまま画面設計に変換してくれる。

「私はプログラミングの経験がありません」— この一文が大事だ。AIは説明の丁寧さを調整してくれる。専門用語を避けて、1ステップずつ案内してくれるようになる。

手順3: AIの作業を待つ

Claude Codeが「承知しました」のような返答をして、ファイルの生成を始める。画面にはAIが何をしているかがリアルタイムで表示される。「ファイルを作成しています」「コードを書いています」「設定を行っています」といったメッセージが流れていく。

この間、あなたは待っていればよい。通常3分〜10分程度で最初のバージョンが完成する。

途中でAIが「このコマンドを実行していいですか？」と聞いてくることがある。これは、AIがアプリを動かすための準備（必要な部品のダウンロードなど）をしようとしている。「はい」と答えれば進む。不安なら「このコマンドは何をするのか教えてください」と聞き返してよい。

手順4: ブラウザで確認する

AIが「ブラウザで http://localhost:3000 を開いてください」と案内してくれる。localhost（ローカルホスト）とは、あなたのパソコンの中で動いているサーバーのことだ。インターネットには公開されていないので、あなた以外の人からは見えない。安心してほしい。

ブラウザで開くと、請求書管理ツールが表示される。取引先マスタの画面、請求データ入力画面、一覧画面が、さっき指示した通りに作られている。

実際にデータを入力してみる。取引先を登録して、請求データを入れて、PDFを出力してみる。動いている。

手順5: 修正を伝える

最初のバージョンを確認したら、気になる点をAIに伝える。1回の修正で1つの変更を伝えるのがコツだ。

修正の例:

請求書一覧の画面で、金額に3桁ごとのカンマを表示してください。 例: 1500000 → 1,500,000

請求書PDFのレイアウトを変更してほしいです。 上部に「請求書」というタイトルを大きく表示し、その下に請求日と請求番号を横並びにしてください。 品目明細の表には「小計」列を追加し、一番下に消費税と合計金額を表示してください。

取引先マスタに「締め日」（毎月10日、20日、末日から選択）と「支払いサイト」（翌月末、翌々月末から選択）の項目を追加してください。

このような修正を3〜5回繰り返すと、実用レベルのツールに仕上がる。

業種別プロンプト例: あなたの業種に合わせて使える

Claude Codeへの最初の指示（プロンプト）は、業種や業務によって変わる。ここでは、よくある業種のプロンプト例を3つ示す。そのままコピーして使ってよい。

営業チーム向け: 商談管理ツール

私は従業員20人のIT企業で営業マネージャーをしています。 営業担当5人の商談状況を一元管理するWebアプリを作ってください。

現在はExcelで管理していますが、担当者ごとにファイルが分かれていて全体が見えません。 毎週金曜の営業会議の準備に2時間かかっています。

欲しい画面:

  1. 商談一覧（担当者、会社名、商談ステージ、金額、次回アクション日で絞り込み可能）
  2. 商談詳細（会社情報、商談経緯の時系列メモ、添付ファイル名の記録）
  3. ダッシュボード（今月の商談数、金額合計、ステージ別の件数をグラフで表示）
  4. 担当者別の商談一覧

商談ステージ: 初回接触 → ヒアリング → 提案 → 見積 → 交渉 → 受注 / 失注 データ項目: 会社名、担当者名、連絡先、商談名、金額、確度（A/B/C）、次回アクション日、メモ

デザインはシンプルで構いません。日本語表示で。

士業向け: 案件・期限管理ツール

私は税理士事務所を経営しています。スタッフは私を含めて6人、顧問先は45社です。 顧問先ごとの月次処理と決算の進捗を管理するWebアプリを作ってください。

現在はExcelとホワイトボードで管理していて、締め切りの見落としが年に2〜3回発生しています。

欲しい画面:

  1. 顧問先一覧（会社名、決算月、担当者、契約プランで絞り込み可能）
  2. 月次カレンダー（今月の締め切りをカレンダー形式で表示）
  3. 進捗管理ボード（未着手/作業中/確認待ち/完了の4列で、案件をカードとして表示）
  4. 担当者ダッシュボード（各スタッフの担当件数と今週の締め切り件数）

データ項目: 会社名、決算月、担当者、作業種別（月次処理/決算/年末調整/届出）、締め切り日、ステータス、備考

自分のパソコンだけで使えれば十分です。日本語表示で。

個人事業主向け: クライアント・売上管理ツール

私はフリーランスのグラフィックデザイナーです。 現在12社のクライアントと取引があり、案件管理と売上管理をNotionとExcelで別々にやっています。 これを1つのWebアプリにまとめたいです。

欲しい画面:

  1. クライアント一覧（会社名、担当者、連絡先、契約形態）
  2. 案件管理（クライアント別、ステータス: 見積中/制作中/納品済/請求済/入金済）
  3. 月別売上サマリー（売上合計、クライアント別内訳、前月比）
  4. 今月のタスク一覧（締め切り順にソート）

データ項目: クライアント名、案件名、納品日、請求金額、入金日、ステータス

私1人で使います。見た目はおしゃれでなくて大丈夫、機能重視で。日本語表示で。

AIへの指示、うまくいく人の5つの習慣

Claude Codeへの指示の出し方で、出来上がりの質は大きく変わる。バイブコーディングが上手な方に共通する習慣を5つ紹介する。

習慣1: 数字を必ず入れる

「たくさんのデータを管理したい」ではなく「取引先30社のデータを管理したい」。「よく使う」ではなく「毎日3回使う」。数字があるとAIは規模に合った設計をしてくれる。30社と3,000社ではデータベースの作り方が変わるし、1日3回と月1回では画面の最適なレイアウトが変わる。

習慣2: 修正は1回1つ

「色を変えて、項目を追加して、レイアウトも変えて」と一度に頼むと、AIが混乱して意図しない変更をすることがある。「色を変えて」→ 確認 →「項目を追加して」→ 確認 →「レイアウトを変えて」→ 確認。1回1つが結果的に早い。

習慣3: 「何が起きているか」と「どうなってほしいか」をセットで書く

「ボタンが動きません」だけではAIは困る。「登録ボタンを押してもデータが保存されません。ボタンを押したらデータが保存されて、一覧画面に戻るようにしてください」。現状と期待をセットで伝える。

習慣4: スクリーンショットを貼る

Claude Codeはスクリーンショット（画面の画像）を理解できる。「この画面のここを変えたい」と言葉で説明するより、画面をキャプチャして「この赤枠の部分を変更したい」と伝えるほうが正確に伝わる。

Macなら Command + Shift + 4 で画面の一部をキャプチャできる。Windowsなら Windows + Shift + S だ。キャプチャした画像をClaude Codeのチャットに貼り付けるだけでよい。

習慣5: 動くたびに保存する

バイブコーディングの鉄則は「動いている状態をこまめに保存する」ことだ。Claude Codeのチャットで次のように伝える。

今の状態をGitで保存してください。コミットメッセージは「取引先マスタ画面完成」でお願いします。

Git（ギット）はファイルの変更履歴を記録する仕組みだ。詳しく知らなくても、上の一文をコピーして送るだけでClaude Codeが保存してくれる。

なぜ保存が大事か。新しい機能を追加したときに、それまで動いていた部分が壊れることがある。保存してあれば「さっきの状態に戻して」とAIに頼むだけで復旧できる。保存していなければ、最悪の場合ゼロからやり直しになる。

目安として、新しい画面が1つ完成するたびに保存するとよい。

中級テクニック: CLAUDE.md でAIにルールを覚えさせる

Claude Codeには、プロジェクトごとに「ルールファイル」を置ける仕組みがある。CLAUDE.md（クロード・エムディー）というテキストファイルに、AIに守ってほしいルールを書いておくと、以後のすべてのやり取りでAIがそのルールに従ってくれる。

例えば、こんなルールを書いておく。

プロジェクトルール

  • すべての画面を日本語で表示すること
  • 金額は3桁カンマ区切りで表示すること（例: 1,500,000円）
  • 日付は 2026年4月16日 の形式で表示すること
  • テーブルの行は交互に薄い灰色の背景を付けること
  • ボタンは青系の色で統一すること
  • フォントサイズは本文16px、見出し24pxを基準にすること

このファイルを作業フォルダに置いておくだけで、Claude Codeは毎回これを読み取って従ってくれる。毎回「カンマ区切りにして」「日本語で」と指示を繰り返す必要がなくなる。

作り方はシンプルだ。Claude Codeのチャットで次のように伝えればよい。

CLAUDE.md というファイルを作って、以下のルールを書いてください。 （上のルールを貼り付ける）

このテクニックは、複数のツールを続けて作るときに効果を発揮する。1つ目のツールで「金額のカンマ区切り」を毎回指示していたなら、2つ目以降はCLAUDE.mdに書いておくだけで自動的に適用される。

うまくいかないときの対処法

バイブコーディングで行き詰まる場面は、大きく4パターンに分かれる。それぞれの対処法を示す。

パターン1: エラーメッセージが出た

画面に赤い文字や英語のメッセージが出ても、慌てる必要はない。エラーメッセージをそのままClaude Codeに貼り付けて「このエラーを直してください」と伝えるだけだ。

Claude Codeはエラーの意味を理解し、原因を特定し、修正してくれる。プロのエンジニアでもエラーは日常的に出る。エラーは「壊れた」のではなく「ここを直す必要がある」というAIへの手がかりだ。

パターン2: 修正を頼んだら別の部分が壊れた

機能Aを修正したら、それまで動いていた機能Bが動かなくなった。これは起こりうることだ。

対処法は2つ。

1つ目: 「機能Bが動かなくなりました。機能Aの修正を維持したまま、機能Bも動くように直してください」とAIに伝える。

2つ目: 修正前にGitで保存してあれば「さっきの保存した状態に戻してください」と伝える。壊れる前の状態に戻してから、別のアプローチで修正を試みる。

パターン3: AIが3回連続で同じ修正に失敗する

同じ修正を3回頼んでも直らない場合は、会話をリセットするのが有効だ。Claude Codeで新しい会話を開始し、問題の内容を最初から伝え直す。

これがうまくいく理由は、長い会話の中でAIが以前の文脈に引きずられて同じ誤りを繰り返すことがあるためだ。新しい会話で白紙の状態から取り組むと、別のアプローチで解決してくれることが多い。

パターン4: 作りたいものの説明がうまくできない

言葉で説明するのが難しい場合は、以下の方法を試してみてほしい。

  • 紙にスケッチを描いて写真を撮り、Claude Codeに貼り付ける。「この手書きのイメージに近い画面を作ってください」と伝えれば、AIが画像から意図を読み取ってくれる
  • 似ているサービスの名前を出す。「Excelの表みたいな画面」「カレンダーアプリみたいな表示」「Amazonの注文履歴みたいな一覧」
  • まず簡単なものを作らせて、実物を見ながら修正していく。頭の中で完成形を描くより、動くものを触りながら「ここを変えて」と伝えるほうが早い

よくある不安と答え

作ったデータが消えることはないか？

Claude Codeで作ったファイルは、あなたのパソコンに保存される（デスクトップアプリの場合）。Claude Code側のサーバーに依存しないので、Anthropicがサービスを変更してもファイルは手元に残る。さらにGitで保存しておけば、変更履歴もすべて残る。ただし、パソコン自体が壊れたら失われるので、重要なプロジェクトは外付けドライブやクラウドストレージにもバックアップを取っておくとよい。

会社の情報をAIに入力して大丈夫か？

Claude の有料プラン（Pro / Team / Enterprise）では、入力データがAIの学習に使われないポリシーが適用されている。つまり、あなたが入力した取引先名や金額がAIの学習データに取り込まれることはない。ただし、極めて機密性の高い情報（マイナンバー、クレジットカード番号、パスワードなど）は、念のためダミーデータに置き換えて作業し、完成後に実データを入れるのが安全だ。

作ったものを社内の他の人にも使ってもらえるか？

使ってもらえる。方法は2つある。1つ目は、同じ社内ネットワーク内でアプリを起動して、他のパソコンのブラウザからアクセスする方法。AIに「社内LANで他のパソコンからアクセスできるようにして」と頼めば設定してくれる。2つ目は、Vercel（ヴァーセル）などのサービスを使ってインターネットに公開する方法。公開する場合は、パスワードによるアクセス制限を付けることをおすすめする。AIに「ログイン機能を付けて」と頼めば作ってくれる。

Claude CoworkとClaude Code、どう使い分ける？

Claude Cowork（チャット型のAI）は、文章作成、データ分析、質問への回答など「情報を処理する」作業に向いている。Claude Codeは、アプリやWebサイトを作る「ものを作る」作業に向いている。メールの下書きを書きたいならClaude Cowork、顧客管理ツールを作りたいならClaude Code。同じProプランで両方使えるので、用途に合わせて使い分けるのがよい。

まとめ

Claude Codeは、非エンジニアがバイブコーディングで業務ツールを作るのに最も適したツールの1つだ。デスクトップアプリを起動して、作りたいものを日本語で伝えて、確認して修正を繰り返す。それだけで、外注すれば数十万円かかる業務ツールを自分で作れる。月額3,000円。指示を出すコツは「数字を入れる」「1回1修正」「動くたびに保存」。この3つを意識するだけで、完成度は大きく変わる。まずは、あなたの業務で毎月繰り返している面倒な作業を1つ思い浮かべて、Claude Codeに話しかけてみてほしい。

🎁 特典

この記事で紹介した業種別プロンプトを含む、全10業種対応のプロンプト集Excelを無料配布している。経理、営業、人事、総務、マーケティング、士業（税理士・社労士・行政書士）、不動産、教育、コンサルティング、クリエイティブの10業種で、そのままClaude Codeに貼り付ければ動くプロンプトがシート別にまとまっている。

→ 業種別バイブコーディング プロンプト集Excel を無料ダウンロード /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の機能と料金の詳細
  • Claude Works「Claude Code 使い方」（/articles/504）— 操作方法の実践ガイド
  • Claude Works「AI を社内で使うならルールが先」（/articles/523）— 社内AI導入時のルール整備