--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page' title: '最初のページを作る | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:20:01+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builderでページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページはDXPR Builderのインストールの後に使います。 動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。 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: 最初のページを作る description: |- DXPR Builderでページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページはDXPR Builderのインストールの後に使います。 動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:20:01+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/first-page' articleSection: 最初のページを作る - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page' description: |- DXPR Builderでページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページはDXPR Builderのインストールの後に使います。 動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。 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でページを作ります。見出し横の画像、短い段落、ボタンです。既製のテンプレートから始めて文言を変えることもできます。どちらも数分で、保存したページを訪問者の見た目でプレビューして終わります。このページは[DXPR Builderのインストール](/ja/hc/documentation/learn-dxpr-builder/getting-started/installation)の後に使います。 動画ではページを一から作ります。セクション、ロー、画像、ボタン、テキスト、保存、プレビューの順です。 ## 始める前に - DXPR Builderはプロダクトキー付きでインストール済みです（[DXPR Builderのインストール](/ja/hc/documentation/learn-dxpr-builder/getting-started/installation)）。 - コンテンツタイプがビルダーを表示します。そのテキストフィールドは**DXPR Builder**フォーマッターを使っています。**Drag and drop Page**（`dxpr_builder_page`）などが例です。 - 自分のロールに**Edit with DXPR Builder**権限があります。 ## ページの作成 1. 開くのは**Content** > **Add content**で、ビルダーを表示するコンテンツタイプを選びます。 2. タイトルは**Title**に入力し、**Save**をクリックします。 保存したページが空のビルダーで開きます。DXPR Builderはこのページ上で動作し、編集フォーム上ではありません。 ## 方法A：テンプレートから始める タブ**Saved templates**には、サイトの人々が使い回し用に保存したレイアウトが一覧されます。DXPR CMSにはいくつか付属します（例：**Colored icon boxes**）。他のサイトではタブが空の場合があります。その場合は空ページの**Choose a template**で、DXPR Builder付属のページテンプレートを選びます。[保存したテンプレートの挿入](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)ではこの手順を動画で説明します。 1. クリックするのは**Add Elements**で、エレメントピッカーを開きます。 2. 切り替えるのは**Saved templates**タブです。 3. テンプレートをクリックして挿入します。そのセクション、ロー、エレメントがページに表示され、編集可能な状態になります。 4. ツールバーの**Save**をクリックします。 5. 目メニューを開いて**Preview**を選び、訪問者の見た目でページを確認します。 ## 方法B：一から作る 上記の動画はこの手順どおりです。 1. クリックするのは**Add Elements**で、**Section**を**Layout**タブで選びます。 2. セクションのコントロールバーにある**+**をクリックし、**Row**を選びます。 3. ローのグリッドアイコンをクリックし、1/3 + 2/3のようなカラムプリセットを選んで**Save**をクリックします。 4. 左カラムの**+**をクリックし、**Content**タブを開いて**Image**を選びます。 5. クリックするのは**Select Image**で、**Apply filters**でメディアブラウザーを検索して写真にチェックを付け、**Insert selected**をクリックします。 6. 開くのは**SEO**パネルで、**Alt attribute**を入力して**Save**をクリックします。 7. 右カラムの**+**をクリックして**Button**を選びます。 8. 入力するのは**Title**と**Link**で、**Type**を選んで**Save**をクリックします。 9. 広いカラムのコントロールバーにある**+**をクリックして**Text**を選びます。 10. 見出しを入力して**Heading 2**に設定し、下に段落を入力して**Save**をクリックします。 11. ツールバーの**Save**をクリックします。 12. 目メニューを開いて**Preview**を選び、訪問者の見た目でページを確認します。作業を続けるには同じメニューで**Edit**を選びます。 ## 追加内容の変更 - **Text**：Textエレメントをクリックしてその場で編集します。ツールバーでは太字、斜体、見出し、リンク、リスト、フォント色などが使えます。表示されるボタンは[ユーザープロファイル](/ja/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)で決まります。 - **Settings**：エレメントのコントロールバーにある**More**を開いて**Settings**を選びます。Imageには幅、高さ、リンク、altテキスト、Buttonには**Type**、サイズ、リンクがあります。 - **Order**：エレメントをコントロールバーで別の場所にドラッグします。 終わったらツールバーの**Save**をクリックします。未保存の変更があるままページを離れようとすると、ブラウザーが警告します。 ## 表示内容 表示は**Preview**で、画像が左にあります。見出し、段落、ボタンはコントロールバーなしで右にあります。**Edit**に戻ると、各エレメントはカーソルを合わせるとコントロールバーを表示します。DXPR Builderはページを編集対象フィールド（通常は**Body**）のHTMLとして保存します。コンテンツの公開後に訪問者にページが見えます。 ## Add Elementsボタンが表示されない場合 - **空ページに「Choose a template」と「Or add elements using the +」と出る。** **Enable page creation assistant**が`/admin/dxpr_studio/dxpr_builder/ai_settings`でオフです。代わりにビルダーツールバーの**+**をクリックしてエレメントピッカーを開きます。 - **ページにビルダーがまったく出ない。** コンテンツタイプが**DXPR Builder**フォーマッターを使っていないか、ロールに**Edit with DXPR Builder**がありません。[インストールの確認](/ja/hc/documentation/learn-dxpr-builder/getting-started/installation#verify-the-installation)の手順をご覧ください。 - **Saved templatesタブにテンプレートがない。** サイトでまだ誰も保存していないか、ユーザープロファイルで非表示です。空ページの**Choose a template**を使うか、[自分のテンプレートを保存](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)します。 - **再読み込み後に変更が消えている。** ページが保存されていません。ページを離れる前にビルダーツールバーの**Save**をクリックします。 ## 次のステップ - [編集ツール](/hc/documentation/learn-dxpr-builder/editing)：すべてのコントロールとキーボードショートカットを確認できます。 - [エレメント](/hc/documentation/learn-dxpr-builder/elements)：22のコンテンツエレメントと6つのレイアウトエレメントを確認できます。 - [レイアウト](/hc/documentation/learn-dxpr-builder/layout/overview)：画面ごとに合わせるセクション、ロー、カラムを確認できます。