---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
title: '料金表を作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:51+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは料金表を作ります。横に並ぶ3プランで、各パネルに価格、機能一覧、全幅
  ボタンがあり、中央プランを強調します。料金ページや製品ページ内に使います。
  周囲の製品ページ全体には製品ページを作るを
  ご覧ください。
  動画では報告ツール向け3プランを作ります。
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: 料金表を作る
      description: |-
        ここでは料金表を作ります。横に並ぶ3プランで、各パネルに価格、機能一覧、全幅
        ボタンがあり、中央プランを強調します。料金ページや製品ページ内に使います。
        周囲の製品ページ全体には製品ページを作るを
        ご覧ください。
        動画では報告ツール向け3プランを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:53:51+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/pricing-table'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/pricing-table'
      description: |-
        ここでは料金表を作ります。横に並ぶ3プランで、各パネルに価格、機能一覧、全幅
        ボタンがあり、中央プランを強調します。料金ページや製品ページ内に使います。
        周囲の製品ページ全体には製品ページを作るを
        ご覧ください。
        動画では報告ツール向け3プランを作ります。
      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) # 料金表を作る.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [製品ページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/product-page)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Panel](/hc/documentation/learn-dxpr-builder/elements/panel)

ここでは料金表を作ります。横に並ぶ3プランで、各パネルに価格、機能一覧、全幅 ボタンがあり、中央プランを強調します。料金ページや製品ページ内に使います。 周囲の製品ページ全体には[製品ページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/product-page)を ご覧ください。

動画では報告ツール向け3プランを作ります。

  ## はじめる前に

- ロールが**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**を選びます。**Style**パネルを開き、薄灰色**Background**を選んで**Save**をクリックします。
3. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。
4. ローのグリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。

## 手順2: 最初のプランを作る

1. 1つ目のカラムの**+**をクリックし、**Content**タブから**Panel**を選びます。
2. パネルにホバーして**More** > **Settings**を開きます。**Title**に「Starter」を設定し、**Type**は**DXPR**のままにして**Save**をクリックします。
3. パネルの**+**をクリックして**Button**を選びます。**Title**に「プランを選ぶ」、**Link**に`/signup`、**Type**に**Primary**を設定します。カラムいっぱいに広げるには**Block button**をオンにして**Save**をクリックします。
4. パネルの**+**を再びクリックして**Text**を選びます。ボタンの上に載ります。価格を**Heading 2**で入力し、機能を1行ずつ加えて**Save**をクリックします。

## 手順3: 他プランを作る

1. 2つ目のカラムで手順2を「Professional」向けに繰り返します。パネルの**Style**パネルで紫**Background**を選び、ボタンの**Type**を**Success**にして目立たせます。
2. 3つ目のカラムで手順2を「Enterprise」向けに繰り返します。価格は「カスタム料金」です。

**ヒント**

中央カラムに目が行きます。一番売りたいプランをそこに置きます。

## 手順4: 見出しを追加する

1. セクションの**+**をクリックして**Text**を選びます。ローの上に載ります。
2. 「プランを選ぶ」を**Heading 2**で入力し、「シンプルな月額料金。いつでも解約できます」などの1行を加えて**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **4プラン**: 代わりに**1/4 + 1/4 + 1/4 + 1/4**プリセットを選んで4つ目のカラムを作ります。
- **人気バッジ**: 強調パネルの上に**Text**エレメントを追加し、「一番人気」を太字にします。
- **年額と月額**: ローの上に「月額 \| 年額 (20%お得)」などの**Text**行を追加します。行は静的です。動く切替には独自スクリプトの**HTML**エレメントが必要です。
- **機能チェック**: 各機能行の前にチェックマークを貼るか、一覧の上に**Icon**エレメントを追加します。

## 表示結果

「プランを選ぶ」が灰色帯の3プラン上に中央寄せで座ります。各パネルにタイトルバーの名、価格、3つの機能、全幅の**プランを選ぶ**ボタンがあります。中央プランは紫に緑ボタンで目立ちます。

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

- **設定ダイアログなしでパネルが開きます。** パネルは空で開き、ダイアログは出ません。パネルにホバーして**More** > **Settings**を開き、**Title**を設定します。
- **PrimaryなどのパネルTypeに色が付きません。** テーマがそのパネルタイプをスタイルしません。**Type**は**DXPR**のままにし、手順3通りパネルの**Style**パネルで**Background**を選びます。
- **ボタンがテキストと同じ幅しかありません。** **Block button**がオフです。各ボタンの設定を開いてオンにします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [製品ページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/product-page): 機能と料金付き全ページ用
- [Cardエレメント](/hc/documentation/learn-dxpr-builder/elements/card): 別カードスタイル用
- [Panelエレメント](/hc/documentation/learn-dxpr-builder/elements/panel): 全パネル設定用