Elementor vs Gutenberg – 2021年の対決：どちらのページビルダーが優れていますか？

WordPressがページビルダーなしで機能した時代を思い出すことができますか？

時が経ち、テクノロジーが進歩し、機能が非常に限られているWordPressは、WordPressテーマの機能、特にページビルダーなどのWordPressプラグインのおかげで、今では漠然とした記憶に過ぎません。

この記事では、OceanWPユーザーの間で最も人気のある2つのページビルダーであるElementorとGutenbergについて説明します。 ここで提供する情報は、私たちの個人的な意見や経験だけでなく、日常的に受け取るOceanWPユーザーのフィードバックにも基づいています。

対決を始めましょう！

Elementorとは何ですか？

500万回以上のアクティブインストールのうち平均評価は4.7で、間違いありません。Elementorは、WordPressユーザーの間で最も人気のあるページビルダーです。

Elementorは2016年に最初に導入され、非常に迅速にリードを引き継ぎました。 そのほぼ瞬時の人気の理由は、 Elementorの視覚的なドラッグアンドドロップビルダーと通常のWordPressテキストエディター（グーテンベルク以前の時代）の違いでした。

WordPressユーザーは、あらゆる種類のカスタムコーディングやカスタムHTML / PHP / CSSテンプレートの作成の必要性を減らしたさまざまなウィジェットのおかげで、最終的にMicrosoftWordに似ていないものを手に入れました。

そして、あなたがいくつかの新しいElementor WordPressウェブサイトテンプレートを探しているなら？ 最新のHubSpotコレクションをご覧ください。

このElementorとGutenbergの比較では、無料バージョンのElementorの機能のみを取り上げます。

グーテンベルクとは何ですか？

ブロックエディターとしても知られるグーテンベルクは、デフォルトのWordPressページ/投稿エディターです。 2018年にWordPressBebo5.0バージョンで初めて導入されました。

WordPressチームは、より高度で直感的なデフォルトエディターに対するコミュニティのニーズと、Webサイト構築のトレンドを理解していました。 このようにして、グーテンベルクエディターが誕生し、その前身であるクラシックエディターに取って代わりました。

グーテンベルクはまだ十分に開発されておらず、そのピークは今後数年で予想されますが、WordPressチームは、コンテンツエディターからページビルダーに移行したシンプルで強力なビジュアルエディターである、彼らが約束したものを提供しました。

また、Gutenberg WordPress Webサイトテンプレートをお探しの場合は、Gutenbergを使用するWooCommerceテンプレートの最新コレクションをご覧ください。

Elementor vs Gutenberg：比較

Elementor vs Gutenberg：使いやすさ

両方のツールを使用することに喜びを感じたWordPressユーザーなら誰でも、私たちも同意できることを教えてくれるでしょう。Elementorは使いやすさの比較に勝っています。

Elementorは、その非常に高い柔軟性と機動性のおかげで、高度な画像編集ツールに非常によく似ています。 必要なウィジェットを選択して、コンテンツの任意の場所に配置するだけです。それだけです。

セクションを作成する必要がありますか？ または、列数が異なるセクションですか？ デバイスごとに異なるデザインまたは画像を選択しますか？ また、問題ありません。 Elementorを使用すると、コンテンツ全体を完全に設定できます。 さまざまなアニメーションは言うまでもなく、Webサイトの設計者は（速度測定ツールはそうではありませんが）好きです。

一方、グーテンベルクはクリーンでシンプルなページビルダーです。 Elementorとは異なり、Gutenbergは非常に人気のあるドラッグアンドドロップ機能を提供していません（少なくともまだ）。 ブロックを簡単に追加および移動できますが、Elementorの場合ほど単純ではありません。 それに加えて、ブロックのスタイリングは、特にElementorが提供する豪華な環境に慣れている人にとっては、やや難しい場合があります。

グーテンベルクは3年前からデフォルトのWordPressエディターですが、それを試してみたがらない人もいます。 そのようなユーザーはページビルダーを好みません–彼らは他の何よりも古典的な（コンテンツ）WordPressエディターを好みます。

私たちは皆習慣の生き物なので、古典的なエディタが使いやすいという理由だけで、グーテンベルクを直感的でなく、使いにくいものとしてマークすることは客観的ではないことがわかります。 しかし、私たちはあなたに1つのことを言うことができます-あなたがグーテンベルクで1つの投稿を作成し、その最初の学習曲線を克服したら、あなたはそれを使い続けるでしょう。

Elementor vs Gutenberg、どちらを選択しますか？ 両方を使用するため、答えは常にOceanWPです。

PSグーテンベルクのブロックの1つはクラシックブロックでもあるため、古い機能を使用するために追加のプラグインを使用する理由はありません

ElementorとGutenbergの使いやすさの概要

Elementorは、Gutenbergよりも使いやすい高度なウィジェットと編集ツールを提供しますが、Webサイトのページをレスポンシブにする必要性が明らかになると、同じように困難になる可能性があります。

グーテンベルクには、簡単に克服できる独自の学習曲線があります。 Gutenbergがどのように機能するかを理解すると、Elementorを含む他のすべてのページビルダーを管理するのに役立ちます。

Elementor vs Gutenberg：機能

Elementorにはウィジェットがあり、Gutenbergにはブロックがあります-それは簡単です。

ただし、ウィジェットという用語は、組み合わせた要素を使用する機能を指すときに、WordPressで長い間使用されてきました。 たとえば、見出しのある画像、さまざまなクエリオプションのあるブログ投稿のリストなどです。

Elementorウィジェットも同様に機能します。つまり、グループ化されたオプションと複数のクエリおよびスタイル設定を備えた機能を提供します。 当然、 Elementorウィジェットは、WordPressウィジェットよりもはるかに多くのオプションと汎用性を提供します（[外観]> [ウィジェット]）。

グーテンベルクは、段落ブロック、画像、ビデオなどの非常に基本的なブロックから始めました。ブロックにはスタイリングオプションもありますが、これらの機能はElementorほど豊富でも直感的でもありません。 しかし、公平を期すために、ユーザーフレンドリーな設定に関しては、Elementorは間違いなく先導しています。グーテンベルクと比較しただけでなく、利用可能なほぼすべてのページビルダーと比較した場合です。

一方、「過度に単純な」ブロックの問題は、より多くの機能とユーザーオプションを備えた高機能ブロックを提供する追加のGutenbergプラグインのいくつかを使用して簡単に解決できます。

そういえば、私たちの最新製品であるオーシャングーテンベルクブロックを探索する機会はありましたか？ お客様の場合、このプラグインはダッシュボードでダウンロードして使用できます。 プロになることを検討している場合は、最新のオファーを確認してください。

ElementorとGutenbergの機能の概要

Elementorはウィジェットを使用し、Gutenbergはブロックを使用します。 Elementorの無料バージョンには、すべてのWebサイト設計者が素晴らしいWebサイトを構築するために使用できる多くの高度なウィジェットが付属しています。 より高度なブロックを入手するには、Gutenbergに追加のプラグイン（Ocean Gutenbergブロックなど）が必要です。

Elementor vs Gutenberg：パフォーマンス

「ページ速度」ではなく「パフォーマンス」という用語を意図的に使用していることに気付くかもしれません。

その理由は明白でわかりやすいものです。ほとんどのオンラインツールは、Webサイトの速度を反映していないWebサイトのスコアを測定します。 それとは別に、ウェブサイトの速度が依存する要因が多すぎます。 悲しいことに、Webサイトのパフォーマンスの成功は、実行しているテーマやプラグインだけに依存しているわけではありません。

言うまでもなく、Webサイトの所有者は通常、これらのツールがWebサイト全体のステータスを反映しておらず、テストされたURLに割り当てられたページのみを反映していることを忘れています。 つまり、ホームページの場合と同じように、すべてのWebサイトページを同じように管理します。

ただし、テーマとプラグインの品質は、Webサイト全体のパフォーマンスに大きな影響を与える可能性があります。 そして、ページビルダーもそうです。

WordPressセットアップの比較

始める前に、 WordPressテンプレートの作成方法について少し紹介したいと思います。 このようにして、ElementorとGutenbergの比較結果を完全に理解することができます。

WordPressテンプレートは、サンプルのWebサイトコンテンツ（ページ、ブログ投稿、事前作成およびスタイル設定）です。 これらのテンプレートは、構築プロセスをスピードアップしたり、刺激を与えたりするのに役立ちます。 Ocean Webサイトテンプレートの場合、Elementorページビルダーを使用すると、メインページ（ホームページ、連絡先、概要など）でのみ使用されます。

ブログ投稿、ショップ、製品ページ、アーカイブページなど、他のすべてのページは、OceanWPテーマによって管理されるデフォルトのWordPressページです。

この小さな実験では、2つのWordPressWebサイトテンプレートであるAgendaとGutenbergAgendaを使用しました。

一見して画像を見るだけで、これら2つの違いがわかり、どちらがElementorを使用して作成され、どちらがGutenbergを使用して作成されたかを推測できますか？

両方のWebサイトは同じサーバー上にあり、まったく同じ構成になっています。

• ソフトウェア：Apache / 2.4.51（Unix）
• MySQL：（Ubuntu）v5.7.36
• PHP：7.4.24
• WordPress：5.8.1
• WordPress（PHP）のメモリ制限：256M
• WordPressテーマ：OceanWP （点滅点滅）

両方のウェブサイトには、 WordPressプラグインの大部分が共通しています：

• オーシャンエクストラ
• 海洋製品の共有
• オーシャンソーシャルシェアリング
• WooCommerce
• TIWooCommerceウィッシュリスト
• WPforms Lite
• オーシャンスティッキーヘッダー
• WPロケット（WordPressテンプレートの作成には使用されません）。

アジェンダWordPressテンプレート：

• Elementor
• OceanElementorウィジェット

グーテンベルクアジェンダWordPressテンプレート：

• オーシャングーテンベルクブロック

ご覧のとおり、Gutenbergバージョンでは、実行するために追加のプラグインは必要ありません。 必要なのは、デフォルトのWordPressブロックエディターであるGutenbergだけです。

Elementor vs Gutenberg：Google Page Speed Insights

テキストの一部をスキップしてここに直接来たすべての人にとって、 Google PageSpeedInsightsはウェブサイトの速度を測定しないことを強調することは重要です。 代わりに、さまざまな要素を考慮してWebサイトにスコアを付けます。

さらに、スコアが誤検知になる可能性があるだけでなく（スコアが低いだけでなく、Webサイトが高速である、またはその逆）、実際の画像を描画しないことが多いことを認識することも重要です。 モバイルPSI（Page Speed Insights）スコアに関しては、 Googleは携帯電話を使用してWebサイトを閲覧する実際のユーザーから情報を収集します。

これは、実際の状況がすぐにではなく、時間の経過とともに見えるようになることを意味します。 これはまた、WordPressをインストールしたり、ページを作成したりするときに、スコアを確認して作業を試みるべきではないことを微妙に示唆していることを意味します。情報は正確ではありません。

ウェブサイトのパフォーマンスとデータ処理に関するデータ収集がどのように機能するかを完全に理解するには、Googleの従業員からのこの返信を確認することをお勧めします。 ソースから直接答えを得るよりも良いことはありません。

それでも、スコアがユーザーにとって重要であることは理解しています。 そしてそれが私たちがあなたと結果を共有している理由です。

モバイルPSIスコアに関しては、Elementor vs Gutenbergレースでは、勝者はGutenbergです。

すべてのデータの違いは非常に明白であり、グーテンベルクを支持しています。

私たちを最も驚かせた結果は、 Total Blocking Time （TBT）の違いです。 Elementorで作成されたページの場合、TBTは310ミリ秒でしたが、Gutenbergで作成されたページのTBTはわずか50ミリ秒でした。

デフォルト設定を実行する代わりに、WP Rocketをアップロードして適切にセットアップする前に、実際にWebサイトで画像を最適化した場合、どのような結果になるか想像できますか？ 私たちのようにならないでください–画像を最適化し、Webサイトに最適なキャッシュ設定を見つけてください。

デスクトップのElementorとGutenbergの比較では、結果がGutenbergをわずかに支持しているにもかかわらず、違いはそれほど劇的ではありません。 少なくとも、PSIによるものではありません。

そのため、ユーザーによく推奨する別のツールであるGTmetrixに移行しています。

Elementor vs Gutenberg：GTmetrixの比較

GTmetrixは、Agenda WordPressテンプレートの両方のバージョン（ElementorとGutenberg）に満足しているようです。

しかし、インタラクティブ時間とDOMインタラクティブ時間の大きな違いを無視することはできません。どちらもグーテンベルクを支持する指標です。

インタラクティブまでの時間：Elementor vs Gutenberg ： 912msvs408ms 。

DOMインタラクティブ時間： Elementor vs Gutenberg ： 714msvs405ms 。

ElementorとGutenbergStructureの比較に関しては、GTmetrixは再びグリーンスイープを示しています。

しかし、すぐに私たちの注意を引いたことが1つあります。それは、 DOMサイズです。 繰り返しますが、結果はグーテンベルクに有利です。

過度のDOMサイズを避けてください：Elementor vs Gutenberg ：1251要素vs929要素。

グーテンベルクのファンであろうとなかろうと、ほぼ同じコンテンツのページで要素が300以上少ないことは、大きなメリットであることを認める必要があります。 言うまでもなく、それはすぐに使える勝利でもあります。

全体として、グラフは話されています。 パフォーマンスと構造のスコアはまったく同じですが、両方のWebサイトがGTmetrixグレードA、パフォーマンススコア100％、構造スコア98％を獲得しています。グーテンベルクを支持する多くの統計があり、あなたにとって重要かもしれません。最適化とパフォーマンスの大ファン。

GTmetrixから判断すると、物事は明確です。 ElementorとGutenbergのパフォーマンスの比較に関しては、Gutenbergが絶対的な勝者です。

しかし、ちょっと待ってください。 これは、Elementorが不良であり、使用すべきではないことを意味しますか？ いいえ、満足のいくスコアを達成することは、Elementorを使用して行うこともできます。

結果は、グーテンベルクが即座に、手間のかからない、前衛的なパフォーマンスの勝利を提供することを示しているだけですが、Elementorに関しては、知識が豊富で責任あるWebデザイナーである必要があります。

ElementorとGutenbergのパフォーマンスの概要

どちらのWebサイトテンプレートも速度/スコアが最適化されておらず、両方でデフォルトのWPロケットキャッシュ設定を使用しています。 Gutenbergは、すぐに使用できるパフォーマンスの向上を提供し、メトリックの違いのいくつか、特にTotal Blocking Time、DOMサイズ、Time to Interactive、およびDOMInteractiveTimeメトリックはElementorと比較して非常に劇的です。

最高のウェブサイト構築慣行に従い、適切なツールを使用する高度な最適化スキルを持つ経験豊富なウェブサイトデザイナーは、Elementorを使用して最高の速度またはスコアを達成するのに問題はありません。

Gutenbergを利用したWebサイトは、さまざまな追加のElementorプラグインと組み合わせたElementor Webサイトと比較して、スムーズに実行するために必要なリソース（主にWordPressメモリ制限）も少なくて済みます。

Elementor vs Gutenberg：メリット

ElementorとGutenbergのメリットの比較に関しては、決定するのは難しいです。

各ページビルダーには、独自の利点と使用する理由があります。 同様に、各ページビルダーには短所があります。 長所と短所の両方が主観的な性質のものである可能性があります。

もちろん、ドラッグアンドドロップ機能があるため、Elementorは誰もが大好きですが、Gutenbergの使用もそれほど難しくありません。

Elementorの応答性設定と、デバイスに基づいてセクションや要素を非表示にしたり、デバイスに基づいて要素を完全にスタイル設定したりできることも、それを愛する追加の理由の1つです。 今では、ウェブサイトの構築にはさまざまなブログで読んでいたよりも多くの労力が必要であることに気付いた初心者が、始めたばかりのときに落胆したり圧倒されたりするのと同じ機能です。

ユーザーフレンドリーな使用法と創造性を解き放つという観点から、私たちはElementorに投票します。

しかし、ユーザーがElementorの代替案について質問すると、変更が必要な主な理由として安定性が挙げられます。 明確にするために、Facebookのような企業でさえ、間違いやバグが発生します。 また、Webサイトの所有者と開発者がどのような設定を実行していても、不便を避けるために責任を負い、ベストプラクティスに従う必要があります。 はい、ステージング領域でバックアップを取るか、新しい更新をテストすることについて話しています。

実際、これらのプラクティスに従った経験豊富なユーザーでさえ、Elementorの革新と変更のために少し恨みを抱き、長期間にわたってこのツールを[適切に]使用する可能性がないことがよくあります。

グーテンベルクに関して言えば、開発者として、そのパフォーマンス（フロントエンドとバックエンドの両方）、アクセシビリティ、安定性に根ざしています。 一部のGutenbergプラグインは、他の非Gutenbergページエディタと同じかそれ以上の肥大化をHTMLに追加する可能性があるため、賢明に選択してください。

グーテンベルクはエレメンターほど初心者に優しいようには見えませんが、初心者にはぜひ試してみることをお勧めします。 また、私たちの推奨事項は、より専門的または経験豊富なアプローチを必要とするいくつかの高度な機能がないことに正確に基づいています（レスポンシブモードでの編集やさまざまなデバイスのコンテンツの調整など）。

グーテンベルクに取り組み、その扱い方を学ぶ人は、Elementorを含む他のすべてのページビルダーも迅速に把握できると言っても過言ではありません。

ElementorとGutenbergのメリットの概要

Elementorの応答性オプションと設定は、必要に応じて、すべてのデバイスのWebサイトデザインを調整するのに役立ちます。 しかし、それはまた、ウェブサイトの構築に彼らがそれについて読んだよりも少し多くの時間、労力、そして練習が必要であることに気づいたら、 WordPressの初心者をからかうことができるのと同じ設定です。

グーテンベルクは、最初は威圧的でまったく直感的ではないように見えるかもしれませんが、実際には驚くべき学習の出発点です。 グーテンベルクを克服することは、誰もがすべてのページビルダーをよりよく理解するのに役立ちます。 さらに、グーテンベルクは、より安定性、アクセシビリティ、SEO、および全体的なパフォーマンスの向上を提供します。

Elementor vs Gutenberg：どちらのページビルダーが優れていますか？

あなたは彼らが言うことを知っています– 1つの靴がすべての足に合うわけではありませんが、最初に靴を試さない限り、それはわかりません。

Elementorを愛するユーザーもいれば、Gutenbergを愛するユーザーもいますが、その背後にはさまざまな理由があります。 私たちはあなたのウェブサイトについて話しているので、あなたとあなたのウェブサイトのニーズに合うものを見つけることが不可欠です。

ユーザーが、ウェブサイトの安定性、パフォーマンス、SEO、アクセシビリティ、およびウェブサイト構築に不可欠な多くのことを損なうことなくElementorの使用に関するアドバイスを求めてきた場合は、 WordPressウェブサイトテンプレートの構築と同じようにElementorを使用することをお勧めします。 。 魅力的で魅力的である必要があるメインページでElementorを使用します–他のすべてはWordPressとあなたのテーマに任せます。

つまり、カスタムアーカイブテンプレートの作成は避けてください。特に、経験豊富なデザイナーでない場合や、Webサイト全体の最適化の経験がほとんどない場合は避けてください。

あなたが初心者で、追加の編集やスタイリングについてあまり心配したくない場合、またはあなたがウェブサイトのデザインにもう少し努力することを気にしないプロである場合（私たちはドラッグがないことを指します-そして-ドロップ機能）、さまざまなアニメーションオプションがないことに異議を唱えないでください。そうすれば、間違いなくグーテンベルクを選択する必要があります。 特に、すべてのパフォーマンス上の利点と、グーテンベルクを使用して同じように高品質のデザインを作成できるという事実を考慮してください。

絶対に絶対にやるべきではないことの1つであり、そのようなデザインを見てきました。Elementorでカスタムテンプレートを作成し、それと組み合わせてGutenbergを使用してコンテンツを追加することです。 あなたの人生を本来あるべきよりも難しくしたり、あなたのウェブサイトを殺したりしないでください

選択したページビルダーがElementorでもGutenbergでも、答えは常にOceanWPとOcean Core Extensions Bundleです。これは、目的のWebサイトデザインを実現するためのウィジェットとブロックの両方を提供するためです。

あなたの評決は何ですか？ お気に入りのページビルダーとその理由は何ですか？ はい、両方を選択して使用できます。

ウェブサイトの構築を休んだら、コメントを残して、ご意見をお聞かせください。