BLOG

ACF × カスタム投稿で作るFAQページ｜ユーザー満足度を高める運用UX設計

「商品情報はあるのに、同じ問い合わせが減らない…」
そんな時に頼れるのが FAQ（よくある質問）ページ。
WordPress なら カスタム投稿 + ACF で、更新しやすく / 見やすく / SEO に効く FAQ を簡単に実装できます。
本記事では “運用担当が迷わない管理画面” と “ユーザーが探しやすいUI” を同時に叶える設計手順を解説します。

1. なぜ FAQ をカスタム投稿で作るのか？

  • 更新がラク ─ 投稿一覧から並び替え・検索が可能
  • 構造化データ（FAQPage）でリッチリザルトを狙える
  • カテゴリ分け（タクソノミー）でユーザーが探しやすい

2. 設計ステップ

ステップ 具体アクション
① カスタム投稿を登録 プラグイン「Custom Post Type UI」で
投稿タイプ：faq を作成（公開・REST API有効）
② ACF フィールド追加 ・質問（テキスト）
・回答（WYSIWYG）
・表示順（数値）
③ カテゴリ（タクソノミー）紐付け 同じく CPT UI で faq_cat を登録し、「支払い」「配送」など分類
④ テンプレートで出力 WP_Query でカテゴリー別にループ → アコーディオンUIを実装

3. 管理画面 UX を高める ACF 設定

  1. フィールドグループ名は日本語＋英語（例：faq_fields｜FAQ基本情報）
  2. 回答フィールドは WYSIWYG（ツールバー簡易）＋メディアアップロード OFF
  3. 並び順フィールドを order にし、ASC でループ
  4. リピーターで「追加質問」を内包し、管理画面を1画面に集約

4. フロントエンド ─ アコーディオンUI

<ul class="faq-list">
 <?php
   $faq_query = new WP_Query([
     'post_type'      => 'faq',
     'posts_per_page' => -1,
     'orderby'        => 'meta_value_num',
     'meta_key'       => 'order'
   ]);
   while ( $faq_query->have_posts() ) : $faq_query->the_post(); ?>
     <li class="faq-item">
       <button class="faq-q"><?php the_title(); ?></button>
       <div class="faq-a"><?php the_field('answer'); ?></div>
     </li>
 <?php endwhile; wp_reset_postdata(); ?>
</ul>

<script>
document.querySelectorAll('.faq-q').forEach(btn => {
  btn.addEventListener('click', () =>
    btn.nextElementSibling.classList.toggle('open')
  );
});
</script>

5. FAQPage 構造化データを自動出力

FAQ投稿が増えたら、JSON-LD を自動生成して
Google 検索で FAQ リッチリザルトを狙いましょう。 


// functions.php（一覧ページのみ出力）
add_action( 'wp_head', function() {
  if ( !is_post_type_archive( 'faq' ) ) return;
  $faqs  = [];
  $posts = get_posts(['post_type'=>'faq','numberposts'=>-1]);
  foreach ( $posts as $p ) {
    $faqs[] = [
      '@type' => 'Question',
      'name'  => get_the_title($p),
      'acceptedAnswer' => [
        '@type' => 'Answer',
        'text'  => get_field( 'answer', $p->ID )
      ]
    ];
  }
  echo '<script type="application/ld+json">'
       . wp_json_encode([
           '@context'=>'https://schema.org',
           '@type'   =>'FAQPage',
           'mainEntity'=>$faqs
         ])
       . '</script>';
});

FAQは「更新しやすさ」こそ命

ACF × カスタム投稿なら、非エンジニアでも30秒で質問追加。
ユーザーを迷わせない UI と SEO 効果を同時に手に入れましょう。

まとめ

1) CPT UI で FAQ投稿タイプを登録
2) ACF で入力画面を最適化
3) FAQPage 構造化データでリッチリザルトを狙う

この3ステップで、運用ラク＆SEOに強い FAQ ページが完成します。

ご相談ください

FAQ設計・構造化データ実装のご相談は、
初回無料ヒアリングでお気軽に！
▶ お問い合わせフォーム

BACK