ブロックエディターとは

ブロックエディターとは、文章、画像、見出し、ボタン、カラム、埋め込みなどをブロック単位で管理できるWordPress標準エディターです。Gutenbergとも呼ばれ、現在のWordPress制作では前提として扱われることが増えています。

HTMLを直接書かなくても、追加ボタンから必要なブロックを選び、視覚的にページを組み立てられるのが特徴です。ブログ記事だけでなく、固定ページやカスタム投稿タイプの更新画面でも活用できます。

コンテンツをブロック単位で管理できる

ブロックとは、本文を構成する小さなパーツです。見出し、段落、画像、ボタン、リスト、YouTube埋め込みなどがそれぞれ独立したブロックとして扱われます。

ブロックごとに移動、複製、削除、設定変更ができるため、HTMLの構造を完全に理解していないユーザーでもコンテンツを編集しやすくなります。

クラシックエディターとの違い

クラシックエディターは、1つの大きな本文入力欄に文章やHTMLを入れる考え方でした。そのため、細かいレイアウトを作るにはHTMLやショートコードの知識が必要になる場面がありました。

一方、ブロックエディターではパーツごとに編集できるため、構造と見た目を分けて考えやすいのが大きな違いです。制作者がブロックやパターンを用意しておけば、更新担当者は必要な部品を選んで使えます。

更新しやすいサイト制作につながる

クライアント更新型サイトでは、公開後にお知らせ、実績、サービス紹介、CTAなどを追加する場面がよくあります。毎回制作者がHTMLを修正する運用だと、更新スピードが落ちてしまいます。

ブロックエディターを前提に設計すると、デザインの統一感を保ちながら、管理画面から更新できる範囲を広げられます。これが現在のWordPress制作で重要な考え方です。

パターンの基本と呼び出し方

ブロックエディターで特に重要なのが「パターン」です。パターンとは、複数のブロックを組み合わせたレイアウトセットを保存し、必要な場所で使い回せる機能です。

たとえば、見出しと説明文、画像とテキスト、CTAボタン、会社概要、FAQなどをパターン化しておくと、毎回ゼロから同じレイアウトを作る必要がなくなります。

パターンはレイアウトセットを登録する機能

パターンは、デザインの型を管理画面から呼び出せるようにする仕組みです。制作者があらかじめ整えたレイアウトを登録しておけば、更新担当者はその型を選ぶだけで統一された見た目を作れます。

テーマ側でパターンを登録する場合は、PHPで定義する方法もあります。以下は、CTAエリアをパターンとして登録する最小イメージです。

register_block_pattern(
    'my-theme/cta-area',
    array(
        'title'   => 'CTAエリア',
        'content' => '<!-- wp:group --><div class="wp-block-group"><!-- wp:heading --><h2>お問い合わせはこちら</h2><!-- /wp:heading --><!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">相談する</a></div><!-- /wp:button --></div><!-- /wp:buttons --></div><!-- /wp:group -->',
    )
);

ここで重要なのは、パターンが完成したHTMLそのものではなく、ブロックの組み合わせを再利用するための型だという点です。運用で繰り返し使うレイアウトほど、パターン化する価値があります。

スラッシュ入力で素早く呼び出せる

ブロックエディターでは、本文入力中に/を入力するとブロックやパターンを検索できます。たとえば/CTAのように入力すると、登録済みのCTAパターンが候補に表示されます。

この操作に慣れると、毎回同じレイアウトを探す手間が減ります。特に、記事作成や下層ページ更新を頻繁に行うサイトでは、作業時間をかなり短縮できます。

クライアント更新型サイトで役立つ

パターンを用意しておくと、「このセクションを追加してください」という運用がしやすくなります。更新担当者が細かい余白やクラス名を触らなくても、統一されたデザインを追加できるためです。

似た内容として、Gutenberg開発の考え方についてはこちらの記事も参考になります。
Gutenbergでの開発についてはこちらを参照ください

同期パターンと非同期パターンの使い分け

WordPressのパターンには、内容を共有する同期パターンと、配置後に個別編集できる非同期パターンがあります。この違いを理解しておくと、運用時のトラブルを減らせます。

どちらが優れているという話ではなく、共通化したい範囲と個別編集したい範囲を分けることが大切です。

同期パターンは共通パーツ向き

同期パターンは、複数ページで同じ内容を共有するパターンです。一箇所を修正すると、そのパターンを使っているすべてのページに変更が反映されます。

CTA、バナー、お問い合わせ導線、共通お知らせ、フッター前の案内など、サイト全体で同じ内容を表示したいパーツに向いています。更新漏れを防げる一方で、誤編集すると全ページに影響する点には注意が必要です。

非同期パターンはページ別編集向き

非同期パターンは、配置したあと各ページで独立したブロックとして扱われるパターンです。最初のデザインは同じですが、文章や画像はページごとに自由に変更できます。

記事一覧、サービス紹介、スタッフ紹介、セクション見出しなど、レイアウトだけ統一して中身はページごとに変えたい場合に便利です。

実務では目的に合わせて組み合わせる

実務では、CTAは同期、本文セクションは非同期のように組み合わせるケースが多いです。完全に共通化したいものは同期、デザインだけ共通化したいものは非同期、と考えると判断しやすくなります。

• 完全共通：同期パターン
• デザインだけ共通：非同期パターン
• 個別入力を安全にしたい：Lazy Blocksやカスタムフィールド

エディターCSSで管理画面と実際の表示を近づける

ブロックエディターを使ううえで意外と重要なのが、編集画面の見た目と実際のサイト表示を近づけることです。ここが大きく違うと、編集画面では整って見えても、公開ページでは崩れて見えることがあります。

特にクライアント更新型サイトでは、管理画面で見えている内容と公開ページの表示が近いほど、安心して更新できます。

editor-style.cssを読み込む

WordPressには、ブロックエディター内にテーマ専用CSSを読み込む仕組みがあります。テーマのfunctions.phpで以下のように設定します。

add_theme_support('editor-styles');
add_editor_style('editor-style.css');

この設定を追加すると、テーマ内のeditor-style.cssが編集画面にも読み込まれます。フロント側のCSSをそのまま全部読み込むのではなく、編集画面に必要な見た目を整理して入れると扱いやすくなります。

合わせておきたいCSSの項目

エディターCSSでは、本文幅、フォントサイズ、行間、見出し、ボタン、画像サイズ、余白などを合わせておくと便利です。以下は、編集画面の本文幅と基本タイポグラフィを整える例です。

.editor-styles-wrapper {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
}

.editor-styles-wrapper .wp-block {
  max-width: 760px;
}

.editor-styles-wrapper h2 {
  margin-top: 48px;
  font-size: 28px;
  line-height: 1.5;
}

.editor-styles-wrapper .wp-block-button__link {
  border-radius: 4px;
  padding: 12px 24px;
}

重要なのは、編集画面だけで完璧なデザインを再現することではありません。更新担当者が公開後の見た目を想像しやすい状態にすることです。

表示差を減らすと更新ミスを防ぎやすい

編集画面と公開ページの表示差が大きいと、余白が足りない、画像が大きすぎる、ボタンの見た目が違う、といったミスに気づきにくくなります。

エディターCSSで基本の見た目をそろえておくと、公開前の確認がしやすくなります。制作側にとっても、クライアントからの「編集画面と表示が違う」という問い合わせを減らせます。

画像案：左にブロックエディター画面、右に公開ページを並べ、本文幅・見出し・ボタンが近い状態で比較できる図解。

Lazy Blocksでオリジナルブロックを作る

ブロックエディター標準のブロックだけでは、複雑なデザインを再現しづらい場合があります。そのようなときに便利なのが、オリジナルブロックを作成できるLazy Blocksです。

Lazy Blocksを使うと、PHPやHTMLの構造を活かしながら、管理画面には入力欄として見せることができます。デザインは制作側が固定し、更新内容だけクライアントが入力する構成にしやすくなります。

GUIでカスタムブロックを作成できる

Lazy Blocksでは、管理画面からテキスト、画像、URL、繰り返し項目などの入力欄を作り、ブロックとして登録できます。画像付きカード、スタッフ紹介、FAQ、実績一覧、CTA、スライダーなどに向いています。

標準ブロックを自由に組み合わせるよりも、入力項目を絞れるため、更新担当者がデザインを崩しにくくなります。

カスタムフィールドと連携しやすい

Lazy Blocksは、ブロック内の入力値をテンプレートに出力できます。ACFやSCFなどのカスタムフィールドと組み合わせることで、より自由度の高い更新システムを作れます。

SCFの繰り返しフィールドについてはこちらでも解説しています。
SCFの繰り返しフィールドについてはこちらを参照ください

既存HTMLを活かした実装に向いている

Lazy Blocksの強みは、既存のHTML構造と紐づけやすいことです。たとえば、すでにコーディング済みのカードデザインがある場合、そのHTMLをテンプレートとして使い、画像やテキストだけを入力欄にできます。

つまり、デザインは完全オリジナル、更新だけブロックエディター化という構成が可能です。これは実務でもかなり使いやすい考え方です。

画像案：Lazy Blocksの入力欄、ブロックプレビュー、公開ページの表示を3ステップで並べた図解。

ブロックエディターで覚えておきたい便利機能

ブロックエディターには、パターン以外にも便利な機能があります。すべてを一度に覚える必要はありませんが、更新しやすい設計を考えるうえで基本機能を知っておくと役立ちます。

再利用ブロックとグループ化

再利用ブロックは、よく使うパーツを保存して複数ページで使える機能です。CTA、バナー、注意事項など、同じ内容を何度も使う場合に便利です。

グループ化は、複数のブロックをひとまとまりにする機能です。背景色、余白、横幅などをまとめて管理しやすくなるため、セクション単位でデザインを整理できます。

カラムと埋め込み機能

カラム機能を使うと、HTMLを書かなくても2カラムや3カラムのレイアウトを作れます。画像とテキストを横並びにしたいときや、サービス紹介を複数並べたいときに便利です。

埋め込み機能では、YouTubeやSNSのURLを貼るだけでコンテンツを表示できます。コードを書かずに外部コンテンツを扱えるため、記事更新の負担を減らせます。

自由度が高いぶんルール設計も必要

ブロックエディターは自由度が高い反面、更新担当者が余白や色を自由に変えすぎると、サイト全体の統一感が崩れることがあります。

そのため、使ってよいブロック、使ってよいパターン、変更してよい範囲をあらかじめ決めておくと安心です。WordPress制作では、機能を用意するだけでなく、運用ルールまで含めて設計することが大切です。