ピクセルパーフェクトを「意図の一致」として捉え直す — 実装ズレを減らす判断軸

結論: ピクセルパーフェクトは座標合わせではなく「意図の一致」

結論から書きます。ピクセルパーフェクト（カンプと実装を見た目どおりに一致させる作業）の本質は、1px の座標を合わせることではなく、余白・階層・リズムといったデザインの意図を実装へ正しく移すことです。座標は意図が落とす影でしかありません。影だけを追いかけると、デザイナーが本当に守りたかったものを取りこぼします。

きっかけは Zenn の「ピクセルパーフェクトは意図の一致を追う作業」という記事でした。読んで膝を打ったのは、自分が何度もやらかしてきたズレの正体が、そこにきれいに言語化されていたからです。私はフロント実装側に立つことが多いのですが、「Figma と 2px 違う」と指摘されるたびに、合わせるべきは数字なのか意図なのかで毎回迷ってきました。この記事は、その迷いを「判断軸」に変えるための整理です。

「カンプ幅」と「全幅」のピクパは別物

最初に切り分けるべきは、カンプで指定された幅での一致と、全画面幅での一致がまったく別の作業だという点です。前者は再現、後者は設計です。ここを混ぜると会話が噛み合いません。

Figma のカンプはたいてい固定幅（375 や 1440）で描かれます。その幅なら 1px 単位で再現できますが、その間の可変幅でどう振る舞うかはカンプに描かれていません。私は以前、1440 のカンプにだけ完璧に合わせ込んで満足し、768px でカード間の余白が潰れてレビューで突き返されたことがあります。原因は単純で、私は「再現」を終えただけで「設計」をしていなかった。固定幅の一致は出発点であって、ゴールではありません。

だから手順としては、まずカンプ指定幅でピクセル単位まで合わせ、その後に中間幅の可変ルール（余白を維持するのか縮めるのか、折り返すのか）をデザイナーと決める。順番を逆にすると、可変の議論が「なんとなくいい感じ」で流れて、結局どの幅でも中途半端になります。

余白と行間の数字には「役割」がある

余白や行間の数字は、見た目の隙間ではなく「情報の関係と階層」を伝える信号です。16px と 24px の差は単なる 8px の違いではなく、「同じグループか、別のグループか」という意味の差を持っています。

たとえば見出しと本文の間が 8px、本文と次の見出しの間が 32px だとしたら、その 4 倍の差は「見出しは下の本文に属する」という所属関係を目で伝えています。ここを実装側が「なんとなく詰まって見えるから」と 8px を 16px に広げると、所属の信号が弱まり、ブロックの境界がぼやけます。数字を動かすことは、意味を動かすことです。

この感覚は、余白を生の px ではなく役割を持ったトークンとして管理すると揺れにくくなります。私は自分のサイトで余白や罫線を B+A Hybrid デザインシステム採択の記録 のように role token（hero / body / hairline といった役割名）へ寄せました。8px・16px・24px という値ではなく「セクション間」「行内」という役割で呼べると、実装中に勝手な微調整が入りにくくなります。Tailwind を使うなら、ユーティリティの裏でどの値が出ているかを Tailwind ユーティリティクラスは実 CSS のどこに落ちるか のように一度見ておくと、gap-4 が 16px だと体で分かり、カンプの数字との対応が速くなります。

実装側で勝手に整えていいもの / 整えてはいけないもの

死守と妥協の線引きは、「それがデザイナーの意図か、ツールの都合か」で引けます。意図に属するものは死守、レンダリングの都合に属するものは現場判断で整えてよい、というのが私の基準です。

整えてはいけない代表は、階層を作っている余白、グルーピングの間隔、フォントサイズの比率です。これらは情報設計そのものなので、実装者の美意識で動かすと設計が崩れます。逆に整えてよいのは、フォントのメトリクスに由来する 1px のにじみ、サブピクセルの丸め、ブラウザ差で出る行ボックスの上下といった、デザイナーがそもそも制御していない領域です。

判断に迷う典型が色とコントラストです。カンプの色をそのまま入れたら、ダーク背景や hover 状態でコントラストが落ちる、というのはよくあります。私は色の調整を OKLCH 色空間でデザイナーが実務で詰まる 3 点 で書いたような明度起点で考え、状態とテーマの総当たりは コントラスト検証を「要素×状態×テーマ」で総当たりする のやり方で潰すようにしています。ここでも原則は同じで、「ブランドカラーの意図」は死守し、「特定状態での視認性」は意図を保つ範囲で調整する、という二段構えです。迷ったら整える前にデザイナーへ一言確認する。これは遠回りに見えて、手戻りより圧倒的に速い。

差分をどこまで詰めるかの判断軸

差分を詰める優先順位は、「ズレが意味を壊すか」で決めます。意味を壊すズレは最優先、見た目だけのズレは後回し、というだけのことです。

実務では Figma の Dev Mode で計測した値と実装値を並べ、次の順で見ています。

1. グルーピングと階層を作る余白（壊れると情報設計が崩れる）
2. フォントサイズとウェイトの比率（見出しと本文の差が伝わるか）
3. 行間と字間（可読性とリズムに直結する）
4. 角丸・線幅・影など輪郭の表現（ブランドの質感）
5. サブピクセル単位の座標のにじみ（最後、コスパが悪い領域）

上の 1〜3 が合っていれば、5 の 1px は多くの場合あとで構いません。逆に 5 ばかり詰めて 1 が崩れているのが、一番もったいない時間の使い方です。正直に書くと、私は昔この順番が逆でした。1px の影を消すのに 30 分かけて、肝心のセクション余白がカンプの半分だったことに気づいて、静かに Figma を閉じたことがあります。

なお、このサイトの記事は AI が下書きを書き、私が公開前に確認・編集して出しています。今回の優先順位も、自分の手戻りログと照らし合わせて並べ直しました。

まとめ

ピクセルパーフェクトを「座標の一致」から「意図の一致」へ捉え直すと、判断が速くなります。持ち帰る点を並べます。

• 座標は意図の影。合わせるべきは余白・階層・リズムが伝える意味
• カンプ幅の一致は再現、全幅の一致は設計。順番に分けて進める
• 余白の数字は所属と階層の信号。役割トークンで揺れを減らす
• 死守は意図（階層・グルーピング・比率）、調整可はツールの都合（にじみ・丸め）
• 差分は「意味を壊す順」に詰める。1px のにじみは最後でいい

1px を合わせるのは技術だが、なぜその 1px なのかを問うのが設計だ。ピクセルパーフェクトは、後者を忘れないための合言葉でありたい。