Claudeへの指示文テンプレ集｜Next.jsサイト構築に使える実践プロンプト10選

Next.js（App Router）、TypeScript、Tailwind CSS、shadcn/ui を使って、{業種・サイト種別}のトップページを作成してください。

【目的】
{このサイトで達成したいこと。例：問い合わせ獲得 / 信頼形成 / 採用応募}

【対象ユーザー】
{誰が見るのか。例：中小企業の経営者、留学を検討中の保護者、不動産投資を始めたい個人}

【デザイン方針】
- ベースカラー：{例：白ベース、深い藍をアクセント}
- 余白：{例：広め、セクション間 120px 以上}
- トーン：{例：信頼感重視、営業感は控えめ、Vercel公式系}
- スマホ表示重視

【必要セクション（上から順）】
1. Hero
2. 課題提起
3. サービス紹介
4. {業種別の差別化要素。例：自社事例 / 料金 / 講師紹介}
5. プロセス
6. FAQ
7. CTA

【実装条件】
- ファイルは src/app/page.tsx と src/components/marketing/ 配下に分割
- 各セクションを独立コンポーネントに（後から差し替え可能に）
- Tailwind ユーティリティのみ（独自 CSS は最小限）

最初に各セクションの構成案（見出しと一文要約）を提示してください。
合意後にコードを書き始めます。

既存プロジェクトに /service ページを追加してください。

【ページの目的】
サービスの内容と料金を明示し、お問い合わせへ誘導する。

【必要セクション】
1. ページヒーロー（サービス概要を1文で）
2. 3つのサービスの詳細カード（タグライン、価格、含まれるもの、CTA）
3. 料金比較表（プラン名 / 期間 / 価格 / 対象）
4. サービス専用 FAQ（5問程度）
5. 最終 CTA

【データ構造の要件】
- サービス情報は src/lib/services.ts に集約
- 型を services: Service[] として export
- ページからは services を import して描画

【トーン】
既存のトップページと同じトーンに合わせてください。

/contact ページを作成してください。

【目的】
無料相談の申し込みを受け付ける。送信処理は次フェーズで実装するため、
今回はフォームの見た目と入力項目だけ実装します。

【必要要素】
- ページヒーロー
- 連絡先情報（メール / 対応時間 / 返信目安）
- フォーム（会社名・氏名・メール・電話[任意]・課題[選択]・サービス[選択]・本文・プライバシー同意）
- 送信後の流れ（3ステップ）
- 安心要素（費用なし / 強引な営業なし / 守秘義務）

【条件】
- フォームの各フィールドは小さなコンポーネント関数に分割
- 送信ハンドラは onSubmit={(e) => e.preventDefault()} で仮実装
- アクセシビリティ：label と input を for/id で接続

Hero セクションを作成してください。

【ファイル】
src/components/marketing/Hero.tsx として作成

【構成】
- 上部に小さな Badge（例：「AI時代のWeb事業再構築サービス」）
- 大きな見出し（2〜3行、改行はモバイルで自然になるように）
- リード文（最大2文、120字程度）
- CTA ボタン 2つ（プライマリ：アクセント色 / セカンダリ：アウトライン）
- 下部に小さなスタッツ行（4項目、横並び）

【デザイン】
- 余白：上下 py-32（モバイル py-20）
- 見出しは tracking-tighter、leading-[1.05]
- スタッツは細い罫線で4分割、薄い背景

料金比較表を作成してください。

【データ】
6プランあります。列：プラン / 期間 / 価格 / 主な対象

【デザイン】
- rounded-2xl の枠で囲む
- 表ヘッダーは bg-paper-soft、小さな uppercase 文字
- 行ホバーで bg-paper-soft/50
- 価格列だけ太字（font-semibold）
- スマホでは横スクロール（overflow-x-auto）

【条件】
- shadcn/ui の Table 系を使わず、シンプルな <table> で
- データは props で渡せる構造

FAQ アコーディオンを作成してください。

【ファイル】
src/components/marketing/FaqSection.tsx

【データ】
src/lib/faq.ts から faqs: Faq[] を読み込む。
Faq = { question: string; answer: string }

【UI】
- shadcn/ui の Accordion を使用（type="single" collapsible）
- レイアウトは2カラム：左に見出しと説明、右にアコーディオン本体
- アコーディオンは白カードに収め、外側に rounded-2xl の枠

【トーン】
質問は太字、回答は ink-muted の細字。

現在のトップページで気になる点を修正してください。

1. Hero の見出しと本文の間が詰まりすぎている → mt-8 程度に広げる
2. セクション間の余白が一定でない → すべて py-32（モバイル py-20）で統一
3. h2 の文字サイズがモバイルで大きすぎる → text-2xl md:text-4xl に
4. カードの角丸が大きすぎる → rounded-3xl → rounded-2xl
5. リンクの下線が常に出ている → underline-offset-4 でホバー時のみ濃く

修正後、PCとモバイル両方で確認できるよう各セクションを順番に見せてください。

モバイル表示で以下の問題があります。修正してください。

1. ヘッダーのナビゲーション5項目が画面に収まらない
   → md:flex を使い、モバイルではハンバーガーメニューに

2. 価格表が横にはみ出している
   → overflow-x-auto で横スクロール可能に

3. Hero の CTA ボタンが縦に並んだとき幅が揃わない
   → モバイルでは w-full、PC では w-auto に

4. 本文の文字サイズが小さすぎる
   → text-base → text-[15px]、行間 leading-relaxed

現在の Hero コピーを改善してください。

【現状】
見出し：「最新のWeb制作サービス」
リード：「私たちはクライアントのビジネスを成功に導きます」

【課題】
- ありきたりで差別化できていない
- 具体的に何をするのかが伝わらない

【サービスの本質】
- 古いWordPressサイトを Next.js + AI で再構築する BtoB サービス
- 自社で20年Web事業を運営した経営者がやっている
- 制作会社ではなく事業再構築パートナーとして見せたい

【お願い】
見出し3案、リード3案を提示してください。
それぞれ「何が違うか」を1行で添えてください。

BtoB の Web 再構築サービスの FAQ を7問作成してください。

【顧客像】
中小企業の経営者・事業責任者。Web制作経験はあるが、AIや Next.js には詳しくない。

【含めたい論点】
- 価格に対する不安（高くないか）
- 既存WordPressをすべて捨てる必要があるか
- AIで作ると品質は下がるのではないか
- 既存のSEO資産はどうなるか
- 経営者本人で運用できるか
- 対応できる規模・業種の範囲
- 契約条件・支払い条件

【トーン】
- 質問は顧客の本音そのまま
- 回答は1問あたり3〜5文、断定的だが押し付けがましくない
- 「もちろん」「絶対」のような言葉は避ける

下記のエラーが出ています。原因の調査と修正をお願いします。

【発生した操作】
{何をしたか。例：npm run dev で開発サーバーを起動した直後に発生}

【ファイル】
{エラーが指しているファイル名 or 直前に編集したファイル}

【エラー全文】
{ターミナルまたはブラウザコンソールに出ているエラーをそのまま貼る}

【希望】
- まず原因を1〜2文で説明
- そのうえで修正案を提示（複数ある場合は選択肢として）
- どのファイルのどの行を修正するか明示

先月のアクセス・問い合わせ実績から、以下の改善を依頼します。

【数値の振り返り】
- {ページ名}の直帰率が {X%} と高い
- /contact への遷移率が {Y%} と低い
- {特定キーワード}での検索流入が伸びている

【仮説】
{なぜそうなっているか、自分の仮説}

【施策案】
1. {ページ名} の Hero コピーを変更
2. 料金表の上に「よくある質問」を追加
3. お問い合わせフォームの項目数を削減

【お願い】
施策案を実装するうえで、優先度の高い順を提示してください。
そのうえで、最も効果がありそうな1施策から実装を始めます。

トップページに新セクション「お客様の声」を追加してください。

【ファイル】
src/components/marketing/Testimonials.tsx として新規作成
src/lib/testimonials.ts にデータを集約

【配置場所】
既存の <CasesSection /> と <FounderMessage /> の間

【含めるもの】
- 3〜4件のお客様の声
- 各カードに：引用文（最大3行）、お名前、役職・会社、業種ロゴ（あれば）

【トーン】
押し付けがましくない、淡々と並べるタイプ。
背景は bg-paper-soft、罫線でリズムを作る。