ブロックテーマ時代のWordPress制作ワークフローとは

2018年12月にリリースされたWordPress 5.0からブロックエディターが導入され、2022年1月にリリースされた5.9にはフルサイト編集機能に対応したブロックテーマ「Twenty Twenty-Two」がデフォルトテーマとなりました。

書籍などの情報も増え、一般の利用ではブロックエディター・ブロックテーマの利用がかなり進んできていると感じています。

しかしウェブ制作者に目を向けると、未だに多くの制作者はわざわざ「Classic Editor」プラグインをインストールして投稿をクラシックエディターで作成したり、固定ページを xxx-page.php で作成しています。

なぜ制作者はブロックエディター・ブロックテーマを使わないのでしょうか？

ブロックエディター・ブロックテーマは、


従来のWordPress制作ワークフローに合っていない

制作者がブロックテーマやブロックエディターを使わない理由として、『新しいものを受け入れられない』『勉強不足』などという人もいますが、私は違う考えを持っています。

ブロックエディター・ブロックテーマは、従来のWordPress制作ワークフローに合っていないのです。
制作ワークフローに合っていないから、コーダーはブロックエディターが使いづらいと感じ、過去の手法でコーディングをすることになります。

では、WordPressがブロックエディターを採用したのは間違っていたのでしょうか？

いえ、間違っているのはそちらではありません。

いつまでも古い制作ワークフローのままの制作者側に問題があるのです。

ブロックエディターから始まったフルサイトエディティングへの移行は、WordPressの制作ワークフロー自体を変えるものだということに、まだ多くの制作者が気づいていないのです。

これまでのWordPress制作ワークフローと問題点

従来のWordPress制作ワークフローはこのようなものだと思います。

そして、いつも問題になるのが

デザイン作成 → HTML化・テンプレート作成

のところです。

WordPressに精通していないデザイナーが作ったデザインをWordPressの標準ブロックで実現することは多くの場合困難です。

パーツの表示順序、アイコンの位置、画像の大きさ、テキストの装飾など、少なからずブロックのHTML構造に手を入れるか、複雑なCSSを記述する必要が出てきます。

そのためコーダーはブロックを使うことを諦め、独自のHTML構造によるテンプレート作成を行う選択をします。
また固定ページにおいても、クラシックエディター上でウェブ知識を駆使した作成を行ったり、xxx-page.php で作成を行うことになります。

ブロックエディターに無理やり対応するために工数をかけても追加費用は出ませんから、デザイナーのデザインを実現することに特化したコードを書いたほうが工数が減り、デザイナーの要求は満たせるからです。

ただ、そのようにして作成したテンプレートは、デザインを崩さないためにコンテンツ内容に制限が出ることも多いです。

また、コーダーがウェブ知識を駆使して作成した固定ページは、ウェブ知識のないクライアント担当者が触るとレイアウトが崩れてしまう可能性が高いため、”WordPressなのにクライアントは修正ができない”という、何のためのWordPressかわからない状況になってしまいます。

問題解決のための高すぎるハードル

これらの問題を解決する方法はいくつかあります。

• デザイナーがブロックエディター・ブロックテーマを理解したデザインを行う
• デザイナーとコーダーの間で、密なコミュニケーションを取りながら制作する

デザイナーがブロックエディターやブロックテーマをしっかり理解するというのは理想ではありますが、どんどん変化していくWordPressについていこうとしたら、肝心のデザインに十分に力を入れていくことができないのではないでしょうか。

セミナー登壇している方など、ブロックテーマを本当に理解されているデザイナーもいらっしゃいますが、そういう人は野球に例えるなら「エースで４番」になれる人（滅多にいない超優秀な人）だと思ってください。

またデザイナーとコーダーが密なコミュニケーションを取るという対策ですが、お互いのコミュニケーション力が、かなり高くないと難しいでしょう。
私の経験では、何度もやりとりを繰り返すうちにコーダーが折れて負担を抱えてしまうことになります。

「デザインは後から」というワークフロー

ではどうすれば解決できるのでしょうか？

ここで私は「デザインの前にWordPressでプロトタイプを作成する」というワークフローを提案します。
言い換えるなら、先にサイトを作り、後からデザインをするということです。

ブロックエディターで作るプロトタイプ

Adobe XDやFigmaでプロトタイプを作ったことのある方は多いと思います。

プロトタイプを作るときは、ボタンなどのパーツを一から作成するのではなくUIキットと呼ばれるパーツ集を使ってページを構成し、これらにスタイルをつけて行きます。

ブロックエディター・ブロックテーマを使えば、これと同様の作業がWordPressで可能なのです。
そしてUIキットに対応する機能が「ブロックパターン」です。

ブロックパターンは、見出し・段落・画像などにスタイルを適用してレイアウトしたブロックの集まりをパターンとして登録したものです。
ブロックパターンがXDやFigmaと異なるのは、見た目だけのパーツではなく実際に動作するということです。
例えばクエリ―ループブロックは、実際の投稿のサムネイルやタイトルなどが表示されます。

個人的には「クエリ―ループブロック」がブロックエディタでプロトタイプを作る肝だと思っています。

WordPressのブロックテーマは、ノーコードでサイト構築ができるようブロックパターンが多く同梱されています。
同梱されているパターンには、パーツレベルではなくページとしてそのまま使えるものまであります。
最新のWordPressは、独自性にこだわらなければ本当にノーコードでWordPressサイトが構築できるのです。

日本向けのブロックパターンを配布しているサービスもかなり増えています。
以下はその一部です。

ただ、プロトタイプを作成する際は、デザインが完成してしまっているパターンや個性的なパターンは使わないほうが良いと思います。
クライアントやデザイナーがそのデザインに引っ張られてしまうからです。

デザイナーに渡すときのポイント

プロトタイプが出来上がったら、デザイナーがデザインを行います。
プロトタイプに直接デザインを施すのは難しいので、Figmaなどで作り直してもらいます。

デザイナーにプロトタイプを渡す際は、どの部分がひとかたまりなのかわかるようにしておきます。
パターンを罫線で囲む、背景色をつける　などで、崩してはいけないところを明示しましょう。

下記は、テーマ「X-T9」とプラグイン「VK Blocks」を使い、編集画面にてブロックを並べて作成したプロトタイプの例です。ブロックはレスポンシブ対応していますのでデバイスごとの表示のイメージがしやすいです。

よく出来たテーマでプロトタイプを作ってしまうと、適当に作っただけでいい感じになってしまうことがありますが、プロトタイプはデザインではありませんので、デザイナーには『スタイルの当たっていないFigmaやXDのデータだと考えてデザインしてもらいたい』と依頼しましょう。

ウェブデザインに慣れていないデザイナーに渡すときは、想定されるあらゆるデータを流し込んでおくといいでしょう。
ウェブデザイン経験の浅いデザイナーがCMSに対応できるデザインを作れないのは、ウェブサイトを閲覧する人たちが起こす様々なケースを想像できないからです。

これには下記の「テーマユニットテストデータ」を使うと便利です。

このデータを、WordPressのツールメニューからインポートすると、経験が浅い人には考え付かないような様々なケースのデータが作成されます。
（コメントなど、利用しないデータやレイアウトは削除しておきます）

なお、ブロックテーマでは、デザイナーはウェブページをただデザインするのではなく、スタイルガイドなどベースのスタイルから系統立てたデザインを心がける必要があります。
（ブロックテーマのためのデザインについては、また別記事にしたいと思います）

テンプレート作成

デザインが上がったら、コーダーがデザインをプロトタイプに適用していきます。

ブロックエディターの経験が無い方は、先にブロックで作ってしまうとシンプルなデザインのサイトしか作れなくなるのではないかと心配されると思います。
実はWordPressのブロックのHTML構造はとてもシンプルですので、CSSを適用して複雑なレイアウトを作り上げることも思ったより難しくありません。

さらに先に述べたスタイルガイドがあれば、ブロックテーマは非常に効率的に作成することが出来ます。

プロトタイプ先行で可能になる納期短縮

プロトタイプ先行の制作ワークフローには、進行上の大きなメリットがあります。

デザインを始める前にコンテンツを作り始めることができるのです。

私は過去に100ページ以上の投稿と固定ページがあるWordPressサイトを、システム構築から１か月弱で公開まで持って行ったことがあります。

その時は既存テーマを使って投稿用パターンを作成し、WordPressの経験がない3人の作業者で手分けして投稿を作成しました。

ワイヤーフレームからパターンの作成まで2週間、投稿作成と固定ページ作成は練習期間を含めて約1週間、投稿作成と並行してデザインを進めて残りの1週間でデザインを組み込み、1か月で公開まで漕ぎつけたのです。

ただ公開時はクライアントも制作側も100%納得できるデザインにはなっていませんでした。
そこで公開後も引き続きデザインのブラッシュアップを行いました。
クライアントの投稿作業を続けながらデザインの修正を行うことができたのも、プロトタイプ先行でHTML構造を確定させてからデザインを行ったからです。

ウェブ制作が工程ごとの分業だけでなく、工程を並行して進めて納期短縮も図れることが、ブロックエディターとブロックテーマを導入するメリットだと考えています。

ブロックテーマがもたらすデザイン手法の変革

なお、ブロックテーマによるデザインは、グラフィックデザインではなくエディトリアルデザイン的な制作手法が向いていると考えています。

書籍を扱ってきたDTPデザイナー、具体的にはAdobe InDesignの制作に長けたデザイナーがWordPressのデザインに向いているのではないかと思うのです。

これについては、改めて記事にする予定です。
少々お待ちくださいね。

この記事を書いた人

川井 昌彦

FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

最新の投稿

• 技術記事2025年6月15日ブロックテーマ時代のWordPress制作ワークフローとは
• 技術記事2025年3月7日WordPressに百千鳥フォントを入れて遊んでみました
• ブログ2025年1月3日移転のお知らせ（2024年）
• 日記2024年12月24日2024年もベクトルさんの質問相談会に助けられました