Claudeに、自分のお店の
ホームページを作ってもらう方法

下のアドレスを押すとClaudeが新しいタブで開きます。画像と同じ画面が出ればOKです。

下の枠の文章をぜんぶコピーして、Claudeの入力欄に貼り付けます。そのあと【お店の情報】のところだけ、自分のお店に書き換えてください（画像は架空のパン屋「こむぎベーカリー」の記入例です）。【技術条件】は意味が分からなくて大丈夫です。そのまま消さずに残してください。

今から、私のお店のホームページを作ってもらいます。
下の条件で、お店のホームページを「1つのHTMLファイル」だけで作ってください。

【お店の情報】 ←ここを自分のお店に書き換える
・店名：こむぎベーカリー
・業種：パン屋
・場所：佐賀県武雄市
・売り／こだわり：国産小麦の手ごねパン。朝7時から焼きたてが並ぶ。イートインあり
・営業時間・定休日：7:00〜17:00・水曜定休
・連絡先：Instagram @komugi_bakery

【デザインの希望】
・雰囲気：あたたかい × 素朴 × 清潔感
・ページの構成：ファーストビュー／お店のこだわり／メニュー／店内の様子／アクセス・営業時間／よくある質問／お問い合わせ
・スマホで見てもきれいに表示されること
・スクロールすると、ふわっと表示されるアニメーション

【技術条件】 ←そのままコピーする（変えない）
・HTML/CSS/JavaScriptをすべて1つのファイルにまとめる
・外部の画像ファイルは使わない（CSSやSVG、絵文字で飾りを描く）
・日本語は読みやすいゴシック系フォントを使う
・スクロール表示のアニメーションは、ページ内リンクで一気に飛んでも表示が抜けないように作る
・実在しない住所・電話番号・実績は書かない。わからない項目は「＊＊」のままにする

入力欄の右にある矢印のボタンを押します。

2〜5分ほどで、画面の右側に、できあがったホームページが表示されます。左側には、作ったページの説明と「Komugi bakery」のファイルカードが出ます。

左側にある「Komugi bakery」のファイルカードの「ダウンロード」を押すと、ホームページのファイルがパソコンに保存されます。

保存したファイル（index.html など）は、パソコンの「ダウンロード」フォルダに入っています。ダブルクリックすると、いつも使っているブラウザ（SafariやChrome）で開きます。それがもう、あなたのお店のホームページです。

画像なし（例外）

この画面はお使いのパソコンの画面（WindowsやMacのフォルダ画面）で、Claudeの画面ではないため、画像を掲載していません。

ブラウザの窓を細くすると、スマホで見たときの表示も確認できます。下の画像は、このガイドと同じ手順で作った「こむぎベーカリー」のスマホ表示です（写真はAIの画像生成で作って追加したものです）。

つづけて、下の枠の文章を入力欄に貼り付けます。よくあるくずれを、Claude自身に点検させる文章です。

ありがとうございます。次の3点をチェックして、問題があれば直してください。
1. スマホ（幅390px）で見たとき、横にはみ出す部分がないか
2. ページの一番下まで一気にスクロールしても、表示されない（白いままの）セクションがないか
3. 書かれている住所・電話番号・値段のうち、私が伝えていないものが混ざっていないか（あれば「＊＊」に置き換えて一覧で教えて）

手順3と同じ、入力欄の右にある矢印のボタンを押します。Claudeが3つの点を自分で点検して、問題があればその場で直してくれます（このガイドの検証では「3点とも問題なし」という結果が返ってきました）。

画像なし（例外）

押すボタンは手順3の画像と同じ、入力欄の右にある矢印のボタンのため、画像を省略しています。

あとは気になったところを、そのまま日本語で伝えるだけです。伝え方の例：

・見出しの色を、もう少し落ち着いた色にして
・「お店のこだわり」の文章を、もっと短くして
・営業時間を 8:00〜18:00 に変えて
・全体をもう少し高級感のある雰囲気にして

画像なし（例外）

伝え方の例文集のため、画像はありません。