---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
title: 'ランディングページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:22+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは1つの提案向けランディングページを作ります。写真ヒーローとデモを依頼する
  ボタン、アイコン付き3つの特長、2つの推薦文、締めの行動喚起です。目標1つの
  キャンペーン・製品ページに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを
  ご覧ください。
  動画ではInsightという分析製品向けページを作ります。
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つの特長、2つの推薦文、締めの行動喚起です。目標1つの
        キャンペーン・製品ページに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを
        ご覧ください。
        動画ではInsightという分析製品向けページを作ります。
      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:22+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/marketing-landing'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing'
      description: |-
        ここでは1つの提案向けランディングページを作ります。写真ヒーローとデモを依頼する
        ボタン、アイコン付き3つの特長、2つの推薦文、締めの行動喚起です。目標1つの
        キャンペーン・製品ページに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを
        ご覧ください。
        動画ではInsightという分析製品向けページを作ります。
      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/hero-section)
- [フォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

ここでは1つの提案向けランディングページを作ります。写真ヒーローと**デモを依頼する**ボタン、アイコン付き3つの特長、2つの推薦文、締めの行動喚起です。目標1つの キャンペーン・製品ページに使います。1スクロールページのサイト全体には代わりに[シングルページサイトを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/one-page-website)を ご覧ください。

動画ではInsightという分析製品向けページを作ります。

  ## はじめる前に

- ロールが**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**に`/demo`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
6. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。見出しを**Heading 2**で入力し、下に見出し文を続けます。**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**をクリックします。新セクションに**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**セットを選び、`bolt`を検索してアイコンをクリックします。**Size**を**Very Large (3x)**にし、**Icon utilities**を開いて**Style**を**Circle**にして**Save**をクリックします。
5. 2つ目のカラムに`chart-line`、3つ目に`shield`で繰り返します。

## 手順3: 推薦文を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。
3. 各カラムの**+**をクリックして**Block quote**を選びます。引用を入力し、**Cite**に氏名と役職を入れて**Save**をクリックします。

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

1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「説明会を予約する」、**Link**に`/demo`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「Insightを自社データで見る」を**Heading 2**で入力し、1行加えます。**Font color**を白にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **見込み客フォーム**: 最後のボタンの代わりに**Drupal Blocks**タブからウェブフォームブロックを挿入します。[ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **濃い写真**: ヒーローの**Background effects**パネルで**Background effect**を**Gradient**にします。同じ暗色を60%程度の不透明度で**Start color**と**End color**
- **高いヒーロー**: **Style**パネルでヒーローセクションに上下100ピクセルのパディングを付けます
- **テンプレートから開始**: 空ページで**Choose a template**をクリックしてランディングページレイアウトを選びます。[ページテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## 表示結果

見出し、見出し文、**デモを依頼する**ボタンが写真上に白で中央寄せに座ります。3つの特長が続き、各特長は短い見出しと行の上に丸囲みアイコンがあります。2つの引用が灰色帯に横に並び、紫帯が**説明会を予約する**でページを締めます。

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

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

## 次はこちら

- [ヒーローセクション](/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section): 全高・パララックスのヒーロー選択肢用
- [ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms): 申込フォーム追加用
- [A/Bテスト](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview): ページ2版のテスト用