こんにちは！
Nishiです。前回はMagentoのページの作成方法についての記事を書きました。
今回は、前回でも少し出てきた Magentoのページビルダー（Page Builder）の使い方について書いていきたいと思います。
ページビルダー（Page Builder）とは
ページビルダーはコードの知識がなくても、視覚的な操作だけでコンテンツ豊富なページを作成できる機能になります。
例えば、次のようなことができます。
・テキスト、画像、ボタンなど、複数のコンテンツ要素を柔軟に配置
・PCやモバイルなど、各デバイス向けにレイアウトを調整
・あらかじめ作成したブロックや、条件に応じた商品リストを表示
・作成したコンテンツをテンプレートとして保存して、再利用する
ページビルダー（Page Builder）の操作方法
ページビルダーでは、ドラッグ＆ドロップを活用して、簡単にコンテンツの配置や編集ができます。
また、要素の歯車アイコンをクリックすることで、細かいスタイルの調整をすることができます。
ページビルダー（Page Builder）の基本操作
ドラッグ＆ドロップについて
ページビルダーでは、左側のパネルにあるコンテンツ要素（テキスト、画像、行など）を、マウスでドラッグしてページエリアにドロップすることで、簡単に配置できます。
配置後は、その要素の歯車アイコンをクリックすると編集メニューが表示され、テキストの変更や画像の差し替え、スタイル調整などが行えます。
また、配置済みの要素もマウスで移動可能なので、コンテンツの並び替えや再構成も簡単に行えます。
PC/モバイルの切り替えについて
ページビルダーの上部にあるPCやモバイルのアイコンをクリックすることで、各デバイスでの表示切り替えが簡単にできます。
テンプレート保存について
ページビルダーでは、作成したレイアウトやコンテンツをテンプレートとして保存することで、他のページでも再利用できます。
保存する場合は、右上の「テンプレートとして保存」をクリックし、表示されるポップアップにテンプレート名を入力して保存します。
テンプレートを使用する場合は、右上の「テンプレートを適用」からテンプレートを選択してページに挿入できます。
挿入後は、通常のコンテンツと同じように編集可能です。
最上位に設置できる要素について
ページビルダーの要素には、最上位に設置できる要素と設置できない要素があります。
最上位に設置できる要素は、「Row」「列」「Tabs」「HTML Code」「ブロック」です。他の要素は最上位に設置する事ができません。
※本記事の手順は、日本語に翻訳されています。
日本語化する方法については、前回の記事「Magento: 日本語に翻訳してみよう」に記載しています。
実際にページビルダー（Page Builder）を使用してページを作成してみよう
それでは、実際に要素を配置してキャンペーン紹介風のページを作成してみましょう。
完成後のイメージになります。
今回は、セクションを3つに分けて作成していきます。
また、各セクションで使用する要素は以下になります。
①ヒーローセクション： Row、Text
②商品紹介セクション： Row、Products
③説明セクション： 列、HTML Code、Text
Page Builderを開く
新規ページ作成画面の「ページビルダーで編集」をクリックし、ページビルダーを開きます。
ヒーローセクションの作成
画面上部に表示されるヒーローセクションから作成していきます。
①「Row」を設置
まず最初に、「Row」要素をページ上にドラッグ＆ドロップします。
※ページビルダーでは、Text要素などは最上位に設置できないため、Rowの中に要素を配置する必要があります。
②「Row」の詳細設定を変更
設置したRowにマウスを重ねて表示された歯車アイコンをクリックし、詳細設定を行います。
今回行う設定は以下の3つです。
[1] 最小の高さの設定
「最小高さ」にCSS値を入力します。今回は「420px」にします。
[2] 背景画像の設置
「背景画像」の アップロード または ギャラリーから選択 ボタンをクリックして、画像を設定します。
[3] 子要素の上下中央配置
「垂直方向の整列」では、子要素を縦方向のどこに配置するかを指定できます。
今回は中央に配置したいので「Center」を選びます。
設定が完了したら、画面右上の「保存」ボタンをクリックして適用します。
③「Text」をRow内に設置
次に「Text」要素を、先ほど作成したRowの中にドラッグ＆ドロップします。
④「Text」の詳細設定を変更
設置したTextにマウスを重ねて表示された歯車アイコンをクリックし、詳細設定を行います。
今回行う設定は以下の4つです。
[1] 左右中央配置
ツールバーの「Align Center」アイコンをクリックすると、テキストが左右中央に配置されます。
[2] 任意のテキストを入力
[3] テキストスタイルの変更
ツールバーの「Paragraph」と表示されたドロップダウンをクリックし、Heading 1 や Heading 2 など、適切なフォーマットに変更します。
[4] フォントカラーの変更
ツールバーのテキストカラーアイコンをクリックし、フォントカラーを変更します。
任意のテキストの入力が完了したら、画面右上の「保存」ボタンをクリックして適用します。
ヒーローセクションが完成しました。
商品紹介セクションの作成
次に画面中央に表示される商品紹介セクションを作成していきます。
①「Row」を設置
まず最初に、「Row」要素をページ上にドラッグ＆ドロップします。
②「Products」要素をRow内に設置
次に「Products」要素を、先ほど作成したRowの中にドラッグ＆ドロップします。
③「Products」の詳細設定を変更
設置したProductsにマウスを重ねて表示された歯車アイコンをクリックし、詳細設定を行います。
今回行う設定は以下の6つです。
[1] 表示形式の変更
表示形式は「Product Grid」と「Product Carousel」の2種類があります。
Product Grid: 商品が表のように整列された形式で、ページ上にすべての商品が一括で表示されます。スクロールすることで続きが閲覧できます。
Product Carousel: 商品を横方向にスライドして表示する形式です。限られたスペースに多くの商品を見せたい場合に適しています。
今回は、限られたスペースに多くの商品を表示したいので、「Product Carousel」を選択します。
[2] 表示する商品の選択
「商品の選択基準」では、さまざまな条件を使って表示する商品を絞り込むことができます。
カテゴリ: 特定のカテゴリに含まれる商品を一括で表示できます。季節ごとの特集やジャンル別の一覧に便利です。
SKU: 特定の商品だけをピンポイントで指定する場合に使用します。SKUをカンマ区切りで複数入力することで、表示順の調整も可能です。
条件: 価格、在庫状況、商品属性などの条件で、柔軟に絞り込みができます。たとえば「10,000円以上」「色が黒」など細かい指定が可能です。
今回は、「商品の選択基準」でカテゴリを選択し、「Jackets」カテゴリを選択します。
[3] 商品の並び順
「並び順」では、価格順・名前順・新着順などの並び替えが可能です。
今回は「新着順」で表示します。
[4] 表示する商品の件数
「商品表示点数」には、スライドに含める商品の最大数を設定します。
今回は「20」と入力します。
[5] カルーセルのドットを非表示
「ドットを表示」を「いいえ」に設定すると、カルーセル下部のドットが非表示になります。
[6] 左右中央に配置
「整列」の「Center」を選択することで、商品リストが左右中央に配置されます。
任意のProductsの設定が完了したら、画面右上の「保存」ボタンをクリックして適用します。
その他にも、カルーセルの自動再生設定やナビゲーション矢印の表示など、細かなカスタマイズが可能です。
必要に応じて設定してみてください。
商品紹介セクションが完成しました。
説明セクションの作成
最後に、商品の説明や補足情報などを掲載する説明セクションを作成していきます。
①「Row」を設置
まず最初に、「Row」要素をページ上にドラッグ＆ドロップします。
②「列」要素をRow内に設置
次に「列」要素を、先ほど作成したRowの中にドラッグ＆ドロップします。
この「列」は、テキストなどの要素を縦方向に整えて配置したいときに便利です。
デフォルトでCOLUMNSが1つ、その中にCOLUMNが2つ設置される構成になります。
今回はこのまま使用します。
③「HTML Code」要素をCOLUMN内に設置
次にカラム内に見出しを作成するため、「HTML Code」要素をそれぞれのCOLUMN内にドラッグ＆ドロップします。
④「HTML Code」の詳細設定を変更
設置したHTML Codeにマウスを重ねて表示された歯車アイコンをクリックし、詳細設定を行います。
HTML Code要素では、CSS、HTML、JavaScriptなどのコードを記載することが出来ます。
以下のようなコードを入力して、丸みのある背景＋白文字の見出しを作成します。
<div style="text-align: center;">
<h2 class="rounded-label1">ＳＡＭＰＬＥ１</h2>
</div>
<style>
.rounded-label1{
display: inline-block;
background-color: #fdd9a0;
color: #fff;
padding: 6px 16px;
border-radius: 30px;
font-weight: bold;
font-size: 22px;
text-shadow:
0 0 2px rgba(100, 100, 100, 0.3),
0 1px 3px rgba(100, 100, 100, 0.3);
}
</style>
⑤「Text」要素を「HTML Code」下に設置
次に「Text」要素を、先ほど作成した「HTML Code」の下にドラッグ＆ドロップし、
任意のテキストを入力します。
⑥もう一つのカラムも調整
2つ目のCOLUMNにも、同様に「HTML Code」＋「Text」要素を追加します。
もし同じ構成を使う場合は、COLUMNのコピーアイコンから複製できます。
今回は「COLUMN」と「COLUMNS」を複製し、COLUMNSが2個・各COLUMNS内にCOLUMNが2つの構成にしました。
それぞれのCOLUMNに異なる見出しや色のスタイルを適用し、バリエーションを付けています。
説明セクションが完成しました。
ページの保存と表示確認
全てのセクションが完成したので、ページに必要な他の項目を入力し、「保存」をクリックします。
それでは、実際にユーザー画面で表示の確認をしてみましょう。
HTML Code要素の内容も含めて、各セクションのレイアウトやテキストがイメージ通りに表示されています。
最後に
今回は、ページビルダーの使用方法をご紹介しました。
ページビルダーは、実際の表示結果を確認しながら調整できるため、キャンペーンページや特集ページなども簡単に作成できます。
今回の記事に出てきた要素以外にもたくさん要素があるので、気になる方は公式サイト等を確認してみてください。
公式サイト（Page Builder ユーザーガイド | Adobe Commerce
