本当に求めてるのはピクセルパーフェクトという「要件」ですか？
個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は
・ マサカリ
・ jQuery
・ ピクセルパーフェクト
なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。
そもそもピクセルパーフェクトとは何かをみてみたいと思います。
ピクセルパーフェクトとは
簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。
では、どうしてピクセルパーフェクトはこれだけ議論になるのでしょうか。
ピクセルパーフェクトは何を生み出すか
率直にいってしまうと「意味がある？」というのが反ピクセルパーフェクト派の考えです。ちなみに、私もこちら派です。
ピクセルパーフェクトは1pxのズレもなくこだわり抜くこと、逆にいえば「1pxのズレも許容しない」というとても強い表現です。ファーストではなく、パーフェクトなわけですから。
なので、当然ながら以下も許容されません。
句点でわずかに文字詰めされています。デザイナによっては単語毎に文字詰めする人もいます。繰り返しになりますが、別に難しくないですよ。細かい区切りでspanをいれて、文字詰めを再現すればいいだけですので。
当たり前のことですが、キャッチコピー入れ替える時は、デザイナへの再発注必須ですね。
これらをクリアしても、次は同一コンポーネント間の差異があります。以下事例は規模は大きいですが、とても参考になります。
本文中に「32種類の青色が必要？」（原文では“Do we need 32 different shades of blue?”）という言葉があります。これはWebデザインにおいて「細かい部分最適化は全体最適化につながるのか」を問いかけるいい言葉だと思っています。
Webデザイナが苦心して、同一ボタンを同一にみえるように10種類つくったとして、それは本当に必要か。これを最低限達成しないといけない要件だというのが「ピクセルパーフェクト」なわけです。
そして最終的に生み出されるのは、文字列で文字ごとに区切りでCSSが必要になるわけです。
<h1>ピクセルパ<span>ー</span>フェクト<span>っ</span><span>て<span>
<span>、<span>本当<span>に</span>ほしいものですか？</h1>h1 span:nth-child(1)からh1 span:nth-child(4)までそれぞれ微調整されたものを保守していくという強い決意が、ピクセルパーフェクトには必要です。
もう一回言いますが、ただ、つくるのは難しくありません。
実装のあとを考える
HTML/CSSで実装して公開すると、当然ながらそのWebサイトにユーザがアクセスするわけです。そのユーザはそれぞれ異なるデバイスを用いており、異なるデバイス設定をもっています。
（同一ブラウザ幅で、ブラウザの機能で拡大したもの）
もちろんデバイス毎で色の再現も少し違ったりしますというか、ユーザが表示した時点でパーフェクトにならないのです。
2010年ぐらいではディスプレイサイズは1024×768(もしくは800)ばかりだったのでピクセルパーフェクトは現実的でした。けど、今は2020年です。
そして、そもそもWebサイトはつくった段階では「ユーザはこうやって使うはず」「こういう情報が必要なのでは」という仮説検証レベルでそこから運用という本番がはじまるのに、仮説検証段階でパーフェクトにすると可用性が落ちるというクリティカルな問題もあります。
ピクセルパーフェクトという簡単な要件
そもそもコーダーはどういう仕事を請け負っているのでしょうか。仕事は機能要求と非機能要求に区分され、機能要求では「このデザインカンプをコードで再現してほしい」と表現されますが、その背景には様々な非機能要求があります。
・ HTMLの文章構造ちゃんとしてるよね
・ 可用性の高いCSSがほしい
・ assetsの読み込み順をコントロールして高速に表示できてほしい
・ 更新する時、さほど手間でなければいいな
・ レスポンシブではいい感じにしといてね
文字すべてをSVGにして、それを並べて「文字列を表示」とかもできるわけですが、それは非機能要求に反してるからやらないわけです。ブラウザでみれたらいいからJPEGに書き出して、imgタグで貼り付けようとかしないじゃないですか。
しかし、この中でもっとも簡単な評価は機能要求である「再現してほしい」なわけです。可用性の高いCSS設計も高速な表示も（この場合、コーディング側はブラウザのパースの仕組みを学ぶ必要がでてきます）発注者側は評価が難しいです。
また受注者側もピクセルパーフェクトだと何も考えずに「（特定の環境で）ちゃんと1pxのズレなく再現できました」と言えるけど、そうでない場合非機能要求を満たしたという説明が求められます。
つまり、ピクセルパーフェクトは「デザイナもコーダーもどちらも楽な選択肢」になる可能性があるということを理解しておく必要があります。
（ドラえもんをCSSで再現などという要件は別ですｗ）
本当に求めてるのはピクセルパーフェクト？
ピクセルパーフェクトを機能要求にしてしまうと、当然機能要求を優先することになります。「これは可用性が悪い。でもピクセルパーフェクトだから」「rem使うほうがいいんだけど、固定値であると伝えないといけないからpxで実装するか」とならざるえません。なぜなら、
パーフェクト
を求めたわけで、その時点でわざわざ確認をとる事項ではなくなってるわけです。
Twitterの議論をみてると、個人的に気になるのは
「そもそも20pxズレてた」
「ルックアンドフィール自体が異なる」
みたいなのもまとめて「だから、ピクセルパーフェクト」という表現をしてて、それは「再現する」という要件を満たしてないので、ピクセルパーフェクトという言葉を使う必要はないと思ってます。
コミュニケーションをとる上で「ピクセルパーフェクト」という言葉を使わず、機能要求と非機能要求をバランスにかけながら、これは必ず再現するところ、ここは非機能要求が優先されるべきと話し合うのが重要ではないでしょうか。
コーダーはデザイナの単純作業の下請けではなく、デザインをブラウザ上で再現するという専門家であるはずなのですから。
それでは、また。
---
よければ以下の記事も参考になれば幸いです。