COLUMN コラム
2026.1.12
【WordPress】ブロックエディタで作るサイト制作のメリットと注意点
WordPressには用途や規模に応じて、さまざまな実装方法があります。
通常の案件では、phpのテーマファイルに直接コードを記述する形でサイト制作を行うことが多いのですが、稀にブロックエディタを使用する機会もあり、その過程でいくつかのメリットと注意点があると感じました。
本記事では、実際の制作経験をもとに、ブロックエディタを用いたサイト制作のメリットと注意点について解説します。
1. ブロックエディタとは
WordPressの投稿・固定ページ作成には、主に「クラシックエディタ」と「ブロックエディタ（Gutenberg）」という2つのエディタがあります。現在のWordPressでは、ブロックエディタが標準のエディタとなっており、テキストや画像、見出しといった要素を「ブロック」単位で組み立てていくのが特徴です。ブロックエディタを用いたサイト制作の場合、クライントは管理画面上で完成形に近いレイアウトを確認しながら作業できるため、頻繁にページの更新を予定しているサイトや、同じレイアウトでたくさんのページを構築する必要がある大規模サイト等に適しています。
2. ブロックエディタを用いたサイト制作のメリット
2-1. コーディングの工数を抑えられる
テンプレートファイルに直接コーディングする場合、別のページで同じパーツを使う祭にHTMLをコピー&ペーストする必要があります。この方法では、意図しない階層構造のズレが発生したり、編集後に都度フロント側の表示確認が必要になる等、確認ステップが増えがちです。
一方、ブロックエディタを使用したサイト制作では、一度パーツのスタイルを定義してしまえば、ブロックとして呼び出して配置することが可能です。theme.jsonやeditor-style.cssを使用し、ブロックエディタの見た目をフロントと同期させておけば、管理画面上でも完成形に近い状態を確認しながらパーツを配置できます。
特に大規模なサイトでは、下層ページで共通の見出しや画像パーツを使うケースが多くなるため、ブロックエディタの恩恵を受けやすいと言えます。
2-2. デザインに統一感をもたせることができる
ブロックエディタを用いたサイト制作では、「見出し」や「テーブル」「画像」といったパーツ単位でデザインを作成し、それらのパーツを使ってページを構築していくため、すべてのページのデザインに統一感をもたせることができます。
反対に、下層ページごとに個別のデザインを作り込むということは、あまり行いません。
ブロックエディタではデザインの柔軟性が下がるという意見もありますが、CSSで表現可能なデザインであれば、十分に対応が可能です。
2-3. 再利用・共通化がしやすい
先述のパーツ単位での流用はもちろん、複数のパーツをまとめた「ブロックパターン」をあらかじめ作成しておくことで、そのパターンを別の投稿・固定ページで呼び出すことができます。
また、ブロックパターンで構築するのが難しいパーツ（例えば全体がリンクになったカードレイアウトなど）については、WordPressのcreate-blockという機能を利用して、自作のブロックとして登録することも可能です。
参考：create-block公式リファレンス
今回はcreate-blockについての説明は割愛します。
3. ブロクエディタを用いたサイト制作の注意点
3-1. ブロックエディタを想定したデザインを作る必要がある
ブロックエディタを用いたサイト制作で悩むポイントとして、「ブロック間の余白」があります。
テンプレートファイルに直接コーディングする場合、要素間の余白は都度CSSで調整できますが、ブロックエディタではページごとに余白を細かく調整することが、投稿・固定ページを編集するユーザーの負担になりがちです。
そのため、ブロックエディタを用いたサイト制作では、あらかじめ「見出し」や「画像」といったパーツ自体に余白を含めたデザインを定義しておくことで、編集しやすい設計にすることができます。
基本は上記のようにパーツ自体に余白をもたせる設計にして、どうしても対応できない余白のみ、スペーサーブロックなどで対応してもらうようにしましょう。
3-2. CSSの当て方に注意
ブロックエディタを用いたサイト制作では、クラス名にはWordPress標準のものが割り振られます。
テンプレートファイルに直接コーディングする場合、HTML要素ごとにクラス名を付与しますが、ブロックエディタではそのようには設計しません。
理由は、直コーディングとやっていることが変わらなくなってしまうのと、編集するユーザーの負担が大きくなってしまうためです。
クラス名は、「そのパーツを構成する最も親のブロック」のみに付与し、スタイルはCSS側で階層構造に応じて指定するようにしましょう。
また、その際に「確実にその要素だけにスタイルがあたる」記述をすることが重要です。
例えば、子要素だけにスタイルを当てれば十分な場合に、孫要素まで含めた指定をしてしまうと、他のパーツに意図しない影響がでることがあります。
3-3. 階層構造が複雑になり、コードの可読性が下がる
これは主に開発側の事情ですが、BEMやFLOCSSによるクラス指定と比べると、ブロックエディタでは階層をたどってスタイルをしていするケースが増えるため、純粋にコードの可読性が下がります。
FLOCSSでディレクトリ構造を整理する、適宜コメントアウトを残すなど、保守性を意識した実装を心がけることが重要です。
おわりに
いかがでしたでしょうか。今まではテンプレートファイルに直接コーディングすることが多かったのですが、ブロックエディタを使用した開発は、本来のCMSの機能を最大限活用した、とても効率的な方法だと感じました。特に、更新頻度が高いサイトや複数人で運用する場合に効果を発揮すると思います。
一方で、設計や運用ルールを考慮せずに導入すると、管理が煩雑になることもあります。サイトの目的や運用体制に合わせて設計することが、ブロックエディタを活かすポイントです。
本記事が、ブロックエディタを活用したサイト制作を検討する際の判断材料になれば幸いです。