webワーカーライフ

参考情報

ピクセルパーフェクト?時代遅れも甚だしい!

投稿日:

2020年のこの時代にピクセルパーフェクトについてツイッターで議論があったので私の意見を書かせてもらおうと思う。

ピクセルパーフェクトは必要なのか? HTMLコーダーの考え方まとめ

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

ピクセルパーフェクトってなんぞや?って人もいるかもしれないので軽く説明しておくと、イラレやフォトショなどで作ったデザインデータを1ピクセルのズレも許さずコーディングすることである。

マルチデヴァイスの時代にピクセルパーフェクトは時代遅れ

マルチデヴァイスの時代にピクセルパーフェクトは時代遅れ
デザインデータを忠実に再現するピクセルパーフェクトはコーダーの技量が重要であり、昔はこれが出来ることが非常に重要になっていた。ピクセルパーフェクトが出来て当たり前であり、1ピクセルのズレを解消するために何時間もかけたりしていた。

ただ、それはもはや10年前の常識であり、今ではピクセルという概念もなくなりつつある。

なぜピクセルパーフェクトが無くなったのか?というとそれはiPhoneの登場を発端とするスマホ対応が大きい。2008年にiPhoneが登場し、2010年頃にはかなりiPhoneの普及が進み、アンドロイドのスマホも出回り始めている。2010年にはiPadも発売されウェブはパソコンで見るという概念が2010年頃に無くなっている。

2011年頃からは急速にスマホの普及が進み、4Gの普及により、完全にインターネット利用の中心はスマホに置き換わった。

2020年のインターネット利用の中心はスマホであり、PCのみの利用者などはほぼ皆無と言ってよいだろう。

そんな時代にPC利用者向けのデザインを完全再現させるピクセルパーフェクトを求めるというのはあまりにも無益であり、自己満足の世界としか言いようがない。

インターネットブラウザに関しても10年前はまだインターネットエクスプローラーが中心で、IE8やIE6が生き残っている時代だった。大手企業はウインドウズXPを使い続けていたためサポートの切れたIE6でのブラウザチェックが必須だった。どれだけ利用者が減っていると言っても担当者がIE6しか使っていなければ確認はIE6であり、IE6用のCSSを別で用意する必要があったのを覚えている。

2020年現在、インターネットのブラウザは一般的にグーグルクロームであり、IEは少数派になっている。企業によっては未だにIE11での表示を要求してくるところもあるが基本的にサポートしていない。

完全に10年前とはインターネット、WEBサイト制作の世界は別物になったと言えるだろう。

そんな時代にピクセルパーフェクトを求めるなど正気か?としか言いようがない。

もしもピクセルパーフェクトを求めるのならばiPadのミニ、Air、Proの各サイズのデザインデータが必要になるだろうし、スマホもiPhone11PRO、MAX、SE、アンドロイド各社のサイズを全て作る必要があるだろう。デザインデータだけで数十準備出来るのか?
他にもインターネットを利用できるデヴァイスは携帯ゲーム機やプレステのブラウザなど多岐にわたる。これら全ての検証用端末が必要であり現実的ではないと言える。

ウェブ制作はユーザーファーストであるべき

ピクセルパーフェクトと言っている人間は間違いなく自分本意である。自分の作った芸術作品を寸分の狂いもなく実装しろ!と言っているわけだからただの芸術家でありユーザーの視点を持っていない。

ユーザーからするとインターネットを利用する理由は自分の欲しい情報を手に入れたいからであり、Webサイトをみてうっとり見とれて美しい!1ピクセルのズレもない!と感動したいわけではない。ユーザー体験は重要で、美しさはブランディングとして必要であるがそれはあくまで付加要素である。
本当に必要なのはユーザーの目的である情報収集を完遂させることであり、デザインが邪魔ならそれは控える必要がある。

私はよくWebデザインのまとめサイトをみて情報収集しているが優れたデザインのWebサイトとしてまとめサイトに載るようなサイトでもゴミみたいなサイトが山ほどある。判断基準はアイコンに丸いのが付いてくるかどうか。丸いのがついて来るだけでストレスがすごい。あれがついてきて嬉しくなる人間がいるとは思えない。
あとは重すぎて表示に5秒以上かかるサイトなどはどれだけデザインが優れていても100%見ないし、再訪問も無い。こういうデザインのサイトを作っている人間はアナリティクスでユーザーの動きを見ているのか気になる。どう考えても離脱率100%であり、再訪問率0%のサイトになる。そんなサイトどれだけ美しく作られていてもこの世に存在する価値がない。

本当にユーザーに必要とされているデザインとは?

株価が300倍になって和製アマゾンと呼ばれている日本のグレートグレース企業モノタロウのサイトをご覧頂きたい。
工具通販 MonotaRO(モノタロウ) 現場を支えるネットストア

このサイトはものすごい数の商品数から自分の探している商品を見つけやすいというユーザーの目的を達成させるデザインになっている。

ユーザーのためを考えたサイトとはこういうサイトを言うのである。

あとは有名な阿部寛のサイトも究極のユーザー目線のサイトと言える。

ユーザーが本当に求めているものは何なのか?を追求すると凝ったデザインが不要になるといえる。

ただ、ブランディング的な視点で考えた場合、ラグジュアリーブランドのサイトがモノタロウのようなデザインだったらユーザーはがっかりするだろう。これに関してはサイトづくりにおいてもTPOが必要とされる。
それでもこだわりすぎて表示に5秒以上かかるようなサイトは離脱される可能性が極めて高いし、ピクセルパーフェクトなどユーザーからしたらどうでもいいこだわりである。

ピクセルパーフェクトは時代遅れ!ユーザー視点でサイトを作れ!のまとめ

私は上記の理由からデザインデータを渡されてコーディングする際、ピクセルは全く気にしていない。文字サイズが20pxで作られていてもH2の文字とH3の文字に差異がなかったりしてユーザー的に混乱があると判断すれば18pxで実装する。

デザイナーは自分本位でサイトを作りがちなのでインターネット利用者の動きが見えてない場合が多いので変なデザインを作る場合がある。

コーダーはそんな自分本位でUXを考えていないデザインを是正して使いやすく実装する必要があるだろう。デザイナーから渡されたデザインを何も考えずにパーフェクトに実装できればそれでいいというレベルのフロントエンドエンジニアなど今後生き残ることは出来ないと考えている。

\SNSでシェアしてね/

人気の記事

1

毎朝「いらっしゃいませー」とみんなで大声で復唱するような普通の店舗での販売員だった私が、職業訓練を3ヶ月受けて社内WEBデザイナーになった話を紹介してみます。

2

今はいろいろな働き方があってWebデザイナーでもアルバイトや派遣社員などの非正規雇用で働いている人も多い。 実際のところ派遣社員でWebデザイナーをするのはどんな感じなのか?派遣社員でWebデザイナー ...

3

Web制作の仕事で生活していこうと思うといろいろな職種がある。 Webデザイナー フロントエンドエンジニア コーダー プログラマー Webディレクター WebデザイナーやWEBディレクターはデザインや ...

-参考情報

Copyright© Webワーカーライフ , 2020 AllRights Reserved.