なぜ「pxとrem」は議論になるのか

CSSを構成する上で、pxを使うのか、remを使うのか、度々論争になることと思います。（私の中だけ？）

個人的には以前、これからお取引になるかどうか、という制作会社のお客様ともこの話になったこともあります。

そのお客様は、圧倒的px派で、当時圧倒的rem派だった私は、なぜremの方が良いのか、説明ができなくて、悔しい思いをしました。

（説明できなかったこともあってか、上記の制作会社とは、最終的にはお取引になりませんでした…。）

同時に、説明できない構築をするのは非常に良くないことだ、と思い、双方のメリットやデメリットを、改めて1から整理してみることにしました。

pxとremの基本を整理

一度0の状態に立ち返るため、pxとremの意味や定義を整理してみます。

ひとことで表すのであれば、

px（ピクセル）：
画面上の絶対的な単位。

rem（ルートem）：
ルートフォントサイズを基準とした相対単位。

もう少し具体的に、別の表現をしてみるならば、

px（ピクセル）：
16pxと指定したら、どこでも16px

rem（ルートem）：
html 要素に指定された font-size を基準に計算される単位で、
html { font-size: 10px; }　だったら、1rem=10px

という表現でしょうか。

限りなくデザインに忠実に再現ができるpxと、柔軟性・メンテナンス性が高いrem。

何を大事にしながらCSSを構成するかによって、どちらを使うのが最適解か、変わってきそうな気がします。

構成のポイントごとに比較

1. デザイン再現性

デザイン再現性で軍配が上がるのは、やはりpxでしょう。

「1px単位でのデザイン再現」「1px単位での調整」という文言を使っていた時期が、私にもあります。

少しおおげさに言うならば、1pxはでどこでどう表示されても1pxです。

ブラウザ上で、安定的にデザイン通りの再現ができます。

ただし、最近は例外も出てきました。

例えば、高解像度ディスプレイ（MacBook Retinaやスマホなど）では、16pxでも小さく・シャープに見えるなど、デバイスによって見た目サイズが変わる可能性があります。

また、ユーザーがブラウザやOSの設定で、「テキストだけ大きくする」モードを使用した際、px指定だと固定のままで拡大されない場合もあるようです。

とはいえ、構築しているサイトが、ここに該当するユーザーをターゲットにしたサイトかどうか、というのもポイントになってきそうです。

いずれにしても、柔軟性には少し欠けるものの、pxで構成することで、多くのユーザーに対しては、デザインに忠実なコーディングができるのは間違い無いでしょう。

2. レスポンシブ対応

レスポンシブ対応に適しているのは、remでしょう。

remはルートフォントサイズを変えるだけで全体が調整可能ですので、柔軟にスケールを操れるのが何よりのメリットです。

個人的には、remを活用したリキッドレイアウトを良く使っていて、中途半端な画面幅でも、レイアウトを崩さずに程よく調整してくれるので、開発効率が上がっているように感じています。

高解像度ディスプレイなどのデバイスやユーザー設定に対しても、自然にスケールしてくれます。

ちょっとした補足ですが、remは、文字や余白など「伸び縮みしても違和感のない部分」に使うのがちょうど良いです。

ページ全体の幅や画像のサイズなんかは、vwや%で調整することが多いですね。

一方で、デザインを忠実に再現したい場合には、「1px単位での調整」ということができないので、どうしてもデザインとの誤差が出てしまうことがあります。

「柔軟性」を優先するか、細かな精度を優先するか。難しいポイントです。

どのデバイスでも綺麗に表示したい！という意図の、レスポンシブ対応に注目するのであれば、結果的に、ユーザーにも作り手にも優しいのはremだと感じます。

3. メンテナンス性：大規模サイトほどremが有利

pxは直感的で、デザインの値をそのままコーディングできる利点があるものの、ページ数やパターンが増えると、修正に手間がかかる場合があります。

remであれば、ルートフォントサイズの1箇所を調整すれば、全体が自動的に調整されることとなります。

つまり、規模が大きく、かつ、細かくデザインメンテナンスしていく可能性があるサイトであれば、remの方が有利になる可能性がありそうです。

4. パフォーマンス：pxがわずかに有利？

pxは、ブラウザのパフォーマンス的にも直感的で、即座に描画できる「絶対値指定」です。

対してremは、ブラウザのパフォーマンス的にも、一度計算を挟む必要があります。

この2つの差は、以前までは若干差があったようですが、現代のブラウザでは、ほとんどゼロだと言われています。

よって、パフォーマンスという点は、あまり考慮する必要はなさそうです。

それよりも、その他の点（保守性や拡張性）を重視して、どちらを使用するか判断した方が良いでしょう。

5. 将来性：環境の多様化に強いのはrem

ユーザー環境は、年々複雑化しています。

例えば、デバイス解像度、ユーザー設定、高DPIなど…。

pxは「今のデザイン再現」に強いですが、「未来の拡張性」では弱い面もあります。

対してremは、「相対的な柔軟さ」で新しい環境にも自然に対応していきやすい単位です。

将来を見据えて、柔軟に多様化に対応しやすくするには、remを選択する方が賢明でしょう。

6. チーム開発・デザイナー連携

デザインカンプがpx単位で作られている場合、px指定すれば、デザイナーも、チームで開発する場合も、理解しやすいでしょう。

しかし、最近Figmaなどで作られるデザインでは、rem換算を前提として、4/8/16の倍数で設計する場合も増えています。

デザイナーとどこまで共通理解を持つかが選択の分かれ目となる場合もありそうです。

7. ユーザー体験とアクセシビリティ

px指定はデザインの一貫性を守る一方、「2. レスポンシブ対応」でも触れた通り、ユーザー設定を無視しがちです。

rem指定はユーザー設定の文字サイズ変更やズームを自然に反映することが可能です。

どのようなターゲットに向けて作成するサイトなのか、誰にとって快適なサイトにしたいのかで、重視するべきポイントが変わります。

比較まとめ：pxとrem、向いているケース

軸	向いている単位	理由
厳密なデザイン再現	px	カンプ通りに再現できる
レスポンシブ対応	rem	一括スケールに強い
メンテナンス性	rem	修正がルートで完結
パフォーマンス	px（僅差）	計算不要で高速描画
将来性・柔軟性	rem	多様な環境に適応
小規模サイト	px	実装が早く簡単
大規模・長期運用サイト	rem	一貫したスケーリングが可能

結論：どちらが正しいかではなく、どう使い分けるか

ここまで比較した内容をざっくりまとめると、

px＝「正確さ・安定性」を守る単位。

rem＝「柔軟性・アクセシビリティ」を重視する単位。

「こっちを選ぶのが正解」ということではなく、プロジェクトや制作サイトの目的、制作チーム体制、ターゲットのユーザー層によって最適解は変わります。

最終的に大事なのは、「なぜこの単位で制作をしているのか」を説明できること。

ただ流れ作業で目の前のデザイン制作をするのではなく、常にどう制作するとプロジェクトのためになるのか考えるのが大切でしょう。

おわりに：説明できる技術者であるために

「なんとなく」「感覚で」制作するのではなく、理論的に選択理由を語れることが、お客さんへの信頼にもつながります。

pxを使うのかremを使うのか、具体的にツッコまれることは少ないかもしれませんが、だからこそ、「pxでもremでもいい」ではなく、「この案件にはremが合う」と言えるように、常に検討することが大切です。

なぜその技術を選択するのか、明確に言語化することが、プロフェッショナルの第一歩になるでしょう！