2020年においてピクセルパーフェクトは必要なのか？
はじめに
先日Twitter上でピクセルパーフェクトの是非について盛り上がっており、様々な意見がありました。最初に言っておきたいのはこの問題において正解、不正解は存在しないです。色んな状況が存在しそれによって大きく左右されると思います。
私が見かけたのはピクセルパーフェクトについての色んな意見がまとめられたこのtogetterのまとめです。色んな意見があるので見てみると面白いです。
ピクセルパーフェクト
久々にピクセルパーフェクトなんて言葉を目にしたんですが、ここで難しいのがピクセルパーフェクトの定義だと思います。そもそもピクセルパーフェクトとはデザインカンプ(デザインデータ)通りに1pxのズレもなくHTML/CSSで書く事なんですが、それが言われていたのは2011年辺りでとても嫌われているIE6/7/8が普通にサポートされていた頃でCSS Hackという職人技が必要な時代です。私もこの三兄弟にはとても苦しみました。そんな話はおいておき、当時はスマホが流行りだした頃でネットを見るのはパソコンからが普通で、なんとディスプレイサイズは1024x768＋少し別のサイズぐらいでした。 この頃は複数デバイスのサイズが無かったのでピクセルパーフェクトは結構普通にしてました。
では2020年の今はどうかと言うと、訳わからないぐらい様々なデバイスサイズが存在します。大きく分けてPC/タブレット/スマホの3つだと思いますが、これだけでは足りない事が多いのはないかなと感じます。ピクセルパーフェクトの定義が「特定のサイズにおいて」のピクセルパーフェクトなのか、それとも全てのデバイスにおいてなのか、この定義がない事にはそれぞれの受け取り手によって考え方がバラバラになってしまうと思います。だからこそ盛り上がったのだと思います。
個人的な意見
これは私が思う意見であり、はじめに言った通りこの問題には正解や不正解は存在しない事を分かった上で考えています。ピクセルパーフェクトの定義が特定のサイズにおいてと言う条件だったらある程度目指す事が出来るなーと思いますが、正直デザインによるところが大きいです。ある程度統一されたマージンルールやフォントサイズであれば良いですが、結構ページによって違うマージン、フォントサイズだったりなデザインも少なくない印象です。
1カラム中心のデザインであれば、ピクセルパーフェクトも目指しやすいですがマルチカラムや変則的なカラムなどは難易度が上がってきます。また、デザイナーのレベルによってもピクセルパーフェクトを目指せるかどうか変わってくると思います。
基本的にはデザインデータに沿うようにコーディングしますが、デスクトップファーストでデザインされているもの(特に1920x1080pxベースでデザインされているもの)はタブレットやスマホの対応は結構辛い部分が多いです。その場合は対応するために多少マージンやフォントサイズなどは変えてしまいます。
特にWordPressで構築するのであればほとんどの文章や画像は可変であり、ダミー文章でキッチリ揃っているデザインは文章が短い・長いなどが考慮されていない事も多いです。これが静的なもので文章が決まっていればもっと正確さは出せます。
ピクセルパーフェクトの件とは脱線してしまいますが、1920x1080pxをベースに作っていて、いきなりタブレットのデザインになると非常に困ります。1400px〜1000pxの辺りでデザインの破綻というかコンテンツが入りきらない事が起きますが、このレスポンシブの仕組みを理解してもらうのにどうすれば良いか悩んでしまいます。ピクセルパーフェクトよりも中間の状態をどう扱うのかの方が個人的には大事なのではないかと感じます。
閑話休題。
昨今のデザインスタイルはReactやVueがスタンダードになりつつあり、ページ毎のレイアウトというよりコンポーネント単位でのデザインにシフトつつあるのでピクセルパーフェクト自体は消えつつあると感じています。まだまだWebサイトを作るところには浸透していないのはありますが。。🤔
他の要因として、十分な構築時間やデザイナーとのデザインレビューも大きな要素だと思います。ピクセルパーフェクトだけでなく、そもそもの質を高めるにはこれらは非常に大切なものだと私は思います。ですが実際はあまり時間もレビューもなくさらに資金もないのでなるべく早く完成させなければならないというのが多いんじゃないかなーと自分でしてても思います😱
より良くなるには
そもそもこの問題はデザインする側と実装する側が十分に検証・テストなどを行えれば、かなりお互いのストレスは減らす事が可能だと思います。お互いに出来る事として、それぞれの分野を教え合う事が出来れば実装する側はデザインについて学ぶ事が出来、マージンやフォントについての理解が深まります。逆に実装側はCSSに落とし込む際の注意ポイントやレスポンシブにする際のレイアウトの変化などをデザインする側に教える事でデザインに反映されます。
現状の最適解はこちらの記事にあるように、Look and Feelで同じように見える・感じるのであれば良いぐらいを目指し、時間などに余裕があればさらに細かい部分まで詰めるが理想だと思いました。
