UIデザインにおける「8」という数字の重要性

2023年9月5日 17:05

ウェブやアプリのUIデザインにおいて、8をベースとしたグリッドシステムは、人気のあるフレームワークの一つです。このシステムでは、例えばマージンやパディングなどのレイアウト要素が8の倍数をベースに定義されます。

なぜ「8」なのか

1. 柔軟性

8を採用する理由は、さまざまなサイズやニーズに柔軟に対応できることができるという点にあります。8, 16, 32, 64といった8の倍数に加えて、半分の4や中間の12を追加しても整数となり、ディテールに対応できます。例えば、「5」を法則として採用した場合、人にとっては計算しやすい、覚えやすいというメリットはありますが、8の法則に比べるとそのような繊細な柔軟性が失われます。

2. 高解像度ディスプレイとの互換性

多くのディスプレイの解像度は8の倍数で定義されています。このため、8の法則はピクセルパーフェクトなレンダリングを助けます。ディスプレイが8の倍数で定義されているのは、動画の圧縮技術が間接的に関係しています。MPEGやH.264など、多くの動画圧縮技術が8x8、または16x16のブロックベースでの圧縮処理を採用しており、8や16のような2の累乗に基づくブロックサイズは、コンピューターグラフィックスと動画処理において効率的な計算を可能にするため、多く採用されています。したがって、動画の解像度を設定する際にも16や8の倍数を用いると、圧縮効率が最適化され、高品質かつ小さいファイルサイズで動画を提供することが可能となります。

ただ、スマートフォンにおいては、8の倍数に由来しない解像度も多く存在します。18:9や19:9など、縦長のディスプレイを採用するケースも非常に多いです。これはスマホが動画よりも、縦にスクロールするような体験がメインとなっていることが要因かなと思います。

3. 一貫性

UIデザインにおいて一貫性を保つことは非常に重要です。8の法則を使用することで、レイアウトの柔軟性と、描画の最適化、そしてデザイン全体に一貫性が生まれ、すべての要素が一定のルールに従うようになります。これにより、デザイナーや開発者間の認識のずれが減少し、開発を迅速かつ効率的に行うことができます。また、一貫性があることでユーザーエクスペリエンスの向上にもつながります。

モジュラースケーリング

実際にスペーシングなどを定義する際には、8をベースにさらに様々なスケーリングを加えて、使用する値を絞り込んだりします。8の倍数のままだと選択肢が多すぎるためです。マージンやパディングのスペーシングのサイズや、文字のサイズなどを様々なスケーリングのアプローチで定義していきます。

8×フィボナッチ整数によるスケーリング

8pxのユニットに1、2、3、5、8、13という前の2つの数の和で次の数が決まるフィボナッチ数列を掛け合わせたスケールです。スペーシングなどに使うとメリハリもあってちょうど良いです。

8px, 16px, 24px, 40px, 64px, 104px, 168px, 272px, 440px, 712px …

これに、細かなディテールに対応するために、4pxと12pxを加えると繊細なレイアウトが必要な場合には使いやすいかなと思います。

文字サイズ

文字のサイズを設定する際にも、視覚的な一貫性と情報の階層性を確保するために、一定の法則に基づく数値を設定すると良いです。文字サイズのスケーリングには、8の法則ではなく、ベースのテキストサイズに対してモジュラースケーリングを適用することが一般的です。

まず、基準（ベース）とするフォントサイズを設定します。UIデザインでよく使われる基準の値としては、14px、16px、18pxなどがあります。これは主要なテキストのサイズに使われます。ここでは16pxを基準とします。

次に、この基準の値に対して一定の比率を掛けることで、その他のテキスト要素、例えば、見出し、キャプション、注釈などのサイズを決定します。この比率としては、黄金比（約1.618）、完全五度（1.5）完全四度、（1.333）などがよく用いられます。

黄金比（約1.618）

16pt, 26pt, 42pt, 68pt, 110pt, 177pt

完全五度（1.5）

16pt, 24pt, 36pt, 54pt, 81pt, 122pt

完全四度（1.333）

16pt, 21pt, 28pt, 38pt, 51pt, 67pt, 90pt, 120pt

調和整数 x8

そしてさらに、大きなサイズに加えて、小さいサイズのバリエーションを両立させるために、調和整数に8を掛け合わせたスケーリングを適用した例です。見出しやタイトルなどには大きな文字サイズを用いることで強調を与えられる一方で、本文や補足テキストで必要となる小さな文字サイズのバリエーションも備えていて適度な読みやすさも保つことができます。

12px, 13px, 14px, 16px, 18px, 21px, 26px, 32px, 43px, 64px, 128px

Material Design / Type scale generator

あとはフォントサイズなどを決めるのに、マテリアルデザインのタイプスケールジェネレターなどのツールもありますので、参考にしてみてください。

まとめ

これらの定義に正解はなく、プロジェクトの目的やチームの好みによって適切に決めていくことが大事かなと思いますが、UIデザインにおいてルールを定義するのは非常に重要なポイントです。視覚的な一貫性と調和、そして効率的なデータ処理という観点から、「8」やモジュラースケールの重要性を理解し、デザインのアプローチに適用してみてください。