文字サイズを基準にしたレイアウト
こんにちは。BX部エンジニアのシノザキです。
エンジニアとデザイナーのコミュニケーションのことをよく考えます。以前「カスケーディング・デザイン」という言葉を通してそのことを考えてみましたが、もう1つ思いついたことがあるので、1本記事にしてみようと思います。
内容はタイトルの通りです。普通にやっている人もいるかもしれませんが、ビジネスと両立させながら実現となるとまだまだ難しいのではと感じています。ただ最近はツールの進化もあり、以前と比べると実現の可能性を感じられるようになって来ました。
それではどうぞお付き合いください。
文字サイズを基準にしたレイアウトって？
Webデザインは「ピクセル」を基準にレイアウトをすることが多いけど、それを「文字のサイズ」を基準にレイアウトしてみよう、というアイデアです。
コンテンツがもつ「1文字」という単位でレイアウトを考えることで、大型ディスプレイやVR/AR空間のような環境でも成り立つ、可搬性の高いデザインにできるというメリットがあると妄想しました。
いきなりVRまで話を広げると飛躍しすぎるので、ひとまずWebページのレイアウトという範囲の中でメリットを書いてみたいと思います。デバイス幅によって変わる動的なレイアウトを考える時にも有効だと思います。
ちなみにここでいう1文字のサイズとは、本文の文字サイズのことを想定しています。大抵のブラウザでは16pxで表示されます。
文字サイズ基準だと何がいいのか
抽象度の高いレイアウトができる、という点だと思います。
例えば文章の幅を決めるとき、読みやすくするため折り返しの幅を適切に決めてあげる必要があります。横に長すぎると読みにくいですね。
折り返し幅の決め手になるのは「何文字くらいで折り返すと読みやすいか」だと思います。手元にある本を見ると36文字でした。この幅を決めるのにピクセルを経由せず、文字数で考えるとどうでしょうか。
「36文字で折り返す」という設定をしたいとき「16pxの文字が36個入るように576pxの幅を…」とするのではなく、「36文字分の幅」という指定をした方が理に適っています。
CSSでは「36rem」と書いたりできます。「576px」と書いてあるより直感的に感じますね。
ピクセル指定に比べ、「ユーザーに向けて」「レイアウトの意図を指定」している、という感覚です。
ちなみに「レイアウト意図を指定する」という考え方は「EVERY LAYOUT」という本にも出てきます。
例その1 - 見出しサイズ
見出しの文字サイズを決める場合も、基準の文字サイズから算出してみます。
「大見出しは32px、中見出しは24pxの大きさにしよう」よりも「大見出しは本文の2倍、中見出しは本文の1.5倍」とした方が、サイズ指定が直感的に感じられます。
ユーザーに提供したいのは「特定のピクセルサイズを指定した見出し」ではなく、「本文と見出しのサイズの関係性」だ、という考えです。
例その2 - 余白の決め方
デザインの数値ルールを、4や8の倍のピクセル数を基準に決めることがあります。これも文字サイズを基準にするとどうでしょうか。
2カラムのレイアウトのギャップの指定を「40px」とせず「2.5rem（40px相当）」にすることで、隣り合ったコンテンツのクリアランスは2.5文字分は取りたい、という意図を設定できます。
セクションから次のセクションまでの余白の指定を「120px」とせず「8rem（128px相当）」にすることで、8文字分の間をおいて次のセクションを読んでほしい、という「読む体験」に対する意図を設定できます。
じゃあやれば良いのでは
そんなにいいならやれば良いやん、と思いますね。なかなかそうはいきません。
文字サイズを単位にできるのはCSSに「rem / em」という単位が存在しているためであり、それはデザイナーが使うツール上ではまだ一般的ではない、というのが実現しづらい大きな理由だと思います。
またグラフィカルな要素はやはりピクセルを基準に考えるのが直感的です。正方形を描画しようとしていきなり「何文字分のサイズで…」と考えるのは難しいです。同様にアニメーションを考える時も「100ミリ秒で4文字分動いて…」と考えるのは直感的ではないと感じます。
こんにちのWeb制作ではグラフィカルな要素は必要不可欠であり、それを無視して文字サイズだけをのんびり考えているわけにはいきません。
加えて、ピクセルでの指定は色んなデバイス・ブラウザ上の見え方を強く保証できる、「ハードな」指定です。こうした見え方の保証はビジネス上重要な要素であり、これを違うルールに移行するのは相当難易度が高いと感じます。
難しそうだけど出来る未来も見えてきた
そういうわけで実際難しいよねと思っていたのですが、最近のツールやサービスの進化を見ていると、以前よりは現実味を帯びてきたように感じます
例えばfigmaのText Styleという機能では、テキストのスタイルを先にコンポーネントとして定義しておいて、それを使ってレイアウトができますね。定義が終われば、あとは「どの意味の文字サイズを使うか」だけに関心が移ります。そこではピクセル数の出番は少なくなります。
またノーコードサイト制作サービスのSTUDIOでは、ボックスモデルを前提に各デバイスサイズの見え方をシームレスにレイアウトする作りになっています。そうした動的なデザインに対しては、固定のピクセル数の指定よりも、文字数や画面に対しての比率を考慮することの方が重要になります。
よりブラウザ上の出来事に近いデザイン作業に変化していると感じます。インブラウザ・デザインという言葉も聞くことが多いです。こうしたツールの変化が、レイアウトの考え方の変化につながるのではないでしょうか。
おわりに
ちょっとややこしい話になってしまいました。
元々は、「作ったサイトが惑星探査機ボイジャーに乗って地球外生命体に届くとしたら、地球のデバイスでしか成り立たないピクセル基準より、文字サイズ基準のレイアウトの方が理解されやすいんじゃないか」という妄想がきっかけでした。
始まりはただの妄想でしたが、流行りのAIがWebサイトを評価する時代が来るとしたら、似たような考え方が役に立つかもしれませんね。時代のニーズに合わせて堅牢なサイトづくりを目指していきたいと思います。
なお、Chatworkでは現在採用に力を入れています。一緒に新しい領域にチャレンジしてみたいという方はぜひ採用サイトをチェックしてみてください。
この記事が気に入ったらサポートをしてみませんか？