比較・ランキングLP
アフィリエイト・比較メディア向けLP。ランキング・比較表・選び方ガイドを一体化した構成。
【実装概要】
KV→クイックナビ→編集情報バー→ランキング（絞り込みフィルター付き）→比較表→選び方ガイド→FAQ→注釈・免責の比較メディア定番構成。
No.1を全幅・2〜5位を2列グリッドで表示しランクを視覚化。
比較表はSP横スクロール対応。
GTM計測をランク別・CTA種別で細分化し、クリック分析の精度を高めた設計です。
【実装キーワード】
ランキング2列グリッド／絞り込みフィルター／比較表SP横スクロール（scroll-hint.js）／選び方ガイドタブ／GTM CTA別計測／パンくず構造化データ／注釈・免責エリア
対応できる案件
ランキング2列グリッド（No.1全幅・バッジ大→小）
→ CSS GridでNo.1をgrid-column:1/-1で全幅表示、2〜5位を2列グリッドで並列表示。バッジサイズをNo.1（52px）→No.2（44px）→No.3（38px）と段階的に縮小してランクを視覚化。
絞り込みフィルター（GTM計測対応）
→ 「すべて/個人/法人/初めての方」タブでランキングカードをdata-tags属性で絞り込み。GTMのdata-gtm-filter属性でタブ切り替えをイベント計測。
比較表SP横スクロール（scroll-hint.js）
→ tableをoverflow-x:autoのラッパーで囲み、min-widthを指定してSP表示でも内容が溢れない実装。
SP表示時にscroll-hint.jsで指アイコンを表示し、横スクロール可能であることをユーザーに直感的に伝える。
選び方ガイド（3パターンタブ切り替え）
→ 「個人/法人/初めての方」の3パターンで推奨ランキングを切り替え表示。
注釈・免責エリア
→ 比較系コンテンツに必須のPR表示・データ出典・免責文をフッター上に配置。監修者情報も構造化データと連動した形で表示。
タブ・フィルタJS（絞り込みUI）
→ タブクリックでdata-tags属性を参照して表示・非表示を切り替えています。ページ遷移なしで絞り込める分、離脱しにくいUIになっています。
ランキング管理
CPT「ランキング」＋ACFで各サービスの名称・料金・特徴・スコア・CTAリンクを管理。表示順序はカスタムフィールドの数値で制御
比較表
ACFのテーブル形式フィールドで行列を管理。◎/○/×の判定もフィールドで切り替え可能
編集者情報
ACFで監修者名・資格・更新日を管理。E-E-A-T対応のための信頼性情報を管理画面から更新
注釈・免責
サイト全体のPR表示・免責文をカスタマイザーで一元管理。法改正時の文言更新が容易