「HTMLって何？」「サーバーってどこにあるの？」——そんなレベルの非エンジニアでも、Claude Codeとの対話だけでブランドサイトを公開できる時代になった。2026年5月時点で、実際にかかる時間は約12時間、費用は月額0〜20ドルだ。

筆者自身、AI副業の案件でクライアントから「LP1枚だけ作れない？」と聞かれることが増えた。コードを書ける自分がやれば早いが、「非エンジニアのクライアント本人が自力で作れたらもっと価値がある」と考え、実際に技術ゼロの知人に試してもらった記録をまとめた。この記事では、その全工程を時系列で再現する。

Claude Codeとは？非エンジニアが使える理由

Claude Codeは、Anthropic社が提供するAIコーディングエージェントだ。ターミナル（黒い画面）上で動き、日本語の指示をそのままコードに変換してくれる。2026年5月現在、Claude Pro（月額20ドル・税込約3,100円）またはClaude Max（月額100ドル〜）のサブスクリプションで利用できる（Anthropic公式料金ページ）。

非エンジニアにとって重要なのは、「HTMLの構文を覚える必要がない」という点だ。「トップページにロゴと3つのサービス紹介セクションを置いて」と日本語で伝えれば、Claude Codeがファイルを生成・編集してくれる。エラーが出ても「エラーが出ました」と伝えれば自動で修正に取り組む。

ただし万能ではない。デザインの細かいニュアンス（「もう少し柔らかい雰囲気で」など）は何度かやり取りが必要になるし、画像素材やテキスト原稿は自分で用意する必要がある。あくまで「コーディング作業をAIが代行する」ツールだと理解しておこう。

準備編：必要なもの・アカウント・費用一覧

結論から言うと、公開まで必須なのは以下の3つだけだ。

項目費用（2026年5月時点）備考
Claude Pro サブスクリプション月額20ドル（税込約3,100円）Claude Code利用に必要。API従量課金でも可（その場合は使った分だけ）
Vercel Hobbyプラン無料静的サイトのホスティング。月間100GBの帯域幅まで無料（Vercel Pricing）
GitHub アカウント無料Vercelとの連携に使用。公開リポジトリなら無料
独自ドメイン（任意）年間1,000〜3,000円程度なくてもVercelのサブドメイン（xxx.vercel.app）で公開可能

つまり、Claude Proの月額20ドルだけで始められる。API従量課金を選べば、サイト1つ作るだけなら5〜10ドル程度で済むケースもある。独自ドメインなしなら月額費用は実質20ドル以下だ。

事前にインストールが必要なソフトウェアは以下の通り。すべて無料で入手できる。

  • Node.js（公式サイトからLTS版をダウンロード）
  • Git（公式サイトからインストール）
  • Claude Code CLI（ターミナルで npm install -g @anthropic-ai/claude-code を実行）

「ターミナルを開いてコマンドを打つ」という操作だけは避けられないが、打つ内容はすべてClaude Codeが教えてくれるので、コピペできれば問題ない。

実践編：12時間の全工程タイムライン

以下は、実際に非エンジニアの知人（30代・事務職）がブランドサイトを完成させるまでの時系列記録だ。作業は2日間に分けて実施した。

Day 1（約7時間）

0:00〜0:30 — 環境構築

Node.js・Git・Claude Code CLIをインストール。GitHubアカウントを作成し、Vercelと連携。公式ドキュメントの手順通りに進めれば、ここでつまずく要素はほぼない。

0:30〜2:00 — プロジェクト初期化とトップページ

ターミナルでClaude Codeを起動し、「Next.jsで静的サイトを作りたい。トップページにヒーローセクション、サービス紹介3つ、問い合わせフォームを置いて」と指示。Claude Codeが npx create-next-app の実行からファイル生成まで一気に進めてくれる。

2:00〜4:00 — デザイン調整

生成されたサイトを npm run dev でローカル確認しながら、「ヘッダーの背景色を紺色にして」「フォントサイズをもう少し大きく」「スマホで見たときにメニューがハンバーガーになるようにして」と細かく指示。ここが最も時間を使うパートだ。「もう少し柔らかく」のような曖昧な指示は伝わりにくいので、「角丸を8pxにして」「背景色を#F5F0EBにして」と具体的に伝えるのがコツ。

4:00〜5:30 — 下層ページ作成

「会社概要ページ」「料金ページ」「ブログ一覧ページ」を追加。各ページの構成を箇条書きで伝えると、Claude Codeがルーティングごとファイルを生成してくれる。

5:30〜7:00 — 画像差し替えとテキスト反映

ダミー画像を実際のロゴや写真に差し替え、テキストを本番用に書き換え。画像は public フォルダに置き、Claude Codeに「ヒーロー画像をhero.jpgに差し替えて」と指示するだけ。

Day 2（約5時間）

7:00〜9:00 — レスポンシブ対応と微調整

スマホ・タブレットでの表示崩れを修正。Chrome DevToolsのデバイスエミュレーションで確認しながら「iPad表示で画像が横にはみ出している」「スマホでボタンが小さすぎる」と伝えると、Claude Codeがメディアクエリを自動で追加してくれる。

9:00〜10:00 — SEO基本設定

「各ページにmeta descriptionとOGPタグを設定して」と指示。タイトルタグ、ファビコン、OGP画像の設定まで対話だけで完了する。

10:00〜11:00 — GitHubへのプッシュとVercelデプロイ

「このプロジェクトをGitHubにプッシュして」と指示すると、Claude Codeがリポジトリ作成からプッシュまでガイドしてくれる。Vercelのダッシュボードで「Import Project」→GitHubリポジトリを選択→デプロイボタンを押すだけ。ビルドは通常1〜2分で完了する。

11:00〜12:00 — 本番確認と最終修正

デプロイされたURLで実機確認。細かい修正があれば再度Claude Codeで修正→プッシュ→自動デプロイ。Vercelはプッシュのたびに自動でビルド・デプロイしてくれるので、反映は数分で完了する。

費用内訳と受託案件化の可能性

今回の実験でかかった費用の内訳は以下の通りだ。

項目金額
Claude Pro（1ヶ月分）20ドル（約3,100円）
Vercel Hobby0円
GitHub Free0円
独自ドメイン（取得した場合）約1,500円/年
合計（ドメインなし）約3,100円
合計（ドメインあり）約4,600円

これを受託案件として考えると、面白い可能性がある。2026年5月現在、クラウドワークスやココナラで「簡易LP制作」の相場は3〜10万円程度だ。制作原価が3,000〜5,000円、作業時間が12時間であれば、時給換算で2,500〜8,000円の副業になり得る。

ただし注意点がある。Claude Codeで作れるのは「静的サイト」が中心で、ECサイトや会員サイトのような動的機能は難易度が上がる。また、クライアントワークでは「修正対応」の工数が読みにくく、想定の2〜3倍かかることもある。まずは自分のポートフォリオサイトを1つ作り、そこを実績として営業するのが現実的な第一歩だ。

つまずきやすいポイントと対処法

筆者がAI副業の案件を回す中で、非エンジニアから最も多く聞く質問を3つまとめた。

1. 「ターミナルが怖い」

Claude Codeはターミナル上で動作するため、黒い画面に抵抗がある人は多い。対処法は「Claude Codeが提示するコマンドを1行ずつコピペする」と割り切ること。中身を理解する必要はない。また、2026年5月時点ではClaude Codeのデスクトップアプリ版（Mac/Windows対応）やVS Code拡張もあり、ターミナルを直接開かなくても使える環境が整ってきている。

2. 「エラーが出て止まった」

エラーメッセージをそのままClaude Codeに貼り付ければ、多くの場合は自動修正してくれる。それでも直らない場合は、エラーメッセージをGoogle検索するか、Claude Codeに「このエラーの原因を日本語で説明して」と聞けばよい。

3. 「デプロイ後に更新したい」

Vercel + GitHubの構成なら、ローカルで修正→Claude Codeに「変更をプッシュして」と伝えるだけで自動デプロイされる。CMSのような管理画面はないが、テキスト修正程度ならClaude Codeとの対話で十分回せる。

FAQ

Claude Codeは無料で使えますか？

Claude Code自体の利用にはClaude ProまたはMaxのサブスクリプション（月額20ドル〜）、もしくはAPI従量課金が必要です。2026年5月時点で完全無料プランはありません（Anthropic公式）。

プログラミング経験ゼロでも本当にサイトが作れますか？

静的なブランドサイト（5ページ程度）であれば、本記事の手順で作成可能です。ただし、EC機能や会員ログインなどの動的機能は難易度が大幅に上がります。まずは静的サイトから始めることをおすすめします。

Vercel以外のホスティングでも公開できますか？

GitHub Pages（無料）やNetlify（無料枠あり）でも同様に公開可能です。Vercelを選んだ理由は、Next.jsとの相性が最も良く、デプロイ手順が最も簡単だからです。

作ったサイトを受託案件として請け負っても問題ないですか？

Claude Codeの利用規約上、生成されたコードの商用利用は許可されています（2026年5月時点）。ただし、クライアントに「AIを使って制作している」旨を開示するかどうかは案件ごとに判断してください。

月額費用を0円にすることはできますか？

サイト公開後にClaude Proを解約すれば、Vercel Hobbyプラン（無料）だけで維持できます。更新作業が発生するときだけ再契約する運用も可能です。

参考文献