初めに
筆者はバリバリのデザイナーではなく、web経験が浅いことを断っておきたい。そのため、内容は現場の実情に合わない、空虚な理想論に終始してしまうだろう。その際はお気軽にコメントください。
ピクセル単位デザインが必要な場合
記事のタイトルはかなり挑発的だが、ピクセル単位のデザインが必要な場面は確かに存在する。
例えば動画。動画は配信フォーマットが決まっているので、そのサイズに収まるように文字を配置しなければならない。そのためにはピクセル単位できっちり文字サイズを決めて、何文字まで入れるとか文字の幅を狭めるとか調整する必要があるだろう。
また、ゲームもSwitchではよくてフルHD、PS5やXBOX Series Xなら最大4Kとハードごとに使用できる解像度が絞られるので、使用する解像度に合わせて文字サイズや表示位置、ドット絵の場合はドットの大きさなどを指定することになるはずだ。PCゲームも、アセットの解像度などの問題で、表示サイズは固定になる。
これらの環境でピクセル単位の調整が必要なのは、フォーマットが定まっているからだ。しかし、動画を扱うからと言って、動画サイト自身はピクセルに縛られる必要は無いというのが筆者の持論である。
なぜWebページでもピクセル単位でデザインするのか
そもそも論として、どうしてデザイナーはWebページをピクセル単位でデザインしたがるのか。その理由は、本のデザインの影響ではないだろうか。
印刷物はA4、B5といった具合に紙のサイズが決まっており、その中に文字を収めるにはcmやポイント（ないし号数）単位の設計が必須だった。実物なのだから当然である。
そして、そのことに慣れっこなデザイナーは、Webをデザインする際にも、ディスプレイの最小単位であるpxを基準にデザインするようになったのではないか。
pxは「絶対単位」とは言えない理由
しかし、PCディスプレイのピクセルの大きさはまちまちだ。同じフルHDディスプレイでも16インチと27インチでは当然ピクセルの大きさが変わる。後者の方がピクセルが大きくなる。ウィンドウのサイズもユーザーが自由に変更できるため、メディアクエリによっては不適切な表示になってしまうかもしれない。
それだけではない。画面自体の解像度もどんどん上がっている。最新ゲーム機を堪能すべく4Kディスプレイを買って、それをPCと共用する人も少なくないだろう。それで表示したサイトは小さい。世の中こんなに狭かったのかという思いにふけってしまう。
スマフォやタブレットも、機種ごとにピクセル数がまちまちで、新機種が出るたびにデバイスの横幅に合わせたメディアクエリを書き直さなければならなくなる。
さらに、デバイスピクセル比という概念が存在し、デバイス側で例えば画面の2pxを1px分として扱うということもある。iPhoneのRetinaディスプレイなど、サイズの割に高精細ディスプレイを備えるスマフォがよく取り入れているが、Windowsだって画面設定の「拡大縮小とレイアウト」から同様の設定をすることができる。
また、根本的な問題として、ページのpxを厳密に設定したとして、その中の文字数を計算するのは面倒である。例えばページ内の検索結果を300pxのカード形式で表すとして、中身の文字を16pxでデザインした場合、300 ÷ 16 = 18.75だから18文字くらい入る、といちいち計算しなければならない。そのため、計算を楽にするためだけに文字サイズが決定されてしまう事態が発生する。それは果たしてユーザー中心主義と言えますか？
ちなみにCSSにもcmなどの実物に即したように思われる単位があるが、例えばcmは96px/2.54という値で定義されたものであり、実際の単位とはいずれも関係が全く無い。1インチ = 96pxとされていた過去の時代の遺物であり、いつ廃止されてもおかしくは無い無用の長物である。厳密にはMacは長い間1インチ = 72pxだったりもするが、話が長くなるので割愛する。
Webデザインは「文字の大きさ」を旨とすべし
この事態に対する一つの解決方法として、文字の大きさを単位としてデザインを決めるという方法がある。CSSの単位系で言えばem、rem、exなどがそれにあたる。特にemはフォントサイズなので、日本語などの幅が決まった文字とは相性が抜群である。ちなみに「水」という文字の大きさを単位とするicという単位系も検討されているが、基本的にemで十分なためかどのブラウザも実装しておらず、影が薄い。
つまり、Webデザインにおけるコペルニクス的転回が発生しているわけだ。先ほどの検索結果カードの場合、結果に入れる文字数でサイズを決めればデザインが楽だし、フォントサイズ変更も問題なく行える。
ちなみに、筆者はBootstrapよりもFoundation派だが、それはメディアクエリをemベースで書いているからである。真のレスポンシブを達成するためにはemとremの使用が欠かせない。つまり、サイト全体のサイズをremで設定し、各要素のサイズはemで決めるのが現代のWebページデザインだ。
まとめ
これからのWeb設計は、pxではなく、文字数を基準に作るといいはずだ。これから増えるであろう高解像度への対応も楽になる。4K対応のホームページが増えてほしいものである。