1/31（土）に行われた「Kansai WordPress Meetup@大阪 『最新のブロックテーマ制作の話』を聞こう」に参加してきました！
ブロックテーマという名前は知っていたものの、実務では基本的にクラシックテーマで構築しているため、「結局何がどう変わるのか？」が曖昧なままでした。
今回は他社さんの事例も聞けるとのことで参加してみました。
この記事ではセミナーで紹介された内容をもとに、学んだことや考えたことなど、備忘録的にまとめています。
当日の様子はXのポスト＃WMKansaiをのぞいてみてください。
ブロックテーマとは
サイト全体（ヘッダー・フッター・各ページテンプレート）がすべて「ブロック」で構成されたテーマ形式。
2022年リリースのWordPress 5.9から導入。 従来のクラシックテーマとは構造が大きく異なり、HTMLテンプレートとtheme.jsonで構成されている。
クラシックテーマでは、特定の箇所を更新したい場合に直接コードを修正する必要があり、コーディング知識の無い人にとってはハードルが高いこともあります。
一方ブロックテーマは、管理画面上から編集できるようになり、更新が容易になったのが大きな違いです。
🤔「投稿だけ編集」から「サイト全体を編集」へ進化したのがブロックテーマ
ブロックテーマを使ったサイトの例
セミナーで紹介されていた2サイトがこちら。
ブロックテーマと言っても、実装方針がそれぞれ異なっており、理解が深まりました。
これらのサイトは多くのコンテンツやレイアウトが管理画面上から編集できる構成となっています。
学び処立志塾
登壇者のとろゆにさん（@Toro_Unit）が制作されたサイトです。
👉標準機能を最大限活用したシンプルなアプローチ
- theme.json でできることは極力そこで完結させる方針
- カスタムブロックは 0！
- 標準ブロックとテーマ設定だけで構築
株式会社ブルートーン
登壇者のZIZO DESIGN のIhara Yoshieさん（@x_tubuan_x）が実装されたサイトです。
👉拡張性・柔軟性を重視したアプローチ
- デザインに合わせて実装した柔軟性のあるカスタムブロック
- グリッドも管理画面上から変更可能
- WordPressの公式ドキュメントを参照しながら、Cursorを活用した実装方法
同じブロックテーマでも、「標準機能を活かすか」「カスタムで拡張するか」 で設計思想が大きく変わるのが印象的でした。
ブロックテーマのメリット・デメリット
メリット
- 管理画面上で直感的にサイトを編集できるので、PHPの知識が無くてもサイト更新が容易
- 設定箇所がメニューやカスタマイザーなどに分散せずわかりやすくなった
- カスタマイズできる箇所の自由度UP
- 編集画面の見た目がそのままフロントの画面なのでイメージしやすい
デメリット
- ブロックを積み上げるようにコンテンツを作っていくので、細かいアニメーションや独自のレイアウト、デザインルール外の装飾などはブロックのみでの再現が難しい
❓ブロックテーマについての疑問
ブロックテーマについてのいくつかの疑問です。
💬 SWELLなど、管理画面で色々編集できるテーマ＝ブロックテーマということ？
ほとんどはブロックエディタに対応したクラシックテーマであり、ブロックテーマとは別物。投稿や固定ページはブロックで編集できるが、サイト全体はPHPテンプレート構造
💬 クライアントが自由に編集できるようになったら、デザインが崩れちゃうんじゃない？
こちらはセミナー内でも言及されていました。
実際のところ…
- WordPressにはリビジョン機能があるため、万が一崩れても元に戻せる
- 実務上「大幅にレイアウトを壊すほど編集する人」はそれほど多くない
ブロックテーマでサイトを制作する際は、どこを更新可能にするかということを意識して設計し、運用時のサポートでカバーしていく感じになるのかなと思いました。
💬 クラシックテーマのままだと将来動かなくなるの？
現時点では、クラシックテーマが使えなくなる予定はなさそうですが、公式の流れは、徐々にブロックテーマ中心に進んでいる印象を受けました。
個人的な感想やなるほどと思ったこと
- クライアント自身でのサイト更新が容易になるので、修正依頼が減るかも？
→クライアントにとって「自分で更新できる」という体験がサイトに対する満足度に繋がりそう。 - 今後、修正などでブロックテーマを触る機会が増えるのかも。
→ブロックテーマが登場して4年ほど。中には「ブロックテーマにしか触れたことがない」というお客さんも出てくるのでは？サイト修正を依頼され、それがブロックテーマでした、というパターンもありえそう。 - 完全にコードを書く必要が無くなるというわけではないっぽい
→オリジナル性の高いデザインを作ったり、管理画面での編集の自由度を上げようと思うと、WordPress標準機能のみでは難しい。（これは従来のテーマでもそうだと思いますが） - デザイン・実装分業時のすり合わせ
→デザイナーがブロックテーマの仕様をある程度理解していないと、デザインFIX後に実装できない部分が発生しそう。ブロックテーマでサイトを制作する際は、従来の制作フロー（デザイン→クライアントフィードバック→実装→クライアントフィードバック）ではなくデザイン、実装、フィードバックを短いサイクルで繰り返し行う方法が向いてそう。 - サイトリニューアル＝必ずしもブロックテーマに変える必要はない
→クライアントがクラシックテーマのUIに慣れている場合、ブロックテーマへの移行は新たな学習コストが発生する。「更新のしやすさ」というメリットと「学習コスト」「工数」を天秤にかけ、クライアントの更新頻度やニーズを見極めた上で判断することが重要。拡張性を優先するか、工数を抑えるか、案件ごとに柔軟な対応が求められそう。
まとめ
- ブロックテーマは「誰でも更新できるサイト」を作りやすくする仕組み
- ただし、デザイン自由度を上げるには結局コーディング知識が必要（Cursor使ってWordPressの機能を覚えさせると捗る✨）
- 当たり前ですが設計段階での考慮が超重要
今後案件によってはブロックテーマに触れる機会も増えそうなので、少しずつ理解を深めていきたいと思います。
ご登壇された方々、運営の方々、ありがとうございました！ブロックテーマについて知るきっかけになりました。
コメント