WordPress フルサイト編集対応のブロックテーマ unitone について

はじめまして、unitone を開発しているキタジマタカシと申します。Snow Monkey という WordPress テーマも開発しています。

2022年に入ってから約6ヶ月開発してきて、やっととりあえずリリースできるところまで持ってこれたので、今回はなぜ unitone を開発しようと思ったのか、unitone で何を解決しようとしているのかについて書きたいと思います。

unitone を開発した経緯

WordPress 6.0 でフルサイト編集の機能が強化されました。サイトエディターは未だベータ版ではあるものの、主要なテンプレートがサポートされ、パターンの UI やブロックのロック機能が強化されるなど、ウェブサイト全体をブロックで組みやすく、そして壊れにくくなり、かなり実用レベルに近づきました。

Snow Monkey はフルサイト編集に対応していないクラシックテーマですし、他の主要な WordPress テーマもまだほとんどクラシックテーマだと思いますが、今後(主流にまでなるかはわかりませんが)フルサイト編集に対応したブロックテーマの割合がどんどん増えてくるのではないかと思っています。クラシックテーマではユーザーが思い通りに手を入れられなかったヘッダーやフッターなどのレイアウト部分までブロックで自由に組めるようになるのはそれなりに需要があるはずです。

サイトエディターの開発が進み、機能的にも UI 的にももっと洗練されていけば、フルサイト編集もきっと一般のユーザーに違和感なく受け入れられる日がくると思います(ブロックエディターもリリース当初は大批判されていましたが、今では多くの方が違和感なく使っていますよね)。

近い将来であるその日のためになるべく早めにリリースしておきたいなと思い、2022年の頭から開発をはじめました。

また、「Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論」という本を読んだことも unitone を開発するきっかけになりました。これらは unitone で解決したい課題にもつながる話題なので、そちらで詳しく書きたいと思います。

unitone で解決したい課題

Every Layout モジュラーなレスポンシブデザインを実現するCSS設計論」という本があります。Every Layout という海外のウェブサイトが書籍化されたものです。僕はこの本を読んだとき「これだよこれ!」と強い共感を感じ、興奮しました。

Every Layout の詳細については書籍や他の方が書かれた感想記事をご参照いただくとして、僕が特に感銘を受けたのは下記の3点についてです。

  • ブレイクポイントではなくコンテンツに基づいたレスポンシブデザイン
  • レイアウトプリミティブ
  • モジュラースケール

ブレイクポイントではなくコンテンツに基づいたレスポンシブデザイン

メディアクエリでは、レイアウトの再構成をハードコーディングで表現することになります。さらに、要素やコンポーネントが実際に置かれている状況と結びついていないのです。(中略)960pxは何か特別な幅なのでしょうか? 959pxで小さいサイズになることが本当に適切だといえるのでしょうか?

Every Layout

現代のウェブデザイン・web 制作において、レスポンシブデザインは当たり前のものとなっており、その実現のためにメディアクエリ(ブレイクポイント)が使われることもまた当たり前のことです。メディアクエリ(ブレイクポイント)を使うことは、あまり更新されなかったりあまりコンポーネント化されていないウェブサイトでは特に問題にならないかもしれませんが、Snow Monkey を開発していると度々悩まされることがありました。

Snow Monkey は汎用的な WordPress テーマであり、表現したいデザインに応じて、用意された多数のブロックやウィジェットを、メインエリアやサイドバーなど任意の場所に配置できます。

このとき、例えばメインエリアは700px、サイドバーは250pxだったとして、そこにそれぞれ同じブロックを配置したとします。しかし配置したエリアの幅が倍以上違うのでブロックを同じレイアウトで表示するのは難しくなります。複数カラムを持つブロックであれば、サイドバーではカラムを落とさないといけないでしょう。

メディアクエリは基本的にはビューポートの幅を基準とするので、このような配置エリアの幅に応じたデザインを実現することはできません。コンテナクエリーが普通に使えるようになればこの問題は解決するかもしれませんが、現状はまだ使えないので、なんとかするためには各エリアに名前をつけ、それぞれのエリアと表示サイズに応じてメディアクエリと CSS を書くしかありません。そうなると CSS は肥大化してしまい、管理も難しくなります。さらに、新しいエリアやブロック・ウィジェットが追加されるたびにこの作業が必要になってしまいます。

Every Layout には、フレックスボックスを活用してメディアクエリを排除し、ビューポートというコンテンツとは関係のない基準ではなく、コンテンツを基準に表示を可変させるアイデアが書かれています。unitone も全面的にその考えを採用しました。どんな場所にも柔軟にブロックを配置でき、そしてコンテンツを基準に適切な表示がなされることを目指しています。

レイアウトプリミティブ

Every Layoutの目的は、それらひとつひとつの小さなレイアウトが何であるかを定義し、取りまとめることです。本書ではこれらを「プリミティブ」と呼びます。(中略)プリミティブにはそれぞれ単一の責務があります。「要素間に垂直のスペースを設ける」や「要素を等間隔に配置する」、「水平方向に要素を引き離す」などです。これらプリミティブは、コンポジションの中で互いに親子または兄弟要素として配置されることを前提に設計されています。

Every Layout

「要素間に垂直のスペースを設ける」「要素を等間隔に配置する」のような箇所は1つのサイト内で何箇所もあると思います。そして、それぞれの箇所に応じてそれ用の CSS を書くのが一般的かと思います。その場合、同じようなレイアウト用の CSS が何箇所も CSS ファイル内に重複して存在することになります。

レイアウトと装飾を分離し、レイアウトプリミティブを用意してレイアウトを実現すれば、CSS の重複をかなり減らすことができますし、各レイアウトプリミティブは単一の責務しかもたないのでメンテナンスも簡単になります。

unitone では Every Layout のレイアウトプリミティブにインスパイアされて開発した各ブロックでレイアウトを実現します。

モジュラースケール

音楽は基本的に数学的な表現です。組版において音楽的性質が語られるのは、組版と音楽は数学的な基礎を共有しているためです。(中略)規則性によって調和のとれた音が生まれます。(中略)調和が必要なのは、視覚的なレイアウトにおいても同様です。

Every Layout

Every Layout では「1.5」という数値をもとに、その倍数で line-height や余白を定義する方法が書かれています。ある統一された基準を採用しそれに従うことで調和のとれた秩序あるデザインが実現されるというわけです。このような数値と倍数に基づいたもの以外でも、例えば黄金比やフィボナッチ数列などを用いたデザイン手法も有名ですよね。そのような比率や数列のデザインは自然界にも見られるそうです。

僕はデザインを専門的に学んだことがないので、どういうバランスが良いのだろうか、これくらいのバランスにしたけどこれを論理的に説明できないのだろうか?といつも悩んでいました。Every Layout のモジュラースケールの考え方に触発されて、いくつか数学に基づいたデザインの書籍を読んだりしました。

unitone では、文字サイズは調和数列、余白はフィボナッチ数列に基づいてサイズの種類を用意しました。各ブロックではそれらの用意されたサイズに基づいて文字サイズや余白を設定できるようにしました。また、メディアクエリによる文字サイズや余白サイズの調整は使わないというルールで開発しているので、clamp を用いることでビューポートが小さいときにはバランスを保ったまま自動的に縮小されるようにしました。

フィボナッチ数列に基づいた余白のバリエーション
調和数列に基づいた文字サイズのバリエーション

文字サイズと line-height のバランスと自動化については Snow Monkey を開発する以前からずっと僕の中での課題でした。今回やっとそれが一段落した実感があります。

CSS カスタムプロパティの活用

Snow Monkey は昨年末あたりに IE11 のサポートを終了しました。IE11 のサポートを終了したことで使用できるようになった新しい技術がいくつかあるのですが、その中でも CSS カスタムプロパティが使えるようになったことが僕にとっては一番のワクワクでした。

Snow Monkey はそれなりに歴史があるプロダクトになってきていて、互換性を考えると簡単にリファクタリングできないのですが、unitone は新しいプロダクトなので、せっかくなら CSS カスタムプロパティをフル活用してみたいと思いました。

タイポグラフィや余白まわり、各ブロックの設定などに CSS カスタムプロパティをフル活用しています。WordPress テーマをベースにしたウェブサイト制作は CSS の上書き地獄・詳細度地獄になりがちだと思いますが、CSS カスタムプロパティを使えば CSS でもっと API 的に設定ができるようになるので、もっと簡潔なコードでカスタマイズできるようになるはずです。

もっといろいろな可能性があると思うので、もし自分はもっとこういう使い方をしているよ!という方がいらっしゃいましたらぜひ教えてください!

unitone で目指すこと

unitone は、前述したようにタイポグラフィとレイアウトに力をいれて開発しています。デザイナーの方でなくても調和のとれた秩序あるデザインが実現できる、自由度の高い WordPress テーマに育てていきたいと考えています。

Snow Monkey は他の WordPress テーマと比べると開発者向けの機能性で、多様なフックでレイアウト面での自由度も高いほうだとは思うのですが、やはり機能や装飾が一般的な制作現場でのオリジナルテーマと比べると多いので、基本的には Snow Monkey っぽいウェブサイトになりやすいという面がありました。それはそれで短期間でそれなりのウェブサイトを立ち上げることができるというメリットがありますが、やはり本格的な自由度という面では限界もあったと思います。

Every Layout の思想とフルサイト編集はそんなモヤモヤを抱えていた僕にバチッとはまりました。

Snow Monkey は少し上のレイヤーで、unitone は少し下のレイヤーで、それぞれ違った役割を持った WordPress テーマとして開発していきたいと思います(unitone は Every Layout の理解がないと使いこなすのが難しいと思うので、Snow Monkey よりもプロ向けになるかなと思います)。

今後の展開

まだアップデート機能を開発していないので、とりあえずは無料でリリースして、今後アップデート機能の開発ができたところでアップデート用のライセンスキーをサブスクリプションで販売するような形にしたいなと考えています。サブスクリプションが有効な間はアップデートに加え、サポートフォーラムの利用や限定記事の閲覧ができるというような感じです。

ちょっと時期は未定ですが、基本的な部分の開発はできているので、近いうちにその辺りもリリースできればなと思います。

あと、まだ現状の unitone はベータ版扱いということで、大きな仕様変更が入る可能性もあります。なので v1.0 がでるまでは本番利用非推奨のお試し利用推奨です。もし本番環境でご使用になる場合はその点ご注意ください!


Snow Monkey との違い

全部が全然違うのですが、触ってみようとして一番混乱するのは各ブロックの性質だと思います。

Snow Monkey は各ブロックは多機能で、それ単体でデザイン・レイアウトができるものが多いです。例えばセクション系ブロックやメディアとテキストブロックがわかりやすいです。

対して unitone の各ブロックは Every Layout にインスパイアされているので単一の責務しかもっておらず、Snow Monkey のセクションブロックのようなデザイン・レイアウトを実現するためにはいくつかのブロックを組み合わせる必要があります。コンテンツの上限に padding を確保するためのガターブロック、コンテンツを一定幅に収めるためのコンテナーブロック、タイトルと中身の間に余白を確保するためのスタックブロックを組み合わせる、のような感じです。

上記のようにブロックを組み合わせて実現するのは、自由度は高いものの各ブロックの性質をよく理解していないと思い通りの見た目にするのが難しいです。そのため unitone ではブロックパターン(ブロックを組み合わせてデザイン・レイアウトしたもの)をたくさん用意しています。現状でもよくみかけるレイアウトを実現するパターンはある程度揃っていると思いますが、今後もっと増やしていきたいと考えています。

ちなみに、挿入したパターンちょっと変更したいなというときは、パターン内の任意のブロックを選択して設定を変更する必要がありますが、先に書いたように多数のブロックが入れ子になってレイアウトを実現しているので、ブロックを選択するのがちょっと難しいです。ブロックを直接クリックして選択するのではなく、ブロックツールバーやリストビューを活用すると思い通りに操作しやすいです。

あと、ブロックテーマはヘッダーやフッターなどのテンプレートパーツにブロックパターンを紐付けておくことができます。紐付いたブロックパターンがあるテンプレートパーツを選択したときはブロックツールバーに「置換」というボタンが表示されます。クリックすると紐づくブロックパターンの一覧が表示され、選択するとそのブロックパターンが適用されます。unitone でもテンプレートパーツやブロックパターンはフル活用しているので、例えばヘッダーのレイアウトを変えたい、フッターのレイアウトを変えたいという場合はブロックツールバーの「置換」ボタンから好みのレイアウトに変更してみてください。

ブロック一覧

まだ全然マニュアルを整備できていないので、ここに軽く各ブロックの説明を書いておきたいと思います。

両端

子要素を両端に配置します。子要素の幅が大きくなり両端揃えを維持できなくなった場合は1カラムになります。

Lorem ipsum dolor sit amet

consectetur adipisicing elit

デコレーター

装飾用ブロック。色、パディング、位置等が設定できます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

センター

子要素を中央揃えします。デフォルトではテキストではなくセンターブロック内の子ブロック自体が中央揃えされます。設定によりテキストも中央揃えできます。

Lorem ipsum dolor sit amet

クラスター

子要素を水平方向に並べます。

Lorem

ipsum

dolor

コンテナー

コンテンツ領域を一定の幅に収め、さらに左右に適切な余白を確保します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

カバー

画面の広い範囲をカバーするようにデザインされています。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

voluptate velit esse cill

フレーム画像

画像を一定の画角に収めるために使用されます。

レスポンシブグリッド

シンプルなグリッドを生成します。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

ガター

上下のパディングでコンテンツを区切ります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

スタック

子要素を一定間隔で縦に並べます。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cill

スイッチャー

内容によってコンテンツの流れる方向が切り替わります。スイッチャーブロックの幅が「閾値」より小さくなると1カラムになります(下記では500pxに設定しています。)。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

テキスト

読みやすいテキストを表示するためにデザインされています。

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

サイドバー

サイドバー付きのコンポーネントを組み立てます。サイドバーの幅、コンテンツの最小幅/最大幅を設定できます。設定した幅を維持できなくなった場合は1カラム表示になります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Lorem ipsum

unitone のダウンロード

unitone は無料でダウンロードできます。ダウンロードにはアカウント登録が必要です。
アップデートやサポートフォーラムの利用には有料のライセンスキーが必要です(準備中)。