デザインの一貫性と柔軟性を高める8の倍数を活用したグリッドシステム

こんにちは！株式会社NTTデータのデザイナー集団「Tangity」で、サービスデザイナーをやっています石澤です。

今回、金融業界のお客様を対象としたスマートフォンアプリ（以下、アプリ）のUI/UXデザインを担当した事例の中からご参考になるTipsをご紹介します。

普段皆さんもコンシューマー向けのアプリを当たり前のように使われていると思います。そしてほとんどのアプリが画面内で適切なサイズで表示されているはずです。

それは多くのアプリでは「グリッドシステム」と言われるデザインフレームをベースに設計されているからです。

特にアプリやウェブサイトのUIにおいては文字や画像などの要素を配置するルールを作ることで、画面内のコンテンツが整理でき、デザインに一貫性を与えることができます。

その一貫性を持たせるためにマージン（上下左右外側の余白）やパディング（コンテンツ領域の内側の余白）に8の倍数を定義しているケースが多いのです。

1．なぜ8の倍数なのか？

8の倍数を採用する理由は、世の中の多くのディスプレイの解像度は基本的には8の倍数で定義されていることが挙げられます。その為、モバイルデバイスの画面幅や高さを8で割り切れる値にすることで、柔軟性と整合性を高めることができます。これにより、画面要素の配置やサイズ調整がシンプルになり、一貫性のあるデザインを実現することができます。

一方でUI設計時によく比較対象になるのが5の倍数です。5倍数の方が計算し易いなどの理由がありますが5の倍数を採用することはオススメしません。

その理由は、必ずしもデバイスの画面幅や高さが5で割り切れるとは限らずコントロールがし難いためです。5の倍数を採用すると、画面要素の配置やサイズ調整が不自然になりやすく、一貫性が保たれず画面内の要素がチグハグになる可能性があります。そのため、8の倍数の方が柔軟性と整合性を保つ上で適切であると言われています。

具体的にモニターサイズ（iPhone13）が390×844*の場合を例に見てみましょう。
*2,532 x 1,170に対してCSS上で定義する実質解像度

横幅が390ピクセルの場合、8の倍数である384や392などを基準にしたグリッドを使用すると、画面上の要素を均等かつ整合性を保った配置が可能になります。これにより、エンドユーザーは視覚的に認識しやすく、統一感のあるデザインを体験することができます。仮に画面内の要素調整により微細に4や12を採用しても整数で処理できるためデザインの秩序は維持できます。

一方で、5の倍数で390ピクセルを基準とすると、整数倍で均等に配置することが難しくなります。例えば、均等なマージンや要素間のスペースを確保する場合、整数倍にならないため、デザインが不自然に見える可能性があります。

このような理由からも8の倍数を採用することでユーザーエクスペリエンスの向上に繋がると考えます。

２．メリットとデメリット

メリットとしては、8の倍数に基づいたグリッドシステムを使用することで、デザインの一貫性に加えて、デザイナー同士だけでなく開発者とのコラボレーションも円滑になります。

一方でデメリットの観点としては、どうしても特定の機能要件に対応するためにレイアウトが8の倍数に収まりにくいケースが起こり得ます。つまり、様々なステークホルダーと関わり進めていく上で理屈では解決しないプロジェクト内の事情を汲み取ることも必要になります。

その場合、煩雑に例外を作るのではなく、レイアウトのベースラインを定めた上で例外の場合の前提やルールを定義しデザインシステムの整合性を保つことが大切になります。とはいえ、デザインシステムの基本原則として極力例外は作るべきではありません。

3．8の倍数を採用する判断基準と合意形成

8の倍数を採用するかどうかの判断基準は、プロジェクトのニーズや要件に依存します。開発者、デザイナー、およびステークホルダーとのデザインシステム全体の定義を通じて、マージンの基準を定め、柔軟性と一貫性のバランスを考慮して決定します。

その際の基本ステップは以下の通りです。

（１）デザインシステムのベースラインを定義する
（２）ベースラインに基づきグリッドシステム上でレイアウトを設計する
（３）ワイヤーフレームに落とし込み机上で確認する
（４）静的なモックアップの作成と共有しデバイス上で確認する

まずは（１）の合意形成を経て、（２）と（３）をイテレーティブに具体化していきます。ある程度、明確になった上で（４）に進み最終的なチェックを行います。この時に再度（１）に戻り定義を見直す場合もあります。

なお、一度ローンチ後のアプリであればメンテナンス時に（３）と（４）から進める場合もありますがプロセスとしては上記の流れで進めることで手戻りも少なく、合意形成もし易くなります。

まとめ

以上のように8の倍数を採用することでスマホアプリの画面レイアウトの一貫性と柔軟性を高めることにつながる優位性をご紹介してきました。

しかし、現実的にはプロジェクト固有の特性や個別の状況やその要件に応じて柔軟に対応せざるを得ないケースも多々発生することがあります。最終的にはそのプロジェクトの目的やお客様と議論しユーザーにとって適切な落とし所を決めていくことになります。

デザイナーとしては原理原則を忘れず一貫性と柔軟性に基づく最適な見た目、開発者としてはアプリ内の効率的なデータ処理という観点からUIデザインを定義することです。提供者目線と都合だけで落とし所を決めるのではなく、エンドユーザー目線を忘れないデザインにすることが非常に重要なポイントだと考えます。

デザイナーさん大募集

現在Tangityではデザイナー職を積極的に採用しています！サービスデザイン、UXデザインのクライアント業務の経験がある方、ぜひ私たちと一緒に働きませんか？募集要項など詳細はこちら。お待ちしております。

インスタグラムやってます！

TangityのInstagramです。ぜひフォローしてください！