WordPress制作ではElementorとブロックエディタ、どちらを選ぶべき?
WordPressでホームページを作る際、「Elementorとブロックエディタのどちらを使うべきか」と迷うことがあります。
Elementorは、実際の画面を見ながらパーツを配置することでデザインができる、「ページビルダー」と呼ばれるプラグインです。コードを書かなくてもデザインを細かく調整しやすく、短期間で見栄えのするページを作れるというメリットがあります。
一方、ブロックエディタはWordPress本体に標準搭載されている編集機能です。文章、画像、見出し、ボタンなどをブロック単位で組み合わせてページを作ります。Gutenberg(グーテンベルク)と呼ばれることもあります。
ブロックエディタ以前はデザイン・レイアウトのしやすさから、Elementorなどのページビルダープラグインが使われる事がありましたが、現在はブロックエディタでもレイアウトを組みやすくなっています。
どちらにもメリットはありますが、企業サイトを長く運用し、担当者が継続的に更新していくのであれば、基本的にはブロックエディタをおすすめします。
Elementorとブロックエディタの特徴、メリット・デメリットを比較しながら、その理由を説明します。
Elementorとブロックエディタの違い
Elementorとブロックエディタは、どちらもWordPressのページを編集するためのものですが、考え方が異なります。
Elementorは、WordPressに追加して使用する外部プラグインです。編集画面上に見出し、画像、ボタンなどの部品をドラッグ&ドロップし、余白、文字サイズ、位置などを細かく調整できます。
ブロックエディタはWordPressの標準機能です。文章や画像をブロックとして追加し、必要に応じて並び替えながらページを作ります。
大まかな違いをまとめると、次のようになります。
| 比較項目 | Elementor | ブロックエディタ |
|---|---|---|
| WordPressでの位置付け | 外部プラグイン | WordPress標準機能 |
| デザインの自由度 | 高い | 標準状態ではやや限定的 |
| 操作方法 | 画面を見ながらドラッグ&ドロップ | ブロックを追加して編集 |
| 日常的な文章・画像更新 | 操作に慣れが必要 | 比較的分かりやすい |
| 誤操作の起こりやすさ | レイアウトまで動かせてしまう | 編集範囲を整理しやすい |
| 表示速度 | 構成によって重くなりやすい | 比較的軽く作りやすい |
| HTMLの構造 | 階層や要素が増えやすい | 比較的シンプルにしやすい |
| 依存度 | Elementorへの依存が大きい | 特定プラグインへの依存を抑えやすい |
| 引き継ぎ・改修 | Elementorの知識が必要 | WordPress標準の知識で対応しやすい |
なお、この記事でいうブロックエディタには、ブロックテーマやフルサイト編集(FSE)までは含めていません。
従来型のWordPressテーマを使いながら、ページの中身をブロックエディタで編集し、必要に応じてブロックパターン、カスタムブロック、カスタムフィールドを組み合わせる方法を想定しています。
Elementorの特徴
Elementorは、WordPress上で自由度の高いページを作るためのページビルダーです。
編集画面と実際の表示が近いため、完成形を確認しながらレイアウトを調整できます。パソコン、タブレット、スマートフォンごとに、一部の余白や文字サイズなどを変更することも可能です。
無料版でも基本的なウィジェットやドラッグ&ドロップ編集を利用でき、さらに高度な機能が必要な場合はElementor Proを追加する仕組みです。
Elementorのメリット
Elementorの大きなメリットは、コードを書かなくてもデザインを作り込みやすいことです。
文字や画像を配置し、余白、背景色、横幅などを編集画面から調整できます。制作会社やデザイナーが、短期間でページの見た目を整えたい場合には便利です。
テンプレートも利用できるため、ゼロからデザインを考えなくても、一定水準のページを作りやすいという利点もあります。Elementorには、保存済みテンプレートやテンプレートライブラリからページやパーツを挿入する機能があります。
特に次のようなケースでは、Elementorが向いています。
- 短期間でランディングページを公開したい
- コードを書かずに細かくデザインしたい
- Elementorに慣れた担当者が運用を続ける
- テンプレートを使って制作期間を短縮したい
- 将来的な移行や大幅な改修をあまり想定していない
キャンペーン用のページや、公開期間が限られたページであれば、制作スピードの速さは大きなメリットになります。
Elementorのデメリット
Elementorは自由度が高い反面、その自由度が更新担当者にとって負担になることがあります。
文章を少し修正したいだけでも、通常のWordPress編集画面とは別のElementor編集画面を開く必要があります。操作中に余白や位置を変更してしまい、関係のない部分まで動いてしまうこともあります。
制作した人にとっては分かりやすくても、更新だけを担当する人にとって使いやすいとは限りません。
また、細かいレイアウトを作るほど、コンテナや各種要素の階層が増えやすくなります。その結果、HTMLの構造が複雑になり、CSSやJavaScriptなどの読み込みも増えることがあります。
Elementorを使ったサイトが必ず遅くなるわけではありません。サーバー、画像、キャッシュ、制作方法などによって表示速度は変わります。
ただし、WordPressの標準機能だけで作ったページと比べると、ページビルダーを動かすための処理や要素が増えやすく、表示速度の調整に手間がかかる傾向はあります。Elementor自身も、CSSの読み込みやアイコンの出力など、複数のパフォーマンス関連機能を用意しています。
機能を追加するためにElementor用のアドオンを増やしていくと、保守対象となるプラグインも増えます。Elementor本体、テーマ、アドオン、WordPress本体の更新タイミングによっては、表示や編集画面に問題が起きる可能性もあります。
一番のデメリットとしては、デザインを作ってしまうために、リニューアルする際にゼロから作り直す必要があることです。
WordPressのメリットの1つに、デザインと記事が分離しているという点があります。ブロックエディタだと既存のコンテンツを生かしたまま、リニューアルがしやすくなります。
ブロックエディタの特徴
ブロックエディタは、WordPressに標準搭載されている編集機能です。
見出し、文章、画像、ボタン、カラムなどを、それぞれ独立したブロックとして追加します。必要なブロックを選び、順番を入れ替えながらページを作ります。
Elementorほど自由に位置を動かせるわけではありませんが、一般的な企業サイトのページやブログ記事を作るには、十分な機能があります。
ブロックエディタのメリット
ブロックエディタのメリットは、WordPressの標準機能を中心にサイトを構築できることです。
Elementorのようなページビルダーを追加しなくても利用できるため、特定のプラグインへの依存を抑えられます。
文章を変更したい場合は文章ブロック、画像を変更したい場合は画像ブロックを編集します。レイアウト全体を操作しなくても、変更したい場所だけを編集しやすいのが特徴です。
日常的な更新では、デザインを自由に変更できることよりも、変更してよい部分が分かりやすいことのほうが重要です。
ブロックエディタでは、ブロックの削除や移動を制限したり、使用できる色や設定を絞ったりできます。制作側が編集画面を整理することで、担当者が誤ってレイアウトを崩すリスクを減らせます。
よく使うレイアウトは、ブロックパターンとして登録できます。
たとえば、問い合わせへ誘導するエリア、サービス紹介のレイアウトなどをあらかじめ用意し、必要なページで呼び出せます。
通常のパターンは挿入後に個別編集でき、同期パターンを使えば、複数の場所に配置した内容をまとめて変更できます。
このほか、サイト独自の入力項目が必要な場合は、カスタムブロックやカスタムフィールドを組み合わせられます。
自由にレイアウトを触らせるのではなく、担当者には必要な内容だけを入力してもらい、表示側のデザインはテーマで管理することも可能です。
ブロックエディタのデメリット
ブロックエディタにもデメリットはあります。
複雑なレイアウトを作る場合は、グループやカラムなどのブロックを入れ子にする必要があります。構造が深くなると、どのブロックを選択しているのか分かりにくくなることもあります。
独自性の高いデザインや細かな表示制御が必要な場合は、CSSやカスタムブロックなど、制作者側の知識も必要です。制作時に、どんなレイアウトのパターンが必要か、制作会社とすり合わせをしておく必要があります。
「自由に編集できる」と「更新しやすい」は別
Elementorを選ぶ理由として、「クライアントが自分で自由に編集できるから」と説明されることがあります。しかし、自由に編集できることと、日常的に更新しやすいことは別です。
実際に弊事務所でも「Elementorで作られた買取実績のページが修正しづらい」という相談がありました。文章や画像を変更しようとすると、余計な部分まで動かしてしまうことがあり、更新作業そのものが負担になっていました。そこで、買い取り実績の内容を決められた入力欄へ登録するカスタムフィールド方式に変更しました。
カスタムフィールドは専用の入力欄を設けるWordPressの機能で、お問い合わせフォームのようなイメージで、決められた項目に対して、入力していくだけでページが作れます。更新担当者は、レイアウトを意識する必要はありません。決められた場所に情報を入力すれば、あらかじめ作られたデザインで表示されます。
変更後は、クライアント側で買い取り実績を積極的に更新してもらえるようになりました。
この事例からも分かるように、企業サイトの更新では、何でも自由に動かせることが必ずしもメリットになるとは限りません。
更新する内容が決まっているのであれば、編集できる範囲を限定したほうが、作業は簡単になります。誤操作による表示崩れも防ぎやすくなります。
表示速度やソースの違い
Elementorは、デザインを編集画面から細かく調整するために、ページ内に多くの設定や要素を持ちます。
レイアウトの作り方によっては、同じ見た目を通常のHTMLとCSSで作った場合よりも、要素の階層が深くなったり、付与されるクラスやスタイルが増えたりします。
ソースコードが複雑だから、ただちにSEO評価が下がるわけではありません。
ただし、不要な要素や読み込みが増えれば、表示速度の調整や不具合の原因調査に手間がかかります。サイトを長く運用するほど、この差が保守作業に影響することがあります。
ブロックエディタも、使い方によっては不要なブロックやスタイルが増えます。それでも、必要なブロックだけを使用し、テーマ側でデザインを管理すれば、比較的シンプルな構造にしやすいでしょう。
表示速度を重視する場合も、Elementorを使っているかどうかだけで判断するのではなく、実際のページ構造、画像、サーバー、読み込まれているCSSやJavaScriptを確認する必要があります。
Elementorが向いているサイト
Elementorは、次のようなサイトや制作方法に向いています。
- 短期間で公開するランディングページ
- デザイン担当者が直接ページを制作するサイト
- Elementorに慣れた担当者が継続して管理するサイト
- 更新頻度が低く、デザイン変更が中心のサイト
- テンプレートを活用して制作期間を短縮したいサイト
Elementorの操作に慣れた担当者がいて、今後もElementorを使い続ける予定であれば、無理に変更する必要はありません。
すでに問題なく運用できているサイトを、ページビルダーだからという理由だけで作り直す必要もないでしょう。
ブロックエディタが向いているサイト
ブロックエディタは、次のようなサイトに向いています。
- 会社案内やサービス紹介を掲載する企業サイト
- お知らせやブログを継続的に更新するサイト
- 実績、事例、商品などを頻繁に追加するサイト
- 複数の担当者が更新するサイト
- 制作会社や担当者が変わる可能性があるサイト
- 長期間の運用や将来的な改修を想定しているサイト
中小企業のホームページでは、公開後に文章、画像、実績、事例などを追加していくことが多くあります。そのため、制作時の自由度だけでなく、公開後の更新や保守まで考えて編集方法を選ぶ必要があります。
ブロックエディタを軸にし、定型的な情報にはカスタムフィールドを使い、繰り返し使うレイアウトにはブロックパターンを用意する方法は、更新のしやすさとデザインの統一を両立しやすい構成です。
Elementorからブロックエディタへ移行できる?
Elementorで作ったページを、ブロックエディタへ移行することは可能です。
ただし、Elementorを停止するだけで、既存のレイアウトが自動的にブロックへ変換されるわけではありません。
Elementorで作ったデザインデータ自体は、プラグインを削除してもデータベースに残り、再インストールすれば再び利用できます。一方で、Elementorの機能に依存した表示や編集を、そのままWordPress標準のブロックとして扱うことはできません。
移行する場合は、既存ページの内容やデザインを確認しながら、ブロックエディタ用に組み直す形になります。
ページ数が多い場合、すべてを一度に移行するのではなく、トップページや更新頻度の高いページから順番に作り直す方法もあります。
現在Elementorを使用しているからといって、すぐに全面リニューアルが必要とは限りません。
表示速度、更新のしづらさ、プラグイン更新時の不具合など、実際に困っている点を整理したうえで、修正するか、部分的に作り直すか、全面移行するかを判断します。
結論:長く運用するならブロックエディタをおすすめします
Elementorは、画面を見ながらデザインを作りやすく、短期間で見栄えのするページを制作できる優れたツールです。
一方で、自由度が高いため、更新担当者が誤ってレイアウトを動かしてしまったり、サイトの構造や保守が複雑になったりすることがあります。
ブロックエディタは、Elementorほど自由にデザインできるわけではありません。
しかし、WordPress標準の仕組みを中心に構築でき、更新する場所を整理しやすく、特定のページビルダーへの依存も抑えられます。
中小企業のホームページを長く運用し、社内の担当者が無理なく更新していくのであれば、ブロックエディタを軸にする方法が適しています。
重要なのは、制作時に自由にデザインできることだけではありません。
公開後に誰が更新するのか、どのような情報を追加するのか、数年後に誰が保守するのかまで考えて、サイトの作り方を選ぶ必要があります。
当事務所では、ブロックエディタを使ったWordPressサイトの新規制作をはじめ、Elementorサイトからの移行、既存サイトの診断、保守・改修にも対応しています。
現在のサイトが更新しづらい、表示速度が気になる、Elementorを使い続けるべきか迷っている場合は、サイトの状態を確認したうえで、必要な対応をご提案します。
