微妙にズレる——整列とグリッドの規律

結論

プロは「数学的整列が先、光学微調整が後」の順序を必ず守る。まず 8px 基準グリッド（アイコン・タイポは 4px 細グリッド）に全要素を機械的に揃え、その上で目が読むのは外接矩形の座標ではなく視覚的重心だという事実に従って、重心と逆方向へ意図的にずらす。決定的なのは、その「微妙なズレ」の補正を目分量でやらず、86px/70px や +4px のように数値化してトークン／keyline に固定することだ。

01 — まずピクセルグリッド、次に光学補正

順序を逆にしてはいけない。最初に 8px（コンポーネント）と 4px（アイコン・タイポのベースライン）のグリッドに全要素を機械的にスナップさせ、サイズと余白を 8 の倍数（8/16/24/40）で刻む。土台が乱れたまま光学調整に入ると、何を直しているのか分からなくなる。光学補正は土台が正しく敷けてから初めて意味を持つ。

primaryMetrics & keylines — Material Design

02 — 視覚的重心の反対方向へずらす

play 三角や矢印など非対称シルエットは、外接矩形の座標で中央に置くと「左に寄って」見える。三角は視覚的重心が左にあるため、右へずらして初めて中央に見える。RingCentral の実測ではコンテナ内で左 86px / 右 70px の非対称マージン（左 > 右）で光学中央を達成している。方向則はシンプルで、要素を重心と逆方向へ動かすだけだ。

blog'Eyeballing' or Optical Alignment in Design — RingCentral UX

03 — 等重量に見せるためのオーバーシュート

円・三角・菱形は、同じ実寸の正方形より小さく・軽く見える。アイコンセットやボタン群を「同じ大きさ」に見せたいなら、実寸を揃えるのではなく超えさせる。Material の keyline は正方形 18×18dp に対し円は 20dp 径（2dp 大きい）、三角ボタンは矩形ボタンより約 40px 幅広にして等重量に見せる。座標上の同寸は、目には不揃いに映る。

blogOptical effects in user interfaces — Design Bridges

04 — アイコン-テキストのベースラインオフセットを計算する

アイコンとテキストを横並びにすると、テキストはベースラインで重心が下がるため、ボックス中央で揃えるとアイコンだけ「浮いて」見える。目分量で下げず、式で出す。baselineDistance = font-size × line-height、iconOffset = (baselineDistance − iconSize) / 2。16px / 1.5 / 16px なら 24px − 16px の半分で +4px 下げる。アイコンがテキストの 2 倍大なら値は負になり、自動で上方向補正される。

blogImproving Icons for UI Elements with Typographic Alignment and Scale — CSS-Tricks

05 — アイコンとテキストに同一 hex を使わない

同じ色値でも、テキストはアイコンより暗く（薄く）見える。細い文字のストロークが面で塗られたアイコンより視覚的に軽くなるためだ。同一 hex は「手抜き」に見え、アイコンを少し明るく、またはテキストを少し暗くする補正が要る。下の例はどちらも見出しとアイコンに同系の濃度を使っているが、左は完全同値、右はアイコンだけ一段明るくして見た目の濃度を揃えている。

blog'Eyeballing' or Optical Alignment in Design — RingCentral UX

06 — コンテンツをガター（溝）に置かない

レスポンシブ列グリッドでは、コンテンツは列内に収め、ガターは空けるのが規律だ。要素がガターに侵食すると整列が崩れ、一気に素人っぽく見える。端の列を画面端までフラッシュさせたいときは負マージンで明示的に出す——溝へにじませるのではなく。下の図は同じ 4 カラムで、左は要素が gap に食い込み、右は列の幅にきっちり収まっている。

blogUI Design Grids Explained — Supercharge

実装スニペット

/* 基準グリッドのトークン (8px / 4px) — Material 準拠 */
:root {
  --grid-base: 8px;        /* コンポーネント */
  --grid-fine: 4px;        /* アイコン・タイポのベースライン */
  --space-1: 8px;
  --space-2: 16px;         /* mobile margin */
  --space-3: 24px;         /* tablet margin */
  --space-5: 40px;
  --touch-min: 48px;       /* 最小タップ領域 48×48dp */
  --content-keyline: 72px; /* アイコン付きコンテンツ左マージン(mobile) */
}
/* 12カラム, frame幅 375/600/900/1200px。コンテンツはガターに置かない */

/* アイコン-テキストのベースライン補正 (CSS変数 + 計算) */
.icon-text {
  --fontSize: 16px;
  --lineHeight: 1.5;
  --iconSize: 16px;
  --baselineDistance: calc(var(--fontSize) * var(--lineHeight)); /* 24px */
  --iconOffset: calc((var(--baselineDistance) - var(--iconSize)) / 2); /* 4px */
}
.icon-text svg {
  transform: translateY(var(--iconOffset));
}
/* アイコンがテキストより大きいとオフセットは負(例 16px/1.6/32px → −3.2px)になり自動で上方向補正される */

/* モダンCSS: lh/em 単位でベースライン補正(手計算不要) */
.icon {
  /* テキストと同サイズ系アイコン */
  transform: translateY(calc(.5em - .5lh));
}
.icon-variable {
  /* 可変サイズアイコン (vertical-align:middle前提) */
  --icon-size: 24px;
  vertical-align: middle;
  --icon-block-offset: calc((1lh - var(--icon-size)) * 0.5);
  margin-block-start: var(--icon-block-offset);
}
/* lh単位はモダンブラウザ前提。古い環境向けには px計算フォールバックを併記する */

/* play三角形の光学センタリング (非対称マージン) */
.play-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button .triangle {
  /* 視覚重心が左にあるので右へ寄せる: 左86 / 右70 の比率 */
  margin-left: 86px;
  margin-right: 70px;
  /* 三角ボタンは矩形より約40px幅広にして等サイズに見せる */
}
/* RingCentral実測の左86px/右70px。寸法は容器に合わせ比率(left>right)を保って調整 */

チェックリスト

• 全要素を 8px グリッドに、アイコン・タイポのベースラインを 4px 細グリッドにスナップさせたか（光学調整より先に）
• サイズ・余白は 8 の倍数（8/16/24/40）から選んでいるか
• 三角・矢印など非対称シルエットを、視覚的重心と逆方向へずらしたか
• 円・三角を正方形と同列に置くとき、実寸をオーバーシュートさせたか（円 +2dp など）
• アイコン+テキストの縦位置を `(font-size×line-height − iconSize)/2` の算出値で補正したか
• アイコンとテキストに完全同一 hex を使っていないか（濃度差を補正したか）
• コンテンツが列内に収まり、ガターに侵食していないか
• タップ領域は 48×48dp 以上、隣接間隔 8dp 以上を確保したか
• 補正値を目分量でなく数値（86px/70px・+4px 等）でトークン／keyline に固定したか
• 補正リソースを最も目立つ要素（大見出し・主要 CTA）に集中投下したか

限界 / 出典

primaryMetrics & keylines - Layout - Material Design

primaryIcons — Material Design 3

primaryResponsive layout grid — Material Design

secondaryIcons – Style – Material Design 1

secondaryImproving Icons for UI Elements with Typographic Alignment and Scale — CSS-Tricks

secondaryWhat is Visual Alignment? — Interaction Design Foundation

blogMathematical and Optically alignment in (visual/UI) design — Rails Designer

blog'Eyeballing' or Optical Alignment in Design — RingCentral UX

blogOptical effects in user interfaces — Design Bridges

blogEverything you need to know about spacing & layout grids — UI Prep

blogUI Design Grids Explained — Supercharge

blogMeasured vs Optical Alignment — Liferay.Design

blogGraphic Design Principles: Alignment and Grid Systems — The Noun Project