---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: '事例紹介を書く | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:23+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは顧客案件を3部構成で書きます。課題、解決、成果です。最後には7つの帯が
  残ります。写真ヒーロー、主要数値付き概要、課題、写真横の解決、3つのカウンター、
  引用、行動喚起です。1ページに多くの案件を並べるには代わりにポートフォリオギャラリーを作るを
  ご覧ください。
  動画では代理店のNorthwind Retail向け仕事を紹介します。
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部構成で書きます。課題、解決、成果です。最後には7つの帯が
        残ります。写真ヒーロー、主要数値付き概要、課題、写真横の解決、3つのカウンター、
        引用、行動喚起です。1ページに多くの案件を並べるには代わりにポートフォリオギャラリーを作るを
        ご覧ください。
        動画では代理店のNorthwind Retail向け仕事を紹介します。
      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:23+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/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        ここでは顧客案件を3部構成で書きます。課題、解決、成果です。最後には7つの帯が
        残ります。写真ヒーロー、主要数値付き概要、課題、写真横の解決、3つのカウンター、
        引用、行動喚起です。1ページに多くの案件を並べるには代わりにポートフォリオギャラリーを作るを
        ご覧ください。
        動画では代理店のNorthwind Retail向け仕事を紹介します。
      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

- [Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Number Counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [ポートフォリオギャラリーを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

ここでは顧客案件を3部構成で書きます。課題、解決、成果です。最後には7つの帯が 残ります。写真ヒーロー、主要数値付き概要、課題、写真横の解決、3つのカウンター、 引用、行動喚起です。1ページに多くの案件を並べるには代わりに[ポートフォリオギャラリーを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)を ご覧ください。

動画では代理店のNorthwind Retail向け仕事を紹介します。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーにヒーロー用の幅広写真と納品物の写真があります。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- 新規エレメントはセクション・カラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

## 手順1: ヒーローを追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。ホバーして**More** > **Settings**を開きます。
2. 選ぶのは**HTML classes**下の**Align text center**です。
3. 開くのは**Style**パネルで、**Background image**下で**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**Background style**を**Cover**にします。
4. 暗紺色**Background**と白**Font color**を選び、**Save**をクリックします。写真読み込み中は色が出ます。
5. セクションの**+**をクリックして**Button**を選びます。**Title**に「サイトを見る」、**Link**に顧客URL、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
6. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。顧客名を**Heading 2**で入力し、下に1行概要を続けます。**Style**パネルで**Font color**を白にして**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**をクリックします。新セクションに**Row**を追加し、グリッドアイコン (**Column layout**) をクリックして**2/3 + 1/3**プリセットを選び、**Save**をクリックします。
2. 広いカラムの**+**をクリックして**Text**を選びます。「概要」を**Heading 2**で入力し、要約を加えて**Save**をクリックします。
3. 狭いカラムの**+**をクリックして**Text**を選びます。指標ラベル「オンライン注文増」を入力して**Save**をクリックします。
4. 狭いカラムの**+**を再びクリックして**Number counter**を選びます。ラベルの上に載ります。**End**に32、**Suffix**に%、**Thousands separator**に**Comma**、**Speed**に2500を設定して**Save**をクリックします。

カウンターに独自ラベル欄はありません。下のTextエレメントがその役目です。

## 手順3: 課題を追加する

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

## 手順4: 解決を追加する

1. 4つ目のセクション、次に**Row**を追加します。2つの均等カラム付きで入ります。
2. 左カラムの**+**をクリックして**Text**を選びます。「解決」を**Heading 2**で入力し、作った内容を説明して**Save**をクリックします。
3. 右カラムの**+**をクリックして**Image**を選びます。**Select Image**をクリックし、納品物の写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。

## 手順5: 成果を追加する

1. 5つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紺色**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 各カラムに**Text**ラベルを先に入れ、次に**Number counter**を上に置きます。手順2通りです。**End** 32に**Suffix** %、**End** 2に**Suffix** s、**End** 15000です。

## 手順6: 引用を追加する

1. 6つ目のセクションを追加します。
2. セクションの**+**をクリックして**Block quote**を選びます。顧客の言葉を入力し、**Cite**に氏名と役職を入れて**Save**をクリックします。

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

1. 7つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「お問い合わせ」、**Link**に`/contact`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「はじめませんか？」を**Heading 2**で入力し、1行加えます。**Font color**を白にして**Save**をクリックします。

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

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

## 表示結果

顧客名と**サイトを見る**ボタンが写真上に中央寄せで座ります。概要は要約横に32%を示し、表示域に入ると数え上がるのが見えます。課題は灰色帯に立ち、解決は写真の横に座ります。

紺色帯では3つの成果が表示域に入ると数え上がります。32%、2s、15,000です。顧客の引用と紫の**お問い合わせ**帯でページを締めます。

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

- **ヒーロー写真がセクションいっぱいに広がりません。** **Background style**が**Theme defaults**のままです。セクションの**Style**パネルを開き、**Cover**にします。
- **最後のカウンターが15000とカンマなしで出ます。** **Thousands separator**が**None**のままです。カウンター設定を開き、**Comma**を選びます。
- **ラベルがカウンターの上にあります。** カウンターがラベルより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでラベルをカウンター下へドラッグします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [Blockquoteエレメント](/hc/documentation/learn-dxpr-builder/elements/blockquote): 引用スタイル選択肢用
- [Number counterエレメント](/hc/documentation/learn-dxpr-builder/elements/number-counter): 全カウンター設定用
- [ポートフォリオ](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery): 全事例紹介を1ページに挙げる用