--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/product-guide' title: 'DXPR Builderのツアーと構成の選択 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:18:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builderの短いツアーで、DXPR Themeの位置付けを確認します。エレメントピッカーを開き、スタイル付きセクションを1つ作ってプレビューします。このページの残りでは各製品の追加内容を示すため、単体のビルダー、DXPR Theme付きのビルダー、両方入りのDXPR CMSから選べます。 動画では新しい空ページでDXPR Builderを巡り、1つのセクションを作ります。 tags: - 'Build your first page' 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: 'DXPR Builderのツアーと構成の選択' description: |- DXPR Builderの短いツアーで、DXPR Themeの位置付けを確認します。エレメントピッカーを開き、スタイル付きセクションを1つ作ってプレビューします。このページの残りでは各製品の追加内容を示すため、単体のビルダー、DXPR Theme付きのビルダー、両方入りのDXPR CMSから選べます。 動画では新しい空ページでDXPR Builderを巡り、1つのセクションを作ります。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:18: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/getting-started/product-guide' articleSection: 最初のページを作る - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/product-guide' description: |- DXPR Builderの短いツアーで、DXPR Themeの位置付けを確認します。エレメントピッカーを開き、スタイル付きセクションを1つ作ってプレビューします。このページの残りでは各製品の追加内容を示すため、単体のビルダー、DXPR Theme付きのビルダー、両方入りのDXPR CMSから選べます。 動画では新しい空ページでDXPR Builderを巡り、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/start-here) /[最初のページを作る](/ja/hc/documentation/learn-dxpr-builder/start-here/first-steps) # DXPR Builderのツアーと構成の選択. DXPR Builderを学ぶここから始める最初のページを作る ## このガイドの内容 関連ガイド - [最初のページを作る](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page) - [DXPR Builderの対象読者](/ja/hc/documentation/learn-dxpr-builder/start-here/who-uses-it) DXPR Builderの短いツアーで、DXPR Themeの位置付けを確認します。エレメントピッカーを開き、スタイル付きセクションを1つ作ってプレビューします。このページの残りでは各製品の追加内容を示すため、単体のビルダー、DXPR Theme付きのビルダー、両方入りのDXPR CMSから選べます。 動画では新しい空ページでDXPR Builderを巡り、1つのセクションを作ります。 ## エディターのツアー ビルダーを表示するコンテンツタイプの、保存済みの空ページから始めます。 1. エレメントピッカーを開くには、**Add Elements**をクリックします。 2. タブを見ます。**Content**、**Drupal Blocks**、**Drupal Views**、**Saved templates**、**Layout**です。 3. 使うのは**Section**で、**Layout**タブから選びます。 4. セクションにカーソルを合わせ、**More**を開いて**Settings**を選び、**Style**パネルで**Background**を選びます。 5. セクションの**+**をクリックして**Row**を追加し、そのカラムに**Button**と**Text**を追加します。テキストの**Font color**は**Style**パネルで選びます。 6. ツールバーの**Save**をクリックし、表示メニューを開いて**Preview**を選びます。 ## 表示内容 確認は**Preview**で、薄いグレーのセクションに2カラムが表示されます。左には見出し、1行のテキスト、**Learn more**ボタン、右には紫の見出しとテキストがあります。Previewではコントロールバーと追加ボタンが隠れるため、訪問者の見た目でページを確認できます。 ## 各製品の追加内容 **DXPR Builder**は巡ったばかりのDrupalモジュールです。任意のテーマで動作し、以下を追加します。 - 22のコンテンツエレメントと6つのレイアウトエレメント - プレビュー付きのページ上での編集 - AIモジュール導入時のAIテキスト、ページ作成、画像 - 使い回せるページテンプレートとユーザーテンプレート - 各ロールの利用内容を決めるユーザープロファイル - レイアウト内のDrupalブロックとビュー **DXPR Theme**はDXPR製のBootstrap 5テーマです。色、フォント、ヘッダー、ページレイアウトの設定を追加し、スマートフォンとタブレットに対応します。独自のプロダクトキーは不要です。 | | 他のテーマでのDXPR Builder | DXPR ThemeでのDXPR Builder | |---|---|---| | Bootstrap 5 | テーマ由来か、**Sideload Bootstrap files**＝**Bootstrap 5** | テーマが提供 | | ビルダーのカラースウォッチ | 定義があればテーマのパレット | DXPR Themeカラーパレット | | 固定ヘッダー下のスムーズスクロール | 対象は**Scroll offset selector**で、ヘッダーに設定 | インストール状態で動作 | | プロダクトキー | 必要 | DXPR Builderのみ必要 | 両方の設定はDXPR Builderの**General Settings**ページにあり、**Bootstrap**と**Advanced Settings**の下です。 ## 構成の選択 | やりたいこと | 使うもの | 必要なもの | |---|---|---| | 設定済みですぐに新しいサイトを始める | [DXPR CMS](/ja/hc/documentation/learn-dxpr-builder/getting-started/installing-dxpr-cms) | 新しいDrupal 11サイト | | 運用中のサイトに目で見て作るページ作成を足す | [単体のDXPR Builder](/ja/hc/documentation/learn-dxpr-builder/getting-started/installation) | テーマまたはサイドロード設定のBootstrap 5 | | ビルダーをカスタムテーマに合わせる | DXPR Builderと[テーマ設定](/hc/documentation/learn-dxpr-builder/development/theming) | 開発者 | 新しく始めるコンテンツマーケターにはDXPR CMSが最適です。両製品とデモページがすぐ使える状態で届きます。既存サイトのあるWeb担当者はDXPR Builderを追加し、テーマを保ちます。 ## エレメントピッカーが表示されない場合 - **空ページに「Choose a template」と出るがAdd Elementsボタンがない。** **Enable page creation assistant**が`/admin/dxpr_studio/dxpr_builder/ai_settings`でオフです。代わりにビルダーツールバーの**+**をクリックしてピッカーを開きます。 - **ボタンとカラムにスタイルがない。** テーマがBootstrap 5を読み込んでいません。**Sideload Bootstrap files**を**Bootstrap 5**にします。**Bootstrap**に`/admin/dxpr_studio/dxpr_builder/settings`で設定します。 - **カラーピッカーにスウォッチがない。** テーマがカラーパレットを定義していません。ピッカー自体で色を選ぶか、DXPR Themeのようなパレット付きテーマを使います。 ## 次のステップ - [最初のページを作る](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)：手順どおりのフルページを確認できます。 - [DXPR Builderの利用者](/ja/hc/documentation/learn-dxpr-builder/start-here/who-uses-it)：マーケター、Web担当者、開発者の使い分けを確認できます。