画面内での比率の美しさを重要視した実装をしています
前提として私はデザインも経験しているので、
デザイナーさんの意思を無視して汚く組み立てても気にならないという意識はありません。
(汚いバランスのものを見ると気になって仕方がない)
「ピクセルパーフェクトは当然で〜」みたいな売り文句を見たことはありますが、
現実的に、ピクセルなんか気にしてたら作り終わりません。私は少なくともそう思っています。
別のアプローチでデザインの主旨を守りつつ、技術的要件もなるべく叶える形を採用します。
主な理由は以下の2つ:
- アクセシビリティ対応で「ユーザーの指定した文字サイズ」に連動させるため、
そもそも単位としてpxを使っていない - デバイスの画面サイズが多すぎるので、
絶対サイズで指定すると思わぬところでバランスが崩れる
アクセシビリティ対応で
「ユーザーの指定した文字サイズ」に連動させるため、
そもそも単位としてpxを使っていない
アクセシビリティ?
平たく言うと「Webサイトは万人が見られるのだからもっとバリアフリーな感じで作って」っていうお触れがデジタル庁から出されました。言われてみれば当然のことだと思います。
(但しデザイントレンド的には動画みたいなアクセシビリティ対応とは真逆のものが喜ばれている面もあります。これはまた別の話……)
障がいがある方や怪我などで一時的にデバイスの操作が困難になっている方、加齢などで目が見えづらくなった方等々が、支援技術を用いている場合でもちゃんと情報が取得できるようにする、ということです。
その中の要件で「使用している本人が指定したシステムやソフトウェアの設定による文字サイズ指定が反映されるように」というようなものがあります。
対応レベルはA〜AAAで、AAAになったら厳しいです。(見かけの「デザイン」という概念がほぼ無くなる)
この要件はレベルがAAのためAだけに対応する場合は別に構わないのでは?という感じもしますがデジタル庁のガイドブックでは重要な項目として挙げられており、特に私が直接実装する場合においては対応します。
「必須」に入っている
文字サイズの話がなぜデザイン全体に及ぶの?
文字の大きさだけ変えられても外枠が一緒に動かなかったら崩れるからです。
ということで
そもそも、pxという単位はあまり使っていません。だから「ピクセルパーフェクト」はありません。
デバイスの画面サイズが多すぎるので、
絶対サイズで指定すると思わぬところでバランスが崩れる
何を言ってるんだ
例えばスマートフォンサイズだからと言って画像の幅を200pxに指定したとします
この時画面は375px相当の人もいれば400px相当を超えている人、もっと大きい人もいます。
すると何が起きるでしょうか。横の空間がどんどん広がります。
よく「間延びしてる」という言葉が飛び交いますが、あれが起きます。

間延びしない工夫
最初に「画面内での比率の美しさを重要視した実装」と書きましたがこれが理由です。
Webサイトの組み立ては一番綺麗な妥協点に落ち着ける作業
だと私は思っています。
妥協と言っても悪い意味ではなくて、なるべく多くの場合に美しくなるようにするということです。
形の変わる箱の中に必要なパーツを入れ、バランスを取っているイメージです。
お互いの話を聞いて平和な進行を
Webサイトという蓋を開けると面倒なものを作る時、
デザイナー・コーダー間、お願いする人・作る人の間
ちゃんと話し合ってお互いを尊重するのが一番平和にすすみます。
「自分のパソコンだと汚い、とにかく自分のパソコンで綺麗に見えるようにして。あとは知らない。絶対に譲らない」
「このフォントはサイト全体で絶対に使ってもらわないと困る。内容が変わるところも全部。絶対に譲らない」
「こんなデザインは組み立てられない。Webをわかってない。チラシだけ作ってればいい。無理。絶対に譲らない」
こういうことをお互いに言わないようにしましょう。喧嘩しないで。おわり。