ブロックテーマとは？Web制作の流れはどう変わる？

WordPressのブロックテーマについて知りたい方向けに、ブロックテーマの基礎知識を紹介します。この記事を読めば、これからのWeb制作に必要な知識や技術がわかります。

この記事はWordPress6.5時点での情報です。

ブロックテーマとは？

ブロックテーマとは、WordPress5.9（アップデート日：2022年1月25日）から実装されたFSE(Full Site Editor)対応のテーマです。

ブロックテーマでは投稿や固定ページのコンテンツだけでなく、ヘッダー、フッター、サイドバー、さらにページテンプレートもブロックで編集できるようになりました。

ブロックテーマが登場したことにより、従来のテーマはクラシックテーマと呼ばれるようになりました。

ブロックテーマとクラシックテーマの違い

ブロックテーマとクラシックテーマは大きく異なる点が複数あります。まずはテーマを構成しているファイルの違いについて知るのが良いでしょう。

クラシックテーマ

WordPressの公式テーマ『twentytwentytwo』はクラシックテーマです。クラシックテーマはルート直下にindex.phpがあります。

ブロックテーマ

WordPress公式テーマ『twentytwentyfour』はブロックテーマです。ブロックテーマにはindex.phpがありません。

クラシックテーマがPHPベースのテンプレートで構成されているのに対し、ブロックテーマではHTMLベースのブロックテンプレートで構成されています。

テンプレートファイルの構造が変化したことで、テーマを構成するために必要なファイルも変化しました。

ブロックテーマによるサイト制作の難しさ

ブロックテーマが登場したことによって、サイト制作者はテーマの形式を選択する必要が出てきました。この記事の執筆時点(2024年6月時点、WordPress6.5)ではブロックテーマをサイト制作案件で利用した事例はそれほど多く見受けられません。筆者も含む、多くのサイト制作者は依然、クラシックテーマで制作しています。

この理由は、ブロックテーマの制作にはクラシックテーマとは違う難しさがあるからです。

ブロックの開発にはブロックエディタ登場以前よりも、技術的なハードルが上がりました。ブロックの開発にはReactの知識が必要だからです。管理画面のユーザビリティの考慮や、メンテナンスも必要です。

ブロック開発に対応したサイト制作は必ずしも標準になったわけではなく、ページごとにPHPテンプレートファイルを作成したり、ページごとの編集画面にカスタムHTMLブロックを用いて、直接HTMLが記述される場合もあります。

ただし、徐々にブロックエディタを活かしたサイト制作の知見が広がり始めています。今後はブロックテーマを利用したサイト制作に挑戦する方が増えていくことが予想されます。

そんな難易度の高いブロックテーマですが、いったいどのようなメリットがあるのでしょうか？

ブロックテーマのメリット

ブロックテーマのメリットは、ユーザーがブロックを使用して視覚的にサイト全体を構築・カスタマイズできることです。

ブロックエディタがそうであるように、開発者がブロックを用意しておけば、ユーザーはコーディングもファイルのアップロードをせずにコンテンツを編集できます。

サイト全体を視覚的にカスタマイズできるということは、初めてWordPressを利用するユーザーでも、ブロックの扱い方さえ覚えてしまえば、ブログやコーポレートサイトを作れるということです。

プログラミング言語やデザインツールに触れたことがない人でも、今まで以上にサイトをカスタマイズできるようになるでしょう。

一方、製作者はどうでしょうか？

ブロックテーマのデメリット

製作者の目線に立つと、ブロックテーマにはデメリットがあると言えるでしょう。先にも述べた通り、ブロックの開発はこれまでのWordPressによるサイト制作に比べて難易度が高いですが、これは技術的な意味だけにとどまりません。

技術力が必要

ブロックエディタにはReactのコンポーネントが利用されています。ブロックテーマを開発する上で、Reactの知識は必要でしょう。theme.jsonやblock.jsonといったWordPessの設定ファイルについてもよく理解する必要があります。

メンテナンスが必要

制作者は保守性も考慮しなければいけません。一度作ったブロックはメンテナンスしていく必要があります。サイトを適切な状態に保つにはユーザーとの継続的なコミュニケーションが欠かせません。サービスの提供という観点で考えた際、どのような契約をユーザーと結ぶかは、ビジネスシーンにおいて非常に重要です。

ユーザー権限の設計が必要

ユーザーが自在にサイトを編集をできることは、必ずしも良いユーザー体験を与えるとは限りません。誤った操作でWebサイトの表示が崩れてしまえば、ユーザーも製作者も気が気でないでしょう。FSEによる編集はどこまでユーザーに操作を委ねるか、運用が始まるまでに充分に認識を合わせておく必要があります。

これらに加えて、ブロックテーマにはもう一つ大きなインパクトがあります。それは、制作の流れへの影響です。

ブロックテーマは制作の流れを変える？

ブロックテーマによって、制作の流れは変わりつつあります。ブロックを利用したサイト編集には、ブロックのカスタマイズを考慮したデザインが必要になるからです。

従来のウェブ制作では、デザインを用意してからHTMLでコーディングし、その後PHPでテンプレートファイルを作っていました。デザインに合わせてコーディングをしていたわけです。

しかし、ブロックテーマではその方法は困難です。既存のブロックで実現が難しいデザインは、ブロックの開発が必要ですが、これには従来のコーディングよりも工数がかかります。

この場合、制作者が取れる選択肢は2つです。

• ブロック開発を頑張る
• ブロック開発しやすいようにデザインを調整してもらう

予算や納期などを考えると、後者の方がプロジェクトへの影響が少ないでしょう。

これはデザイナーもブロックエディタについて理解を求められることも意味しています。

ブロックテーマが主役になったサイト制作の現場では、デザインツールでデザインを作るよりも、開発環境でブロックを組み、プロトタイプをユーザーやデザイナーに共有して、各自の意見を取り入れていく、といった制作の流れになるのかもしれません。

終わりに

この記事の執筆時点では、ブロックテーマを実務で利用している方はまだ多くありません。チーム体制や制作の流れが最適化されていくのか、多くの制作者が模索しているようです。

ひとつ言えることは、今後もWordPressに携わっていく意思のある方は、ブロックについてより理解を深めていくのが良いでしょう。筆者もそうしていきます。

ユーザーであれ、デザイナーであれ、開発者であれ、ディスカッションを交えてサイトを制作し、運用していくことができれば、WordPressはもっと楽しくなるのかもしれません。