デザイナーにとって一貫性を保つことは非常に重要な側面です。

デザイナーとして、アプリやWebサイトをデザインしている方はグリッドという用語を聞いたことがあるかと思います。これらのグリッドはデザインガイドとして、デザイナーがUIをすばやく一貫してレイアウトできるようにすることを目的としています。

💡グリッド（英: Grid）とは、デザインする画面を水平線と垂直線で分断し、ブロックラインを組み合わせたものを指します。Webデザインなどの現場で、グリッドレイアウトの手法は定番としてよく使われています。

画像：microsoft teams fluent ui

画面サイズとピクセル密度の多様性は増え続けており、デザイナーにとってアセット生成の作業はより複雑になっています。 サイズとスペースの要素に４のような偶数を使用すると、さまざまなデバイスのスケーリングが簡単で一貫性のあるものになります。このシステムは４ポイントグリッド・システムと呼ばれています。

今回は４ポイントグリッド・システムについて、その重要性、適用方法について調べてみたいと思います。このシステムを使用することでレスポンシブウェブ・デザインにも役立ちますが、制約が固定されているアプリのUIをデザインする場合に特に役立ちます。

４ポイントグリッド・システムとは？

４ポイントグリッド・システムを使用する場合、すべてのスペースと寸法は4の倍数である必要があります。4ピクセルの基本単位を使用します。

これは単に、「4の増分」を使用して、ページ上の要素のサイズと間隔を空けることを意味します。 定義された高さまたは幅は、パディング、マージン、線の高さを含めて4で割り切れる必要があります。

画像：リンク

基本的な原則は、すべてが4の倍数（4、8、12、16、20、24…）であるということです。4の倍数を使用して、ブロック要素とインライン要素の両方の寸法、パディング、およびマージンを定義することです。

この例では、各ボタンの角の半径も4ピクセルです。

ブロック要素
ブロック要素は、行自体に多くの要素が含まれる一種のブロックです。 ブロック要素は、高さと幅の変更を行うことができます。インライン要素は行全体のスペースを占有しますが、スペース幅内には1行しかありません。 インライン要素は上下の余白を尊重せず、左右のみのパディングも考慮します。インライン要素の高さと幅はコンテンツによって決まります。

このシステムには、実際には2つバージョンがあります。 1つは、4ポイントの増分で定義されたシステム表示グリッドに要素を配置する方法で、これを「ハードグリッド」メソッドと呼びます。もう1つは、個々の要素間の4ポイントの増分を単純に測定する方法で、これを「ソフトグリッド」と呼びます。

ハードグリッドメソッドは、追加の背景要素を使用し、それらを前景要素の小さなグループにグループ化することで、要素ごとにマージンとパディングを追跡し、これらのコンテナをグリッドにスナップすることができるということです。

画像：spec.fm

ソフトグリッドは、インターフェイスをコーディングするときは、プログラミング言語はそのようなグリッド構造を使用しないため、実際のグリッドを使用することは関係ないということです。高品質でプログラム可能なモックアップのセットに到達する速度が優先される場合、ソフトグリッドのより流動的で最小限の構造を優先して、追加のレイヤーを管理するというハードグリッドの余分なオーバーヘッドを回避することが利点になります。これは、多くのシステムUI要素が均等なグリッドで定義されていないiOSにとっても有利な場合があります。

画像：spec.fm

スペーシングも一貫性を保とう。

コンテナの寸法に応じて、次の単位（ピクセル単位）のいずれかでコンポーネントを配置します。

４ポイントグリッド・システムとの出会い

個人的にもは、デザインシステムを制作する上でMicrosoft Teams、Bootstrapなどのデザインシステムを使用して同様のシステムを構築しようと考えたときに、ボタンなどのコンポーネントをどうのようにレイアウトするか迷ってしまったときに４ポイントグリッドというシステムに出会いました。

デザインの要素を微調整することはできますが、同じビジョンを共有するためにデザイナーと開発者のチームに頼ることはできません。 要素の間隔の関係を定義するシステムがなければ、一貫性を保つことは困難です。ページ全体に見た目に美しい構図を描くことは、一貫して作成することが難しいためです。 

4ポイントグリッドの重要性

グリッドの4ピクセルの基本ユニットにより、コンポーネントはすべてのディスプレイサイズにわたって一貫してスケーリングできます。

一貫性のあるUIを保とう。
すべての測定値が同じルールに従うと、より一貫性のあるUIが自動的に取得されます。また決定が少ない=時間も少ないということになります。

マルチプラットフォーム・デザイン
フォームファクターに関係なく、最も一般的な画面サイズは、少なくとも1つの軸（通常は両方）で4で割り切れます。 さらに、一部のプラットフォームのスタイルガイド（マテリアル・デザインなど）では、特に4ポイントのグリッドが必要であるため、このシステムは自然にフィットします。

4ポイントグリッドのメリット

デザイナー：要素間の高品質のリズムを維持しながら、効率性、意思決定の削減できます。

チーム：デザイナーとエンジニアの間の簡単なコミュニケーションシステムとして使用できます。 開発者は、毎回測定する代わりに、4ポイントの増分を簡単に目で確認できます。

UIデザインにおける4の倍数ルールの利点は、デザイナーやエンジニアだけのものではありません。サービス品質や運用性の向上も含めて、利用者や運用者にもメリットがあると考えています。

ユーザー：信頼できるブランドに一貫した美学。 優先デバイスにぼやけたハーフピクセルオフセットはありません。

偶数を使用するメリット

コンポーネントのサイズと間隔を均等にするために偶数を使用すると、より使いやすくなります。たとえば、解像度が1.5倍のデバイスでは、奇数をきれいにレンダリングするのが困難になります。 

5pxを1.5xにスケーリングすると、0.5ピクセルのオフセットになります。したがって、特に他の偶数の代わりに4ptグリッドは、6ポイントシステムのように変数で過負荷になったり、10ポイントシステムのように制限したりすることなく、十分な量のオプションを提供するためです。

4ptおよび8ptグリッドを使用するもう1つの理由は、最新のディスプレイおよびモニターの解像度のほとんどが、水平方向と垂直方向の両方で4または8で割り切れるということです。粒度を上げるために4ptと言いました。

8ポイントより4ポイントを使用するべき理由

以前は8のベースライングリッドが一般的によく使われていました。
デザイナーの皆様はインターフェイスデザインの8ポイントグリッドシステムについてご存知だと思います。8ポイントグリッド・システム、ハードグリッドとソフトグリッド、ボックスモデルによる使用などに関するほとんどすべてをカバーしています。

しかし、Sketch、Figma、Adobe XDなどのデスクトップ・デザインツールには、生産性と使用速度が最適化されたかなり高密度のインターフェイスがあります。このような高密度のインターフェースでは、8ポイントのスケールでは十分な粒度が得られません。より高密度のインターフェースを構築するには、よりきめ細かいグリッドによって提供される高レベルの忠実度が必要です。

4ポイントにすることで、より多くの粒度を与え、オプションが増えます。アイコンのサイズ、要素間の間隔、テキストとアイコン間の水平方向の間隔などについて考えてみると、8ポイントまたは16ポイントから選択する代わりに、12ポイントを選択することができます。またこのシステムはタイポグラフィのベースライングリッドの設定にも役立ちます。以前はテキストを8のベースライングリッドに揃えていましたが、複数行のテキストがきつすぎたり大きすぎたりするという問題が常にありました。

デザインをスタートしよう！

このグリッドユニットに基づいてページ/画面上でコンポーネントを作成し始めると、変数の狭いセットを使用しているため、垂直方向のずれの可能性が少なくなります。 

→ 画面全体のマージンを定義することから始めます。 次に、この画面に必要なすべてのコンポーネント（入力ボックス、タイプスケール、画像、アイコンのセットなど）を完成させます。

→ 次に、高レベルコンポーネントのサイズを4の倍数で修正し始めます。また、タイポグラフィスケールの線の高さを4の倍数で修正します。

→ これらのコンポーネントを4ポイントグリッドの間隔で配置し始めます。 スケッチでは、4ピクセルの列で水平および垂直のグリッドレイアウトを設定することもできます。 これは、これらの間隔をより簡単に調整するのに役立ちます。

→ 要素のバウンディングボックスから間隔を数えることをお勧めします。 したがって、これを正しく行うには、最初に残りのコンポーネントの行の高さとバウンディングボックスを修正する必要があります。

まとめ

今回は４ポイントグリッド・システムをご紹介しました。

縦・横ともに4ポイントの倍数にすることで、一貫性のあるデザインにすることができ、結果的にデザインを美しく見せることができます。慣れてくればデザインも早くなるので、ぜひ採用を検討してみてください。

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。