こんにちは、みみです。
WordPressのデザインの話をそろそろガチでしたい
WordPressのブロックエディタが実装されて早2年になります。カスタムブロックの作り方については良く話題になる気がしますが、ガラッと変わった設計に応じた新しいワークフローやデザイン手法などについてはそんなに話が上がらない気がします。
一通りのカスタムブロックプラグインが出揃った今だと尚更に、それよりもブロックエディタ時代のWordPressのデザイン手法についてみんな考えあぐねているのでは無いかと思うのです。
20日に出た5.8でのWordPressの進化を眺めていて、そろそろ誰かとそういう語りがしたくなってきたので、試しにひとつ書いてみようと思います。Webの4割を占めるWordPressのデザインの話、もっとあってもいいと思うんですよね。
ワークフローとしてウォーターフォール型では全く機能しなくなる、みたいなふわふわした概論よりは、もっと細かな、実践視点での話をしていきたいなと思っています。手始めに、ボタンブロックについて考えてみます。
コンポーネントで捉えること
なぜブロックひとつから始めるか、疑問に思われる方もいらっしゃるかも知れないので前置きしておきます。
ブロックエディタ化したWordPressはすっかりReactベースの、コンポーネントというものを基準にして構成されています。Reactにおけるコンポーネントとは、などは公式ドキュメントを参照されるのが良いと思います。ここで言うコンポーネントとはもう少し広義の意味になります。一塊の要素、ぐらいのイメージで取り敢えずは大丈夫かな。それをブロック、と言っても良いのかもしれませんが、もう少し多様な、曖昧なイメージに留めておきたい心地。
ウェブサイトのデザインの手法として、コンポーネントから捉えて作るということをしている人はどのぐらいいらっしゃるでしょうか。アプリのデザインにおいてはもう一般的な概念だと思うのですが、ウェブサイトのデザインという話になると、特に日本ではまだちょっとその辺りの認識がバラけているような気配が私にはしています。
もちろん、1ページだけのサイトデザインについてコンポーネントから起こすのは工数がかかり過ぎるなど、様々な開発手法があるウェブサイトにおいて、コンポーネントから考えることがベストだとは必ずしも言えないかも知れません。が、もうWordPressのデザインにおいては、コンポーネントから考えるのが最終的に効率が良いように感じています。
WordPressで作ったサイトは使われ続ける
なぜなら、CMSであるWordPressは使われ続けるサイトとして作成されます。たまに静的サイトと何が違うのか良くわからない（むしろWordPressを使わないほうが幸せだったのではないかという）作りになっている残念なWordPressサイトもお見かけしますが、基本的にはCMSとして運用されるためにWordPressを利用するはずです。
そうなると、当初は1ページだけのサイトデザインであっても、発展し、展開があることを念頭に作成するべきです。むしろ発展しようがないサイトをWordPressで作りたいクライアントが居たら全力で止めたい心地です…。それは最早サイトやHTMLである必要も無いのかも知れません。
2年経っても未だ、ウォーターフローのままで開発を続けて事故っている話を耳にします。ワークフローの変化を厭うのは分かるのですが、WordPressを使い続ける以上、対応しない方が結果、最終的なコストが高くなってしまうケースを何度も見かけています。結果仕上がった誰もが使いにくいハリボテをこれ以上増やしたくない。そのためにもまず私から本気で考え直してみたいのです。
一回目は、コアブロックのボタンブロックについて書いてみる
ボタンブロックは、段落や、画像ブロックに次いで、誰もが使い倒すブロックの一つではないかと思います。また、先に挙げたブロックと比べて、CSSをカスタムしたりスタイルを加えたりして、ひと手間加える事の多いブロックの様に思います。
CTA（行動喚起）要素の代表選手。ブロックエディタになって、誰もが簡単に設置できるようになったのは素晴らしいなと思います。通常はボタンというとフォーム内のボタンやなども考えられるのですが、現状のブロックエディタにとって、ボタンブロックは基本的にボタンの形状をしたaタグのリンク、とそのグループのことを指します。
リンクなのかボタンなのか、はちょっと置いておきます
リンクとはボタンとは、という話をするとそれでまた一記事できてしまう話です。結論、ここではボタンかリンクかという区別ではなく、CTAかリンクかで区別して、CTAに類されるものをボタンブロックで扱うことに一旦させてもらいます。ココが気になる人が居たらまた別でお話しましょう。
エンドユーザーの利便性向上に伴って、開発の難易度は上がる
ボタンブロックには横並び縦並びのバリエーションに加え、5.8からはさらに位置揃えの機能、フォントサイズの変更機能なども追加されました。また、まだWordPress本体には取り込まれていませんが、角丸や枠線の編集機能もGutenbergではすでに実装されています。
また、ボタンリンクというコンポーネント自体にも、いくつか特徴的な状態（States）があります。ざっと、Enabled, Disabled, Hover, Focused, Selected, Pressed…ぐらいでしょうか？標準的なウェブサイトにおいて全てのStateが必要であることは無いかもしれませんが、ボタンリンクという時点ですでに複数の状態を扱うデザインが必要であるということです。
ボタンブロック一個だけで考えるべき構成がすでにたくさんあって、軽く眩暈がしますね。ここにさらに、複数配置とスタイルの概念があります。
ボタンブロックのスタイル
ご存知の方が多いと思いますが、ブロックにはスタイルという概念があります。同じブロックでもスタイルを使うことで、様々な見た目の選択肢を作ることができます。
そしてボタンブロックには、「塗りつぶし」と「輪郭」というなんとも言えない命名がされたデフォルトのスタイルが存在します。
長年、もうすぐ20年ほどになりますか、セマンティック・ウェブに毒された？私としては、その見た目依存の命名にアレルギーが出そうになるのですが、幅広いユーザー層に違和感なく使わせるためにはそちらの命名のほうが妥当なのかもしれないという結論に至りました。
結論に至ったというよりは、一度決定しコアに取り込まれた概念に対して提案をし説得し実装する（全部英語で）という労力を考えたら、こっちが靡いたほうが楽だな、と思ったというのが正確です。WordPressを使う以上、個人の好みやこだわりなど何の意味もありません。こだわればただ最終的な工数が増え、エンドユーザーを困らせるだけ。巨人の肩に乗るというのはそういうことです。どうしてもこだわりたかったらコアに乗り込むのがベスト。それが嫌なら黙って従うべし。
ただ、視覚的な強さを考えると、順序はせめて「輪郭」からの「塗りつぶし」にして欲しかったな、と思う今日この頃。…耐えかねたら、Issue書きます。
デフォルトのスタイルを無くすデメリット
というわけで、ボタンリンクのデザインが「塗りつぶし」と「輪郭」という名前に相応しいデザインであれば、それぞれにスタイルを振りましょう。そうでなければ、unregister_block_style() を使って非表示とすることも出来ますが、データの継続性（テーマを変更したとしても使えること）を考えると標準スタイルのunregisterはなるべく避けたいところです。
現状もし、テーマを変更してカスタムのボタンスタイルが無くなったら、塗りつぶしのスタイルが当てられるようになっていると思います。ですのでデータとして何かが壊れる訳でも無いのですが、塗りつぶしのスタイルが消されているテーマから変更する場合の面倒くささ、想像ができますか？ボタンブロックには前述の通りそれだけで考えなければいけない構成がたくさんあるのです。
テーマの変更なんて、実案件では考えられない方もいらっしゃるかも知れませんが、先に述べたようにサイトは案外とさくっと、10年とかのスパンでも使われていきます。さくっと作ってしまったサイトほど、しれっと生き残ってしまいます。それはもう、製作者当人としては目も当てられない姿で、尚且、自分ではどうにも出来ない距離感で。10年後に後悔しないためにも今しっかり悩んでおきたいところです。
カスタムブロックなど推して知るべし。私が極力カスタムブロックを使わない理由の一つはココにあります。まあ、本当に10年前のサイトのリニューアル案件が来たら、コンテンツ全取っ替え提案が基本ですが、元になるデータはある訳で、それが再利用出来るに越したことはありません。そもそも10年後にWordPressが生き残っているか、スタイルという概念が残っているか、それが塗りつぶしと輪郭なのか、はもちろん誰にも分かりませんが、データを再利用またはサルベージしたいニーズはきっと残るでしょう。
ですので、私個人の意見としては基本的に「塗りつぶし」と「輪郭」に相当するデフォルトスタイルを想定してデザインすることをおすすめします。もしくはデメリットを認識した上でそうしない選択をするのもありでしょう。
位置揃えと縦並びか横並びか、はもう自在なのでエディタ任せにした方が良いけれど、the_content の外はどうする？
さて、ちょっと話がエモ系になってしまった感がありますが、5.8で追加された新機能にフォーカスしましょう。
ボタンブロックに位置揃え、という機能が追加されたのは中々大きい変更です。flexベースの、justify-contentで配置が調整できます。逆にテーマ側で位置揃え系のスタイルを下手に当てていると、ユーザーが困りますので改修したほうが良いでしょう。さらっと書きましたがコンポーネントの概念でデザインと実装をしていない場合は案外めんどいと思います。
悩むのはthe_content外での扱いです。例えばフッター付近に各ページ共通のCTAエリアがあってそのボタンデザインがボタンブロックとして作成するものと同一だとしましょう。is-content-justification-centerとかいう長ったらしいクラス名を継承して実装するか否か。そもそもthe_content外でwp-block-buttonというクラスを使い回すのか。
これは人に寄るかも知れませんが、私個人としては、これまではブロックのスタイルとは別の独自クラスを作成して実装してしまうことが多かったです。そこだけさらに独自のデザインに変わったりすることも多いのでその様にしていました。
しかし、ウィジェットがブロック化、というかブロックの配置されるエリアがthe_contentを飛び出すようになった今、独自クラス化はただ冗長なだけで意味を成さない気配がしてきました。つまり、フルサイト編集機能はまだ道半ばではありますが、フッター付近のCTAだったりしたらもう5.8だとブロックだけで作れてしまうんですよね。
これはデザインの話なのか？
さて、まだボタンブロックについての序論、といった処ですが大分長くなったので一旦止めたいと思います。
…デザインの話と言いながら、実装の話してる！と思われたかも知れませんが、ウェブデザインにおいて実装とデザインは切っても切れない関係です。服飾でいうなら、縫製技術や布の特性を知らないデザイナーを、建築でいうなら、工法の特性を理解しない建築家を私は信用しません。実装作業が実際に出来る必要は無いですが、理解せずにウェブデザインが出来るとは思えません。そして理解するには実際に手を動かすしかないのではないかと感じています。
WordPressの特性を踏まえたデザインを作成するためには、WordPressを触って知るしかないのです。しかし、そういうデザイン視点からのWordPressの分解みたいな話はあんまり無い気がして、今回書いてみることにしました。いかがだったでしょうか？
デザインから考えるWordPress
というようなエモ散文をつらつら書いている間に、FigmaのWordPressデザインライブラリのことについて、額賀さんとちゃんと触って色々語りたいよね、という素敵なお話がありまして。それはきっとMeetupだと、個人の意見を公式の見解のように思われてもよくないし、自由にアレコレ話すためには別枠の勉強会が良いかなあ、と。それならいっそデザインから考えるWordPressの話をしませんか？良いですね！そういうのやりたかった！という勢いで、「デザインから考えるWordPress」というグループをconnpassで作ってみました。ロゴもアイキャッチもまだありません。web-design.connpass.comが残っててびっくりしました。
初回は8月10日、「Figma の WordPress デザインライブラリを活用してみよう」です。Figmaは私の大好きなツールなので、これについてお話出来るのだけで、もうとてもワクワクします。デザインチームが作っているライブラリも素晴らしいです。概要は決まっていますが、内容はこれから詰めていきます。一緒に触って考えてくれる人を大歓迎。聞き専でも別に良いのですが、やはり同じ阿呆なら踊らにゃ損、ですよ。
