Guide / 無料
Claudeに、自分のお店の
ホームページを作ってもらう方法
貼るだけのプロンプトで、ホームページ（1ファイル）を作らせます。
デザインもプログラミングも、ぜんぶClaudeに任せます。追加費用0円でできます。
お店のホームページ、こんな理由で後回しにしていませんか
- ホームページが欲しいけれど、業者に外注する予算がない
- プログラミングもデザインも、触ったことがない
- AIでホームページが作れると聞いても、何から手をつければいいか分からない
- 自分で頼んでも、途中で止まったり表示がくずれたりしそうで不安
- 実在しない住所や電話番号を、AIに勝手に書かれてしまわないか心配
貼るだけのプロンプト1枚と、点検の文章1枚があれば、外注なしで、自分のお店のホームページを自分のパソコンに用意できます。
このガイドでできるようになること
スクリーンショット8枚つきの手順書
全10手順。Claudeを開くところから、貼るだけのプロンプトで作らせ、パソコンに保存して開くまでを実際の画面写真で解説します。
そのまま貼れるマスタープロンプト
お店の情報とデザインの希望を書き換えるだけで、1つのHTMLファイルのホームページを作らせる依頼文です。
表示くずれ・情報混入を自分で点検させる依頼文
スマホ表示・スクロールの抜け・伝えていない情報の混入の3点を、Claude自身に点検させる依頼文です。
気になったところをことばで直す方法
「見出しの色を落ち着いた色に」のように、日本語で伝えるだけで直してもらう手順です。
実際に気をつけたポイントを、先回りしてあります
AIに任せるときに、知らずに踏むと困るものばかりです。
実在しない住所・電話番号・実績を書かれてしまう
マスタープロンプトの技術条件に「わからない項目は＊＊のままにする」と明記し、点検の依頼文でも伝えていない情報が混ざっていないかを確認させています。
ホームページ作りの途中で生成が止まってしまう
長いページの途中で止まることがあります。その時は「続けて」とだけ送れば続きから作られることを、つまずきやすいポイントとして明記しています。
スマホで見たときに表示がくずれていても気づかない
点検の依頼文で、スマホ幅（390px）ではみ出す部分がないかをClaude自身にチェックさせる設計にしています。
直すたびに保存し直して、どれが最新か分からなくなる
直したら同じファイル名で上書き保存することを明記し、いちばん新しい状態だけが残るようにしています。
含まれるもの・含まれないもの
含まれるもの
- 手順書本体（Webページ形式・全10手順・画像8枚）
- 貼るだけのマスタープロンプト／点検用の依頼文テンプレート
- 表示くずれ・情報混入のセルフチェックのやり方
含まれないもの
- ホームページの公開作業（サーバー契約・ドメイン取得）
- お店の実際の写真の撮影・画像加工
- 集客・問い合わせ導線の設計
※Claudeの画面や無料プランの仕様は今後変更される可能性があります。
必要なもの
Claudeのアカウント（無料で作れます）パソコン（ファイルを保存して開くので、スマートフォンだけでは進められません）
読む
読み方
- 上のボタンから開くそのままブラウザで読めます。ダウンロードやアカウント登録は不要です。
- 実際の画面と同じ順番で進める各手順に画像がついているので、迷ったらそこを見ながら進めてください。
よくある質問
- 初心者でも大丈夫ですか。
- 大丈夫です。業者への外注も、専門知識も、デザインのセンスも必要ありません。貼って、書き換えて、送るだけが中心です。
- Claudeのアカウントを持っていません。
- 問題ありません。無料で作成できます（登録ガイドも別にあります）。
- 作ったホームページは、そのままお客様に見てもらえますか。
- いいえ。このガイドでできるのは「作って、自分のパソコンで見る」ところまでです。お客様がインターネットから見られるようにする「公開」には、別途サーバー（月数百円〜）が必要で、このガイドの範囲外です。
- 途中でホームページの生成が止まってしまったら？
- 「続けて」とだけ送ってください。続きから作ってくれます。手順の中でも、つまずきやすい点として案内しています。
- 本当に無料ですか。
- はい。ホームページを作るところまでは無料プランのままでできます。このガイドの画像もすべて無料プランで撮影しています。