---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'ヒーローセクションをデザインする | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:59+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは画面いっぱいのヒーローを作ります。背景写真、見出し、補足1行、ボタンで、
  訪問者のスクロールより写真が遅く動きます。どのページの上部にも使えます。このヒーローを中心にページ全体を作るには、次にマーケティングランディングページを作るを
  ご覧ください。
  動画ではレポート製品のヒーローを作ります。
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行、ボタンで、
        訪問者のスクロールより写真が遅く動きます。どのページの上部にも使えます。このヒーローを中心にページ全体を作るには、次にマーケティングランディングページを作るを
        ご覧ください。
        動画ではレポート製品のヒーローを作ります。
      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:59+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/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: |-
        ここでは画面いっぱいのヒーローを作ります。背景写真、見出し、補足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
---
[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/marketing-landing)
- [セクションを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/sections)
- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

ここでは画面いっぱいのヒーローを作ります。背景写真、見出し、補足1行、ボタンで、 訪問者のスクロールより写真が遅く動きます。どのページの上部にも使えます。このヒーローを中心にページ全体を作るには、次に[マーケティングランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)を ご覧ください。

動画ではレポート製品のヒーローを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーに幅広写真があります。横1920ピクセル以上です。
- ページをビルダーで開きます。新規は**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. オンにするのは**100% height**でヒーローを画面いっぱいにし、**Vertical centering**でコンテンツを中央に置きます。
4. 開くのは**Style**パネルで、**Background image**下で**Select Image**をクリックし、幅広写真にチェックして**Insert selected**をクリックします。
5. 設定するのは**Background style**を**Cover**にし、写真をセクションいっぱいにします。
6. 暗い**Background**色を選びます。写真読み込み中に表示します。**Font color**を白にして**Save**をクリックします。

**ヒント**

写真を500 KB未満に圧縮するとヒーローが速く読み込まれます。

## 手順2: ボタンを追加する

1. セクションの**+**をクリックし、**Content**タブから**Button**を選びます。
2. 設定するのは**Title**に「無料トライアルをはじめる」、**Link**に`/trial`、写真上のコントラスト用に**Type**に**Light**、**Size**に**Large**にし、**Save**をクリックします。

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

1. セクションの**+**を再びクリックし、**Content**タブから**Text**を選びます。新規エレメントは上に載るため、ボタンの上に載ります。
2. 見出しを入力します。「チームに追従するレポート」とし、見出しドロップダウンから**Heading 2**を選びます。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするには[SEOに強いページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)をご覧ください。
3. 補足1行を加えます。「ダッシュボード、アラート、連携を1つのワークスペースに。数分で設定でき、開発者は不要です」
4. 対象は**Style**パネルで**Font color**を白にし、**Save**をクリックします。

## 手順4: パララックスを追加する

1. セクションにホバーして**More** > **Settings**を再び開きます。
2. 開くのは**Background effects**パネルで、**Background effect**を**Parallax image**にします。**Parallax speed**は20ではじまります。強い効果には35までドラッグして**Save**をクリックします。

## 手順5: ヒーロー下にコンテンツを追加する

1. ヒーローにホバーして**Add Section Below**をクリックします。スクロール先のコンテンツ用です。
2. 新セクションの**+**をクリックし、**Content**タブから**Text**を選びます。見出しと短い段落を入力し、最初の行を**Heading 2**にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **オーバーレイ**: **Background effect**を**Gradient**にして、暗い**Start color**と**End color**を50%程度の不透明度で選びます。どの写真でもテキストが読めます。効果値は1つのため、オーバーレイはパララックスを置き換えます。
- **短いヒーロー**: **100% height**をオフにし、**Style**パネルでセクション独自の上下パディングを付けます (例: 100ピクセル)。
- **幅広ボタン**: **Block button**をオンにするとカラム幅のボタンになります。

## バリエーション

動画構成の代替案です。

### 動画背景ヒーロー

1. 対象は**Background effects**パネルで、**Background effect**を**YouTube video**にします。
2. 動画URLを**YouTube video URL**に貼ります。
3. 対象は**Video options**下で**Loop**と**Disable on mobile devices**にチェックします。音声はオフのままです。

### グラデーションのみヒーロー

背景画像を使わず、**Gradient**効果に2つの濃いブランド色を使います。速く読み込まれるヒーローです。

### 分割ヒーロー

1. セクション内に**Row**を追加します。2つの均等カラム付きで入ります。
2. テキストとボタンを左カラムに、画像を右カラムに置きます。

## 表示結果

写真が画面いっぱいに広がり、見出し、補足行、**無料トライアルをはじめる**ボタンが白で中央寄せに載ります。2つ目のセクションへ下ると、写真はページより遅く動きます。

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

- **ヒーローがテキストと同じ高さしかありません。** **100% height**がオフです。セクション設定でオンにして**Save**をクリックします。
- **スクロールしても写真が動きません。** **Background effect**が**Simple image**のまま、**Parallax speed**が0、またはヒーロー下にスクロール先がありません。**Parallax image**にし、**Parallax speed**を0超にドラッグして、手順5の2つ目のセクションを追加します。
- **写真の上で見出しが暗いままです。** Textエレメントに独自**Font color**がありません。**Style**パネルを開き、**Font color**を白にします。

## 次はこちら

- [ランディングページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing): ヒーロー周りの完成ページ構築用
- [セクション](/ja/hc/documentation/learn-dxpr-builder/layout/sections): セクション配置選択肢用
- [スタイルタブのリファレンス](/hc/documentation/learn-dxpr-builder/element-settings/style-tab): 全スタイル選択肢用