AIを使ってお店のホームページを爆速で作る方法【副業向け完全ガイド】

はじめに

「近所の飲食店がまだホームページを持っていない」「美容室のサイトが10年前のデザインのまま」——街を歩けばこういう店は今でもたくさんあります。

一方で、AIコーディングツールの進化により、エンジニアが1人でプロ品質のホームページを7時間前後で納品できる時代になりました。単価5万円・時給7,000円超という、副業として非常に効率のよい仕事です。

この記事では、飲食店・美容室・整体院といった地域密着型の店舗向けホームページをAIで爆速制作するフロー全体を解説します。

なぜ「お店のHP制作」が副業に向いているのか

需要が安定している

中小店舗のWeb需要は枯渇しません。既存サイトのリニューアル・スマホ対応・SEO改善など、「今すぐ依頼したい」案件が常に存在します。クラウドワークスやランサーズを見ると、HP制作カテゴリは常に数百件の案件が出ています。

技術的ハードルが低い

EC機能や予約システムが不要な「会社案内型」のHPであれば、HTML/CSS/JavaScript の基本知識があれば十分です。CMSとしてWordPressを使う場合もありますが、静的サイトなら覚えることはさらに少ない。

AIで差別化できる

従来のHP制作者はコーディングに多くの時間をかけていました。AIを使えばその時間を大幅に削減でき、同じ単価でより多くの案件を受けられるか、同じ時間でより高品質な成果物を出せるかのどちらかが実現できます。

ツールスタックと役割分担

おすすめツールスタック：フェーズ別のAIツール活用法

制作の各フェーズで使うツールは明確に分けると効率が上がります。

Claude / ChatGPTはヒアリング・構成設計・文章生成に使います。「飲食店のHPに必要なページ構成を提案して」「このお店の強みをもとにキャッチコピーを5案出して」といった使い方が中心です。

Cursorは実装の核心です。ページ構成が決まったらCursorに渡し、HTML/CSSをまるごと生成させます。レスポンシブ対応やホバーアニメーションも指示するだけで実装してくれます。

Vercel / Netlifyはデプロイに使います。GitHubにプッシュするだけで自動デプロイされ、独自ドメインの設定もGUIで完結します。エンジニアが1行もインフラ設定を書かずに公開できます。

ステップ別：制作フローの全体像

Step 1｜ヒアリング（60分）

最初にやることは、Claudeでヒアリングシートを生成することです。

飲食店（ラーメン屋）のホームページ制作を依頼された。
初回ヒアリングで確認すべき質問リストを20項目作って。
ターゲット、強み、競合との違い、写真の有無、予算、
更新頻度なども含めること。

このリストをそのままクライアントに送るか、Googleフォームに貼って回答してもらいます。ヒアリング内容が揃ったら、次のプロンプトでサイト構成を決めます。

以下のヒアリング結果をもとに、HPのページ構成と
各ページに載せるべきコンテンツを提案して。

【店名】山本ラーメン
【強み】昭和38年創業、自家製チャーシュー、行列ができる人気店
【ターゲット】近隣のサラリーマン・地元住民
【予算】5万円
【必要機能】メニュー表示、アクセス、問い合わせフォーム

Claudeが「トップページ・メニュー・アクセス・お問い合わせ」の4ページ構成と、各ページのコンテンツ案を出してくれます。これを叩き台にクライアントと合意を取ります。

Step 2｜デザイン・コーディング（3時間）

構成が決まったらCursorで実装します。新しいプロジェクトを作り、以下のような指示を出します。

飲食店（ラーメン屋）のホームページを作って。

【要件】
- ページ: トップ・メニュー・アクセス・お問い合わせ
- 雰囲気: 老舗感のある和モダン。黒・白・赤のシンプルな配色
- レスポンシブ: スマホ・タブレット・PC対応
- ナビゲーション: ヘッダー固定、スムーズスクロール
- フォント: Google Fonts（Noto Serif JP）

まずindex.htmlとstyle.cssの雛形を作って。

Cursorがファイルを生成したら、ブラウザで確認しながら細部を調整します。

ヒーローセクションの背景を黒にして、店名を大きく表示。
その下に「昭和38年創業 ／ 本格醤油ラーメン」というサブコピーを追加。
ボタンは白抜きで「メニューを見る」というテキスト。

このやり取りを繰り返すだけで、3時間前後でデザインが完成します。画像のプレースホルダーにはクライアントから受け取った写真を後からはめ込みます。

Step 3｜文章・SEO設定（1時間）

文章はすべてClaudeに生成させます。

以下の情報をもとに、ラーメン屋のHPに使う文章を書いて。

【生成するもの】
1. トップページのキャッチコピー（20字以内）×3案
2. 店舗紹介文（200字）
3. 各メニューの説明文（50字×5品）
4. metaタグのdescription（120字）
5. titleタグ

【情報】
店名: 山本ラーメン / 創業: 昭和38年 / 名物: 自家製チャーシュー
場所: 新宿 / ターゲットKW: 新宿 ラーメン 老舗

出力された文章をHTMLに貼り込み、metaタグを設定します。Google Search Consoleへの登録方法もClaudeに聞けば手順を教えてくれます。

Step 4｜確認・納品（1時間）

クライアントに確認用URLを共有します。Vercelであれば yourproject.vercel.app というURLが自動発行されるので、それをそのまま送ればOKです。

修正依頼が来たらCursorで対応します。「ボタンの色を赤に変えて」「営業時間を更新して」程度の修正なら数分で完了します。

承認が取れたら独自ドメインを設定して納品完了です。

案件の単価設定

案件規模別・単価と作業時間の目安

最初の数件は**スタンダードプラン（5万円）**を基準にするのがおすすめです。1ページのLPより複数ページの方がクライアントの満足度が高く、リピートや紹介につながりやすい。

単価を上げるポイントは**「保守契約」**です。「月5,000円で文章更新・写真追加・バックアップを対応します」という提案を添えると、継続的な収入になります。AIを使えば保守作業も短時間で完了するため、時給換算するとさらに効率が上がります。

案件を取るための最初の一歩

クラウドソーシングで実績を作る

最初はクラウドワークスの「ホームページ制作」カテゴリで案件を探します。予算3〜5万円の案件が中心ですが、実績ゼロの段階ではこれで十分です。

提案文で差別化するポイントは**「納期の速さ」**です。「AIツールを活用することで、通常2〜3週間かかるHP制作を1週間以内に納品できます」という一文は、クライアントにとって大きな魅力になります。

知人・地域の店舗に直接提案する

クラウドソーシングを使わず、身近な店舗に直接提案する方法も有効です。

近所のラーメン屋・美容室・整体院を10〜20件リストアップして、「現在のHP（もしくはHP不在）を拝見しました。AIを活用してスピーディーに制作できます」とDMや電話で連絡します。直接提案は競合が少なく、単価交渉もしやすい。

最初の1件はポートフォリオ用として格安または無料で作らせてもらうのも手です。完成したサイトが実績になれば、次の提案が格段に通りやすくなります。

気をつけるべき3つのこと

著作権・素材の取り扱いに注意する。クライアントから受け取った写真や既存サイトの文章を無断で流用しないこと。AIが生成した文章も、事実確認はクライアントに必ず取ってもらいましょう。

AIの出力をそのまま納品しない。Cursorが生成したコードは動くことが多いですが、不要なコメントや冗長な記述が残ることがあります。最終確認は必ず自分でしてください。

保守・更新の責任範囲を契約書で明確にする。「公開後の更新は別途費用」「ドメイン・サーバー費用はクライアント負担」など、後のトラブルになりやすい点を最初に書面で確認しておきます。

まとめ

AIを使ったお店のHP制作副業の要点です。

Claude でヒアリング・構成設計を効率化する（60分）
Cursor でコーディングを自動化する（3時間）
Claude で文章・SEO設定を一括生成する（1時間）
Vercel でゼロ設定デプロイする（1時間）
合計7時間・5万円・時給7,000円超が現実的に狙える

「Web制作は時間がかかる」という常識は、AIによって完全に変わりました。技術よりヒアリング力と提案力の方が差別化要因になりつつあります。まずは身近な1店舗に声をかけるところから始めてみてください。