PubleeClaudeでお店のホームページを自作して公開する方法
お店のホームページは、業者に頼まなくても自分で作れるようになりました。最短ルートは、AIのClaudeにこの記事のプロンプト(指示文)を貼ってページを作ってもらい、できあがったコードを Publee に貼り付けて公開する、の2ステップです。プログラミングの知識はいりません。かかる時間は10〜15分、費用は0円から始められます。
この記事では、飲食店を例に手順を最初から最後まで通して説明します。美容室でも教室でも士業でも、やることは同じです。
用意するもの
- Claudeのアカウント(claude.aiで無料登録できます)
- お店の基本情報(店名・住所・営業時間・メニューと価格・お店のこだわり)
これだけです。サーバーの契約も、専用ソフトのインストールも必要ありません。
ステップ1: Claudeにホームページを作ってもらう
claude.ai を開いて、下のプロンプトをそのままコピーし、【お店の情報】の部分だけ自分のお店に書き換えて送信してください。
あなたはプロのWebデザイナーです。以下のお店の情報をもとに、
お店のホームページを作ってください。
【お店の情報】(ここを自分のお店に書き換えてください)
- 店名: 喫茶こもれび
- 業種: カフェ(自家焙煎珈琲と手作りプリンの店)
- 住所: 東京都◯◯区こもれび町1-2-3
- 営業時間: 9:00〜18:00
- 定休日: 水曜・第2木曜
- 電話番号: 03-0000-0000
- メニューと価格: ブレンド550円、カフェオレ600円、プリン480円、
バタートースト420円
- お店の雰囲気・こだわり: カウンター6席の小さな店。豆は店内で焙煎。
名物は昔ながらの固めのプリン。
- SNS: (あれば InstagramのURL など)
【作り方の条件】
- HTML 1ファイルだけで完結させる(CSSもファイルの中に書く)
- スマホで見てもきれいに表示されるようにする
- 写真は使わず、配色とレイアウトで業種に合った雰囲気を出す
- 構成: トップ(店名+キャッチコピー)/お店について/メニュー/
店舗情報(住所・営業時間・定休日・電話)/フッター
- 住所から「Googleマップで開く」リンクを付ける
- お店の情報にない内容(受賞歴・創業年など)は勝手に作らない
- 完成したらプレビューで見せてください
数十秒で、画面の右側にホームページのプレビューが表示されます。
気に入らないところは、会話で直せます。「もっと落ち着いた色にして」「メニューを目立たせて」「キャッチコピーの候補を5つちょうだい」のように、普通の言葉で注文すればその場で作り直してくれます。デザインに正解はないので、納得いくまで何往復かするのがおすすめです。
ステップ2: できあがったコードをコピーする
仕上がりに満足したら、プレビュー画面の右上にあるメニューから「コードをコピー」を選びます(表示はバージョンによって多少異なりますが、コピーまたはダウンロードのボタンがあります)。これでホームページの中身がまるごとクリップボードに入りました。
ステップ3: Publeeに貼り付けて公開する
publee.app を開いて、そのままページ上で貼り付け(Windowsは Ctrl+V、Macは Cmd+V)してください。貼り付けた内容のプレビューが表示されるので、「公開」ボタンを押せば完了です。
https://◯◯◯.publee.site というURLが発行され、その瞬間から世界中の誰でもあなたのお店のページを見られます。URLをコピーして、LINEの公式アカウントやInstagramのプロフィール、Googleビジネスプロフィールのウェブサイト欄に貼りましょう。
ファイルとして保存してある場合は、貼り付けの代わりにHTMLファイルをドラッグ&ドロップしても同じように公開できます。
実例: このプロンプトで作ったホームページ
実際に上のプロンプト(店の情報だけ変えたもの)で作って、Publeeで公開したページです。すべて架空のお店です。
カフェ「喫茶こもれび」— 落ち着いた明朝体と喫茶店らしい配色Claude+Publeeで作った架空カフェのデモサイトcafe-komorebi.publee.site美容室「hair salon LUCE」— 余白をいかしたモダンなデザインClaude+Publeeで作った架空美容室のデモサイトhair-salon-luce.publee.siteピアノ教室「おとの木ピアノ教室」— 丸ゴシックのやわらかい雰囲気Claude+Publeeで作った架空ピアノ教室のデモサイトpiano-otonoki.publee.site
同じプロンプトでも、業種と「お店の雰囲気」の書き方でここまで変わります。なお実例の写真は、フリー写真素材(Unsplash)からダウンロードしたものです。自分のお店の写真を使う方法は下のFAQを参照してください。
内容を更新したいとき
営業時間の変更やメニューの改定は、Claudeとの会話に戻って「営業時間を10時からに変えて」と頼み、新しいコードをもう一度Publeeに貼り付けるだけです。Publeeに登録(無料)してログインしていれば、同じサイトを上書き更新でき、URLは変わりません。
料金: 無料でどこまでできるか
Publeeの公開は無料で始められますが、保存期間に違いがあります。
| プラン | 料金 | 保存期間 | 特徴 |
|---|---|---|---|
| 登録なし | 0円 | 7日で自動削除 | まず試したいときに |
| Free(無料登録) | 0円 | 無期限・同時3サイトまで | URLは自動発行のランダムな文字列 |
| Pro | 月1,480円 | 無期限 | 好きなURLを選べる・検索に載せられる |
Proなら ◯◯.publee.site の好きなURLを選べて、独自ドメイン(◯◯.com など)も月500円で追加できます。ドメインの取得から設定までは独自ドメインの設定ガイドにまとめてあります。
大事な注意がひとつあります。無料プランのサイトはGoogleなどの検索結果に載らない設定(noindex)になっています。「店名で検索して出てくるホームページ」にしたい場合はProが必要です。逆に、まずはSNSやGoogleビジネスプロフィールからのリンク先として使うなら無料のままで十分です。
月1,480円は、ホームページ制作会社の相場(制作費10〜30万円+保守費月5,000円〜)と比べれば、自作の手間を差し引いても大きな差です。
よくある質問
Q. 写真を載せたいのですが?
できます。写真ファイル(例: photo.jpg)とHTMLファイルを同じフォルダに入れ、Claudeに「同じフォルダの photo.jpg をトップに使って」と頼んでください。公開するときは、そのフォルダごとPubleeにドラッグ&ドロップすれば写真も一緒に公開されます。自分の写真がない場合は、Unsplash などの無料写真素材サイトからダウンロードした写真も同じ方法で使えます(商用利用可)。
Q. スマホでもちゃんと見えますか? プロンプトに「スマホで見てもきれいに表示される」条件を入れてあるので対応済みです。公開後に自分のスマホでURLを開いて確認してください。
Q. 予約フォームは作れますか? フォームの設置には送信先の仕組みが別途必要なので、最初は「電話」「LINE公式アカウント」「Instagramのメッセージ」へのリンクにするのが確実です。プロンプトに「予約はLINEへのリンクボタンにして」と足せばOKです。
Q. ChatGPTでも同じことができますか? ホームページのHTML自体は他のAIでも作れます。作ったHTMLの公開手順は同じで、HTMLファイルをURLにする方法で解説しています。
Claudeでの作り方をもっと知りたい方は、Claudeで作ったHTMLを共有する方法も参考にしてください。