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

なぜ 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 には、Flex レイアウトや Grid レイアウトを活用してメディアクエリを排除し、コンテンツとは関係のないビューポートを基準とするのではなく、コンテンツを基準に表示を変化させるアイデアが書かれています。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 よりもプロ向けになるかなと思います）。

---

Snow Monkey との違い

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

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

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

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

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

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

ブロック一覧

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

アコーディオン

概要をクリックするとコンテンツが表示されるブロックです。Snow Monkey Blocks にもアコーディオンブロックがありますが、あのように親 > 子の関係にはなっておらず単体のブロックとして機能するようになっています。

上記はデフォルトの見た目ですが、下記2つのブロックスタイルも持っています。

ボックス

パネル

両端

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

デコレーター

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

センター

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

クラスター

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

クラスター（区切りあり）

区切り線でコンテンツを区切るクラスターブロックです。インサーターには「クラスター（区切り：xxx）」という名前で表示されます。

通常のクラスターブロックとは違い「クラスター（区切りあり） > クラスター（区切りあり）のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り：ストライプ

区切り：スラッシュ

区切り：枠線

コンテナー

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

カバー

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

フレーム画像

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

レスポンシブグリッド

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

レスポンシブグリッド（区切りあり）

区切り線でコンテンツを区切るレスポンシブグリッドブロックです。インサーターには「レスポンシブグリッド（区切り：xxx）」という名前で表示されます。

通常のレスポンシブグリッドブロックとは違い「レスポンシブグリッド（区切りあり） > レスポンシブグリッド（区切りあり）のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り：ストライプ

区切り：アンダーライン

区切り：ボーダー

ガター

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

スタック

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

スタック（区切りあり）

区切り線でコンテンツを区切るスタックブロックです。インサーターには「スタック（区切り：xxx）」という名前で表示されます。

通常のスタックブロックとは違い「スタック（区切りあり） > スタック（区切りあり）のコンテンツ > 各ブロック」というような入れ子構造になります。

区切り：ストライプ

区切り：下線

区切り：枠線

スイッチャー

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

テキスト

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

サイドバー

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

レイヤー

ブロックを重ねるためのブロックです。レイヤーは 12×7（ポートレートモードでは7×12）のグリッドを持っており、そのグリッドに沿って子レイヤーの位置をずらすことができます。

リール

子要素をシンプルに横スクロールで表示させるブロックです。

パンくず

そのページに応じたパンくずリストを表示するためのブロックです。

スライダー

Swiper を使ったブロックです。必要最低限の機能でビルドしているので、Swiper のフル機能を使いたい場合は別途適当なスライダープラグインを使用するのが良いかもしれません。

子ページ一覧

特定のページの子ページの一覧を表示するブロックです。ブロックスタイルを切り替えることで様々なレイアウトで表示できます（HTML 構造自体も変わります）。

縦書き（ベータ版）

縦書きの文章を配置できるブロックです。

ただ、そもそもの CSS の縦書きの仕様やブラウザサポートが個人的には微妙だったり、ブロックエディターの仕様か何かわかりませんが縦書き状態で文章を入力しようとするとカーソル位置が固定＆背景が動くような状態で入力しなければならず非常に入力しにくいという問題があるので、ベータ版という位置づけにしました。

今後、破壊的な変更があったりブロック自体が廃止される可能性もあるので、その点ご理解の上お使いいただければと思います。

縦書きブロックの「高さ」は都合上 js で設定するようになっているため、文章の入力をしていると適切な高さではない高さになってしまう場合があります。その場合はブラウザを狭めて縦書きブロックの幅を一度変えてもらうと、js が再度発火して適切な高さが設定されます。これもっとスムーズに高さが設定されるようにしたいんですけどどなたか良い方法を御存知ではないでしょうか…。

縦書きブロックの js での処理を見直し · Issue #143 · inc2734/unitone

現状 縦書きブロックの幅と、子ブロックの幅の合計から何行の折返しになるか計算。 折返しが発生する場合は column-count: 2 を付与。 2行分しか高さが確保されないので、…

github.com

セクション

準備中です。

グリッド

準備中です。

フレックス

準備中です。

メガメニュー

準備中です。