あり？なし？すべての単位をvwを使ってどのブラウザのサイズでも同じ見た目にすることについての個人的見解

こんにちは。やまぐちなな（@nana_winter_web ）です。

ときどき、Twitterで見かける、すべての単位にvwを使うことについて思ったことを以前ツイートしました。
詳細を語りたいなと思ったので、色々書いてみます。

ツイートではfont-sizeを名指ししていますが、font-sizeだけではないすべての単位についての話です。
また、vwだけではなく、vhやvmin、vmaxも含みます。

結論はなしなのですが、どうしてなしなのかを詳しく書いていきます。

vwやvh、vmin、vmaxとは何なのか

まず、なしな理由を解説する前に、これらの単位が何かを説明していきたいと思います。

これらの単位はブラウザのサイズを基準にする単位です。vwはブラウザの横幅、vhはブラウザの高さ、vminはブラウザの横幅か高さの小さい方、vmaxはブラウザの横幅か高さの大きい方を基準にします。

画面全体を覆うようなメインビジュアルなどはvhを使って指定すれば、どのサイズでもきれいに表示されるなど、使いどころによってはとても便利な単位たちです。

計算方法

設定したいサイズ（px）÷割る 基準となるブラウザの横幅もしくは高さ（px）×かける 100

ブラウザのどこが何pxの時、何pxで表示させるのかという考え方をするとわかりやすいと思います。

基準となるブラウザの横幅もしくは高さというのはvwを使うのかvhを使うのかなどによって変わります。

Retinaディスプレイなど高解像度のディスプレイの場合、px数 ÷割る 2くらいで計算したらちょうど良い感じになります。

どんなブラウザのサイズでも同じ見た目にするのがなしな理由

大きな理由は2つあって、1つはアクセシビリティ関連、もう1つはブラウザのサイズによって文字サイズが変わる必要はないと思うからです。

ユーザーが文字サイズを変更できなくなる

ブラウザには文字サイズを変更する設定があります。
em、rem、％パーセントを使えばその機能を阻害することはありませんが、それ以外の単位を使ってしまうとその機能を利用することができなくなります。

下記の記事でもチラッと書いています。

誰にでも優しいWebサイトの定義と気を付けたい3つのポイント

続きを読む

ウィンドウのサイズによって文字サイズが変わる必要がない

読みやすい本文の文字サイズはターゲットが高齢者などでない場合、ブラウザのサイズに関わらず16px相当というのが現在の定番です。

vwなど、ブラウザのサイズを基準に考える単位を使用する場合は、どのブラウザのサイズを基準にするかが重要になってきます。

スマホの場合、横幅320px（iPhone5など）を基準に16pxの文字サイズで制作した場合、375pxやそれ以上の場合、文字サイズは18.75pxと16pxより大きくなります。
19px近い文字サイズというのは、小見出しと同じくらいの文字サイズになります。

大きい文字はどれだけおしゃれな若い世代をターゲットにしたデザインでも、子供や、高齢者向けに見えます。

横幅375px（iPhone6など）を基準に16pxの文字サイズで制作した場合、320pxの場合の文字サイズは約13.65pxです。
小さい文字は読む気が失せます。
若い世代がターゲットのサイトだとしても、若い世代は文字よりも動画が良いそうですし、小さい文字は読まれにくいでしょう。
コピーライトに使うような文字サイズで本文を表示させても、読みづらいです。

また、電車などに乗ったときに周りの人が持っているスマホを見ると小さいスマホを持った人も無視できない数存在しています。

PCの場合、1000px未満のものから、2500pxを超えるものもあります。
1000px未満のものは最近は少なくなってきましたが、PCはモニターのサイズも、ウィンドウもサイズも決まったサイズがありません。
高さを基準に考える場合でもブラウザの高さは自由に変えることができるので、思っている文字サイズよりかなり小さくなってしまうことも、大きくなってしまうこともあります。

余談ですが、スマホだとブラウザは画面の高さというのが常識でしたが、Androidで画面を2つに分けて使うという機能が追加されたのでそのような時代は終わりました。
結構便利です。

まとめ

改行をきれいな位置で見せたいという気持ちはわかりますが、ユーザーが文字サイズを変更すれば改行の位置は簡単に変わります。
ブラウザの文字サイズ変更機能を必要としている人はどの世代にも存在します。
また、表示が乱れるから文字サイズを変更できなくするというのは制作する側の勝手な都合なのではないでしょうか。

便利なものはデメリットも知ったうえで使いたいですね。