お役立ちコラム

gutenberg

WordPressの表現力を大きく広げる”Gutenberg”を使いこなそう

webサイト構築のプラットフォームであるCMS(Contents management system)として、wordpressの名前を聞いたことがない方は少ないのではないでしょうか。元々はブログツールとしてスタートしたwordpressですが、オープンソースで無料で利用できることや、圧倒的な種類のテーマやプラグインにより機能拡張が自在にできるなどのメリットから、現在ではブログに限らないwebサイトの構築ツールとして、大手企業でも多数導入されており、世界中のwebサイトの中でwordpressによって構築されたものは4割以上にものぼると言われているほどです。 コアとなるwordpress本体にも定期的なアップデートが行われるのが特徴のひとつですが、今年に入ってバージョンが5番台になり、それに伴う目玉機能として、これまで長きにわたって使われてきたエディタ(以下Classic editor)からGutenbergと呼ばれる新型のエディタが導入されました。 Classic editorとは見た目においても機能的な面においても大きな違いがあることから、特に昔からのユーザーには敬遠されがちなGutenbergですが、これまではコストが張る有料プラグインやテーマの開発によって実装が必要であった様々な編集機能が公式機能として使えることになったメリットは計り知れないものがあります。 本稿では、Gutenbergを使うことによってどんなことができるのかを一端ではありますが説明させていただき、皆様にもぜひこの便利さを享受していただければと思います。

Gutenbergって何?

Gutenbergは単なるClassic editorの置き換えではなく、投稿内容をフォーマット化した「ブロック」という要素を組み合わせてコンテンツを作成するエディタです。 開発者のMatt Mallenwegは以下のように述べています。 このエディタは、リッチな投稿や固定ページの作成を簡単にする、新たな執筆体験を生み出します。また「ブロック」によって、今日のショートコード、カスタム HTML や得体の知れない埋め込みが実現していることをより簡単にします。 大きなメリットとして、Classic editorのみでは難しかった自在なレイアウトが可能となり、HTMLの専門知識がなくてもwebでの表現力を向上させることができることが挙げられます。コンテンツマーケティングの重要性がクローズアップされる現在、このメリットは非常に強力なものとなります。 それでは、Gutenbergについて簡単に見ていきましょう。

投稿画面

投稿ページでの入力画面は以下のようになっています。Classic editorとは全く見た目からして変わっているのがわかると思います。
「タイトルを追加」というプレースホルダが入っている箇所がタイトル部分、その下の+マークと「文章を入力、または/でブロックを選択」と書かれている部分がClassic editorで言うエディタ部分になっています。

 

そして、ここがGutengergのキモとなる部分ですが、+ボタンを押すと挿入したいブロックを選択するポップアップが表示されます。 様々なブロックが用意されていますが、標準で用意されているブロックの中でも利用頻度が高いのは「段落(HTMLで言うPタグ)」「見出し(同H1〜H6タグ)」「画像(同imgタグ)」などが挙げられますが、これらはClassic editorでも設定可能な項目です。 他にも、「リスト」「ギャラリー」「カバー(背景画像にテキストを重ねたタイトル的なビジュアル)」「スペーサー(上下のブロック間の隙間をpx単位で調整可能)」「テーブル(表組)」「メディアと画像(テキストとその左右に画像を配置)」など、一般的にweb上で記事を作成する際に必要な要素はおおむねカバーされています。これらの要素をおもちゃのブロックのように積み重ねることで記事を作成していくのがGutenbergでの基本的な記事の作成のしかたとなります。 各要素がブロック化されているメリットとして、順番の入れ替えが容易に行える、記事の途中に新たなブロックを差し込むことができる等、Classic editorでは(特にHTMLタグを入力している場合は)難しかった構成の変更がしやすくなります。 さらに、Gutenberg特有の機能として注目すべきは、「カラム(段組み)」機能です。レスポンシブwebデザインの普及により、段組のデザインをスマートフォン閲覧時はインライン化(縦一列に変更する)という手法が一般化しましたが、この機能を簡単に導入することができます。 ブロックの中から「カラム」を選択すると、以下のような画面になります。 ここで、右側にある「カラム」スライダーを動かすと(数値入力も可能)1列あたりのカラム段数を自由に設定することができ、各カラムにさらにブロックを入れ子構造で挿入することができるようになります。この機能を活用すれば、これまではなかなか難しかったレスポンシブ対応のグリッドデザインが専門知識がなくても作成できるようになります。 Classic editorではこうしたカラム構造を記述するためにはどうしてもHTMLの知識が必要でしたが、ソースコードが露出することによるメンテナンス性の低下やレイアウト崩れが起きやすくなる、編集の難易度が上がるため外部委託が必要になってしまうケースが多い等のデメリットがありましたが、こうしたデメリットを払拭する良い仕組みができたのではないかと考えています。ぜひ使っていただきたいです。 ただ、この弊害として、構造が入れ子になった場合に、ブロックの選択が難しくなるという問題が発生します。この解決法として用意されているのが、「ブロックナビゲーション」機能です。エディタ上部にある下図の赤い囲み部分のボタンを押すと、現状のブロック構造が並び順に表示され、構造を把握することができます。 また、個人的に素晴らしく便利だと考えているのが、wordで作成した文章をコピー&ペーストした際の振る舞いです。 筆者はwordpressの記事を作成する際に、wordを使って、見出しや画像等を設定しながら文書を書いていくのですが(本稿もwordで作成しています)、完成した記事を丸々コピーしてGutenberg上にペーストするだけで、画像や見出し等も含めて全て反映された状態に配置されます(画像も自動アップロードされます)。 Classic editorの場合は都度見出しの設定や画像の配置を調整などしていたことを考えると圧倒的な効率化が図れます。ぜひお試しください。

おわりに

以上、本稿ではGutengergのメリットとその使い方の一部を説明させていただきました。まだまだ機能的には万全ではない部分もありますし、自由度の高さゆえの習得難易度の高さなど課題がないわけではありませんが、Classic editor派の方や、何となくとっつきが悪いので使っていない方など、これまでGutenbergに触れていなかった方も試しに触ってみるきっかけになれば幸いです。