MIYAJI NAMI DESIGN

BLOGS

【前編】Gifu WordPress Meetup #65 参加レポート「Snow Monkeyとunitone -なぜ unitoneをつくるに至ったのか-」

BLOGS

レポートの作成が大変遅くなってしまいましたが、昨年12/23(土)に「みんなの森 ぎふメディアコスモス」で開催された「Gifu WordPress Meetup #65」に参加いたしました。
「Snow Monkey / unitone 開発者キタジマさんと株式会社Vektor代表石川さんの登壇」ということで、著名人お二人が登壇されました。キャンセル待ちが発生する中、大変ありがたいことに参加への切符を手に入れることができました。
ちなみに、「Gifu WordPress Meetup」への参加はこの会が初めてでした。

そしてレポートがとても長くなりそうだったので、前編・後編とで記事を分けることにしました。
後編のレポートはこちら。

Gifu WordPress Meetupについてはこちら
https://wp-community.jp/blog/tag/gifu-wordpress-meetup


はじめのセッションでは、WordPressのブロックテーマ「Snow Monkey」と「unitone」の開発者であるキタジマタカシさんが、unitoneを作ろうと思った背景やこだわりなどをお話ししてくださいました。

ブロックテーマとは?

フルサイト編集が可能なテーマのことをブロックテーマと呼びます。
このフルサイト編集というのは、ヘッダーやフッター・サイドバーなど、サイトのすべてのパーツを編集できる機能で、今までは管理画面からサイト運用者がテキストや画像などの差し替えができるようにphpを書く必要がありましたが、フルサイト編集を使えばphpを触ることなく何処もかしこも管理画面から編集できるようになったということだと私は解釈しています。

あまりWordPressに明るくない私でも聞いたことのある日本製のブロックテーマは下記の3つ。
どれも有料のテーマですが、とても人気のあるテーマでコミュニティもあるようです。
※unitoneはダウンロードのみは無料ですが、アップデートは有料です。最近はWordPress本体の更新が著しく、それに合わせてテーマも更新されていくと思うので、アップデートはしておいた方が良さそうです。

  1. unitone
  2. SWELL

今回は上二つ「Snow Monkey」と「unitone」の開発者さんが実際に目の前でお話ししてくださるという大変貴重なイベントだったんです。

unitone開発の背景

Snow Monkeyでの問題点を解消すべくunitoneが生まれた

キタジマさんのお話を伺っていると、先に開発したSnow Monkeyに少しずつ疑問点や問題点が出てきて、それを解消するためにunitoneの開発を始められたようです。
その疑問点や問題点はいくつかあるようですが、その中でも私の心に残ったのは下記の2つです。(キタジマさんの表現とは異なります。あくまで私の解釈です。)

  1. パーツの粒度が大きいと使いにくいのではないか?
  2. フォントサイズを気にするように行間も気にすべきではないか?

この2つってデザインシステムやデザインカンプを作るにあたって、私が日々思っていることだったんですよね。

1. パーツの粒度が大きいと使いにくいのではないか?

デザインシステム…今の私のお仕事だとシステムというほどレベルの高いものではないですが、ある1つのデザインファイルをライブラリー化して、案件のデザインカンプにそのライブラリーを使用するということをしています。
その際にパーツの粒度が大きいと、せっかくライブラリー化したのに小回りが効かなくなってしまいます。

小回りが効かない…例えば

  1. パーツ内の要素の並びを変えたい
  2. パーツ内のある一部の要素のスタイルを変更したい

など、こういった場合、ライブラリーから切り離してパーツを作り直すことになります。
「2. パーツ内のある一部の要素のスタイルを変更したい」はパーツの中にさらにパーツがあって、それの親を編集することでなんとかすることができますが、入れ子に入れ子…そしてさらに入れ子…みたいになるとちょっと大変です。

では粒度が小さければいいのか?というと難しいところで、「粒度が最も小さいもの=パーツの最小単位」となるので、疑似要素1つだったりタイポ1つだったりとまとまりがなくなり、パーツとしてそのまま使えなくなってしまうのです。

unitoneはその辺りのバランスをとりつつ、パーツとしてそのまま使えるようになっているようです。

2. フォントサイズを気にするように行間も気にすべきではないか?

大きいフォントサイズの時と小さいフォントサイズの時とで行間を調整したいというのはデザイナーなら当然のことなのですが、h1のときは1line-height: 130%;にしてほしいけど、本文pの時はline-height: 170%;にしてほしい…みたいな指定をします。

ではh1とpの間のサイズはどうするか?

確かに、h2の時、h3の時…というように1つずつ行間を指定すればいいのかもしれません。しかし管理画面からフォントサイズを変更できるテーマの場合、フォントサイズを変更することで行間とフォントサイズのバランスが崩れるのです。
かといって、デザイナーでもエンジニアでもないサイト運用者に行間を指定させるのは難しいし…。

そこでunitoneではフォントサイズに対して自動で行間を調整しているそうです。
その表がこちら!


このような傾きさえ決めてしまえば、テーマのフォントサイズが変更されてもバランスが崩れることはない!ということのようです。フォントサイズをvwで指定するのと原理は同じようなので、上限・下限も設定することができそうです。

最後に

ということで開発者さん自身に開発の背景やこだわりをお聞きすることができて、とても充実した時間となりました。
図々しくも休憩中にキタジマさんに質問したら、丁寧にお答えいただきました。

質問
Q. 投稿にだけブロックテーマを使って、固定ページは静的に作る…クラシックテーマとの合いの子的にサイトを作ることはできますか?

回答
A. 静的に作ること自体が大変なので、ブロックテーマのフルサイト編集を使った方がいいですよ。

「これからはテーマファイルをあれこれするのは最小限にして、管理画面からの編集がメインになる…そしてWordPressユーザーはそれを受け入れているのだな。」と感じました。キタジマさんありがとうございます。

また、後日、Snow Monkey / unitone Youtubeチャンネルで、こちらのセッションの内容が動画で配信されたようです!
https://www.youtube.com/watch?v=MjmpHy2sFFQ

後編のレポートでは、株式会社Vektor代表石川さんのセッションについてまとめようと思います。

リンク集