サービス訴求型企業サイト
税理士・士業向けの信頼感重視サイト。比較表・料金プラン・FAQ構造化データを搭載。
【実装概要】
KV→お悩み→サービス→選ばれる理由→対応の流れ→料金プラン→FAQ→お問い合わせの士業サイト定番構成。
料金プランカードの等高化・ボタン下揃えはCSSのflex設計で対応。FAQはGoogleガイドラインに準拠した構造化データ（JSON-LD）を実装しリッチリザルト対応。
選ばれる理由は2×2グリッドの非対称レイアウトで差別化しています。
【実装キーワード】
比較表SP横スクロール／料金プラン等高・ボタン下揃え／フォームバリデーション／FAQ構造化データ／フローティングCTA／配色：ネイビー×ゴールド
対応できる案件
導入フロー ステップ表示
→ 「相談 → 提案 → 導入 → 運用」で心理障壁を下げる
料金プランカード等高化・ボタン下揃え
→ align-items:stretchで高さを揃えて、カード内をflex縦方向に。feature-listにflex:1を持たせることでボタンが常に下端に固定されます。
比較表SP横スクロール対応
→ tableをoverflow-x:autoのラッパーで囲み、min-widthを指定してSP表示でも内容が潰れない実装。スクロールインジケーターと矢印ボタンを追加。
FAQ構造化データ（JSON-LD）
→ FAQのQ&Aをhead内のJSON-LDで構造化データとして出力。Googleのリッチリザルト（よくある質問スニペット）対応。SEO効果が出やすい実装。
選ばれる理由 2×2レイアウト
→ 左に大見出しブロック（sticky固定）・右に2×2カードグリッドの非対称レイアウト。同じ3カード構成でも差別化できる見せ方。
フォームバリデーション＋ボタン活性制御
→ 名前・電話・メール必須3項目＋同意チェックで送信ボタンが活性化。blur時エラー表示・input時リアルタイム解除。
固定CTA（資料請求・問い合わせ）
→ 文言やリンクはACFで管理できるようにしているので、コードを触らずに差し替えできます。
導入事例 一覧 → 詳細ページ
→ CPTで管理しているので、事例の追加・編集は管理画面だけで完結します。
サービス管理
CPT「サービス」で各サービスの説明・料金・アイコンをACFで管理。順序変更もドラッグ&ドロップで対応
料金プラン
ACFリピーターで「プラン名・価格・特徴リスト・ボタンテキスト」を管理。Featured表示のON/OFFも可能
FAQ
CPT「FAQ」でQ&Aを管理。構造化データの自動出力と連動させ、SEO効果を維持したまま追加・削除が可能
お問い合わせ
CF7で管理。相談内容・プランへの問い合わせ種別をセレクトで振り分け、メール送信先を自動変更
フローティングCTA
ACFで電話番号・CTA文言を管理画面から変更可能。キャンペーン期間中は文言差し替えだけで対応