ピクセルパーフェクトについて

はじめに

この記事はTwitterのとある投稿の内容について返信しようと思ったものの、なんか説教臭くなってしまい変に絡まれそうと思い断念した内容を元ネタにしています。

もちろん、そのツイート内容に対して反論しようとかは考えていませんでしたが、気軽にツイートできる分、感情的になってしまっていたようです。

なぜ私がそのツイートに感情的な返信をしようとしてしまったのかというと、「コーダーはカンプ通りに作るのが当たり前では？」というニュアンスが書かれていたことと、それに同調するようなリツイートが目に留まったからです。

もちろん、ピクセルパーフェクト自体はコーダーの技量を測るひとつの目安にもなりますし、レスポンシブデザインが主流の現在でも需要があるので否定はしません。

ですが現在の時流においては、「ピクセルパーフェクトの実施は必須じゃないけど知識と技術は有しておくべき」と考えているどっち付かず派ですので、なぜそう考えているのかについて、私なりの考えをまとめてみました。

あくまでも一個人の見解ですので、参考程度に読んでください。

Webとディスプレイの歴史

さて、ピクセルパーフェクトという言葉自体は知っていますが、その特性やメリット・デメリットを知るためには、諸々の歴史を知らなければなりません（多分）。

そもそもピクセルパーフェクトとは、レスポンシブデザインが登場する以前、ソリッドデザイン（固定幅レイアウト）の頃に生まれた言葉だったと記憶しています。

それまではガラケーやデスクトップでも小さなモニターばかり（フルHD以前）で、今みたいに1画面にブラウザを左右分割表示などできない時代でした。

PCでいえば、タダでさえ小さいモニターでブラウジングするのに、わざわざそれよりも小さく表示して閲覧するのは非効率でしかありません。

それに画面幅が小さいということは、横に並べられる情報量は相応に少なくなりますし、何より、画面サイズのバリエーションはそれほど多くありませんでした。

つまり狭い画面でも効率的に、美しく情報を表示するためには固定幅レイアウトがベストであり、また、画面サイズのバリエーション数も天井が見えていました。

必然的に、ピクセルパーフェクトの実施は当時の固定幅オンリーだった環境下では、それほど難易度は高くなく、簡単に浸透しました。

固定幅であるならブラウザ幅が変わっても、コンテンツ幅は固定のままで、見た目上特に影響を受けることもありませんから。

しかしある時から状況は一変します。

2008年に販売されたiPhoneの初登場でした。

Androidよりも先に発売されたスマホの先駆けですが、開発現場ではこれまでガラケーのサイト制作で使われていたFlashから、今では当たり前となったHTMLへと変更されました。

HTMLは既にPC用のWeb制作では昔から使われていましたが、モバイルでも同じHTMLを使えるようになったことで、1つのサイトでデザイン（CSS）を切り替えてPCとモバイルそれぞれに最適なレイアウトを提供できるようになりました。

また、この頃にはフルHDサイズのモニターも出ており、モバイルごとに画面サイズのバリエーションも増えたこともあり、固定幅だけではどうしてもデザイン的・レイアウト的に不都合が出てしまいます。

そこで考案されたのが、画面サイズに依存しないレスポンシブデザインという考え方です。

今でこそレスポンシブデザインとはなんぞやと聞けば、上記のような説明が返されるまでに普及した考え方ですが、このレスポンシブデザインにより、固定幅は徐々にその数を減らしていきます。

何しろ画面サイズに依存しないのですから、固定幅で表現の幅に制約を課すなんてするわけがありません。

しかしこれがピクセルパーフェクトにとっては難易度を爆発的に高めてしまう要因となってしまったのです。

ピクセルパーフェクトは固定幅であり、実施する画面サイズ（カンプ）数がそれほど多くなかったために浸透したものでしたが、可変幅であり、画面サイズも10や20では利かなくってしまった現在では、全ての端末にピクセルパーフェクトで対応するのは時間とリソースという現実的な問題から実質不可能となってしまいました。

ピクセルパーフェクトのメリットとデメリット

さて、ここからが私の伝えたい本題ですが、レスポンシブデザインが主流となった現在、ピクセルパーフェクトにはデメリットが出てきました。

以下は私がぱっと考え着くデメリットです。

• カンプ数の分だけしかピクセルパーフェクトにできず、またデザイナーも全ての端末を網羅することはできない。
• 画面サイズはモバイルの登場により、今後もそのバリエーションはどんどん増えていくと予想できる。
• OS、ブラウザ、バー表示の有無などを理解せずにカンプを作られると、少しでも状況が異なればピクセルパーフェクトにならない。（特に駆け出しのWebデザイナーさんはその辺りをまだ理解できていない方が多いイメージ）
• OS、ブラウザ、バー表示の有無など、状況ごとのカンプを用意されると、コーディング時間が相応以上に長くなる。
• 今主流のサイズでピクセルパーフェクトにしても、別のサイズが主流になればその時からピクセルパーフェクトにならないし、対応した意味をなさない。

とまあ、簡単に挙げるだけでもこれだけのデメリットがあります。

では逆に、現在におけるピクセルパーフェクトのメリットとはなんでしょう。

• コーダーの技術向上
• デザイナーとの信頼構築（技術力を評価してもらえる）
• お客さんから（見た目の）好評を受けやすい

これくらいでしょうか？

どれもビジネスをするうえでは重要な内容ですね。

ですが、それだけです。

作業時間を短く、利益を上げるにはピクセルパーフェクトって邪魔でしかないのです。

ピクセルパーフェクトは悪なのか？

これも持論ですが、答えは『否』です。

先程は「ピクセルパーフェクトする意味なんてないよね？」と受け取れることを書きましたが、私自身はピクセルパーフェクトという考え方を否定しません。

むしろ、コーダーは今後もピクセルパーフェクト対応ができるべきだと考えています。

理由は、技術向上と、デザイナーとの信頼構築という素晴らしいメリットがあるからです。

まず技術向上はそのままの意味で、コーダーが稼げるようになる1番の楽な近道は技術を上げるというものだと思います。

もちろん、案件の獲得にはそれ相応の努力などは必要ですが、「これは対応できないな」とそもそも諦めてしまう案件を減らせるからです。

次に信頼構築は、「このコーダーさんに頼めば難しいデザインも再現してくれるはず」と思ってもらえ、デザイナーさんから案件を回してもらえる確率を上げられます。

技術と信頼を獲得できれば、ピクセルパーフェクト関係なしに仕事を取りやすく、対応できる範囲も広がります。

そのため、私の意見としましては、コーダーはピクセルパーフェクトに対応できるようになるべきだと考えています。

デザイナー視点のピクセルパーフェクト

たまに、というか案外多いのが、1920pxなど幅いっぱいでデザインしたカンプを投げてきて、「これでピクセルパーフェクトで作って」と言われるパターンです。

しかもOSやブラウザ、バー表示の有無など環境によって異なることを考慮していないデザインをです。

Twitterを見ているとスクール卒や未経験からのスタートをした人たちに多い印象です。

「カンプ通りにピクセルパーフェクトにすれば良いのに、これの何が問題なの？」と思ったそこのデザイナーさん。

コーダーに喧嘩売ってますよ？

何が言いたいかというと、「そのカンプはブックマークバーやスクロールバー、OSや書体などの様々な違いを織り込んで作られたカンプですか？」ということです。

たとえば手元の端末で複数の異なるブラウザを立ち上げてみてください。

それぞれ表示される範囲のサイズが異なっていることに気づきましたか？

さらに複数のOSを起動できるなら、OSごとに同じブラウザ、同じURLを開いてみてください。

OSが違うだけでフォントや行間が異なっている場合があることが分かりますか？

デザイナーと名乗るのであれば、1pxに拘る以前に、閲覧環境ごとの違い程度は把握してもらいたいです。

そして閲覧環境ごとの違いによる差異について、対処法を指示してください。

例えば

のような感じです。

一部仕様っぽいのが混じっていますが、閲覧環境による違いに対する対処法が必要なのです。

把握さえできれば、それぞれのOSやブラウザごとの違いを想定しながら、仕様（対処法）を定められます。

分からなければ素直にコーダーへ聞くこともアリです。

逆にそれを知らずに作られたカンプを投げられたら、コーダーからデザイナーへ確認してあげることも必要です。

画面サイズやブラウザの仕様は常に変わりますので、情報を持っている方が教えるくらいのスタンスで仕事に取り組めば、お互い勉強になって良いのではと考えています。

もちろん、自分で調べることが一番ですが。

最後に

最後までお付き合いいただきありがとうございます。

ピクセルパーフェクトについての個人的な考えの記事でしたが、如何でしたでしょうか。

デザイナーは脳死で「ピクセルパーフェクトにしろ」と言わず、コーダーは非効率だからと対応しないのではなく、双方がピクセルパーフェクトに対する知識を有してカバーし合うことで、より良いWEBサイトが作れるのではないでしょうか。

この記事が少しでも皆さまのお役に立てれば幸いです。