『Divi』vs『Elementor』徹底比較!

Divi対Elementor

「DiviとElementorどちらも勧めてるけど、どっちにしていいかわからない」
「DiviとElementortって何が違うの?」

このような疑問を持っている方もいるのではないでしょうか?
DiviもElementorも、WordPressで複雑なレイアウトをコード無しで高速で作れるページビルダーです。
二つとも素晴らしいツールで似ていますが、大分違う部分もあります。

この記事を読むと、この二つのページビルダーの違いをより深く理解できると思います。
どちらを使うべきか迷ってる方は是非読んでみてください。

関連記事
>>『Elementor』自由にページを作れるWordPressプラグイン
>>『Divi』WordPressでカスタマイズしやすいテーマはこの一択【目から鱗】
公式サイト(英語)
>>Elementor
>>Divi

Elementorは通常版とPro版のどちらも含むものとします。

DiviはWPテーマで、ElementorはWPプラグイン

まずいきなり違うのがこれです。
DiviはWordPressテーマです。(プラグインバージョンのDiviも存在しますが、マイナーなため割愛します。)
しかも世界一の使用率を誇るテーマです。
ElementorはWordPressのプラグインなんです。

Elementorはプラグインなのでテーマは自由

Elementorのインストール
Elementorは普通にWordPressのプラグイ検索出てきます。

プラグインだろうがテーマだろうが出来ることは同じだろ、と思うかもしれませんがプラグインだった場合テーマは自由です。
自分の好きなテーマにElementorをインストールすることが出来るんです。
Elementorのために作られたテーマなども存在しますよ。
詳しくは、>>『Elementor』自由にページを作れるWordPressプラグイン

Diviはテーマなのでカスタマイズ性が高い

Diviはテーマ

Diviはテーマなので、ページビルダーの外の設定も可能です。
テーマカスタマイザーも通常のテーマよりもオプションが多く、細かく設定可能です。
そしてheadやbodyにコードを追加したい場合など、テーマ内ですることが可能です。
子テーマを作ってカスタマイズすることもできますね。

テーマかプラグインかは状況次第

この選択にはどちらが良いというものではなく、今使ってるテーマが好きならElementorにすればいいですし、最初から全部パーケージになってるテーマを使いたいと思うならDiviにすればいいと思います。

DiviとElementorの共通の機能

DiviとElementorの違いを説明する前に、共通の機能を紹介します。

モジュールを組み合わせてページを自由に構築

Elementorのモジュール
Elementorのモジュールリスト
Diviのモジュールリスト
Diviのモジュールリスト

このようにモジュールのリストがあり、そこから挿入したいモジュールを選びます。
これらを組み合わせてページを構築していきます。

わかりやすいカラムを使用

Elementor構造を選択
Elementorでカラムの設定
Diviの使い方、通常のセクションと行
Diviでカラムの設定

このように画面のセクションをカラムでわけ、そこにモジュールを挿入していくわけです。
カラムのサイズや位置も自由自在です。

見たまま編集できる

DiviもElementorも見たまま編集できる
Diviで画面のテキストを編集中

どちらも編集してる画面が、実際のウェブページと同じになります。
多少の誤差が出る場合もありますが、ほぼ同じです。

スマホ画面も見たまま編集可能

Elementorでスマホ画面で編集
Elementorでスマホ画面で編集

DiviもElementorもスマホの画面のサイズに設定してそのまま編集可能です。

作ったレイアウトやサイトのパーツをサイト内外で使い回す

DiviでもElementorでもサイトのパーツをサイト内に保存し再利用可能です。
そしてそれをファイルにしインポート・エクスポート可能です。

Diviのみに存在する機能

次にDiviにのみ存在する特殊機能を説明します。

ワイヤーフレームモード

Diviの特殊機能、ワイヤーフレームモード

ワイヤーフレームモードは、現在作ってるページの構造をわかりやすいワイヤーフレームで見ることができます。
Diviの通常のモードをビジュアルビルダーと言うのですが、色々なモジュールを挿入していくとゴチャゴチャしてきますので、そんな時にかなり役にたつツールです。
そしてワイヤーフレームからウェブページを構築し、ビジュアルビルダーで肉付けと飾り付けてしていくのも王道です。

グローバルモジュール初期設定

モジュールのスタイルをサイト全体で設定できる機能です。
コードは書きません。
例えば、サイト全体のテキストモジュールの文字のサイズの初期設定を変えることができます。
Elementorでもある程度はサイト全体の設定を変えることが出来るのですが、モジュール個々で設定は出ません
詳しくはこの記事で。

Elementorのみに存在する機能

ではElementorではどんな特殊機能があるのでしょうか。

ビルダーの外をコントロールするテーマビルダー

Elementorテーマビルダーの新規作成
テーマビルダーでテンプレートを作成

テーマビルダープロ版に付いてくる機能です。
最初に説明したようにElementorはテーマでは無いので、テーマのカスタマイザーにはアクセス出来ません。
なのでElementorが出来るのはページ内の操作のみ、と思われがちですがテーマビルダーを使えばサイト全体で使うパーツを作れます
この動画で詳しく説明しています。

ポップアップビルダー

Elementorでポップアップを作る

Elementorではポップアップを作り簡単に使うことが出来ます。
これはDiviではそのままでは出来ません

まずテーマビルダーでまずポップアップを作ります。
そしてそれをセーブし、ページのボタンなどのクリックの設定でそのポップアップを選ぶだけです。

Elementorのポップアップ機能
このようにテンプレートを選ぶだけです

DiviとElementorスピード比較

操作感は何もしないとDiviの方が遅い

正直言うと、操作感はDiviの方がモッサリしてることが多いです。
なぜかと言うと、ふたつ理由があります。

Diviの方が必要とするサーバーのスペックが高いから

例えば、PHPのメモリの設定もElementorは最低64MBとなっていますが、Diviは128MBです。
サーバーの設定をしっかりすれば、このモッサリ感も解消することができます。
設定方法は次の記事で説明しています。

Diviの方が操作の自由度が高い

注意して欲しいのは、作れるレイアウトの自由度の話ではなく、操作してる時の自由度です。
Elementorの方が落ち着いてる感じです。

この動画で表示してるのは、決して誇張したものではありません。
実際にこのように操作できるんです。
ですがこれ快適に使うには、ちゃんとサーバーを設定する必要があるわけです。
ちょっと操作してみたくなった人は、自分が作ったhttps://demodivi.comというサイトでDiviを無料で試せるので少し触ってみてください。

サイトのロードスピードもDiviの方が遅い

これも紛れもない事実です。
すっかり同じレイアウトをDiviとElementorで作った場合、Diviの方が遅いです。

DiviElementor
大きさ690KB600KB
スピード2.1秒1.9秒
リクエストの数4330

これは同じ環境で測った時の計測結果です。
Diviの方が少しだけ遅くなります。
でもこれも設定次第です。

どちらも超高速になる

これは先日作ったDiviのサイトのスピードテストの結果です。
https://gtmetrix.comと言うサイトで計測しました。
日本外からサイトにアクセスしてるのにもかかわらず、1秒以内にロードが完了しています。
なのでスピードも設定次第と言うことですね。
どうやって高速にしたのか知りたい方は、この記事からどうぞ。

DiviとElementorの価格とライセンスの比較

Elementorの価格の違い
Elementorの価格
Diviの価格の違い
Diviの値段

あまりにもプランが違うので、ちょっと特徴をまとめていきますね。

Diviは使えるサイトは無制限、Elementorは1、3、1000サイトとプランが違う

Diviは二つプランがありますが、どちらのプランを選んでもDiviをインストールしていいサイトの数は無制限です。
Elementorは次のような価格になっています。

サイトの数価格(年)
$49
3$99
1000$199

Elementorは一年おきにライセンス更新、Diviは生涯プランあり

Elementorの値段を上に表示しましたが、これは1年間にかかるお金です。
Diviは1年間だと$89ですが、$249払ってしまうと一生ライセンスが使えるようになります。

Diviは使えるサイト無制限で、生涯ライセンスがあるので$249払うだけで、一生無制限で使えます
Diviの方が良く聞こえますよね。
でもちょっと待ってください。

Elementorは無料版があり、しかも機能がかなり充実してる

Elementorの無料版はかなり使えます。
Proじゃないと使えない機能もありますが、正直プロ版じゃなくても十分な場面の方が多いと思います。

価格に関して言うなら、有料版ならDiviの方が圧勝です。
ですが無料で使えるElementorもいいですね。
購入を考えてる人のために購入ガイドを書きましたので、どうぞ参考にしてください。

>>Diviの購入ガイドはこちら
>>Elementorの購入ガイドはこちら

DiviもElementorもどちらも素晴らしい

こっちの方がいい!って簡単に言えたらいいのですが、結局はどちらも素晴らしいです。
強いて言うなら、小さく始めるなら、Elementorがおすすめです。
無料版から始められますから。
将来的に沢山サイトを作ってライセンス気にしたくない、と言うならDiviの生涯プランがいいと思います。
まずは試してみてください。

Elementorはそのままプラグインでインストールできます。
Diviはhttps://demodivi.comで5日間試すことができます。

読んでいただき、ありがとうございました。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です