「ピクセルパーフェクト」はフロントエンドエンジニア・コーダーが求めるものであり、求められるものではない
僕はコーディングを行う際には**ピクセルぴったりに合わせたい！**と思っています。強く思っています。
なぜなら、そのレイアウトにもデザインにも意図があります。
プランナーやディレクターが作成したワイヤーには（マーケティング都合やお客様都合の）意図があり、それをデザイナーが解釈し作成したデザインにも意図があります。どこまで細かく意図が込められているかはデザイナーによるかもしれませんが、優秀なデザイナーであればあるほど無駄な要素はないでしょう。
そのデザインの中で「どの部分が適当なつくりでよいか」なんてことを読み解くほうが大変だと思いますし、都度確認するのも現実的ではありません。なので、ピクセルパーフェクトであれば全て必要な状態を作れておりフロントエンドエンジニアの責任を全うできた状態である、ということです。
もしくは、ばっさりと言い換えると、その案件での責任から開放されることを意味します。すごくネガティブに聞こえるかもしれませんが、実際の案件ではとても重要だと思っています。中途半端な制作物はツッコミどころになってしまい、最悪いろんな責任を転嫁されることさえあります。
なので、厳しめの受託案件などを扱っているフロントエンドエンジニアは（実施するかどうかはさておき）ピクセルパーフェクトの重要性を理解しておられることと思います。
こんな努力をして合わせにいってます
そんなピクセルパーフェクトですが、（むちゃくちゃなデザインでない限り）難しいものではありません。
ざっくりとデザインに合わせた要素を配置するのはすぐ済むとして、そこからピクセルパーフェクトに持っていくのはコツが必要です。デザインの良し悪しはかなり大きく影響しますが、案件やクライアントによってはデザインの修正を依頼するのが難しいこともよくあるでしょう。そうなると、どんな無茶苦茶なデザインでも「合わせに」いくしかありません！
Chrome拡張「PerfectPixel」の利用
デザインがJPGでのみ支給された、なんて場合にはこうするしかないでしょう。
PerfectPixel by WellDoneCode (pixel perfect) - Chrome ウェブストア
大昔は、まず作るページの背景にデザインのJPGをひいて、その上に構築していたこともありますが、今は便利になったもので。これらを使ってガリガリ構築しながらセーブからホットリロードできる環境ができていればかなり爆速で実装ができるでしょう。
Zeplin（App版）の「Pop Out」機能
Zeplinは、個人的にそんなに使いやすいサービス・ツールだとは思わないのですが、Style guideが利用できたり、CSS（SCSS）の形式で数値などを取得できるのはかなり使えます。
Zeplin—Collaboration and handoff for product teams
Web版ではなくApp版を利用する理由として、ポップアウト機能があります。ピクセルパーフェクトを目指す案件でデザインがZeplin支給だとある意味ラッキーです。「PerfectPixel」と同様に作業できます。
Perfect Pixelより優れている点として、デザイナーのデザイン更新から書き出しを自分で行う必要がなく、実装までがスムーズな点です。
Comparing app/website with designs using Pop Out | Zeplin Help Center
Adobe XDやSketch、Photoshopでデザインを支給された場合でも、自分でZeplinプロジェクト化してしまえば、この機能を利用できますので問題ありません。
PixelSnapの利用
Adobe XDやZeplinを使っていればその中で可能なことではありますが、要素の大きさや要素間の距離を測ることができる、所謂Redline toolです。
XDなどのAppを使っていても、入り組んだデザインの場合まれに取得できない距離もあったりするので、割と出番はあります。
有料のツールですが、いくつかのデザインツールと連携することができるようになっているなどその価値は十分にあるでしょう。
データではなく画面上のピクセルから距離を計測しているようなので、ピッタリ算出されないこともありますので、感度の設定などは少し慣れが必要かと思いますが、ピクセルパーフェクトのためならがんばれます！
Chrome拡張「Prism」
Chrome拡張版のRedline Toolです。
Prism - Redline Tool - Chrome ウェブストア
こちらは実際のデータから距離やサイズを取得できますので、実装中にちゃんと自分の書いたスタイルがあたっているか、他の要素との関係性の確認などをぱっと確認できて大変便利です。
言い訳をしたくないのに、「合わない」現実
これらのツールを使ってもピッタリ合わせるのが難しい事情がいくらかあります。
font-feature-settings がデザインと合わない
CSSプロパティである、font-feature-settingsはIllustrator等でテキストに設定できる、OpenType機能をCSSで再現することができる機能ですが、「割と自動でよしなに」してくれる感じなので、Illustratorでプロポーショナルメトリクスをオンにしたものを再現しようとfont-feature-settings: "palt" 1;としてもきっちりはありません。残念。
もしきっちり合わせるとすると一文字ずつカーニング調整を行うことになり、見出しだけとかならよいですが、LPなどであってもページ全体・サイト全体となると流石に予算が見合わないかなぁと思います。
line-heightの扱いがデザインツールとCSSでは違う
XDやZeplinで要素間の距離を取得し、そのとおりマージンなどの設定をしても見た目が合わなかった経験はないでしょうか？
僕の経験上そのような場合、十中八九line-heightによって生じた余白が邪魔をしています。
これはこだわり派のエンジニアが解決策を考えていてくれていますが、都度CSSの処理を入れるのは現実的ではなく、個人的には悩みの種になりがちです。
Cropping Away Negative Impacts of Line Height | by Kevin Powell | EightShapes | Medium
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Blog | Yuya Kinoshita
彼らの議論などを踏まえ、僕がSCSSで使用している自前のmixinの例です。上下で打ち消すようにしています。
@mixin line-height-crop($line-height) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((1 - #{$line-height}) * 0.5em);
}
&::after {
content: '';
display: block;
height: 0;
width: 0;
margin-bottom: calc((1 - #{$line-height}) * 0.5em);
}
}
不具合につながる可能性も低く、おすすめの策ではありますが、かなりしっかりしたデザインじゃないと都度@importすることになり、あまり現実的ではなく決定打にかけます。
デザインがピクッてる！（怒
小数点とか、割りにくい数字とか、センターのはずが左右でpaddingやmarginがばらばらとかは論外ですね。これは可能な限り修正依頼を出しましょう。こちらが合わせる以前にそのまま作ったらお客様に怒られますので…
かなりデザインの良し悪しに左右される
これにつきます。
いいデザインであれば我々もピクセルパーフェクトやりやすく、その結果、世界が平和になるので、世のデザイナーの皆さんよろしくおねがいします！