株式会社フムフム

ホームページの運営をわかりやすく直感的に!WordPressのエディタ「グーテンベルク」

才木 ケイ

グーテンベルク(Gutenberg)とは

グーテンベルク(Gutenberg」とは、2018年のWordPress 5.0へのバージョンアップから新たに採用されたエディターです。

以前の5.0以前のクラシックエディタと違い、投稿の各パーツ(テキストや画像、動画など)の一つ一つを「ブロック」という単位で構成されているのが特徴です。
ブロックエディタBlock Editor)と呼ばれることもあります。
このブロックエディタは現在、「note」のエディタや国産CMS「a-blog CMS」のエディタにも採用されています。

これまでのクラシックエディタを使っていた既存ユーザーからは、仕様が大きく異なるため「使いづらい」という声もあがっています。
しかし優れた点もたくさんあるのでそこに焦点を当てて紹介していきます!

グーテンベルクとクラシックエディタとの違い

見た目エディタ方式WP Ver
新エディタ(グーテンベルク)直感的でわかりやすい少なめなUIブロックエディタWP5.0〜
旧エディタ(クラシックエディタ)ボタンが多く様々な対応がしやすいUIビジュアルエディタ、テキストエディタ(HTML)〜WP4.x

見た目の違い

旧エディタではボタンが多く各所に色々な装飾が施しやすいですが、慣れていないと思わぬ表示になってしまったり、記事の作成者がある程度いじれてしまうので全体のイメージが崩れてしまいやすいのが難点。

一方新エディタでは機能が少なくなっている分できることは減っていますが、文章を書き最低限の装飾を施すのには最適だと思います。
また、ブロックを追加することも可能です。

エディタ方式の違い

新エディタではブロックエディタを採用しており、実際の記事の画面に文字を載せていくような感覚で投稿を作成することが可能です。
また余計な機能が少ないので、シンプルな画面で記事を作成することができます。

バージョンの違い

WordPressは古いバージョンを使っているとWP本体はもちろん、プラグインやテーマの脆弱性から不正アクセスがありセキュリティのリスクが高まります。

グーテンベルクの使い方

新規追加をクリックするとこんな画面が表示されます。

グーテンベルク編集画面

①を押すとそのページのタイトルを挿入できます。
②を押すとそのままこの場所に文章ブロックを挿入できます。
③を押すと好きなブロックを選んで追加できます。
④は記事を下書き保存したり、現在の記事のプレビュー、記事の公開が可能です。
⑤は記事の詳細設定(アイキャッチやURL、タグ、カテゴリの変更等)や選択中のブロックの細かい指定画面を開くことが可能。

挿入できるブロックはデフォルトの状態だとたくさんの種類があり、種類が多すぎて使いづらいので弊社では使うであろうブロックだけを表示させ使いやすいよう調整しています。

こんなこともできる

グーテンベルグではプラグインを使用してブロックを増やすことができます。

このような形で好きなブロックを追加することができる。罫線囲みブロックを追加している例。

代表的なプラグインはこの2つ。
Lazy Blocks」「Genesis Custom Blocks

弊社では記事を書いていく際の視認性や文字装飾をテキストエリアに実装しやすいことから主にLazy Blocksを利用しています。

まとめ

このように昔からWordPressを利用している方からは使いづらいとの声も上がっていますが、古いバージョンを使うことの脆弱性も考えると新しいエディタに慣れていくことがこれから大事になっていくと思います。

クラシックエディタを使い続ける手段としてプラグインを使えば可能ですが、いつまでそのプラグインがサポートされているかもわかりません。

デフォルトの状態では少し扱いづらい印象のグーテンベルグですが、どんなホームページにしたいのかどんな人が更新するのかをしっかり見極めカスタマイズすることで初心者の方でも簡単にリッチな表現ができるホームページを運営していくことが可能です。

弊社ではペコマガ広好きなどWEBメディアを運営しており、サイトの運営に長けています
サイトが使いづらい、わかりづらい等のお悩みがあればぜひご相談ください!