WordPressページビルダープラグインの比較
WordPressでウェブサイト制作するときに便利なプラグイン。
固定ページをレスポンシブウェブデザインで素早く簡単に構築、編集が出来るようになります。
そのページビルダープラグインの中で、
インストール数＋レビュー数＋レビュー平均点を加味した上位8件で設定・使い方・インターフェースを徹底比較していきます。
上位8件は以下の通りです。インストール後の設定、使い方、動作デモを確認します。
評価（インストール&レビュー数&レビュー平均点）の比較
| プラグイン名 | インストール数 | レビュー数 | レビュー平均点 |
| Beaver Builder Plugin (Lite Version) | 200,000以上 | 122件 | 4.8 |
| Page Builder by SiteOrigin | 1000,000以上 | 347件 | 4.8 |
| Page Builder: Live Composer | 40,000以上 | 136件 | 4.7 |
| Elementor Page Builder | 40,000以上 | 162件 | 4.9 |
| Page Builder by MotoPress | 10,000以上 | 90件 | 4.8 |
| Pootle Pagebuilder | 3,000以上 | 22件 | 4.4 |
| Page Builder by WooRockets.com | 10,000以上 | 22件 | 3.8 |
| Unyson | 10,000以上 | 22件 | 3.8 |
負荷パフォーマンスの比較
Unyson、Live Composer Page Builder、WR PageBuilderの順で負荷が大きい。
ページビルダープラグインの設定と使い方、動作デモ
Beaver Builder Plugin (Lite Version)
プラグイン公式ページ：Beaver Builder Plugin (Lite Version)
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 200,000以上 | 122件 | 4.8 |
Beaver Builderの設定
Beaver Builderは、フロントエンドエディタで固定ページが構築できるプラグイン。
日本語対応していて、使い方ツアーもあり、分かりやすい。
Beaver Builder Plugin (Lite Version)を有効化した直後の初期画面。
WordPress管理画面の左メニュー【設定】内の【ページビルダー】＞【モジュール】と【投稿タイプ】を確認してみます。
モジュールでは、ページビルダーで使用できる要素の表示を切り替えます。クライアントが編集できる管理・操作画面を用意する場合に必要ないものを非表示にしたり出来ます。
投稿タイプでは、ページビルダーを使える投稿タイプを選択。初期設定では「固定ページ」のみになっています。投稿でも使いたい場合にはチェックを入れる。
他にも「編集では権限の変更」、「キャッシュではキャッシュクリア」が出来ます。ただ、初期設定のままで問題ありません。
Beaver Builderの使い方
【固定ページ】＞【新規追加】を開くと、
テキストエディタとページビルダーの切り替えタブが出ています。
【ページビルダー】タブをクリックすると、起動します。
初めての場合には、ツアーが開始されます。
 ツアー開始 |
 行の追加 |
 コンテンツを追加 |
 さらにコンテンツを追加 |
 テンプレートを変更 |
 便利なツール |
 変更を公開 |
行レイアウトやモジュールでページを作成し始める前に、
【ツール】＞【グローバル設定】で共通設定を行うのがいい。
グローバル設定の【一般】
私は、グローバル設定の【一般】で列「マージンを-10px、パディングを0px」、モジュール「マージンを10px」に変更しました。
このようにすると、列-10pxとモジュール10pxで列の左右端の余白が相殺され、
ヘッダーやラッパーの横幅と揃える事が出来るとともに、モジュール間は余白が取れて扱いやすくなります。
また、行の上下間が0pxになっているので、
グローバル設定の【CSS】で行クラス（fl-row）に下マージンを付けた。
|
1
2
3
|
.fl–row{
margin–bottom: 20px;
}
|
行レイアウトを追加。
モジュールの画像を追加し、メディアライブラリから選択。
モジュールのテキストエディタを追加し、文章を入力。
モジュールをコピーし、配置したい列に移動。
上級モジュールでは、サイドバー領域の追加。
WordPressウィジェットでは、サイドバーで使えるウィジェットを直接、配置する事が可能。
※タイトルはページビルダーで編集できない。【固定ページを編集】から入力します。
実際に公開したウェブページをパソコンで確認。
実際に公開したウェブページをスマホで確認。
Page Builder by SiteOrigin
プラグイン公式ページ：Page Builder by SiteOrigin
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 1000,000以上 | 347件 | 4.8 |
Page Builder by SiteOriginの設定
Page Builder by SiteOriginだけでは、使えるウィジェットが少ない。
SiteOrigin Widgets Bundleは、高機能ウィジェットをPage Builder by SiteOriginに追加するプラグイン。
「page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」はセットでインストールするのがオススメ。
WordPress管理画面の左メニュー【設定】内の【ページビルダー】でプラグイン設定を確認してみます。
設定-一般
初期設定の状態で、必要な機能にはチェックが入っている。Limit Parallax Motionの値を小さくするほど、視差効果の移動ピクセル数が大きくなる。
設定-ウィジェット
こちらも初期設定で問題ない。ウィジェットタイトルのHTMLを必要に応じて変更する。
設定-レイアウト
設定-コンテンツ
プラグイン公式ページを見てみると、
ポストのコンテンツにページビルダーのコンテンツをコピーします。
ページビルダーで編集が行われるたびに、コンテンツは自動的に投稿コンテンツ（ビジュアル/テキストタブ）にコピーされます。
これは、投稿コンテンツを分析する必要のあるYoast SEOのようなプラグインに便利です。
ページビルダからポストコンテンツ（ビジュアル/テキストタブ）に戻るとき、ページビルダの書式設定は失われることに注意してください。
この設定はその動作を変更しません。
情報源: Page Builder Settings – SiteOrigin公式
つまり、ページビルダーを使うと、SEO対策プラグイン（Yoast SEOなど）と互換性がなくなる場合があるが、「コンテンツをコピー」を有効化しておくと、ビジュアル・テキストエディタのテキストとして扱われ、
SEO対策プラグインでテキストを取得しSEO判定が可能になるということのようです。
Page Builder by SiteOriginの使い方
「固定ページを編集」を開きます。
【テキストエディタ】タブ隣の【ページビルダー】タブで起動。
列や列を追加
列にウィジェットを配置して、ブロックを積み上げていくようにページを作成できます。
「固定ページを編集」ページのエディタ部分が、そのままページビルダーになるので、名馴染みやすい。
ライブエディタ
ページビルダーにある【ライブエディタ】ボタンをクリックすると、ライブモードに切り替わります。
通常のページビルダーに戻るには、【終了】をクリックします。
どのように動作するか操作方法を確認してみます。
ボタンでウィンドウサイズを変更し、デバイス別の表示レイアウトを簡易的に確認することが出来ます。
プレビュー表示・ページビルダーともに、マウスカーソルを合わせると、ハイライトし分かりやすい。
編集するには、プレビュー範囲では編集箇所を、ページビルダーではウィジェット名をクリックします。
実際に公開したウェブページをパソコンで確認。
実際に公開したウェブページをスマホで確認。
Page Builder: Live Composer – drag and drop website builder (visual front end site editor)
プラグイン公式ページ：Page Builder: Live Composer – drag and drop website builder (visual front end site editor)
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 40,000以上 | 136件 | 4.7 |
Page Builder: Live Composerの設定
Live Composerは、多機能フロントエンドエディタです。
フロントエンドエディタの他に、カスタム投稿タイプも追加されます。
行、列にモジュールを配置してウェブページを構築します。
有効化すると、以下の初期画面に移動します。
WordPress管理画面の左メニュー【設定】内の【Live Composer】の【Settings】タブでプラグイン設定を確認してみます。
General Options
| Max Width | 行が「wrapped」になっている時の最大幅 |
| Section Paddings (horizontal) |
行が「wrapped」になっている時の左右端の最小余白 |
| Force !important CSS | テーマのCSSを上書きするための!importantを使用 |
| Dynamic CSS Location | CSSの出力先 |
Performance
読み込むフォントを選択。日本語では意味がない。
Other
| Text Editor Type | モジュールのテキストなどで使用するWPエディタを選択。 |
| Default Options Section | 挿入されたモジュールをクリックした際に、最初に開くタブを選択。 |
| “Activate Editor” Position | 実際のウェブページを開いているときに、フロントエンドエディタに切り替えるためのボタン位置を選択。 |
Navigation Module
【外観】の【メニュー】に新しいメニューの位置を追加できます。
※日本語を入力しても消えるので、ローマ字を入力。
Widgets Module
【外観】の【ウィジェット】に新しいサイドバーを追加できます。
※日本語を入力しても消えるので、ローマ字を入力。
Access Control
フロントエンドエディタやカスタム投稿タイプを使用できる権限グループを管理します。
Features Control
使用できるモジュールで必要ないものは、非表示にします。
Slugs
プラグインを有効化すると追加される「カスタム投稿タイプ」のスラッグを編集できます。
Page Builder: Live Composerの使い方
「固定ページを編集」を開きます。
【テキストエディタ】タブ隣の【ページビルダー】タブを開く。
【Open in Live Composer】で起動します。
モジュールがウィンドウ下に用意されており、ドラッグ＆ドロップで挿入します。
行を全幅に変更し、列を追加。
モジュールのテキストと画像を追加。
実際に公開したウェブページをパソコンで確認。
Elementor Page Builder
プラグイン公式ページ：Elementor Page Builder
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 40,000以上 | 162件 | 4.9 |
Elementor Page Builderの設定
Elementorは、フロントエンドエディタで固定ページが構築できるプラグイン。
WordPress管理画面の左メニュー【Elementor】内の【設定】を確認してみます。
一般設定
| 投稿タイプ | フロントエンドエディタが使用できる投稿タイプを選択。 |
| 役割の除外 | フロントエンドエディタが使用できない権限グループを選択。 |
スタイル設定
| Disable Global Colors | グローバル色を無効にする。 |
| Disable Global Fonts | グローバルフォントを無効にする。 |
| デフォルトの汎用フォント | デフォルトで使用するフォントファミリーを入力。 |
| コンテンツの幅 | 最大幅を設定 |
| Stretched Section Fit To | 行の「伸縮セクション」をONにした時に、フィットさせる親ボックスの要素セレクタを入力。 |
Elementor Page Builderの使い方
「固定ページを編集」を開きます。
【Elementorで編集】ボタンをクリックすると、フロントエンドエディタが起動。
要素がウィンドウ左に用意されており、ドラッグ＆ドロップで挿入します。
実際に公開したウェブページをパソコンで確認。
Page Builder by MotoPress
プラグイン公式ページ：Page Builder by MotoPress
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 10,000以上 | 90件 | 4.8 |
Page Builder by MotoPressの設定
MotoPressは、フロントエンドエディタで固定ページが構築できるプラグイン。
WordPress管理画面の左メニュー【MotoPress】内の【Settings】を確認してみます。
| Language | 日本語は無い。 |
| Enable Visual Builder for | フロントエンドエディタが使用できる投稿タイプを選択。プロバージョンのみ変更可。 |
| Disable Visual Builder for user groups | フロントエンドエディタが使用できない権限グループを選択。プロバージョンのみ変更可。 |
| Check spelling | スペルチェック機能 |
| Fixed Row Width | 行の最大幅 |
| Custom CSS code: | CSSの追記 |
| Excerpt and More tag | 抜粋のショートコードをhtmlに変換する |
| Google Fonts | googleフォントを読み込む。※日本語はほぼ無い。 |
Page Builder by MotoPressの使い方
「固定ページを編集」を開きます。
【Visual Builder】タブを開く。
【Open Visual Builder】ボタンをクリックすると、ビジュアルビルダーが起動。
ビジュアルビルダーの動作を実際に確認。
オブジェクトをドラッグ＆ドロップで配置すると、自動で行と列が設定されるため、直感操作でウェブページを構築できます。
列の比率は、ドラッグで簡単に変更可能。
※挿入したオブジェクトを複製するには、プロバージョンでしか出来ない。
実際に公開したウェブページをパソコンで確認。
Pootle Pagebuilder
プラグイン公式ページ：Pootle Pagebuilder
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 3,000以上 | 22件 | 4.4 |
Pootle Pagebuilderの設定
| Responsive | レスポンシブウェブデザインの有効化 |
| Mobile Width | モバイル端末の最大幅 |
| Modules insert panel position | ライブエディタで使用するモジュールメニューの位置 |
| Delete ALL data on uninstall | アンインストール時のデータ削除 |
Pootle Pagebuilderの使い方
「固定ページを編集」を開きます。
【page Builder】タブを開く。
ページビルダーでは、テキストエディタしか挿入できない。
ライブエディタは、「固定ページを編集」から直接開く方法がない。
まず、パーマリンクから実際のページプレビューを開く。
上部の管理バーにある【Live edit】から起動できる。
全ての行を消去するとWarning: Invalid argument supplied for foreach()とエラーが出る。
Page Builder by WooRockets.com
プラグイン公式ページ：Page Builder by WooRockets.com
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 10,000以上 | 22件 | 3.8 |
Page Builder by WooRockets.comの設定
| Enable PageBuilder for | ページビルダーが使用できる投稿タイプを選択。 |
| Enable Caching | WooRocketsのCSSとJSをキャッシュする。 |
| Load Bootstrap Assets | Bootstrapを読み込む。 |
| Enable full mode | フルモード |
| Send plugin info to WooRockets for improving | WooRocketsに改善のためのプラグイン情報を提供する |
Page Builder by WooRockets.comの使い方
「固定ページを編集」を開きます。
【WR PageBuilder】タブを開く。
ページビルダーの動作デモ。
Unyson
プラグイン公式ページ：Unyson
| 有効化済みインストール | レビュー数 | レビュー平均点 |
|---|---|---|
| 10,000以上 | 22件 | 3.8 |
Unysonの設定
Unyson（ユニゾン）は、ページビルダーで固定ページが構築できるプラグイン。
Unysonは、初期状態では何も機能がない。
WordPress管理画面の左メニュー【Unyson】を確認してみます。
Unyson Extensionsで、拡張機能の管理が出来ます。
ページビルダーを使うために、「Page Builder」の【Download】をクリックし有効化します。
「Page Builder」の【Settings】から設定を行います。
| Activate for | ページビルダーが使用できる投稿タイプを選択。 |
Unysonの使い方
「固定ページを編集」を開きます。
【Visual Page Builder】ボタンをクリック。
ページビルダーの動作デモ。
セクションとカラムの追加。
エレメント（テキスト、画像）の追加。
まとめ
100万インストール超えのモンスタープラグインPage Builder by SiteOriginは、日本語翻訳が正しくない箇所はありますが、インターフェースが直感的に分かるデザインになっており、あまり問題ではない。
使いやすさ、安定感、制作スピード、負荷、あらゆる点で高水準にまとまっている。
ページビルダーとライブエディタで切り替えできる点も良い。
拡張用プラグインで機能を増やすことも出来る。
Page Builder by MotoPressは、インストール数やレビュー数は少ないが、使ってみるとビジュアルビルダーのインターフェースがアイコンで分かりやすい。
特徴的なのは、テキストや画像などのオブジェクトを挿入すると自動で行と列を設定してくれる。列の割合もドラッグで変更できる。
他のページビルダーと比べ、ワンアクション少ない手順で直感的にページ構築ができ、制作スピードにおいて突出していると感じた。
Unysonは、ページビルダーのみで実際の表示を確認しながら編集することは出来ない。
インターフェースは見やすく、動作も安定している。
ページビルダー以外にも拡張機能があるので、チェックしてみると面白いかもしれない。
