プロンプトビルダー v2AIホームページ実践プログラム|購入者専用ツール

制作の流れ:❶ このツールで入力 → ❷ できたプロンプトを1回コピーしてClaudeの新しいチャットに貼る(前提+制作指示が1つにまとまっています)→ ❸ 気になる所だけ修正モードで微調整。
※1回で完璧なものはできません。微調整が必要になるのが正常です。

STEP 1お店の情報を流し込む✓ OK

ヒアリングシートの回答でも、ただのメモ書きでもOK。文字の塊を貼って「⚡自動で振り分け」を押すと、下の入力欄に自動反映されます(電話番号・営業時間・定休日などは書式がバラバラでも推測します)。黄色の欄=自動入力なので必ず確認。

STEP 2情報の確認・手直し✓ OK

+ 任意項目(支払い・席数・駐車場・SNS・店主のひとこと)

STEP 3デザインの決め方サンプルから選ぶ/ゼロから組む✓ OK

「この形にする」を押すとデザインとページ構成が一括セットされます(あとから自由に変更OK)。「実物を見る↗」で実際のサンプルサイトを確認できます。ゼロから組みたい場合は選ばずにSTEP4へ。

STEP 4ページ構成上から順に、パーツを組む✓ OK

サイトは上からこの順番で組み上がります。「+」でパーツを追加、↑↓で並び替え。ヒーロー(トップの顔)は固定です。

+ 追加できるパーツ:

⚖️ フォームを設置する場合、プライバシーポリシーページが必須です。雛形ページの生成指示と【店主にリーガルチェック依頼】マーカーを自動で追加します。

予約ボタン(ページ内+スマホ下部の追従ボタン)がこのURLに飛びます。表示名を空欄にすると「ご予約はこちら」になります。

正直な注意点:Instagramの仕様上、無料の公式な方法では「新しい投稿が出たら自動で切り替わる」表示はできません(外部の有料ウィジェットが必要)。本ツールでは①指定した投稿の公式埋め込み+②プロフィールへの「最新の投稿を見る」ボタン、の2段構えを標準にしています。投稿を差し替えたい時はURLを入れ替えて再生成(30秒)でOKです。

STEP 5雰囲気と配色✓ OK

🎨 カスタム3色(ロゴ・暖簾・看板の色から拾うのがおすすめ)

STEP 6動き・演出装飾は1/4個まで✓ OK

ここで選んだものは、完成サイトの「動き」としてそのまま実装されます。例:「ふわっとフェードイン」=スクロールするたびに各セクションが下からふわっと現れる/「写真がゆっくり動く」=トップの写真がゆっくりズームし続ける。何も選ばないと最初から全部表示されている"動かないサイト"になります。実際の動きはサンプルギャラリー各サイトの「🔧 このサイトの機能」パネルから項目をタップすると確認できます。迷ったらプリセット1つでOK。盛りすぎ防止のため装飾は4個までです。

STEP 7こだわりの指示任意✓ OK

💡 参考にしたいサイトがある場合は、STEP3の「⑨ 参考サイトを指定」にURLを入れてください。

⏳ Claudeの利用時間制限:短時間に一気に使いすぎると一時的に制限がかかり数時間使えなくなることがあります。対策は (a) 上位プラン(Max)にアップグレード/(b) 時間を置いて待つ(数時間で回復)。生成の連発日は作業を分散しましょう。

直したい項目を穴埋め→生成。「+ 追加」で複数の指摘を1つのプロンプトにまとめられます。プルダウンに無い内容は、各行の「✍️ 自由に書く」欄にそのまま書けばOK(例:ボタンが真ん中に来ていない)。すべての修正指示に「変更は指示した箇所のみ。他は一切変えない」ルールが自動で付きます。

📱 スマホ表示の崩れ

🔤 フォントの変更

↕️ 余白・間延びの調整

🎨 色の調整

🖼 画像差し替え後の調整

✍️ 自由に指示を書く(何でもOK)

⏳ ご注意:微調整の連発は利用上限を消費します。制限がかかったら (a) 上位プランへ/(b) 時間を置いて待つ。修正は「1回に1〜3件まとめる」と効率的です。