デザインと実装の1pxのズレ、原因は丸め・文字・ボックスの3つ

デザインカンプを渡したのに、上がってきた実装が「なんとなく違う」。並べて重ねると、余白や文字が1〜2pxずれている。この小さな差は、担当者の不注意というより、ブラウザの描画とデザインツールの前提が食い違うことから生じる差。

この記事では、その1pxがどこから来るのかを実装する側から整理します。私がどう潰しているかも書きます。原因が分かれば、差し戻しの往復もぐっと減ります。

1pxのズレは「丸め」から始まる

いちばん多いのは、小数の丸め。デザインツールは座標や幅を小数で持てますが、ブラウザは最終的に物理ピクセルへ落とし込むため、端数が切り上げ・切り捨てされ、要素の位置が1pxずれます。

丸め自体は避けられません。どこで起きるかを予測して値の持ち方を決めれば、影響は最小限にできます。分割レイアウトでは端数の出方を先に確認し、必要なら余白側で吸収するのが私の型です。

文字は座標だけではありません。フォントの中身が仕上がりを左右します。同じフォントサイズでも、書体ごとに文字の上下に取る余白（メトリクス）が違い、それが行の高さや文字の位置に効いてくるわけです。

カンプ上の文字ボックスと、ブラウザが実際に描く文字ボックスは別物で、ここを合わせるには行間の上下差を打ち消したり、末尾の字間を調整したりと、地味な手当てが要ります。Figmaのデータを実測しながら詰める進め方は、Figma・XDからのコーディング依頼でも触れています。

画像の書き出しも、境界のにじみの原因です。等倍でない倍率で書き出したり、想定と違うサイズで配置したりすると、輪郭が半px単位でぼやけます。「1pxずれて見える」状態です。

ボックスの計算違いも定番です。box-sizingの指定によって、指定した幅にborderやpaddingが含まれるかが変わり、ここを取り違えると要素全体がborder分だけ膨らみます。

/* width に border・padding を含める。ズレ防止の基本 */
* { box-sizing: border-box; }

1pxは、単体では気づかれないかもしれません。それでも私が潰すのは、ズレが積み重なると全体の印象が崩れ、デザイナーが意図した余白のリズムが失われるからだと感じています。

カンプに忠実であることは、デザインへの敬意でもあります。実測値をそのまま反映し、文字と画像の癖を先回りして手当てしておけば、検収での差し戻しが減ります。意図した見た目に初回から近づくでしょう。ズレを前提にしたレイアウトの組み方は、実装しやすいFigmaデータの作り方にも整理しています。

1pxのズレは、丸め・フォントのメトリクス・行間や字間の解釈・画像の書き出し・ボックス計算といった、ブラウザの前提から生まれます。原因を知っていれば、多くは実装の段階で先回りして潰せます。

カンプ通りに仕上がらない、ピクセル単位で詰めてくれる実装者を探している。そんなときはお問い合わせからご相談ください。カンプと実装の差を、実測ベースで合わせていきます。

本記事は2026年7月時点の情報です。ブラウザやツールの挙動は更新される場合があるため、実装時は最新の環境で確認してください。