---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/product-page'
title: '製品ページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:58+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは1製品のページを作ります。名、価格、今すぐ買うボタンの横に写真があり、
  次に3つの特長、仕様一覧、販売の行動喚起が続きます。売るものなら何にでも使います。
  複数プランの比較には料金表を追加します。
  動画ではInsight Hubというハードウェア製品のページを作ります。
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: |-
        ここでは1製品のページを作ります。名、価格、今すぐ買うボタンの横に写真があり、
        次に3つの特長、仕様一覧、販売の行動喚起が続きます。売るものなら何にでも使います。
        複数プランの比較には料金表を追加します。
        動画ではInsight Hubというハードウェア製品のページを作ります。
      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:58+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/product-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/product-page'
      description: |-
        ここでは1製品のページを作ります。名、価格、今すぐ買うボタンの横に写真があり、
        次に3つの特長、仕様一覧、販売の行動喚起が続きます。売るものなら何にでも使います。
        複数プランの比較には料金表を追加します。
        動画ではInsight Hubというハードウェア製品のページを作ります。
      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/pricing-table)
- [Icon](/hc/documentation/learn-dxpr-builder/elements/icon)
- [ランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)

ここでは1製品のページを作ります。名、価格、**今すぐ買う**ボタンの横に写真があり、 次に3つの特長、仕様一覧、販売の行動喚起が続きます。売るものなら何にでも使います。 複数プランの比較には[料金表](/ja/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)を追加します。

動画ではInsight Hubというハードウェア製品のページを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーに製品の写真があります。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- 新規エレメントはカラムの上に載ります。そのため右カラムはボタンから上に作ります。

## 手順1: 製品を追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。
3. 左カラムの**+**をクリックして**Image**を選びます。**Select Image**をクリックし、製品写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。
4. 右カラムの**+**をクリックして**Button**を選びます。**Title**に「今すぐ買う」、**Link**にショップ、**Type**に**Primary**、**Size**に**Large**を設定して**Save**をクリックします。
5. 右カラムの**+**を再びクリックして**Text**を選びます。ボタンの上に載ります。価格を**Heading 2**で入力して**Save**をクリックします。
6. クリックするのは**+**をもう1度で、**Text**を選びます。一番上に載ります。製品名を**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**をクリックします。新セクションに**Align text center**クラスを付けます。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 1つ目のカラムの**+**をクリックして**Text**を選びます。特長名を**Heading 3**で入力し、1行加えて**Save**をクリックします。
4. 同じカラムの**+**をクリックして**Icon**を選びます。テキストの上に載ります。**Font Awesome Free Solid**セットを選び、`plug`を検索してアイコンをクリックします。**Size**を**Very Large (3x)**にし、**Icon utilities**を開いて**Style**を**Circle**にして**Save**をクリックします。
5. 2つ目のカラムに`cloud`、3つ目に`battery-full`で繰り返します。

## 手順3: 仕様を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Text**を選びます。「仕様」を**Heading 2**で入力し、仕様を1行ずつ続けて**Save**をクリックします。

## 手順4: 行動喚起を追加する

1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「営業に相談する」、**Link**に`/contact`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「Insight Hubは249ユーロから」を**Heading 2**で入力し、1行加えます。**Font color**を白にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **仕様表**: 仕様1行ずつの代わりにテキストツールバーの**Table**ボタンで表を挿入します。
- **ギャラリー**: 単写真を製品写真の**Image carousel**に替えます。
- **プラン**: 価格を[料金表](/ja/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)へリンクします。

## 表示結果

製品写真が左半分いっぱいに広がり、右に名、価格、**今すぐ買う**ボタンがあります。3つの中央寄せ特長が続き、各特長は名と行の上に丸囲みアイコンがあります。仕様が灰色帯に立ち、紫帯が**営業に相談する**でページを締めます。

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

- **名前、価格、ボタンの順番が違います。** 上から順に入れましたが、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルで所定位置へドラッグします。
- **アイコンに円が付きません。** **Style**は**General**ではなく**Icon utilities**パネルにあります。アイコン設定を開き、**Icon utilities**を開いて**Style**を**Circle**にします。
- **紫の上で見出しが暗いままです。** Textエレメントに独自**Font color**がありません。**Style**パネルを開き、**Font color**を白にします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [料金表](/ja/hc/documentation/learn-dxpr-builder/tutorials/pricing-table): 複数段階料金部門用
- [Iconエレメント](/hc/documentation/learn-dxpr-builder/elements/icon): アイコンサイズとスタイル用
- [マーケティングランディングページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing): 製品周りのキャンペーンページ用