---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/services-page'
title: 'サービスページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:54:13+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは提供内容の一覧ページを作ります。ヘッダー、アイコン付き3サービス、写真横の
  サービス詳細、顧客ロゴ、行動喚起です。複数サービスを売る場合に使います。1つの
  提案ページには代わりにマーケティングランディングページを作るを
  ご覧ください。
  動画ではデジタル代理店のサービスページを作ります。
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: サービスページを作る
      description: |-
        ここでは提供内容の一覧ページを作ります。ヘッダー、アイコン付き3サービス、写真横の
        サービス詳細、顧客ロゴ、行動喚起です。複数サービスを売る場合に使います。1つの
        提案ページには代わりにマーケティングランディングページを作るを
        ご覧ください。
        動画ではデジタル代理店のサービスページを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:54:13+0000'
      dateModified: '2026-10-24T17:19:22+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/services-page'
      articleSection: チュートリアル
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/services-page'
      description: |-
        ここでは提供内容の一覧ページを作ります。ヘッダー、アイコン付き3サービス、写真横の
        サービス詳細、顧客ロゴ、行動喚起です。複数サービスを売る場合に使います。1つの
        提案ページには代わりにマーケティングランディングページを作るを
        ご覧ください。
        動画ではデジタル代理店のサービスページを作ります。
      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
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[チュートリアル](/ja/hc/documentation/learn-dxpr-builder/tutorials/overview) # サービスページを作る.

 DXPR Builderを学ぶページを作るチュートリアル

   ## このガイドの内容

 関連ガイド

- [ランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Iconエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/icon)
- [Marqueeエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/marquee)

ここでは提供内容の一覧ページを作ります。ヘッダー、アイコン付き3サービス、写真横の サービス詳細、顧客ロゴ、行動喚起です。複数サービスを売る場合に使います。1つの 提案ページには代わりに[マーケティングランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)を ご覧ください。

動画ではデジタル代理店のサービスページを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーに詳細用写真と顧客ロゴ4点があります。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- DXPR CMSではこのページのテーマページタイトルを隠します。編集フォームで**DXPR Theme Settings**を開き、**DXPR Hide Regions**下の**Page Title**にチェックします。Jumbotronの**Title**がページ唯一のHeading 1になります。[SEOに強いページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)の説明通りです。
- 新規エレメントはセクション・カラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

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

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。ホバーして**More** > **Settings**を開き、**Style**パネルで紺色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックし、**Content**タブから**Jumbotron**を選びます。
3. 設定するのは**Title**に「サービス紹介」、**Lead**に提供内容の1行を入れ、**Type**は**Primary**のまま**Save**をクリックします。

## 手順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**セットを選び、`palette`を検索してアイコンをクリックします。**Size**を**Very Large (3x)**にし、**Icon utilities**を開いて**Style**を**Circle**にして**Save**をクリックします。
5. 「開発」に`code`、「マーケティング」に`bullhorn`で繰り返します。

## 手順3: 1サービスを詳しく追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**Row**を追加します。2つの均等カラム付きで入ります。
2. 左カラムの**+**をクリックして**Image**を選びます。**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。
3. 右カラムの**+**をクリックして**Button**を選びます。**Title**に「見積りを取る」、**Link**に`/contact`、**Type**に**Primary**を設定して**Save**をクリックします。
4. 右カラムの**+**を再びクリックして**Text**を選びます。ボタンの上に載ります。「デザイン」を**Heading 2**で入力し、説明と内容物を加えて**Save**をクリックします。

## 手順4: 顧客ロゴを追加する

1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで薄灰色**Background**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Marquee**を選びます。各サンプル画像の**×**で3つのサンプル画像を消します。**Select Image**をクリックし、ロゴを検索して4点にチェックし、**Insert selected**をクリックします。**Gray scale**をオンにして**Save**をクリックします。
3. セクションの**+**を再びクリックして**Text**を選びます。マーキーの上に載ります。「一流ブランドに選ばれています」を**Heading 2**で入力して**Save**をクリックします。

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

1. 5つ目のセクションを追加し、**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**をクリックします。

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

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

## さらに進む

動画にはありません。

- **サービスごとの詳細部門**: 開発とマーケティングに手順3を繰り返します。2つ目以降のロー設定で**Mirror row**をオンにすると、タブレットとデスクトップで写真が左右交互になります。
- **ジャンプリンク**: 各詳細セクションの**HTML ID**を設定します (`design`、`development`、`marketing`)。各概要テキスト下に**Button**を追加し、**Link** `#design`などにします。
- **推薦文**: ロゴの上に顧客ごとに**Block quote**を追加します。

## 表示結果

紺色帯がページを開き、「サービス紹介」が白の大きな文字で1行概要の上に載ります。3つの中央寄せサービスが続き、各サービスは名と行の上に丸囲みアイコンがあります。デザインは写真、説明、**見積りを取る**付きで独自帯を得ます。灰色顧客ロゴが薄い帯に流れ、紫帯がページを締めます。

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

- **マーキーにサンプルロゴが残っています。** 3つのサンプル画像は消すまで残ります。マーキー設定を開き、各サンプル画像の**×**をクリックして保存します。
- **ロゴがカラーのままです。** **Gray scale**がオフです。マーキー設定を開き、オンにして**Save**をクリックします。
- **アイコンに円が付きません。** **Style**は**General**ではなく**Icon utilities**パネルにあります。アイコン設定を開き、**Icon utilities**を開いて**Style**を**Circle**にします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [ランディングページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing): サービスごとの専用ページ用
- [Iconエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/icon): サイズとスタイル用
- [Marqueeエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/marquee): ロゴ帯の設定用