はい。今回はいわゆるピクセルパーフェクトは本当に必要なのかについて書いていきます。
ピクセルパーフェクトとはデザインデータと1pxのズレもなくコーディングを行うことです。デザインデータとゴーディングデータを比較して確認するツールとしてChrome拡張機能の「Perfect Pixel」などがあります。
プログラミングスクールやいろんな教材、あるいは受講生と思しき人のツイートなどを見ているとピクセルパーフェクトについてやたらと熱心に取り組んでるケースが多いように思います。
しかし、Web制作（Web開発も）においてピクセルパーフェクトは本当に重要視されているのでしょうか。
個人的にはそこまで重要だと思っていません。実際僕は、案件ではPerfect Pixelなどを使って厳密に合わせる作業はしていません。
そんなわけで、ピクセルパーフェクトがどの程度有効なのか僕の目線で考えをまとめてみます。
念の為先に言っておくと、ここで言いたいのはピクセルを合わせる必要がないということではなく、デザインをしっかりコードで表現することとピクセルパーフェクトが必ずしも同じことを意味しないということです。
エンジニアやデザイナーの方は、「私の環境ではこうだ」「こんな場面でこんな使い方をすると良い」などご知見があったらぜひコメントいただけると嬉しいです。
デザインデータ＝完璧なマスターデータとは言い切れない
まずデザインデータが、「絶対にピクセルを合わせるべき完璧なデータ足り得るか」という話があります。これはデザインデータと実際にコーディングしてブラウザで見た時の印象にどうしても差が出てしまうことに起因しています。
デザイナーの能力、あるいはコーディングの質による部分もなくはないですが一定レベル避けられないことだと考えています。
であれば多少のズレは一旦許容し、デザイナーとコーダーでコミュニケーションを取りながら改善点を洗い出して修正するサイクルを回すのに時間を使った方が良いです。
個人的な感覚ですが、最初にあったデザインデータと最終的な成果物が完全に一致するケースはあまり多くありません。
実際の画面幅は何パターンもあるのに、PC/SPの２パターンだけを合わせる意義が薄い
通常デザインデータ上にはPC版とSP版の2パターンのアートボードが用意されているかと思います。しかし画面幅のバリエーションから考えれば「たったの2パターンしかない」とも言えます。
想定される画面幅の下限を320px、上限を1920pxとすると横幅には1600パターンあることになります。まあこれは大袈裟だとしても、実際のデバイスの種類を考えると現実的に見て10パターン以上はあります。
仮にアートボードの横幅の時に綺麗に見えてもそれ以外の場合に綺麗に見えるかは保証されません。ちょっとでも画面幅が変わればもう正しい状態がわからないわけです。ありがちな例は、SP版デザインの横幅が375pxの時にそれ以下のサイズのデバイスで見ると改行が詰まってしまうケースです。
よって、やはり2パターン分のピクセルパーフェクトをやるなら複数の画面幅に対して見た目をこだわった方が良いのではないでしょうか。
上記の通り効果が薄い割に時間はかかる
さて、ピクセルパーフェクトの効果に疑問があることは述べました。しかしこう思う人もいるでしょう。「じゃあデザインの調整もした上でピクセルパーフェクトしたらいいじゃないか」と。
しかし、現実はなかなかそうも行きません。納期があるからです。これも個人的な経験の範囲になってしまいますが、多くの場合デザインの修正とコーディングへの反映で一杯一杯になってしまいます。ここで言うデザインの修正はクライアントからの要求も含めて考えています。
そしてそもそもピクセルパーフェクトを実現するには結構時間がかかります。細かいズレを1つ1つ直しては確認する作業を繰り返しますからね。人間にとってはほぼ違いがわからないようなものも修正対象と考えると量も多いでしょう。
また、クライアントの要望的にも多少のピクセルのズレよりも早く公開したいとなることが多いです。特にLPのように広告と連動している場合は早い方が良いに決まっていますからね。
そういうわけでピクセルパーフェクトをする時間も要望も、必要性もないケースが多数派だと考えています。
ただし練習としてはいい方法
最初にも述べた通り、ピクセルを適当にやっても良いということが言いたいわけではありません。そう思っているわけでもありません。最終的な成果物のクオリティを高める上で必ずしもピクセルパーフェクトに固執してはいけないということです。そしてもちろんデザインのピクセルは出来る限り再現した方が良いです。
ここまでの話はあくまで、「限られた時間で完璧ではないまでも80〜90%はピクセルが再現できる」程度の前提をイメージして書いています。
よってそこまでの自信がなかったり、あるいはまだ勉強中の身である方は練習としてピクセルパーフェクトに挑戦するのは良いと思います。回数をこなしていけば、どうすれば素早く正確にコーディングができるかが感覚として掴めるはずです。
まとめ
というわけで、ピクセルパーフェクトの僕目線での有用性についてでした。
案件で実際に取り組むというよりは、案件で素早く高品質のコーディングができるように練習として取り組むのが良い感じがしますね。
素早く高品質のコーディングをしたい方はぜひこちらの本も読んでみてください。コーディングスピードを上げるあらゆるツール、テクニックをまとめています。
コメント