---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page'
title: '会社紹介ページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:01+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは会社紹介ページを作ります。ミッションヘッダー、写真横の沿革、数え上がる
  3つの数字、チームカード、締めの行動喚起です。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: |-
        ここでは会社紹介ページを作ります。ミッションヘッダー、写真横の沿革、数え上がる
        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:52:01+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/about-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/about-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
---
[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/team-directory)
- [Card](/hc/documentation/learn-dxpr-builder/elements/card)

ここでは会社紹介ページを作ります。ミッションヘッダー、写真横の沿革、数え上がる 3つの数字、チームカード、締めの行動喚起です。1ページで自社を伝える場合に 使います。全同僚を挙げるページには代わりに[チームディレクトリーを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/team-directory)を ご覧ください。

動画ではロッテルダムのデザインスタジオ向けにページを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーにオフィス、チーム、製品の写真があります。
- ページが存在します。**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Title**に「会社紹介」と入力して**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**を選びます。
2. セクションにホバーして**More** > **Settings**を開きます。**Style**パネルを開き、暗い**Background**見本を選んで**Save**をクリックします。
3. セクションの**+**をクリックし、**Content**タブから**Jumbotron**を選びます。
4. 入力するのは**Title**にミッション文で、「使い続けたいWebサイトを作ります」
5. 入力するのは**Lead**フィールドに補足文で、「2012年から欧州ブランドと組むロッテルダムの24人スタジオです」
6. 設定するのは**Type**を**Primary**にします。プライマリー色上の白文字で**Save**をクリックします。

## 手順2: 会社の沿革を書く

1. セクションにホバーして**Add Section Below** (下の**+**) をクリックします。
2. 新セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。ローのグリッドアイコン (**Column layout**) をクリックし、**2/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 広いカラムの**+**をクリックして**Text**を選びます。「沿革」を**Heading 2**で入力し、短い段落を2つ続けます。創業経緯と案件の進め方です。**Save**をクリックします。
4. 狭いカラムの**+**をクリックして**Image**を選びます。
5. クリックするのは**Select Image**で、**Apply filters**でメディアライブラリーを検索して、オフィスやチームの写真にチェックし、**Insert selected**をクリックします。
6. 開くのは**SEO**パネルで、**Alt attribute**を入力して**Save**をクリックします。

**ヒント**

沿革は短く、小見出しで区切ります。訪問者は読む前に流し見します。

## 手順3: カウンターで主要数値を出す

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 各カラムに数値ラベルの**Text**エレメントを入れます。「納品案件数」「営業年数」「再発注顧客」
4. 各カラムで**+**を再びクリックして**Number counter**を選びます。ラベルの上に載ります。次を設定します。
    - **End**: 数値 (140, 12, 98)
    - **Suffix**: 該当する「+」や「%」
    - **Thousands separator**: **Comma**
    - **Speed**: 2500。数え終わるまでのミリ秒です
5. 各カウンターで**Save**をクリックします。

カウンターに独自ラベル欄はないため、Textエレメントが下にあります。

## 手順4: チームセクションを作る

1. 追加するのは**Add Section Below**で4つ目のセクションです。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 各カラムで**+**をクリックして**Card**を選びます。**More** > **Settings**を開き、**Header**に氏名 (「ソフィア・アンデルセン」)、**Title**に役職 (「クリエイティブディレクター」) を設定して**Save**をクリックします。
4. セクション自体の**+**をクリックして**Text**を選びます。カードローの上に載ります。「チーム紹介」を**Heading 2**で入力し、中央寄せして**Save**をクリックします。

## 手順5: 締めセクションを追加する

1. 追加するのは**Add Section Below**で最後のセクションで、**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**で入力し、「四半期に数社の新規顧客をお受けします」と続けます。**Style**パネルで**Font color**を白にして**Save**をクリックします。

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

1. ビルダーツールバーの**Save**をクリックします。
2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選びます。
3. ページをスクロールして全セクションを確認します。

## さらに進む

動画にはありませんが、追加の価値があります。

- 各カード内に略歴**Text**と顔写真**Image**を置き、その下に**Social links**も置きます
- **100% height**は画面いっぱいのヘッダーにする最初のセクション設定です

## 表示結果

プレビューに5つの帯が出ます。暗いヘッダーにミッション文とリード文が白で載ります。沿革が写真の横にあります。灰色帯の3つの数字は表示域に入ると0から数え上がります。

チーム見出しが3カード上に中央寄せで座り、各カードに氏名と役職があります。締め帯は白見出しを明るい**お問い合わせ**ボタン上に中央寄せします。作業続行は目メニューの**Edit**を選びます。

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

- **空ページにAdd Elementsボタンがありません。** ページ作成アシスタントがオフなので、ページは**Choose a template**だけを出します。代わりに空き領域をクリックしてエレメントピッカーを開きます。
- **新しいエレメントが先に追加したものの上にできます。** ビルダーは新規エレメントをセクション・カラムの上に挿入します。コントロールバーのドラッグハンドルで所定位置へドラッグします。
- **Number counterやCardがピッカーにありません。** ビルダーユーザープロファイルが隠しています。管理者に**Elements**下でのチェックを**DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) で頼みます。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [チームディレクトリー](/ja/hc/documentation/learn-dxpr-builder/tutorials/team-directory): 専用チームページ用
- [Cardエレメント](/hc/documentation/learn-dxpr-builder/elements/card): カード種類と子エレメント用
- [エレメント](/hc/documentation/learn-dxpr-builder/elements): 全エレメントリファレンス用