シンプル企業サイト
中小企業の定番コーポレートサイト。清潔感と信頼感を両立した王道構成。
【実装概要】
KV→事業紹介→選ばれる理由→対応の流れ→施工事例→お客様の声→FAQ→お知らせ→CTAの王道構成を実装。
スクロール出現アニメーション・ドロワーメニュー・FAQアコーディオンなどの定番インタラクションに加え、実案件でも応用可能な実装可能な対応の流れの順次ボーダーアニメーションを実装しています。
GTM計測コメントをコード内に明示し、納品後の改善提案まで視野に入れた設計です。
【実装キーワード】
WordPress実装済み／IntersectionObserver／FAQアコーディオン／CF7フォーム／SP固定CTA／GTM計測／ACF管理
対応できる案件
ドロワーメニュー（SP）
→ ハンバーガーアイコンクリックで全画面ドロワーを展開。×ボタン・リンククリックで閉じる処理をopenDrawer/closeDrawer関数で管理しやすい構造に整理。
スクロール出現アニメーション（IntersectionObserver）
→ 各セクションが画面に入った瞬間にフェードアップ表示。rootMarginで発火タイミングを調整し、軽量な実装。prefers-reduced-motion対応済み。
対応の流れ：順次ボーダーアニメーション
→ セクションが画面内に入ったら1→2→3→4の順で数字のボーダーが4pxまで太くなるアニメーションが発火。1秒間隔のsetTimeoutで順次発火。実装の幅をアピールできる演出。
SP固定CTAバー
→ SP表示時、スクロール200px後に画面下部に固定CTAが出現。CTAセクション到達で自動非表示。
下層ページ：事業紹介・会社概要
→ 事業紹介：3サービスを1ページで詳細説明。アンカーナビ・施工事例ギャラリー・料金目安を搭載。
→ 会社概要：社長メッセージ・会社情報テーブル・沿革タイムラインを実装。
IntersectionObserverによる軽いフェードイン出現演出
→ 派手な演出より安定感を優先。品よく見せるための最低限のアニメーションにとどめています。
カスタム投稿
施工事例（CPT: works）・お客様の声（CPT: voice）・お知らせ（CPT: news）を独立した投稿タイプで管理
ACFフィールド
KVキャッチコピー・CTAテキスト・電話番号・事業紹介テキストなど、主要コピーを管理画面から変更可能
CF7フォーム
送信後のサンクスページ遷移・自動返信メール・GTMのCV計測と連動
パンくず
breadcrumb_navxtを使用。構造化データ（JSON-LD）を自動出力
ナビゲーション
wp_nav_menuでヘッダーナビ・フッターナビを管理画面から編集可能
カスタマイザー
ヘッダーロゴ・ファビコン・カラーテーマをカスタマイザーから変更可能な設計