「ブロックエディタでデザインを完結させたい」
「ブロックエディタをより便利にするプラグインを入れたいがどれを選べば良いかわからない」
WordPressの5.0バージョンからブロックエディタ・グーテンベルク（Gutenberg）が採用されました。ブロックエディタはクラシックエディタの機能は全部でき、さらにスライドショーのように画像を印象的に見せたりカラムを分割したり、ボタンを入れたりスタイルを使ったリストを入れたり…と高度なウェブページの編集をすることができます。
つまりは、編集画面で「目で確認しながら」ページをつくっていけるということです。長い間WEB制作に関わっている方ならイメージできると思うのですが、ホームページビルダーに近い形で作れる、といえばわかりやすいでしょうか。
(https://ja.wordpress.org/gutenberg/)
現状はまだまだクラシックエディタが多いとのアンケート結果が出ていますが、WEB制作会社での採用は進んでいますので、今後より多くのサイトがブロックエディタを活用したものに置き換わってきそうです。
＜エディタの種類を問うアンケート（2020年3月23日現在）＞
WordPressで投稿記事を書く時、あなたがよく利用しているエディタはどれですか？
— WordPressテーマTCD (@tcd_jp) March 23, 2020
まだまだブロックエディタ（Gutenberg）は割合的には少ないですが、WEB制作会社でも活用を進めているところが増えてきています。
2019年に開催されたWordCampで、長谷川広武さんが「運用も最大限考慮！コーポレートサイトでブロックエディタフル活用の事例紹介」と題した講演をされました。企業のコーポレートサイトをできる限りブロックエディタを使って構築することを前提として案件を進めているとのお話しです。
（https://wordpress.tv/2019/12/21/hiromuhasegawa-example-usages-of-block-editor-on-the-corporate-sites/）
↑動画は公開されているので皆さん見ることができます。
講演の中では、WordPressを使うのだから、その拡張性をしっかり生かし、制作工数を減らしたりクライアントが便利に使えたりするようにしましょうと呼びかけられています。ブロックエディタも標準搭載されたからには活用する前提で設計し、レイアウトやリストデザインの選択等に活用。カスタムフィールドを極力使わないように心がけているそうです。
長谷川さんのお話しでは、このブロックエディタを使い、テーマに書き込んだりカスタムフィールドを利用せずにサイト制作をしたりすることで、テーマを変えてもコンテンツが保持されたり、実際の表示をプレビューしなくても目で確認できるのでクライアントの更新がしやすくなったりなどメリットも多いとのこと。
このようなブロックエディタの活用事例もたくさんでてきていますので、制作前にはどういう構築にするのが運用的に楽なのか考え、選択する必要があります。
１．クラシックエディタよりブロックエディタのほうがいいの？
これは「WEBサイトの使い方による」といえそうです。
○ブログで文章を書くだけならクラシックエディタで十分
ブロックエディタのメリットは前述の通り、レイアウトやデザインを入れたい場合です。最初にデザインをしっかりつくり、その後の更新は文字を書くだけのお知らせやブログであれば、従来どおりの制作で、クラシックエディタを入れておくだけで十分です。
○レイアウトやデザインを細かくページ内に入れていきたいならブロックエディタで自由に！
各ページごとに違うレイアウトにしたり、コンテンツの見せ方を変えたりしたい場合はブロックエディタの機能を使うことでデザインをわざわざ発注せずに済み、更新しやすくなります。
また、HTMLをページ内に直接書いて編集しているなら、特にブロックエディタは便利です。HTMLタグを書き込めるブロックを使うと半角が全角になるなど変なエラーがでなくなりますし、そもそも書き込まなくてもブロックをうまく利用することで事足りるようになるかもしれないからです。
２．ブロックエディタに搭載されている標準ブロックについて
2020年現在、WordPressをインストールするだけでブロックエディタは搭載されます。ブロックはデフォルトでたくさんの種類が付いてきます。
WordPress公式サイトでも一部しか紹介されていないほど、種類豊富なブロックがあります。ブロックの追加、変更、削除方法は公式サイトの使用方法ページに詳しく載っています。
例えば、「メディアと文章」というブロックなら、写真を左寄せで入れて文章を回り込ませるなど、画像と文章のレイアウトができます。「リスト」ブロックなら、箇条書きなどのリストを表示できます。
↑ブロックの中にブロックを入れて表示もできます。「メディアと文章」に「リスト」のブロックを入れた状態です。HTMLでこのような形を組んでいたときはズレや余白を調整する必要がありましたが、ブロックの追加、ブロックの追加と進んでいくだけで思い通りに組んでいけます。
HTMLの知識がなくても、ブロックを積み重ねるような形でWEBサイトを作っていけます。
３．ブロックは新しい種類を追加できる？
デフォルトブロック以外にも、プラグインを追加することでさまざまな種類のブロックを追加できます。
過去に3つのブロックエディタ拡張プラグインのレビューをしているので、ぜひご参考になさってください。
＜拡張プラグイン3つのレビュー＞
○Advanced Gutenberg
○CoBlocks
○Ultimate Blocks
４．どの拡張プラグインを入れるのがベスト？
プラグインによって、追加できるブロックの種類に傾向があります。
例えば、Ultimate Blocksは、ブロガーやマーケター用につくられたブロックエディタ拡張プラグインであると公式ページに書かれています。実際に追加されるブロックを見てみると、Call to Action Block（ページを見ている人に資料請求や電話などのアクションを起こしてもらう目的のブロック）や、ユーザーレビューが書きやすいTestimonial Blockなど、販売を推進する機能をもったブロックが多くあります。
以下に、主な拡張プラグイン3つをピックアップして比較してみます。
それぞれプラグインによって特徴や違いがあります。
○Advanced Gutenberg
・追加できるブロック数：22
・こんな方にオススメ：自由なレイアウトで表現方法を増やしたい方、ネットショップを運営中の方
・特徴的なブロック：Tableを入れたり自由自在にレイアウトを組んだりできるほか、商品説明に便利なブロックやネット販売との連携機能があります。
○CoBlocks
・追加できるブロック数：30
・こんな方にオススメ：美しいWEBページを作りたい方、デザインはできないがWEBサイトを自分で作りたい方
・特徴的なブロック：よりデザイン性を高められる、ビジュアルを整えられるブロックが多く入っています。
○Ultimate Blocks
・追加できるブロック数：19
・こんな方にオススメ：ブロガーさん、広告・販売促進系企業の方
・特徴的なブロック：販促につながるブロック、訪問者の行動を誘導できるブロックが多く入っています。
今後もブロックエディタにブロックの種類を追加するプラグインは増えてくると予想されますので、どんなブロックが追加されるのか、誰向けにつくられたものなのかをチェックして選んでいってください。
５．プラグインを入れないとブロックは増えない？
WordPressにはデザインや機能がテンプレートセットされた「テーマ」があります。ブロックエディタ対応の「テーマ」を入れると、テーマ独自のブロックが追加されるものもあります。
テーマに合わせたデザインのブロックが入っていると統一感を出しやすいので、標準ブロックよりテーマオリジナルのブロックを積極的に利用したいですね。
まとめ
ブロックエディタはこれまでのエディタと使い勝手が違いすぎるため、なかなか最初は使いづらいと思います。文章を書くだけなら旧エディタでも十分です。
ただ、なかなかWEBサイト制作の予算を取るのが難しい場合などは活用するとメリットがたくさんあります。WEBサイト全体のデザインはプロに依頼し、個別ページを追加していったりブログ記事を書いたりするなどポイント使いに活用するのもよいと思います。
2022年には旧エディタのサポートが終了するといわれていますので、ブロックエディタに少しずつ慣れていきたいですね。