従業員15名の不動産会社で営業管理をしているあなた、あるいは10名規模の税理士事務所を経営しているあなたに聞きます。

「ホームページに予約フォームを追加したい。でも外注に依頼したら見積もりが50万円だった」

「顧客情報や案件の進捗を一覧で確認できるWebツールを自社で持ちたい。でも開発会社に頼むと毎回数十万円かかる」

こういった状況に直面したことはありませんか。私は月に複数の中小企業からこうした相談を受けます。そのたびに紹介しているのが、Claude Code（クロードコード）とNext.js（ネクストジェイエス）の組み合わせです。

Claude Codeは、Anthropic（アンソロピック）という米国のAI企業が開発した、AIがコードを書いてくれるツールです。Next.jsは、メルカリやNotionでも使われているWebアプリの枠組み（フレームワーク）です。この2つを組み合わせると、コードが読めない方でも「何をしたいか」を日本語で伝えるだけで、Webアプリの修正・機能追加・データ管理が進められるようになります。

この記事で解説することは4つです。

  • AIへの業務マニュアル（CLAUDE.md）の書き方と効果
  • 顧客データベース連携を日本語で依頼する具体的な手順
  • 月数千円〜3万円でWebアプリを公開・自動運用する仕組み
  • 外注と比べたときのコストとスピードの現実

コードの読み書きは一切不要です。「何をしたいか」を言葉にできれば十分です。

図: Claude Code × Webアプリ開発の全体像（画像生成待ち）

Claude Code と Next.js が非エンジニアに向いている理由

Claude Codeは、パソコンのターミナル（コマンドを入力する画面）から起動し、日本語で指示するだけでAIが実際のコードを書いてくれるツールです。「こういうページを追加して」「このボタンのラベルを変えて」と伝えると、関連するファイルを自動で探して修正してくれます。

Next.jsは、Webサイト・Webアプリを効率よく作るための設計された枠組みです。一からHTMLを書く代わりに、決まったルールでファイルを配置するだけで動く仕組みになっています。

この2つの相性が特に良い理由は、Claude Codeがすでに「Next.jsの書き方のルール」を大量に学習しており、日本語の指示から正確なコードを生成できるためです。

たとえば「お客様向けの問い合わせページを追加して。氏名・電話番号・相談内容の3項目で、送信後に確認メールが届くようにしたい」と伝えると、Claude Codeは：

  • 問い合わせフォームのページファイルを自動作成
  • 入力チェック（空白で送れない設定）を実装
  • 確認メールを送る処理も合わせて生成

といった作業を一括で行います。あなたがコードを書く必要はまったくありません。あなたの役割は「何をしたいか」「どんなルールにするか」を言葉で伝えること。コードはAIが書きます。

CLAUDE.md は「AIへの業務引き継ぎ書」

Claude Codeで作業するとき、毎回ゼロから「このシステムはこういう目的で、こういうルールで動いています」と説明するのは手間がかかります。そこで活用するのがCLAUDE.mdというファイルです。

CLAUDE.mdとは、プロジェクトのルールや構成を書いておくテキストファイルです。Claude Codeはセッション開始時にこのファイルを自動で読み込むので、一度書いておけば毎回の説明が不要になります。

新しいアルバイトスタッフへの業務マニュアルに近いイメージです。「うちの店では注文を受けたときに必ず名前を確認します」「レシートは2部印刷します」というルールを事前に渡しておけば、毎回口頭で説明しなくて済みます。CLAUDE.mdはそれと同じ役割を果たします。

実際にどう書けばいいか、飲食店向け予約管理システムを例に示します。

# 〇〇飲食店 予約管理システム

## このシステムの目的
来店予約の受付・管理・スタッフへの共有

## 守ってほしいルール
- 個人情報（氏名・電話番号）を扱うページはログイン必須
- ボタンの色はブランドカラー（濃い緑 #166534）に統一
- コメントと文言は日本語
- お客様向けの文章は丁寧語（〜ください、〜いたします）

## 使っているサービス
- Next.js（Webアプリの枠組み）
- Supabase（データ保存・ログイン機能）
- Vercel（インターネット公開）

このCLAUDE.mdを一度書いておくだけで、「新規予約を受け付けるフォームページを追加して」という一言指示でも、ログイン制御・ブランドカラー・丁寧語がすべて反映されたページが生成されます。

CLAUDE.mdは技術的な知識がなくても書けます。「何のためのシステムか」「守ってほしいルール」「使っているサービス名」を箇条書きにするだけで十分です。初日に30分かけて書いておくことが、その後の作業効率を大きく左右します。

CLAUDE.mdを用意しているプロジェクトと用意していないプロジェクトでは、同じ指示でも生成されるコードの精度が明らかに異なります。これが最初に整備すべき最重要ポイントです。

図: CLAUDE.mdセットアップからWeb公開までの流れ（画像生成待ち）

顧客データの管理を依頼する具体的な手順

中小企業・個人事業主のWebアプリでもっとも多いニーズが「顧客情報・予約・案件進捗をWebで管理したい」というものです。ここで登場するのがSupabaseです。

Supabase（スパベース）とは、データベース（Excelのような表形式でデータを保存する場所）と、ログイン機能（会員限定ページの制御）をセットで提供するクラウドサービスです。無料プランから使え、本格利用でも月25ドル（約3,800円）程度から始められます。

Claude Codeに「Supabaseと連携して顧客一覧を表示するページを作って」と指示すると、次の処理を自動で生成してくれます。

  • Supabaseへの安全な接続コード（パスワードは環境変数という安全な仕組みで管理）
  • 顧客データを取得・一覧表示する処理
  • ログインしているユーザーの権限に応じたデータ表示の制御

最後の「権限に応じた制御」はRLS（Row Level Security：行レベルのセキュリティ設定）と呼ばれます。「担当スタッフAは自分の担当顧客しか見られない」「管理者は全データを見られる」という仕組みです。

この設定をClaude Codeに依頼するとき、日本語でこう伝えます。

顧客テーブルのアクセス権限設定ファイルを作って。
・管理者（役割がadminのユーザー）は全件の閲覧・編集ができる
・担当スタッフは自分が担当する顧客（自分のIDと紐付くデータ）のみ見られる
・他のスタッフの担当顧客は一切見えないようにする

すると、Claude CodeはSQLというデータベース操作言語の設定ファイルを自動で生成します。SQLの知識がなくても、日本語の要件を伝えるだけで対応できます。

私が支援した10名規模のコンサルティング会社では、このやり方で顧客管理システムの初期構築を3日間で完了しました。同等の機能を開発会社に外注した場合の見積もりは80万円でしたが、AIの利用料は3日間で約5,000円に収まりました。

定期的な自動処理を設定する方法

Webアプリを運用していると「毎朝データを自動で更新したい」「週1回レポートを自動でまとめたい」という需要が生まれます。これを定期実行（Cron：クーロン）と呼びます。

ここで使うのがVercelというサービスです。Vercelとは、Next.jsで作ったWebアプリをインターネット上に公開・運用するためのクラウドサービスです。個人・小規模であれば無料から使えます。GitHubというコード管理サービスと連携すると、コードを更新するたびに自動でサイトに反映される仕組みも備えています。

この定期実行の設定は、vercel.jsonというたった数行の設定ファイルで完了します。Claude Codeへの指示はこう伝えます。

vercel.json に定期実行の設定を追加して。
・毎朝9時に在庫データを外部サービスから取得して更新
・6時間ごとに問い合わせ内容をまとめて集計

Claude Codeが生成する設定ファイルはこういった内容です。

{
  "crons": [
    { "path": "/api/cron/sync-inventory", "schedule": "0 9 * * *" },
    { "path": "/api/cron/aggregate-inquiries", "schedule": "0 */6 * * *" }
  ]
}

このファイルの中身を理解できなくても問題ありません。「何時に何をしたいか」を日本語で伝えれば、Claude Codeが正しい設定を書いてくれます。あなたが行うのは内容の確認と承認だけです。

定期実行を活用すると、「担当者が手動で毎朝やっていたデータ更新作業」「毎週月曜にExcelでまとめていた集計作業」を完全に自動化できます。週5時間以上かかっていた定型作業が、設定後はゼロになるケースは珍しくありません。

図: Claude Code活用と外注の比較（画像生成待ち）

外注と比べたコストとスピードの現実

多くの経営者が気になる、外注とClaude Code活用の実態を比較して整理します。

一般的なWebアプリの機能追加を外注した場合：

  • 要件定義から納品まで2〜4週間
  • 小さな修正でも5〜30万円が相場
  • 仕様変更が発生すると追加費用が請求される
  • 次回の改修でも再び外注が必要

Claude Codeを活用した場合（社内に指示を出せる人が1名いる前提）：

  • 指示から実装まで数時間〜2日
  • Claude APIの利用料は月1〜3万円程度（使用量による）
  • 方針変更が起きてもすぐに軌道修正できる
  • 対応するたびに社内にノウハウが蓄積される

ただし、現実的な話として、Claude Codeですべてが完結するわけではありません。最初の環境構築（プロジェクトの初期設定）は、エンジニアに2〜4時間手伝ってもらう方が確実です。また、生成されたコードが正しく動いているかの確認と、本番環境への反映は人間の目が必要です。

それでも「機能追加のたびに外注費が数十万円かかる」という状況から「月1〜3万円のAI利用料で継続的に改善できる」という状況に移行できれば、年間で数百万円のコスト削減になる可能性があります。

あるECサイト運営の個人事業主の方は、以前は年に1〜2回しか機能改善できなかったところを、Claude Code活用後は月3〜4件のペースで小さな改善を積み重ねられるようになったと話してくれました。「機能を追加したくてもコストで躊躇していた」という状況から解放されることが、ビジネスの柔軟性に直接つながります。

非エンジニアが最初の3日間でやること

Claude Code × Next.jsの環境を整える際、コードが読めない方にまず取り組んでほしいことが3つあります。

1つ目は、CLAUDE.mdを書くことです。コードは書けなくても、自社のビジネスルールは書けるはずです。「何のためのシステムか」「守ってほしいルール」「使っているサービス名」を箇条書きにするだけで、AIへの指示精度が大きく上がります。初日に30分かけて作成してください。

2つ目は、指示の粒度を覚えることです。最初は「全部作って」という丸投げ指示をしたくなりますが、Claude Codeへの指示は機能単位で区切る方が精度が上がります。「問い合わせフォームのページを1つ追加して」「このボタンのラベルを申し込むに変えて」という粒度が最適です。大きなリクエストは5〜10個の小さなステップに分けて依頼してください。

3つ目は、エンジニアとの役割分担を決めることです。最初の環境構築とデプロイの設定は、エンジニアに2〜4時間お願いするのが現実的です。社内にエンジニアがいない場合、副業エンジニアを月2〜5万円で顧問として契約する選択肢があります。クラウドソーシングで「Next.js 環境構築サポート」と探すと、数時間単位で対応してくれるエンジニアが見つかります。

Claude Codeをうまく活用している非エンジニアの方に共通しているのは、コードを覚えようとしていないことです。コードはAIに任せて、自分はビジネス要件の言語化と結果確認に集中する。この役割の切り分けが成功のポイントです。

まとめ

Claude Code × Next.jsの組み合わせは、コードが書けない方でもWebアプリの修正・機能追加・データベース連携・定期自動処理を、日本語の指示だけで進めていける環境を作ります。

最初の一歩はCLAUDE.mdを書くことです。自社のビジネスルールをテキストに落とすだけで、AIへの指示精度が上がり、継続的にWebアプリを改善し続けられる状態に近づきます。

「機能追加のたびに外注費が数十万円かかる」という状況を抜け出す選択肢として、ぜひ一度試してみてください。