親族のお店のホームページをAIで作る手順｜報酬ゼロの「最初の実績」を1週間で形にする
ユウト
報酬ゼロで実績を積む、の実践編です。親族が営む小さなお店のホームページを、非エンジニアがAIで1枚作って引き渡すまでの手順を、ヒアリングシート・そのまま使えるプロンプト全文・2通りの作り方（ノーコード／AIコーディング）・公開前チェック・引き渡しの形まで通しでまとめました。意思決定と契約名義は事業主本人、という線の引き方つき。
[TOC]目次// tap to toggle18 items
前回、「副業禁止の会社でも、報酬を受け取らなければ手伝いとして実物を作れる場合がある」という話を書きました。あの記事は設計の話だったので、今回はその実践編です。
20代後半・会社員の ユウト です。題材は、いちばん需要があって、いちばん形に残るもの。親族が営んでいる小さなお店のホームページです。
- 1回で終わらせるヒアリングシート（そのままコピーして送れる形）
- 迷わないための1ページ完結の構成（5ブロック）
- 文章を書かせるプロンプト全文（材料を入れて貼るだけ）
- ページの作り方2ルート（ノーコード／AIでHTML1枚）
- 公開前のチェック項目と、写真・ロゴ・AI生成画像の扱い
- 引き渡しの形（ログイン情報・更新手順書・名義の線引き）
- ポートフォリオへの書き方のひな形
先に、この記事の立ち位置をはっきりさせておきます。
この記事は「報酬ゼロで手伝う」前提で書いています。お金を受け取らない理由、就業規則のどこを読むか、越えてはいけない線については前の記事にまとめてあるので、まだの方は先にそちらを読んでください。
とくに大事なのは2つ。後払い・現物も含めて報酬はゼロにすることと、意思決定者・名義人にならないことです。この記事の手順は、その2つを守った状態で回せるように組んであります。
全体の流れ：7ステップ
作業時間の合計は、慣れていなくても6〜8時間ほどです。ただし1週間で終わるかどうかを決めるのは、自分の速さではなく相手の返事の速さです。だから、聞くことは最初に全部まとめて聞きます。
- 1日目：ヒアリングシートを送る（作業15分／ここから待ち時間）
- 2〜3日目：回答と写真が届く。足りないものだけ追加で聞く
- 3日目：構成を決める（30分）
- 4日目：プロンプトで文章を作り、自分で直す（2時間）
- 5日目：ページを作る（2〜3時間）
- 6日目：本人に見てもらう → 修正（1時間）
- 7日目：公開・引き渡し（1時間）
最初の3日はほぼ「待ち」なんだよね。ここを短くしたいなら、ヒアリングを小分けにしないこと。「あと1個だけ聞いていい？」を5回やると、それだけで5日消えるよ。
ステップ1：ヒアリングシート（これを丸ごと送る）
自分で考えてはいけません。お店のことはお店の人がいちばん知っています。 こちらがやるのは、知っていることを引き出して、並べ替えることだけです。
そのまま送れる形にしました。LINEでもメールでも構いません。
■ ホームページを作るための質問シート（7項目）
1. 店名
・正式な表記（看板・領収書に使っているもの）：
・ふりがな：
・英語表記やローマ字表記があれば：
2. 営業時間・定休日
・営業時間（曜日で違うならその通りに）：
・定休日：
・不定休の場合、どこで知らせているか（SNS・店頭など）：
・年末年始やお盆の扱い：
3. メニュー／商品／料金
・出したいものを10個まで（名前・値段・ひとこと説明）：
・値段は税込か税抜か：
・「これは載せたくない」ものがあれば：
4. 写真
・使える写真（外観・店内・商品・人）：
・撮ったのは誰か（本人／家族／プロに依頼／もらいもの）：
・人が写っている写真は、その人に許可を取れるか：
5. 場所・行き方
・住所（建物名・階数まで）：
・最寄り駅やバス停からの目印：
・駐車場の有無と台数：
6. 連絡・予約の方法
・電話番号（公開してよいか）：
・予約は必要か、当日でも大丈夫か：
・LINE・Instagram・予約サイトを使っているならそのURL：
・問い合わせフォームは必要か：
7. いちばん伝えたいこと（3つだけ）
・(1)
・(2)
・(3)
※「うちはここが他と違う」「これだけは知ってから来てほしい」を、
思いついた順で構いません。きれいな言葉にしなくて大丈夫です。
7番が、このシートの本体です。1〜6は事実、7番だけがそのお店の言葉になります。ここが空欄のまま作ると、どこのお店にも当てはまる、誰の心にも刺さらないページができあがります。
「いちばん伝えたいことは？」と聞くと、たいてい「うーん……」で止まります。そういうときは、質問を具体に落とします。
- 「お客さんに毎回、口で説明していることは何ですか？」（→ たいていそれが1番大事な情報です）
- 「よく聞かれる質問は何ですか？」（→ そのままFAQになります）
- 「常連さんは、何が気に入って通ってくれていると思いますか？」
この3つで、だいたい出てきます。本人が「当たり前すぎて言うほどでもない」と思っていることが、外から見るといちばんの売りだった、という場面はかなり多いです。
ステップ2：構成は「1ページ完結・5ブロック」で固定する
ページを何枚も作らないでください。理由は3つあります。作るのが速い、スマホで読みやすい、そして更新する場所が1か所で済むから。最後の1つは、引き渡したあとに効いてきます。
- ヒーロー（画面を開いた瞬間に見える場所）— 店名／何屋か／場所／営業時間の要約。そして電話ボタンか予約ボタンを1つ
- 特徴（伝えたいこと3つ）— ヒアリング7番の3つを、見出し＋2〜3文で
- メニュー／料金— 名前・値段・ひとこと説明。税の扱いを必ず書く
- アクセス— 住所・地図・目印・駐車場・営業時間の正式版
- 問い合わせ— 電話（タップで発信）・予約リンク・SNS。フォームは必要なときだけ
順番には理由があります。お店のホームページを開いた人が知りたいのは、ほぼ**「何屋か」「今やっているか」「どこか」「いくらか」「どう連絡するか」**の5つだけだからです。この順に置いておけば、スクロールするだけで全部わかります。
逆に、最初に置きたくなるけれど後ろでいいものもあります。店主のあいさつ、こだわりの長文、歴史。読みたい人は下まで読むので、必要なら4番と5番のあいだに入れてください。
「あれもこれも載せたい」は、たいてい途中で力尽きる原因になる。1ページに収まらない情報が出てきたら、それは2枚目を作る合図じゃなくて、削る合図だと思っていい。
ステップ3：文章を書かせるプロンプト（全文）
材料がそろったので、ここからAIの出番です。ヒアリングシートの回答をそのまま貼って使えるプロンプトを置いておきます。コピーして、{ } の中を埋めてください。
あなたは、小さなお店のホームページの文章を書く編集担当です。
これから渡す「お店の情報」だけを使って、1ページ完結のホームページの
原稿を書いてください。
# お店の情報
・店名：{ }
・業種（何屋か）：{ }
・営業時間／定休日：{ }
・住所と最寄り（目印・駐車場）：{ }
・メニュー／商品と値段（税込か税抜かも）：{ }
・連絡方法（電話・予約の要否・SNS）：{ }
・いちばん伝えたいこと3つ：{ }
・読んでほしい人：{ }（例：近所に住む家族連れ／通勤途中の会社員）
# 絶対に守ること
1. 上の情報に無いことは書かない。
とくに数字（値段・年数・席数・件数）と、実績や受賞歴を作らない。
2. 情報が足りない欄があるときは、原稿を書かずに
「◯◯が足りません」とだけ返して止まる。
3. 「日本一」「最高」「絶対」などの言い切りは使わない。
4. 医療・健康・効果に関する表現は使わない。
5. 営業時間・住所・電話番号は、渡した表記をそのまま写す（言い換えない）。
# 書いてほしい構成（この順・この個数）
(1) ヒーロー
・キャッチコピー：全角25字以内を3案
・説明文：全角60字以内を1本（何屋か・どこか・いつ開いているか）
(2) 特徴3つ
・小見出し：全角15字以内
・本文：各2〜3文、全角120字以内
(3) メニュー紹介の導入文：全角80字以内
・各メニューのひとこと説明：全角30字以内
(4) アクセスの案内文：全角80字以内（目印を必ず入れる）
(5) 問い合わせの案内文：全角60字以内
(6) よくある質問：3組（質問は全角30字以内、答えは全角100字以内）
# 語調
・ですます。親しみのある言い方。専門用語は使わない。
・お店の人が自分の言葉として声に出して読める文にする。
・感嘆符は全体で2回まで。
# 出力のしかた
上の(1)〜(6)を、見出しをつけて順番に出してください。
最後に「この原稿で、情報が足りずに埋められなかった箇所」を
箇条書きで書いてください。無ければ「なし」と書いてください。
このプロンプトで大事なのは、「守ること」を先に書いていることと、最後に「埋められなかった箇所」を出させていることの2つです。
AIは、材料が足りないときに、それらしい言葉で穴を埋めてしまうことがあります。「創業30年」「地域で人気の」「豊富なメニュー」。どれも、こちらが渡していない情報です。お店の情報でこれをやられると、事実と違うことが看板になってしまいます。 最後に不足を自己申告させておくと、そこに気づけます。
出てきた原稿は、必ずこの5点だけ検品する
- 数字が生えていないか — 年数・席数・値段・「◯◯人が来店」。渡した数字以外が出ていたら全部削る
- 営業時間・住所・電話番号が、シートの表記と一字一句同じか — 言い換えられていたら戻す
- 言い切りが混ざっていないか — 「地域No.1」「最高の」は、根拠がない限り使わない
- お店の人が声に出して読めるか — 読んで恥ずかしい文は、本人が更新しなくなります
- 3つの特徴が、ちゃんと3つ違うことを言っているか — 同じことの言い換えになりがちです
そして、最終的な文面は必ず本人に読んでもらってから公開します。ここは省略しないでください。
上のプロンプト・入力の型（ヒアリングシート）・検品の5項目。この3つがそろうと、「プロンプト一式＋運用手順書」の形になります。
つまり、1件目の作業がそのまま2件目以降の道具になるということです。ホームページを作るたびに毎回ゼロから考える人と、1セットを持っている人では、2件目からの速さがまるで変わります。
ステップ4：ページの作り方は2ルート
ここからが「実際にウェブページにする」工程です。どちらか片方を選べば済みます。 両方やる必要はありません。
- A. ノーコード（ホームページ作成サービスに流し込む）→ はじめての1件・引き渡す相手がパソコンに強くない場合
- B. AIコーディング（AIにHTMLを1枚書かせて、静的ホスティングに置く）→ 手元にAIコーディングの道具があり、自分で直せる場合
ルートA：ノーコード（画面の操作だけで作る）
テンプレートを選んで、文章と写真を流し込んで、公開ボタンを押す。コードは一行も書きません。
候補としてよく名前が挙がるのは、ペライチ、STUDIO、Wix、Jimdo、Google サイトあたりです。ただし、この記事では各サービスの料金や機能は書きません。 今回、公式ページを開いて横並びに確認していないからです。無料枠の条件は特に変わりやすいところなので、推測で書くと、それを読んだ人が困ります。
代わりに、公式ページで何を見ればいいかを置いておきます。
- 無料プランで公開までできるか（作れるだけで公開は有料、という形もあります）
- 無料プランで、そのサービスの広告やロゴが表示されるか
- 独自ドメイン（お店の名前のURL）を後から接続できるか。できるのはどのプランからか
- 問い合わせフォームが使えるか。月に何件まで受けられるか
- アカウントの引き渡しができるか（作った人から、お店の人へ移せるか）
- やめたときにどうなるか（ページが消えるのか、データを書き出せるのか）
5番と6番を見落とす人がとても多いです。作った自分のアカウントの中にお店のホームページがある状態は、引き渡しとしては未完成です。ここは後でもう一度触れます。
ルートB：AIコーディング（HTML1枚を作って、静的ホスティングに置く）
Claude Code のようなAIコーディングの道具に、**HTMLとCSSが1ファイルに収まった「1枚もの」**を書かせて、無料の静的ホスティングに置く方法です。非エンジニアのまま Claude Code を30日間触った記録はこちらの記事にまとめてあります。
指示の出し方は、こんな形で十分でした。
以下の原稿で、1ページ完結のお店のホームページを作ってください。
# 条件
・HTML1ファイルに、CSSも含めて完結させる（外部ファイルなし）
・スマホ優先。幅375pxで崩れないこと
・上から順に、ヒーロー／特徴3つ／メニュー／アクセス／問い合わせ
・電話番号は tel: リンクにして、押したら発信できるようにする
・画像は後から差し替えるので、今は場所だけ確保して
「ここに外観写真」のように分かる文字を入れておく
・文字は大きめ（本文16px以上）、色のコントラストは強めに
・派手なアニメーションは入れない
・画面の一番下に、店名と電話番号をもう一度置く
# 原稿
{ステップ3で作った原稿を貼る}
置き場所は、無料枠のある静的ホスティング（Cloudflare Pages、GitHub Pages、Netlify など）が候補になります。ただしこちらも、無料枠の条件は公式ページで確認してください。 この記事では条件を書きません。
AIに書かせたHTMLは、書いた本人（＝あなた）が読めないと、あとで直せません。 営業時間が変わった、値段が変わった、というたびに自分が呼ばれる形になります。
対策は2つ。①更新しそうな箇所（営業時間・値段・電話番号）を、ファイルの上のほうに固めてコメントで印をつけておく、②その部分の直し方を手順書に書いておく。この2つをやっておかないと、引き渡したつもりで自分が管理人のままになります。
独自ドメインは「お店の側」で契約する
どちらのルートでも、独自ドメイン（例：お店の名前.com）を使うなら、**契約と支払いはお店の側（事業主本人）**でやってもらってください。
理由は2つです。ひとつは、名義と支払いを自分が持つと「手伝い」から一歩はみ出すこと。もうひとつは現実的な話で、自分が関われなくなったとき、名義が他人のままだとお店がサイトを動かせなくなるからです。更新のメールも自分に届き続けます。
申し込み画面を一緒に見ながら、入力とカード情報の登録は本人にしてもらう。これが一番きれいです。無料のサブドメイン（サービス名が入ったURL）で始めて、あとから独自ドメインに移す、という順番でも構いません。
ステップ5：写真・ロゴ・AI生成画像の扱い
ここは、あとから揉めると本当に面倒なところなので、先に整理します。
- 本人・家族が撮った写真 → OK
- プロに撮ってもらった写真 → 撮影者との契約次第。「ウェブで使っていいか」を本人から確認してもらう
- 取材で撮られた写真、雑誌に載った誌面 → 権利は撮影側・出版側にあるのが普通。安易に載せない
- 仕入れ先メーカーの商品画像 → 使用許諾の範囲を確認。勝手に転載しない
- 検索で出てきた画像、SNSで見つけた画像 → 論外です
- お客さんが写っている写真 → 写っている人の許可が必要
- ロゴ → 誰が作ったかを確認。デザイナーに頼んだものなら、使い道の範囲を確認してもらう
写真が足りないときは、スマホで撮り直すのがいちばん速くて安全です。明るい時間に、窓際で、正面から。これだけで十分見られる写真になります。
AI生成画像を使う場合
使ってはいけない、という話ではありません。ただし使う場所を限るのと、使ったことを事業主に伝えておくの2つは守ってください。
避けたほうがいいのは、料理・商品・店内など「実物を見せる場所」にAI生成画像を使うことです。実物と違うものを見て来店したお客さんがいたとき、説明を求められるのはお店のほうだからです。使うとしても、背景・見出しの飾り・イメージイラストのように、実物と誤解されない場所にとどめるのが安全です。
あわせて、使っている画像生成サービスの利用規約で、商用利用の条件を確認してください。プランによって条件が違うことがあります。ここも、規約の本文にあたるのが確実です。
「それっぽい料理写真」をAIで作って載せるのは、一番やっちゃいけないやつ。困るのは作った自分じゃなくて、店に立ってるお店の人のほうなんだよね。
ステップ6：公開前チェック（10項目）
公開ボタンを押す前に、ここだけ通してください。スマホを手に持ってやるのがコツです。パソコンの画面では気づけない不具合が、ほとんどここで見つかります。
- スマホで開いて、横スクロールが出ないか（文字や画像がはみ出していないか）
- 文字が小さすぎないか。指を広げずに読めるか
- 電話番号をタップして、発信画面が出るか（
tel:リンクになっているか） - 地図が正しい場所を指しているか。住所の番地・建物名・階数まで合っているか
- 営業時間・定休日が、ヒアリングシートと一字一句同じか
- 値段の税込・税抜の表記があるか
- 予約リンク・SNSリンクが、正しい先に飛ぶか（別のアカウントに飛ぶ事故がよくあります）
- 写真の権利を全部確認したか（前の章のとおり）
- リンク切れがないか。画像が表示されない箇所がないか
- お店の人が最後に読んで、OKと言ったか
「ホームページを作るなら特商法の表記が必要」と聞いたことがあるかもしれません。これはインターネットで物やサービスを販売する（通信販売をする）場合の話です。
お店の案内だけ、つまり住所・営業時間・メニューを載せて、来店してもらうだけのページなら、通信販売には当たりません。 一方で、サイトから商品を注文できるようにする、オンラインで決済する、といった形にするなら話が変わります。その場合は事業主に、必要な表記と、その内容の確認を必ずしてもらってください。 表記の内容を決めるのは、作業役ではなく事業主の仕事です。
判断に迷うときは、消費者庁の特定商取引法ガイドを事業主と一緒に見るのが確実です。ここは記事で断定してよい領域ではないので、一般的な整理までにとどめます。
ステップ7：引き渡し（ここまでやって、やっと完成）
公開した日は、完成日ではありません。 引き渡しが終わった日が完成日です。
- ログイン情報（サービス名・ID・パスワードの控え・再設定用のメールアドレス）
- 更新手順書（A4で1〜2枚。あとで詳しく書きます）
- どこに何があるかの地図（ドメインはどこで契約したか、画像の元データはどこにあるか、フォームの通知はどのメールに届くか）
アカウントは、最終的にお店の名義にする
ここがいちばん抜けやすいところです。自分のメールアドレスで作ったアカウントの中にお店のホームページがある状態だと、次のことが起きます。
- 更新のたびに、自分が呼ばれる
- 支払いの通知が、自分に届き続ける
- 自分が関われなくなった瞬間、お店はサイトを一切いじれなくなる
なので、お店側のメールアドレスでアカウントを作るか、あとから移管できるサービスを選んでください。パスワードは本人に設定してもらい、こちらは控えを渡すだけ。これで「預かっている」状態がなくなります。
更新手順書は、A4で1〜2枚に収める
長い手順書は読まれません。画面のスクリーンショットを貼って、押す場所に丸をつけるのがいちばん伝わります。
- ログインの方法（どのURLを開いて、どこに何を入れるか）
- 営業時間を変える手順（ここが一番使われます）
- 値段・メニューを変える手順
- 写真を差し替える手順（縦横の大きさの目安も書いておく）
- 困ったときの連絡先（サービスのサポート窓口。自分の連絡先ではなく）
- やってはいけないこと（消すと戻せない操作があれば、先に書いておく）
5番を「自分の連絡先」にしないのがポイントです。そこを自分にすると、無報酬の保守契約が永久に続きます。 手伝いは、終わりがあるから手伝いでいられます。
判断は、最後まで事業主がする
前の記事で書いた線の引き直しです。値段を決める、写真を選ぶ、契約を結ぶ、公開するかどうかを決める。この4つは、全部お店の人がやります。 こちらは、決まったものを形にするだけ。
「どっちがいいと思う？」と聞かれたら、案を2つ出して、選んでもらう。これが作業役の関わり方です。
決めてあげるほうが親切に見えるんだけど、そこを引き受け始めると立場が変わっちゃうんだよね。案を並べて渡すところまでが、いちばん喜ばれるし、いちばん安全。
ポートフォリオへの書き方
最後に、これをどう実績として残すか。金額が書けない代わりに、書けることが4つあります。
【制作物】親族が営む飲食店のホームページ（1ページ構成）
関わり方：無報酬でのお手伝いです。企画・意思決定・契約名義はすべて事業主本人で、私は文章の下書きとページの制作を担当しました。
作ったもの：ホームページ1ページ（ヒーロー／特徴／メニュー／アクセス／問い合わせ）、掲載原稿一式、更新手順書1部
期間：ヒアリングから公開まで7日間（実作業は合計7時間ほど）
やり方：ヒアリングシートで材料を集め、原稿の下書きをAIで作成。事実確認と最終調整は自分で行い、公開前に事業主の確認を受けています。ページは（使ったサービス名／HTML1枚を静的ホスティングに設置）で制作しました。
相手の言葉：「電話で毎回説明していたことを、URLを送るだけで済むようになった」
掲載許可：本人の許可を得て掲載しています。
ポイントは、「無報酬」「親族」を隠さないことです。ここを曖昧にすると、あとで必ず崩れます。正直に書いても、読む側が見ているのは**「この人に頼んだら、何を、どのくらいの期間で作ってもらえるのか」**だけなので、まったく困りません。
むしろ、手順書まで渡しているという一行が効きます。作って終わりにしない人だ、と伝わるからです。
屋号・写真・URLを外に出すときは、本人の許可を取ってください。 「実績として見せてよいか」「屋号は出すか伏せるか」の2点だけ確認すれば十分です。伏せる場合は「都内の飲食店」のような書き方にして、スクリーンショットは文字をぼかします。
まとめ
- 聞くことは最初に1回でまとめて聞く。ヒアリングシート7項目を丸ごと送る。7番「伝えたいこと3つ」が本体
- 構成は1ページ5ブロックに固定（ヒーロー／特徴／メニュー／アクセス／問い合わせ）
- 文章はプロンプト全文をコピーして使う。渡した情報以外を書かせない・不足を自己申告させるの2つが肝
- 作り方はA. ノーコードかB. AIでHTML1枚の2ルート。料金・無料枠の条件は必ず公式ページで確認（この記事では書きません）
- 写真・ロゴはお店が権利を持っているものだけ。AI生成画像は実物を見せる場所に使わない
- 公開前チェックはスマホを手に持って10項目。特商法の表記が要るのは物やサービスを販売するとき
- 引き渡しまでが仕事。ログイン情報・更新手順書・名義。困ったときの連絡先は自分ではなくサポート窓口に
- 意思決定と契約名義は事業主本人。こちらは案を2つ出して選んでもらう
ホームページ1枚は、たぶんいちばん喜ばれて、いちばん形に残る手伝いです。お金は1円も動かないのに、URLひとつで人に見せられるものが手元に残ります。
そして、1件目で作ったヒアリングシート・プロンプト・手順書は、そのまま2件目の道具になります。2件目からは、待ち時間以外ほとんど時間がかかりません。 そこまで行けば、報酬ゼロの期間はもう準備期間ではなくて、仕組みを作った期間になります。
📗 ぼくが作業しないAI副業の教科書〜中級編〜｜設計を売る・自動化する・紹介で広げる
無報酬で作った1セットを、値段のつく形に組み直すところから
本文約18,000字＋巻末テンプレ10点を本文に同梱／note にて980円・はじめに＋第1章は無料で読めます（PR）
※当サイトはアフィリエイトプログラムを使用しています
AI副業の全体像から知りたい方は、初級編からどうぞ。今回の「1件目をタダで作る」話は、そこに出てくる12ヶ月の地図のいちばん序盤にあたります。
📘 ぼくが作業しないAI副業の教科書（初級編）
未経験の20代会社員がAIに代わりに働かせて、12ヶ月で月100万円に届いた全工程
本文25,000字＋特典8点／note にて 980円（PR）
※当サイトはアフィリエイトプログラムを使用しています
それでは、また別の記事で。
―― ユウト
※本記事は一般的な情報提供であり、法的・税務的な助言ではありません。副業・兼業の可否は各社の就業規則や労働契約によって異なります。ホームページ作成サービス・ホスティングの料金や無料枠の条件、画像生成サービスの商用利用の条件は変わることがあるため、申し込み前に必ず各社の公式ページと利用規約をご確認ください。通信販売にあたる場合の表示義務については、事業主ご本人が消費者庁の案内や専門家に確認してください。成果には個人差があり、特定の収益・成果を保証するものではありません。
この記事を書いた人
ユウト
AIに代わりに働かせて自分の人生を取り戻す、をテーマに発信中。ChatGPT・Claude・Notion AI 活用で『自分が作業しない副業』を実装。
