WordPress5.0の新しいエディタとプラグインの比較

2018年12月のメジャーアップデートにより、WordPress5.0がリリースされました。ここで登場したのが、新しいエディタGutenbergです。WordPressを利用している人のなかには、Gutenbergとページビルダーの違いが知りたい人もいるのではないでしょうか。Gutenbergとページビルダーを目的に合わせて使い分けることで、効率よくサイトの構築をすることが可能です。この記事では、WordPress5.0のアップデートとともに実装されるGutenbergとページビルダーの比較や、どちらを使うべきかを紹介します。

新しいエディタGutenbergとは

GutenbergとはWordPressの新しいエディタです。WordPress5.0のリリースにより、Gutenbergが実装されました。従来のエディタと大きく変わるのが記事の作成画面です。今までの記事の作成画面に慣れている人は、少し不便に感じてしまうかもしれません。しかし、Gutenbergは大きな画面で記事の執筆ができるので、ノートパソコンなどの限られた液晶でも使いやすくなります。また、従来の投稿方法は、1つのエディタに見出しや内容、画像など全ての項目を入力していました。それに対して、Gutenbergでは「ブロック」の組み合わせが導入済みです。

つまり、それぞれのブロックに、見出しや段落、画像などを入力して、記事全体を作りあげることが可能なのです。したがって、高度なコーディングの技術がない初心者でも執筆しやすくなるでしょう。さらに、今後も高度なレイアウトオプションが追加される予定です。

ページビルダーElementorとは

ページビルダーElementorとは、WordPressで使用できるプラグインです。Elementorを導入すると、ドラッグ＆ドロップでページを作成できるようになります。通常、レイアウトを変更するときにはコーディングが必要ですが、Elementorではその必要がありません。ドラッグ＆ドロップで画像やテキスト好きなところへ配置するだけです。また、カラムの幅もドラッグして好きな幅に変更することが可能です。さらに、即時ライブ編集やインスタントドラッグ＆ドロップページビルダー、インスタントページロードなども行うこともできます。用意されたテンプレートを使えば、簡単にプロのようなサイトを作り上げることができるのです。これだけの機能がありながら、無料でインストールすることができます。また、Elementorは、基本的にどのテーマを使用していても問題ありません。

Elementorは、今あるWordPressのエディタと組み合わせて使用するものではなく、置き換えて使用するものです。そのため、Gutenbergと役割が似ています。どちらを選ぶべきか迷った場合は、用途に合わせて選択するといいでしょう。

ブログはどちらを使うべき？

ブログは、趣味の発信やアフィリエイト、企業のコンテンツマーケティングなど幅広い目的で使用されています。その内容は、記事の作成がメインです。よって、いかに文章を書きやすいエディタを選択するかが重要です。それに適しているのは、Gutenbergでしょう。Gutenbergは、「執筆」の観点から、作業がしやすいエディタだといえます。シンプルな機能なので、書くことに集中できるでしょう。また、表やカラム（等幅のみ）などの機能を実装しているので、新たにプラグインで機能を拡張する必要がなく、初心者でも使いやすくなっています。

また、ブロックごとに見出しや内容を入力していくので、ブロックの入れ替えも簡単です。記事の構成を変更したいときなどに便利です。さらに、文字や文章の色を変えたいときには、ブロックを選択して右側にあるメニューを設定することで変更できます。HTMLの知識がなくても簡単に編集できるので、コーディングをしなくても見やすくておしゃれなブログを作ることができるでしょう。

ランディングページはどちらを使うべき？

商品やサービスのアピールに使用されるランディングページは、デザインが重要です。いかに、分かりやすく魅力的なページにするかで、売上も変わります。このように、デザインが重視される場合は「Elementor」を利用することがおすすめです。Elementorを利用すれば、レイアウトも細かく設定することができ、自由なページを作ることができます。ほかの競合商品やサービスと、一線を画すページも作り出せるのです。通常、そのようなページを作るには、複雑なコーディングが必要です。

しかし、Elementorを導入すれば、ドラッグ＆ドロップで自由にページを作成できます。幅の調整などもドラッグ＆ドロップのみでできてしまいます。また、デザイン面でも細かく対応可能です。例えば、アニメーションのなどの表現や、背景に動画を設置することもできます。ランディングページのように、細かいデザインを設定してサイトを構築したい場合は、Elementorを選択するといいでしょう。

Gutenbergを利用する際の注意点

Gutenbergは、2018年12月に実装されたため、今後の動向も期待できます。しかし、実装して間もない場合、予期せぬ不具合に見舞われる場合があります。そして、さまざまな不具合を発見し、高頻度でアップデートされる可能性が高いのです。また、Gutenbergに対応したプラグインの数はまだ少なく、以前使っていたプラグインとの互換性がない場合もあります。そのため、用途に合わせて、Gutenbergとページビルダーを使い分けるのがベストでしょう。

ページビルダーとは？

ページビルダーとは、WordPressにおけるプラグインのカテゴリーの1つです。ページビルダーを導入することによって、WordPressのエディタの拡張や置き換えができます。拡張や置き換えによって、エディタを使いやすく、高機能にすることができるのです。ページビルダーを導入すると、コードの記述をすることなく直感的な操作で、デザインを変更することができます。また、Wysiwyg（What You See Is What You Get）、つまり「見たままの結果になる」というエディタを目指した編集インターフェースになっています。さらに、高機能なブロックが用意されているので、ブロックの入れ替えや編集、削除も簡単に行うことが可能です。

【ページビルダー】1.Visual Composer

WordPressでは、さまざまなページビルダーのブラグインを導入することで、簡単にイメージ通りのサイトを構築することができます。ページビルダーのなかでも人気があるのが「Visual Composer」というプラグインです。Visual Composerの大きな特徴は、ドラッグ＆ドロップ操作だけで、テキストブロックやカラム、画像などの追加ができることです。また、Visual Composerはどのようなテーマでも使用することができます。よって、テーマ開発者の場合、自身のテーマにプラグインを加えておけば、ページのデザインやレイアウトを管理しやすくなるでしょう。さらに、好きなページに追加することができるコンテントエレメンツといわれる要素は40以上。そして、コンテントエレメンツは、Structure、Content、WordPress Widget、Socialの4つのカテゴリーに分かれています。

カラムや行、アコーディオン、テキストブロック、そして画像ギャラリー、Facebookの「いいね！」ボックス、さらにHTMLコードの行も増やすことが可能です。この要素はそれぞれが独立しているので、特定の要素だけ見た目を変更することもできます。また、あらかじめ用意されているページテンプレートを使って、効率よく編集することが可能です。概要ページからサービス、ランディングページまで、テンプレートで対応しています。

また、Visual Composerにはスキンビルダー機能もあります。スキンビルダーを使って、Visual Composerにおけるデザインオプションや要素のスタイルを編集して、自分のサイトや会社のイメージに合わせることができるのです。この編集内容は、サイトのバックエンドとフロントエンドでデザインできるので、すぐに反映されます。このような機能は、拡張可能なAPIと一緒になっているので、プラグイン機能の拡張の際に新しい要素を追加することもできます。編集をするときには、設定欄でPost（投稿）やCustom Post タイプを選択しておきましょう。こうすることで、サイトのデザインに統一感を出すことができます。

【ページビルダー】2.PageBuilder by SiteOrigin

「PageBuilder by SiteOrigin」というページビルダープラグインも人気があります。PageBuilder by SiteOriginは、ページや記事の更新を手軽してくれるプラグインです。そして、直感的に操作ができます。PageBuilder by SiteOriginをインストールしたら、投稿エディタを「Page Builder」に切り替えましょう。ウィジェットを利用するにはエディタの左上のボタンになります。まず、「＋」ボタンを押してウィジェット一覧を出します。そして、はじめから配置されているエリアにウィジェットを設置してみましょう。

選択できるウィジェットは、テキストやGallery、Post Content、Imageなどたくさんの種類があります。このウィジェットを設置することで、HTMLを記述したり、画像を配置したり、ほかにも多くの機能を直感的に使用することが可能です。また、サイトにインストールしているプラグインによっては、さらにウィジェットが多くなる場合があります。このように、PageBuilder by SiteOriginは、レイアウトやページ構成なども、さまざまなパターンがあり自由度が高いです。ウィジェットの特徴を理解し、作成したいページの内容に合わせて選択していきましょう。

PageBuilder by SiteOriginはどのくらい簡単に操作ができるのか、上から1カラム、2カラム、1カラムという3つのエリアの作成方法を用いて紹介します。「ll」ボタンでエリアを追加するときに、カラムの数を選ぶことが可能です。ここで入力したカラムの数が、そのままエディタに配置されるので、2カラムと1カラムのエリアを追加しましょう。このカラムの幅は仕切りをドラッグするだけで変更することができます。また、配置したウィジェットの位置はドラッグ＆ドロップで移動したり入れ替えたりすることが可能です。さらに、エリアの入れ替えもドラッグで行うことができます。

このように、レイアウトの変更もドラッグ＆ドロップで簡単に操作することができます。あとは、配置したカラムを選択して、メディアファイルから画像を挿入したり、テキストウィジェットにHTMLタグを貼り付けて地図や動画を表示させたりして、ページを作っていきましょう。

【ページビルダー】3.BeaverBuilder

「BeaverBuilder」も、ドラッグ＆ドロップで素早くサイトのレイアウトを構築できるプラグインです。このプラグインを有効化すると、はじめてインストールしたときに日本語のガイダンスがあります。そのガイダンスに沿って使い方を学ぶことができるので、サイト構築の知識がない人も安心です。また、BeaverBuilderは、機能やデザインレイアウトに柔軟に対応することができます。操作方法も非常に簡単で、コーディングの必要もありません。

まず、ダッシュボードの「設定」のなかにある「ページビルダー」から「モジュール」と「投稿タイプ」の設定を行います。モジュールでは、必要なモジュールにチェックが入っているかを確認しましょう。そして、投稿タイプでは、ページビルダーを使いたい投稿タイプを選択することができます。初期設定では「固定ページ」にチェックが入っているので、必要に応じて変更しましょう。次に、BeaverBuilderを使ってレイアウトを構築していきます。「固定ページ」から「新規追加」を開き、「ページビルダー」のタブをクリックしてエディタを切り替えます。

そして、ここからガイダンスが始まります。ガイダンスが終わったらグローバル設定をしましょう。グローバル設定の「一般」で、「マージン」や「パディング」に数値を入力して設定を完了させます。そして、「コンテンツの追加」から「行のレイアウト」のカラムを選び、ページのエリアにドラッグ＆ドロップします。カラムを配置したあとに、画像を配置する場合はモジュールの画像を追加してメディアライブラリから選択しましょう。そして、テキストを入力する場合は、「テキストエディタ」を選択して文章を入力し、保存するだけです。モジュールをコピーして配置したい列に移動することも可能です。このように、BeaverBuilderを導入することで、コーディングをしなくても簡単にレイアウトを構築することができます。

まとめ

WordPress5.0のリリースとともに、実装されたGutenberg。ブロックごとに文章を入力することができるので、初心者でも簡単にレイアウトを構築することができるようになりました。ブログなど、記事の執筆がメインとなる場合にはとても便利な機能です。しかし、デザインが重要なランディングページでは、ページビルダーを利用したほうが細かい部分の設定ができて使いやすいでしょう。デザイン性や機能性の高いものでも、ドラッグ＆ドロップで簡単にレイアウトが可能なプラグインもあります。用途に合わせて、Gutenbergとページビルダーを上手に使い分け、サイトを構築しましょう。

ページビルダーのプラグインに迷ったときは、プラグインサービスを利用してみるといいでしょう。