「ブロックエディタ利用を想定したテーマ制作と今後必要なこと」という内容で登壇してきました

Gifu WordPress Meetup #17 にて「ブロックエディタ利用を想定したテーマ制作と今後必要なこと」という内容の登壇を行なってきました。

内容としては、WordPressを利用したウェブ制作を行なっておる身として感じている危機感なども踏まえて、ブロックエディタを活用した制作や運営提案を行うにはどのような考え方が良いのか、知識は必要なのかという部分を重点に置き、お話してきました。

今回は、その内容を振り返りながら補足も交えてご紹介しようと思います。

制作者として感じている「危機感」とは

先日開催されましたWordCamp Osaka 2019に僕も参加してきました。その時の話はこちらで紹介しています。

こちらで参加させていただいたセッションからはとても多くの刺激をいただきました。それから1ヶ月経ちましたが、まだ刺激は継続しているので、個人的には大きな刺激だったのかなと感じています。

僕が感じている「制作者としての危機感」とは、技術進歩についていけるのかどうか、という点です。単純な話、今後も継続して技術的なレベルアップを行うことができるか、常に高いレベルであり続ける努力ができるか、という点で不安と危機感を感じています。

例えば、JavaScriptで言うと、今までは正直それほど刷新的なアップデートは行われてこなかったと感じていました。それほど前線にいる人間でもないので体感できていないだけなのかもしれませんが、ES5やES6というように短期間で仕様が変わっていく(新しくなっていく)ようになったのは、ここ数年という感覚でいます(把握していないだけかもしれません、ごめんなさい)。

PHPのサポートリミットも同じようなことが言えるでしょう。アップデートサポート、セキュリティサポートともに期限が名言されているので、それらを考慮した対応と運用が必要になってきます。

正直、今までは今までの少ない積み重ねの上にあぐらを書いていた部分を強く感じています。完全にそのツケが回ってきている状態です。そして、これからはしっかりと技術・知識レベルともにアップデートしていかないと、完全に乗り遅れていってしまうでしょう。

やらなければいけないことが目前に明確になったと同時に、自分が今後何をどれだけできるのかという点をしっかりと見極めて身の振りをハンドリングしていかないと、いつか突然廃業しなくてはならなくなるという危機感を強く感じるようになりました。

ブロックエディタを活用するために

「ブロックエディタを活用する〜」という見出しを付けましたが、そもそもこれは間違っているのではないか?と思っています。

ブロックエディタは標準仕様

というのも、登壇の中でお話しましたが「ブロックエディタ」というのは、WordPress5.0以降のバージョンで使えるようになった編集機能のことを言います。(それ以前のものを「クラシックエディタ」と呼びます)

ミソは「WordPress5.0以降のバージョンで使えるようになった編集機能」という部分です。特別なことをしなくても利用ができる標準仕様であるという点です。

この「標準機能」を「活用するための提案」という言葉にとても違和感を感じます。

WordPressを利用したウェブサイト管理システムを提供するのであれば、標準仕様であるブロックエディタを活用できる状態で提供することは、いわば最低の条件なのではないか、と感じていますし、そう考えるべきだと強く思うようになりました。

ですので、登壇でも触れたように「ブロックエディタを活用できるようにする」ことは制作者として当然となっているべきですし、それが当然できるという上で、全ての話が進んでいくべきだろうと思います。

登壇のスライド

登壇した際のスライド

ブロックエディタを提案するために必要な準備

ブロックエディタをちゃんと使うために必要なこと(準備しておくこと)は、こんなことかなと思います。

  • WordPressやブロックエディタを実際にちゃんと使ってみる
  • どんなことができるのか、できないのかを使って把握しておく
  • コアブロックがどんなソースコードを書き出すのかを確認しておく

ざっくりと、このようなことが必要になるかと思います。

WordPressやブロックエディタを実際にちゃんと使ってみる

これはWordPressに関わる全ての人に言えることだと思いますが、実際にWordPressを使っている人って意外に少なかったりします。

仕事の案件のために、制作の最中に触ることはあっても、自身のプロジェクト(ブログやウェブサイト構築)ではあまり活用していないという方がとても多いです。

ですので、まずはちゃんと使ってみるということがとても大事になってきます。使いこなせてないものをビジネスでオススメするってかなり信用をなくす行為だと思うのです。

どんなことができるのか、できないのかを使って把握しておく

WordPressから提供される標準ブロックだけで何ができるのか、ということを実際に自分で試行錯誤しながら試してみる必要があると思います。

そうすることで、何ができて、何ができないのかということを肌身をもって感じることができます。それがブロックエディタの話をする上で役に立つであろうということは言うまでもありません。

コアブロックがどんなソースコードを書き出すのかを確認しておく

そして、できればそれらブロックを組み合わせて、どんなソースコードが作られるのかも確認しておくと良いでしょう。

そうすることで、デザイナーやディレクターと話をする際に「これは標準ブロックを組み合わせて実現できる、これはできない。」といった相談や判断をすることができます。判断を下せなくても一定の知識から、テストする必要があるかないかを判断することはできるので、効率化を図る一因になることは間違いありません。

ブロックエディタを活用できるデザインを作るために

ブロックエディタやマークアップを意識しすぎることで、自由なデザインに対して否定的な考えを持つわけではありません。

ただし、現実問題として、運用のしやすいウェブサイトというのは、言い換えるとブロックエディタを活用することで作ることができるウェブサイトであり、それを可能にするデザインにするという必要性は出てくると考えています。

「別に全部カスタムブロックにすればいいじゃん」という言い分もありだと思います。また「全部HTMLブロックに流し込めばいいじゃん」という考え方もありだと思います。しかし、ここでは「ブロックエディタでコンテンツを作成できること」を基準に話していますのでご了承ください。

活用するためには、まずデザイナーも「ブロックエディタ」を理解する必要があります。先ほど書いた3つの項目はデザイナーでもトライしておくべきでしょう。

そして、それらのブロックが書き出すマークアップを元に、実現可能なデザインを作っていく。それらをコンポーネント化していくという考え方が必要となります。

マークアップを元にデザインを作っていくと書いていますが、標準ブロックに拡張スタイルを当てる方法が一番制作コストを抑えられるであろうという考え方を元にしています。

その考え方なしに、標準ブロックをメインとしたブロックエディタ活用は難しいでしょう。ですので、この方法の場合、デザイナーもしっかりとWordPressを利用した上で、書き出されるソースコードを把握していくと素敵でしょう。

個人的には、Adobe XDの文字スタイルやカラーパレット、コンポーネントなどを活用したデザイン制作で良い方法がないか模索しています。

まとめ

これからの時代を生きていくウェブ制作者は、スキルアップを常に求められていくような気がしています。ただ、それをしなくても生きていけるかどうかといえば、生きていけるのだろうとは思います。

ですので、極論ではあるのですが、スライドの後半でも言及しているように「自分はどうしたいのか、どうありたいのか」という疑問を常に自分に問いかけながら、精進していこうと思います。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。