WordPress/ページビルダープラグイン

WordPressページビルダープラグインの比較

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

プラグイン公式ページ:Beaver Builder Plugin (Lite Version)

有効化済みインストール レビュー数 レビュー平均点
200,000以上 122件 4.8

Beaver Builderの設定

Beaver Builderは、フロントエンドエディタで固定ページが構築できるプラグイン。
日本語対応していて、使い方ツアーもあり、分かりやすい。

Beaver Builder インストール後 初期画面

Beaver Builder Plugin (Lite Version)を有効化した直後の初期画面。

WordPress管理画面の左メニュー【設定】内の【】>【モジュール】と【投稿タイプ】を確認してみます。

Beaver Builder モジュール 設定

モジュールでは、ページビルダーで使用できる要素の表示を切り替えます。クライアントが編集できる管理・操作画面を用意する場合に必要ないものを非表示にしたり出来ます。

Beaver Builder 投稿タイプ 設定

投稿タイプでは、ページビルダーを使える投稿タイプを選択。初期設定では「固定ページ」のみになっています。投稿でも使いたい場合にはチェックを入れる。

他にも「編集では権限の変更」、「キャッシュではキャッシュクリア」が出来ます。ただ、初期設定のままで問題ありません。

Beaver Builderの使い方

【固定ページ】>【新規追加】を開くと、
テキストエディタとページビルダーの切り替えタブが出ています。

Beaver Builder テキストエディタとページビルダーの切り替えタブ

ページビルダー】タブをクリックすると、起動します。
初めての場合には、ツアーが開始されます。

使い方のツアー1
ツアー開始
使い方のツアー2
行の追加
使い方のツアー3
コンテンツを追加
使い方のツアー4
さらにコンテンツを追加
使い方のツアー5
テンプレートを変更
使い方のツアー6
便利なツール
使い方のツアー7
変更を公開

行レイアウトやモジュールでページを作成し始める前に、
【ツール】>【グローバル設定】で共通設定を行うのがいい。

ツール グローバル設定

グローバル設定の【一般】

グローバル設定の編集

私は、グローバル設定の【一般】で列「マージンを-10px、パディングを0px」、モジュール「マージンを10px」に変更しました。
このようにすると、列-10pxとモジュール10pxで列の左右端の余白が相殺され、
ヘッダーやラッパーの横幅と揃える事が出来るとともに、モジュール間は余白が取れて扱いやすくなります。

また、行の上下間が0pxになっているので、
グローバル設定の【CSS】で行クラス(fl-row)に下マージンを付けた。

ビーバービルダー 行のレイアウトを追加

行レイアウトを追加。

ビーバービルダー 画像を追加

モジュールの画像を追加し、メディアライブラリから選択。

モジュール テキストエディタを追加

モジュールのテキストエディタを追加し、文章を入力。

モジュールのコピーと移動

モジュールをコピーし、配置したい列に移動。

上級モジュールでは、サイドバー領域の追加。
WordPressウィジェットでは、サイドバーで使えるウィジェットを直接、配置する事が可能。

※タイトルはページビルダーで編集できない。【固定ページを編集】から入力します。

実際のページ パソコン

実際に公開したウェブページをパソコンで確認。

実際のページ スマホ

実際に公開したウェブページをスマホで確認。

Page Builder by SiteOrigin

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管理画面の左メニュー【設定】内の【ページビルダー】でプラグイン設定を確認してみます。

設定-一般

Page Builder by SiteOrigin 設定 一般

初期設定の状態で、必要な機能にはチェックが入っている。Limit Parallax Motionの値を小さくするほど、視差効果の移動ピクセル数が大きくなる。

設定-ウィジェット

Page Builder by SiteOrigin 設定 ウィジェット

こちらも初期設定で問題ない。ウィジェットタイトルのHTMLを必要に応じて変更する。

設定-レイアウト

Page Builder by SiteOrigin 設定 レイアウト

  • Use Tablet Layout」も有効化しておくと、
    「Tablet Width」よりウィンドウサイズが小さくなった時、列幅に応じて柔軟に折り返す(2列では折返さないが、3列では折り返す)。
  • 行の下のマージン」をサイトに合わせて変更。
  • Last Row With Margin」を有効化すると、最後の行カラムに下マージンが付く。(標準仕様では、最後の行カラムは取り除かれている)
  • 行下の余白」とあるが、列間の余白のことです。日本語翻訳がおかしい。

設定-コンテンツ

Page Builder by SiteOrigin 設定 コンテンツ

プラグイン公式ページを見てみると、

ポストのコンテンツにページビルダーのコンテンツをコピーします。
ページビルダーで編集が行われるたびに、コンテンツは自動的に投稿コンテンツ(ビジュアル/テキストタブ)にコピーされます。
これは、投稿コンテンツを分析する必要のあるYoast SEOのようなプラグインに便利です。
ページビルダからポストコンテンツ(ビジュアル/テキストタブ)に戻るとき、ページビルダの書式設定は失われることに注意してください。
この設定はその動作を変更しません。

情報源: Page Builder Settings – SiteOrigin公式

つまり、ページビルダーを使うと、SEO対策プラグイン(Yoast SEOなど)と互換性がなくなる場合があるが、「コンテンツをコピー」を有効化しておくと、ビジュアル・テキストエディタのテキストとして扱われ、
SEO対策プラグインでテキストを取得しSEO判定が可能になるということのようです。

Page Builder by SiteOriginの使い方

「固定ページを編集」を開きます。

Page Builder by SiteOrigin ページビルダーを起動

【テキストエディタ】タブ隣の【ページビルダー】タブで起動。

Page Builder by SiteOrigin ページビルダー起動後 開始時

列や列を追加

Page Builder by SiteOrigin 動作デモ

列にウィジェットを配置して、ブロックを積み上げていくようにページを作成できます。
「固定ページを編集」ページのエディタ部分が、そのままページビルダーになるので、名馴染みやすい。

ライブエディタ

ページビルダーにある【ライブエディタ】ボタンをクリックすると、ライブモードに切り替わります。
通常のページビルダーに戻るには、【終了】をクリックします。

Page Builder by SiteOrigin ライブエディタ

どのように動作するか操作方法を確認してみます。

ライブエディタ デバイスサイズ別の表示チェック

ボタンでウィンドウサイズを変更し、デバイス別の表示レイアウトを簡易的に確認することが出来ます。

ライブエディタ ハイライト

プレビュー表示・ページビルダーともに、マウスカーソルを合わせると、ハイライトし分かりやすい。

ライブエディタ ウィジェットの挿入

編集するには、プレビュー範囲では編集箇所を、ページビルダーではウィジェット名をクリックします。

実際に公開したウェブページをパソコンで確認。

実際のページ パソコン

実際に公開したウェブページをスマホで確認。

実際のページ スマホ

Page Builder: Live Composer – drag and drop website builder (visual front end site editor)

Page Builder: Live Composer

プラグイン公式ページ: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は、多機能フロントエンドエディタです。
フロントエンドエディタの他に、カスタム投稿タイプも追加されます。
行、列にモジュールを配置してウェブページを構築します。

有効化すると、以下の初期画面に移動します。

Live Composer 初期画面

WordPress管理画面の左メニュー【設定】内の【Live Composer】の【Settings】タブでプラグイン設定を確認してみます。

Live Composer 設定

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

Open in Live Composer】で起動します。

フロントエンドエディタ

モジュールがウィンドウ下に用意されており、ドラッグ&ドロップで挿入します。

行と列の追加

行を全幅に変更し、列を追加。

モジュールの追加

モジュールのテキストと画像を追加。

実際に公開したウェブページをパソコンで確認。

実際のページ パソコン

Elementor Page Builder

Elementor Page Builder

プラグイン公式ページ:Elementor Page Builder

有効化済みインストール レビュー数 レビュー平均点
40,000以上 162件 4.9

Elementor Page Builderの設定

Elementorは、フロントエンドエディタで固定ページが構築できるプラグイン。
WordPress管理画面の左メニュー【Elementor】内の【設定】を確認してみます。

Elementor 設定

一般設定

投稿タイプ フロントエンドエディタが使用できる投稿タイプを選択。
役割の除外 フロントエンドエディタが使用できない権限グループを選択。

スタイル設定

Disable Global Colors グローバル色を無効にする。
Disable Global Fonts グローバルフォントを無効にする。
デフォルトの汎用フォント デフォルトで使用するフォントファミリーを入力。
コンテンツの幅 最大幅を設定
Stretched Section Fit To 行の「伸縮セクション」をONにした時に、フィットさせる親ボックスの要素セレクタを入力。

Elementor Page Builderの使い方

「固定ページを編集」を開きます。

Elementor テキストエディタとページビルダーの切り替えタブ

Elementorで編集】ボタンをクリックすると、フロントエンドエディタが起動。

Elementor フロントエンドエディタ

要素がウィンドウ左に用意されており、ドラッグ&ドロップで挿入します。

Elementor 使い方 動作デモ

実際に公開したウェブページをパソコンで確認。

実際のページ パソコン

Page Builder by MotoPress

Page Builder by MotoPress

プラグイン公式ページ:Page Builder by MotoPress

有効化済みインストール レビュー数 レビュー平均点
10,000以上 90件 4.8

Page Builder by MotoPressの設定

MotoPressは、フロントエンドエディタで固定ページが構築できるプラグイン。
WordPress管理画面の左メニュー【MotoPress】内の【Settings】を確認してみます。

MotoPress 設定

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の使い方

「固定ページを編集」を開きます。

MotoPress Visual Builder

Visual Builder】タブを開く。

MotoPress Open Visual Builder

Open Visual Builder】ボタンをクリックすると、ビジュアルビルダーが起動。

MotoPress ビジュアルビルダーを起動

ビジュアルビルダーの動作を実際に確認。

Motopress 使い方 動作デモ

オブジェクトをドラッグ&ドロップで配置すると、自動で行と列が設定されるため、直感操作でウェブページを構築できます。

Motopress 使い方 列の割合を変更

列の比率は、ドラッグで簡単に変更可能。

※挿入したオブジェクトを複製するには、プロバージョンでしか出来ない。

実際に公開したウェブページをパソコンで確認。

実際のページ パソコン

Pootle Pagebuilder

Pootle Pagebuilder

プラグイン公式ページ:Pootle Pagebuilder

有効化済みインストール レビュー数 レビュー平均点
3,000以上 22件 4.4

Pootle Pagebuilderの設定

Pootle Pagebuilder settings

Responsive レスポンシブウェブデザインの有効化
Mobile Width モバイル端末の最大幅
Modules insert panel position ライブエディタで使用するモジュールメニューの位置
Delete ALL data on uninstall アンインストール時のデータ削除

Pootle Pagebuilderの使い方

「固定ページを編集」を開きます。

Pootle Pagebuilder ページビルダータブ

page Builder】タブを開く。

Pootle Pagebuilder ページビルダーを起動

ページビルダーでは、テキストエディタしか挿入できない。

Pootle Pagebuilder 使い方 動作デモ

ライブエディタは、「固定ページを編集」から直接開く方法がない。
まず、パーマリンクから実際のページプレビューを開く。
上部の管理バーにある【Live edit】から起動できる。

Pootle Page Builder Live edit

全ての行を消去するとWarning: Invalid argument supplied for foreach()とエラーが出る。

Page Builder by WooRockets.com

Page Builder by WooRockets.com

プラグイン公式ページ:Page Builder by WooRockets.com

有効化済みインストール レビュー数 レビュー平均点
10,000以上 22件 3.8

Page Builder by WooRockets.comの設定

WooRockets 設定

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の使い方

「固定ページを編集」を開きます。

WooRockets ページビルダー

WR PageBuilder】タブを開く。

WooRockets ページビルダーを起動

ページビルダーの動作デモ。

WooRockets 使い方 動作デモ

Unyson

Unyson

プラグイン公式ページ:Unyson

有効化済みインストール レビュー数 レビュー平均点
10,000以上 22件 3.8

Unysonの設定

Unyson(ユニゾン)は、ページビルダーで固定ページが構築できるプラグイン。
Unysonは、初期状態では何も機能がない。
WordPress管理画面の左メニュー【Unyson】を確認してみます。

Unyson 設定

Unyson Extensionsで、拡張機能の管理が出来ます。
ページビルダーを使うために、「Page Builder」の【Download】をクリックし有効化します。

Unyson ページビルダー 有効化

「Page Builder」の【Settings】から設定を行います。

Unyson ページビルダー設定

Activate for ページビルダーが使用できる投稿タイプを選択。

Unysonの使い方

「固定ページを編集」を開きます。

Unyson Visual Page Builder ボタン

【Visual Page Builder】ボタンをクリック。

Unyson ページビルダー起動

ページビルダーの動作デモ。

Unyson 動作デモ セクション、カラムの追加

セクションとカラムの追加。

Unyson 動作デモ エレメントの追加

エレメント(テキスト、画像)の追加。

100万インストール超えのモンスタープラグインPage Builder by SiteOriginは、日本語翻訳が正しくない箇所はありますが、インターフェースが直感的に分かるデザインになっており、あまり問題ではない。
使いやすさ、安定感、制作スピード、負荷、あらゆる点で高水準にまとまっている。
ページビルダーとライブエディタで切り替えできる点も良い。
拡張用プラグインで機能を増やすことも出来る。

Page Builder by MotoPressは、インストール数やレビュー数は少ないが、使ってみるとビジュアルビルダーのインターフェースがアイコンで分かりやすい。
特徴的なのは、テキストや画像などのオブジェクトを挿入すると自動で行と列を設定してくれる。列の割合もドラッグで変更できる。
他のページビルダーと比べ、ワンアクション少ない手順で直感的にページ構築ができ、制作スピードにおいて突出していると感じた。

Unysonは、ページビルダーのみで実際の表示を確認しながら編集することは出来ない。
インターフェースは見やすく、動作も安定している。
ページビルダー以外にも拡張機能があるので、チェックしてみると面白いかもしれない。




にほんブログ村 地域生活(街) 九州ブログ 久留米情報へ
にほんブログ村 ライフスタイルブログ ライフスタイル情報へ