Web制作コラム

ブロックエディタ(Gutenberg)とは|クラシックエディタとの違いと、いまどちらを使うか

WordPress

WordPress 5.0 から標準になった編集画面です。何が変わったのか、旧エディタを使い続ける判断はありなのか、制作側で決めておくことをまとめます。

ブロックエディタは、2018年の WordPress 5.0 から標準になった記事の編集画面です。開発時のコードネームから Gutenberg(グーテンベルク)とも呼ばれます。

文章・画像・見出し・表といった要素を「ブロック」という単位で積み上げて記事を作ります。それ以前のクラシックエディタは、1枚の入力欄にまとめて書き込む形でした。

何が変わったか

  • 2カラムや囲み枠のような組み方が、HTMLを書かずに作れる
  • ブロック単位で順番を入れ替えられる
  • 編集画面の見た目が、公開後の見た目に近づいた
  • よく使う組み合わせをパターンとして保存し、呼び出せる

発注側から見ていちばん大きいのは3つ目です。クラシックエディタでは、公開してみるまで実際の見え方が分かりませんでした。

制作側で決めておくこと

使えるブロックを絞るか

標準のブロックは数十種類あります。全部使える状態にしておくと、更新する人が意図しない組み方をしてデザインが崩れます。実務では、そのサイトで使うブロックだけに絞り込むことが多い形です。

色とフォントサイズの選択肢

ブロックエディタは、文字色や背景色を自由に選べます。放っておくとサイトのトーンから外れた色が使われるので、デザインで決めた色だけを選択肢として登録しておきます。

カスタムブロックを作るか

「スタッフ紹介」「料金表」のように、決まった形で繰り返し入れるものは、専用のブロックを作っておくと更新が安定します。標準ブロックの組み合わせで毎回作ってもらう形にすると、人によって出来上がりが変わります。

カスタムブロックの開発は費用が乗ります。更新の頻度が低い箇所まで作り込むと元が取れないので、どこを専用化するかは最初に話し合って決めるのが現実的です。

クラシックエディタを使い続ける判断

Classic Editor プラグインを入れると、従来の編集画面に戻せます。既存サイトの改修で、過去の記事がすべてクラシックエディタ前提で作られている場合、無理に移行しない判断はあり得ます。

ただし新規で作るなら、ブロックエディタを前提にするほうが無難です。テーマやプラグインの対応が、そちらを基準に進んでいます。

移行するときに起きること

  1. 既存の記事は「クラシックブロック」という1つのブロックとして扱われる(内容は壊れない)
  2. ブロックに変換すると、独自のHTMLを書いていた箇所が崩れることがある
  3. テーマのCSSが、ブロックが出力するクラス名に当たっていないと見た目が変わる
  4. 一部のプラグインが用意していたショートコードが、編集画面で見えなくなる

当社では、既存サイトの移行をご相談いただいた際に、記事を実際に1〜2本変換して崩れ方を見てから、全体の工数をお出ししています。

「WordPress」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。

直近2週間の受付状況制作のリソース

9/29(月)〜10/3(金)残りわずか
10/6(月)〜10/10(金)余裕があります
Chatworkで相談する