← All termsGLOSSARY / Design
8-Point Grid.
8ピクセルグリッド(8ptグリッド)
余白や要素の寸法を8の倍数を基準に揃えるUI設計上のスペーシング規則。
画面内の間隔に8、16、24、32といった共通単位を使うことで、チーム内の判断を揃え、実装時の数値のばらつきを減らす。4の倍数を補助単位にする運用も多い。名称に「8ピクセル」とあるが、すべての画面上で物理ピクセルが8個になるという意味ではない。
タイポグラフィの行間、アイコンの光学的な位置、タッチ領域には別の要件がある。すべてを機械的に8の倍数へ丸めると、かえって不自然な見え方になる場合もある。デザイントークンと組み合わせ、一貫性と微調整の余地を両立させたい。
実装時にはFigma上のピクセル値とCSSのrem・論理ピクセルの関係にも注意する。数値を揃える目的は端末をまたいだ一貫性である。