本当のピクセルパーフェクトとは？1pxのズレもなく実装する際に起こる弊害

皆さんはピクセルパーフェクトで実装しておりますでしょうか？
ピクセルパーフェクトにしているけれどなんか少しズレてしまう・・・
デザイナーから細かい修正が入ってしまってなかなか思うように完成ができない・・・
そんな方も多いのではないでしょうか？

どうして1pxのズレも無く実装をしているのに見た目に違いが出てしまうのでしょうか？
それは昔と現在のWeb制作を比較すると何が変化したか？それによってピクセルパーフェクトの在り方を考える必要があるのが分かります。

ピクセルパーフェクトとは？

ピクセル パーフェクトとは、コード化された成果物がデザインのモックアップと完全に一致していなければならないことを考慮して、HTMLとCSSで実装するプロセスのことです。

しかし、どれだけピクセル通りにしても
・ヘッダの高さ
・ヘッダの下のスペース
その他の要因の相違点によりズレが発生し、実装が不完全と思われがちになります。

2010年頃のWeb制作

2010年頃の日本はiPhone4を発表して間もなくタブレットもはるかに少ない。モニターサイズも現在みたいに様々な大きさがあるわけではなく基本的に1つのモニターサイズを実装していれば十分でした。
その様な背景があったからこそピクセルパーフェクトは可能ですが今現在は何千ものデバイスがある為期待通りのピクセルパーフェクトにはなりません

ルックアンドフィール

ルックアンドフィールとはWebデザインにおいてUIの観点からWebサイトがどのように見えるか、機能性やインタラクティブ性の観点からどのように感じられる（フィール）か、ということを意味します。

よくある細かな違いとしては
・ボーダーの太さが違う
・画像の高さが小さい
・フォントのサイズが大きい
・border-radiusが違う

小さなコンポーネントだと問題なくても大規模なプロジェクトとなってくるとその違いが顕著に現れます。
デザイナーとしては全てのデティールに意味を持たせているのでコーダーの勝手な判断で見た目を変える訳にはいかない訳です。

コード化された結果がパーフェクトかどうか？

現在はコード化された内容がパーフェクトかどうかを目指すのではなく、デザインツールの見え方にも配慮しながら2つのタブを移動しても同じ様に見える・感じるということが大事になってきます。
デザイナーはコーダーがどのようにコーディングをしてデザインを表現するか分かりませんしコーダー同士でも同じデザインを表現するのに無数のやり方があります。
コーダーの好みの数値にするのではなくルックアンドフィールの観点を取り入れ、本当の意味のピクセルパーフェクトをしていく事が大事になるでしょう。