Web制作コラム
ブロックエディタ(Gutenberg)とは|クラシックエディタとの違いと、いまどちらを使うか
WordPress 5.0 から標準になった編集画面です。何が変わったのか、旧エディタを使い続ける判断はありなのか、制作側で決めておくことをまとめます。

ブロックエディタは、2018年の WordPress 5.0 から標準になった記事の編集画面です。開発時のコードネームから Gutenberg(グーテンベルク)とも呼ばれます。
文章・画像・見出し・表といった要素を「ブロック」という単位で積み上げて記事を作ります。それ以前のクラシックエディタは、1枚の入力欄にまとめて書き込む形でした。
何が変わったか
- 2カラムや囲み枠のような組み方が、HTMLを書かずに作れる
- ブロック単位で順番を入れ替えられる
- 編集画面の見た目が、公開後の見た目に近づいた
- よく使う組み合わせをパターンとして保存し、呼び出せる
発注側から見ていちばん大きいのは3つ目です。クラシックエディタでは、公開してみるまで実際の見え方が分かりませんでした。
制作側で決めておくこと
使えるブロックを絞るか
標準のブロックは数十種類あります。全部使える状態にしておくと、更新する人が意図しない組み方をしてデザインが崩れます。実務では、そのサイトで使うブロックだけに絞り込むことが多い形です。
色とフォントサイズの選択肢
ブロックエディタは、文字色や背景色を自由に選べます。放っておくとサイトのトーンから外れた色が使われるので、デザインで決めた色だけを選択肢として登録しておきます。
カスタムブロックを作るか
「スタッフ紹介」「料金表」のように、決まった形で繰り返し入れるものは、専用のブロックを作っておくと更新が安定します。標準ブロックの組み合わせで毎回作ってもらう形にすると、人によって出来上がりが変わります。
カスタムブロックの開発は費用が乗ります。更新の頻度が低い箇所まで作り込むと元が取れないので、どこを専用化するかは最初に話し合って決めるのが現実的です。
クラシックエディタを使い続ける判断
Classic Editor プラグインを入れると、従来の編集画面に戻せます。既存サイトの改修で、過去の記事がすべてクラシックエディタ前提で作られている場合、無理に移行しない判断はあり得ます。
ただし新規で作るなら、ブロックエディタを前提にするほうが無難です。テーマやプラグインの対応が、そちらを基準に進んでいます。
移行するときに起きること
- 既存の記事は「クラシックブロック」という1つのブロックとして扱われる(内容は壊れない)
- ブロックに変換すると、独自のHTMLを書いていた箇所が崩れることがある
- テーマのCSSが、ブロックが出力するクラス名に当たっていないと見た目が変わる
- 一部のプラグインが用意していたショートコードが、編集画面で見えなくなる
当社では、既存サイトの移行をご相談いただいた際に、記事を実際に1〜2本変換して崩れ方を見てから、全体の工数をお出ししています。
「WordPress」のコラム
この記事と同じカテゴリの記事です。
WordPressとECサイトの制作、
まとめてご相談いただけます
WordPress制作・構築代行
デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。
構築基本費用 50,000円
詳しく見るコーディングコーディング代行
デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。
1ページ 15,000円〜
詳しく見るReactReactコーディング代行
デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。
1ページ 18,000円〜
詳しく見るNext.jsNext.js制作・コーディング代行
検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。
1ページ 18,000円〜
詳しく見るEC / WordPressWelcartでのECサイト構築
WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。
デザイン制作+構築 一式 120万円〜
詳しく見るEC / EC-CUBEEC-CUBEでのECサイト構築
国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。
デザイン制作+構築 一式 120万円〜
詳しく見るEC / ASPカートECサイト制作代行
Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。
構築基本費用 100,000円
詳しく見る