ピクセルパーフェクトが議論されている
『ピクセルパーフェクト』という言葉が、デザインとどれくらい合わせるかという意味で使われているならフロントエンドエンジニアとしての自分の考えをまとめておく
スタンス
原則デザインに合わせて実装すべき
(前提:デザイナーは価値の最大化を目指している)
理由
- アクセスビリティやユーザビリティが十分に考えられたデザインが実装時に変わってしまってリリースされると、その部分が損なわれる可能性がある
- 合わせるつもりで作っていないとレビュー時のレビュー観点が多くなる
- デザインを残しておく場合、新規参画者がどちらを正としてみたらよいのかがわからなくなる
→その結果、ちょっとズレたものが複数できてしまいデザインの統一感が失われてしまう
ただ、 実装していく上でデザインと差が生まれてしまうところがあるので、そこはデザイナーと握る
握っておく事項
- フォントなど、機種によって違うものがある
- ウェブフォントはページスピードを下げるのでなるべく導入したくない
- Sketchの日本語対応が悪く、デザインに無駄な余白が発生している場合がある
- ズレているとわかったときに直す余裕があるない
- ブラウザのline-hightの問題
- レスポンシブルだがそのサイズのデザインがない場合
システムの開発環境と本番環境のように、デザインと実装の差分を双方ではっきりさせておかないと問題が発生するので、差分を極力少なくし差分は明確にしておくのが大事
対策
- スタイルガイドを用意して、使う余白やフォントサイズを決める
- 作成したデザインを議論する場と、実装した後のレビューをする場を用意する
- ツールを導入する