--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' title: 'シングルページサイトを作る | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:53:36+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ここでは1ページにサイト全体を作ります。下のAbout、Services、Contactセクションへ 飛ぶボタン付き全高ヒーローです。各セクションはボタンの飛び先のHTML IDを 持ちます。小規模事業所、キャンペーン、ポートフォリオに使います。1つの提案中心の ページには代わりにマーケティングランディングページを作るを ご覧ください。 動画ではStudio Nordというデザインスタジオのサイトを作ります。 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ページにサイト全体を作ります。下のAbout、Services、Contactセクションへ 飛ぶボタン付き全高ヒーローです。各セクションはボタンの飛び先のHTML IDを 持ちます。小規模事業所、キャンペーン、ポートフォリオに使います。1つの提案中心の ページには代わりにマーケティングランディングページを作るを ご覧ください。 動画ではStudio Nordというデザインスタジオのサイトを作ります。 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:36+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/one-page-website' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/one-page-website' description: |- ここでは1ページにサイト全体を作ります。下のAbout、Services、Contactセクションへ 飛ぶボタン付き全高ヒーローです。各セクションはボタンの飛び先のHTML IDを 持ちます。小規模事業所、キャンペーン、ポートフォリオに使います。1つの提案中心の ページには代わりにマーケティングランディングページを作るを ご覧ください。 動画ではStudio Nordというデザインスタジオのサイトを作ります。 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/marketing-landing) - [Custom CSS classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) ここでは1ページにサイト全体を作ります。下のAbout、Services、Contactセクションへ 飛ぶボタン付き全高ヒーローです。各セクションはボタンの飛び先の**HTML ID**を 持ちます。小規模事業所、キャンペーン、ポートフォリオに使います。1つの提案中心の ページには代わりに[マーケティングランディングページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)を ご覧ください。 動画ではStudio Nordというデザインスタジオのサイトを作ります。 ## はじめる前に - ロールが**Edit with DXPR Builder**権限を持ちます。 - メディアライブラリーにヒーロー用の幅広写真とチーム写真があります。 - ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。 - 新規エレメントはセクション・カラムの上に載るため、ヒーローボタンは最後から最初へ入れます。 ## 手順1: ヒーローを作る 1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションにホバーして**More** > **Settings**を開きます。**HTML ID**を`hero`にし、**HTML classes**下で**Align text center**を選びます。 3. オンにするのは**100% height**でセクションを画面いっぱいにし、**Vertical centering**でコンテンツを中央に置きます。 4. 開くのは**Style**パネルで、**Background image**下で**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**Background style**を**Cover**にし、紺色**Background**と白**Font color**を選んで**Save**をクリックします。 5. セクションの**+**をクリックして**Button**を選びます。**Title**に「お問い合わせ」、**Link**に`#contact`、**Type**に**Light**を設定して**Save**をクリックします。同じ方法で2つボタンを追加します。`#services`の「サービス」、次に`#about`の「概要」です。各ボタンは直前の上に載ります。 6. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「Studio Nord」を**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**をクリックします。新セクションの**More** > **Settings**を開き、**HTML ID**を`about`にして**Save**をクリックします。 2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。 3. 左カラムの**+**をクリックして**Image**を選びます。**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。 4. 右カラムの**+**をクリックして**Text**を選びます。「概要」を**Heading 2**で入力し、沿革を加えて**Save**をクリックします。 ## 手順3: サービスセクションを追加する 1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開きます。**HTML ID**を`services`にし、**HTML classes**下で**Align text center**を選び、**Style**パネルで薄灰色**Background**を選びます。**Save**をクリックします。 2. 追加するのは**Row**で、グリッドアイコン (**Column layout**) をクリックして**1/3 + 1/3 + 1/3**プリセットを選び、**Save**をクリックします。 3. 1つ目のカラムの**+**をクリックして**Text**を選びます。「ブランディング」を**Heading 3**で入力し、1行加えて**Save**をクリックします。 4. 同じカラムの**+**をクリックして**Icon**を選びます。テキストの上に載ります。**Font Awesome Free Solid**セットを選び、`pen-nib`を検索してアイコンをクリックします。**Size**を**Very Large (3x)**にし、**Icon utilities**を開いて**Style**を**Circle**にして**Save**をクリックします。 5. 「Webサイト」に`laptop-code`、「分析」に`chart-pie`で繰り返します。 ## 手順4: お問い合わせセクションを追加する 1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML ID**を`contact`にし、**HTML classes**下で**Align text center**を選びます。**Save**をクリックします。 2. セクションの**+**をクリックして**Social links**を選びます。1行目のブランドに`linkedin`を入力してプロフィールURLを貼り、2行目に`instagram`とそのURLを入れます。**Style**を**Circle**、**Size**を**2x**にして**Save**をクリックします。 3. クリックするのは**+**を再びで、**Button**を選びます。リンクの上に載ります。**Title**に「メールする」、**Link**に`mailto:hello@studionord.example`、**Type**は**Primary**のままにして**Save**をクリックします。 4. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「お問い合わせ」を**Heading 2**で入力し、下にメールアドレスと電話番号を入れて**Save**をクリックします。 ## 手順5: 保存してプレビューする 1. ビルダーツールバーの**Save**をクリックします。 2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選んで**Contact**などのヒーローボタンをクリックします。 ## さらに進む 動画にはありません。 - **固定メニュー**: **Structure** > **Menus** > **Add menu**でセクションごとに1リンクのメニューを作ります (`/studio-nord#about`など、トップページなら`#about`)。ヘッダー領域に**Structure** > **Block layout**で置きます。DXPR Themeでは**Appearance** > **Settings** > **DXPR Theme**で**Sticky Header**をオンにします。 - **トップページ**: **Configuration** > **System** > **Basic site settings**でこのページをトップページにします。 - **お問い合わせフォーム**: リード文の代わりに**Drupal Blocks**タブからフォームを挿入します。[ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)をご覧ください。 ## 表示結果 写真が画面いっぱいに広がり、「Studio Nord」、キャッチコピー、3つの明るいボタンが載ります。ボタンのクリックでページが該当セクションへ滑らかにスクロールします。概要は沿革横にチーム写真、サービスは灰色に丸囲みアイコン3つ、お問い合わせは「お問い合わせ」見出しと**メールする**ボタンの上に2つの丸いソーシャルアイコンです。 ## 図通りにならない場合 - **ボタンでセクションに飛びません。** **Link**がセクションの**HTML ID**と一致しません。リンクは`#`に完全同一IDを付けます (`about`のIDには`#about`など)。 - **固定ヘッダーの下にセクションが隠れます。** ビルダーはヘッダー高を知りません。**Advanced Settings**下の**DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) で**Scroll offset selector**をヘッダーのCSSセレクターにします。 - **ソーシャルリンクに「No matching brand icon found」と出ます。** ブランドが既知アイコン名ではありません。小文字で入力します (`linkedin`や`instagram`など)。 - **再読み込み後に変更が消えています。** ビルダーツールバーの**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/marketing-landing): キャンペーンページ用 - [クラスでセクションにリンクしスタイルを使い回す](/hc/documentation/learn-dxpr-builder/element-settings/custom-css): HTML ID詳細用