---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page'
title: 'FAQページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:52+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここではクリックで開閉するFAQページを作ります。最後には中央寄せ見出し、コラプス
  パネルの質問カテゴリー、お問い合わせ行動喚起が残ります。よくある質問の短い一覧に
  使います。話題別ヘルプ記事には代わりにナレッジベースを作るを
  ご覧ください。
  動画では健康クリニックのFAQを作ります。
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: FAQページを作る
      description: |-
        ここではクリックで開閉するFAQページを作ります。最後には中央寄せ見出し、コラプス
        パネルの質問カテゴリー、お問い合わせ行動喚起が残ります。よくある質問の短い一覧に
        使います。話題別ヘルプ記事には代わりにナレッジベースを作るを
        ご覧ください。
        動画では健康クリニックのFAQを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:52:52+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page'
      description: |-
        ここではクリックで開閉するFAQページを作ります。最後には中央寄せ見出し、コラプス
        パネルの質問カテゴリー、お問い合わせ行動喚起が残ります。よくある質問の短い一覧に
        使います。話題別ヘルプ記事には代わりにナレッジベースを作るを
        ご覧ください。
        動画では健康クリニックのFAQを作ります。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # FAQページを作る.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [折りたたみパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)
- [タブパネルを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [お問い合わせページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page)
- [ナレッジベースを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base)

ここではクリックで開閉するFAQページを作ります。最後には中央寄せ見出し、コラプス パネルの質問カテゴリー、お問い合わせ行動喚起が残ります。よくある質問の短い一覧に 使います。話題別ヘルプ記事には代わりに[ナレッジベースを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base)を ご覧ください。

動画では健康クリニックのFAQを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- 新規エレメントと新規トグルはコンテナーの上に載ります。質問は最後から最初へ追加するか、後からドラッグで整えます。

## 手順1: ヘッダーを追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションにホバーして**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Save**をクリックします。
3. セクションの**+**をクリックし、**Content**タブから**Text**を選びます。
4. 「よくある質問」と入力し、ツールバーから**Heading 2**にします。ページ内容の1行を加えて**Save**をクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするには[SEOに強いページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)をご覧ください。

## 手順2: 質問カテゴリーを追加する

1. セクションにホバーして**Add Section Below**をクリックします。
2. 新セクションの**+**をクリックし、**Layout**タブから**Collapse panel**を選びます。空トグル1つ付きで入ります。
3. パネルの**More** > **Settings**を開きます。全質問を閉じた状態ではじめるには**Collapse**をオンにし、**Expand icon**を**+**にして**Save**をクリックします。
4. トグルの**More** > **Settings**を開き、質問を**Toggle title**に入力して**Save**をクリックします。新規トグルは上に載るので、最後の質問からはじめます。
5. 質問をクリックして本文を開き、中の**+**をクリックして**Text**を選びます。答えを入力して**Save**をクリックします。
6. パネルの**Add toggle**をクリックし、各質問で手順4と5を繰り返して最初まで遡ります。
7. セクションの**+**をもう1度クリックして**Text**を選びます。パネルの上に載ります。カテゴリー名を**Heading 2**で入力して**Save**をクリックします。

1カテゴリー3から6問を目安にします。

## 手順3: お問い合わせ行動喚起を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで薄灰色**Background**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「お問い合わせ」、**Link**に`/contact`、**Type**に**Primary**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「まだ質問がありますか？」を**Heading 2**で入力し、担当への1行を加えて**Save**をクリックします。

## 手順4: 保存してプレビューする

1. ビルダーツールバーの**Save**をクリックします。
2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選びます。

## さらに進む

動画にはありません。

- **カテゴリー追加**: カテゴリーごとに手順2を繰り返します。各1セクション1コラプスパネルです。よくあるものははじめ方、アカウントと請求、機能、トラブルシューティング、プライバシーとセキュリティーです。
- **セクション代わりのタブ**: カテゴリー少数なら**Layout**タブから**Tabs**エレメントを追加し、カテゴリーごとに1タブ、各タブ内にコラプスパネルを置きます。全カテゴリーがスクロールなしで手の届く範囲に残ります。

## SEOのヒント

- 実際の質問が**Toggle title**
- 最初の文で答え、次に詳細を加えます
- 答えから参照先ページへリンクします
- テーマやDrupalモジュール経由でFAQ構造化データを追加します

## 表示結果

見出しが上に中央寄せで座ります。カテゴリー見出し下で全質問が閉じ、**+**が出ます。クリックで答えが開き、締め帯が**お問い合わせ**ボタンを出します。

## 図通りにならない場合

- **すべての質問が開いた状態ではじまります。** **Collapse**がオフです。パネルの**More** > **Settings**を開き、**Collapse**をオンにして**Save**をクリックします。
- **トグル内に+がありません。** トグルの本文が閉じています。質問をクリックして開き、中の**+**をクリックします。
- **質問が違う順番で出ます。** 新規トグルはパネルの上に載ります。各トグルをコントロールバーのドラッグハンドルで所定位置へドラッグします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [折りたたみエレメント](/ja/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): 全コラプスパネル設定用
- [タブエレメント](/ja/hc/documentation/learn-dxpr-builder/layout/tabs-element): タブ配置用
- [お問い合わせページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/contact-page): ボタンのリンク先ページ用
- [ナレッジベース](/ja/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base): 構造あるヘルプ部門構築用