レスポンシブのviewport設定とスマホの解像度の理解
2020年現在のWeb制作においてスマホ対応といえばレスポンシブ。
PCで横並びに並んでいた要素を１列にしてスマホの画面幅におさめて見やすくする等の、画面幅に応じてレイアウトを変化させる見せ方が主流です。
レスポンシブにはまず基本として以下のようにheadタグ内でメタ情報としてビューポートを設定します。
<meta name="viewport" content="width=device-width,initial-scale=1">
この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづいている方がいらっしゃったので、少し解説したいと思います。
viewportの理解のためにまず端末の解像度を把握
viewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。
2020年人気のスマホのディスプレイ解像度
いくつか人気機種を並べてみましょう。ディスプレイ縦×横、単位はピクセルです。
- iPhone12…1170×2532（約296万画素）
- iPhone12mini…1080×2340（約252万画素）
- iPhone12Pro Max…1284×2778（約356万画素）
- Xperia 5II…1080×2520（約272万画素）
- Galaxy S20…1440×3040（約437万画素）
上記の機種全て、フルHDと呼ばれる1080×1920以上の高い解像度となっています。
画素数で見ると約252～437万画素程度というデータです。
人気のラップトップPC等のディスプレイ解像度
ちなみに人気のラップトップ・ノートPCとiPadのディスプレイ解像度は以下のような感じ。スマホに合わせて縦×横表記にしています。
- MacBook Air(2020)…1600×2560（約409万画素）
- Surface Pro7…1824×2736（約499万画素）
- Surface Go2…1280×1920（約245万画素）
- iPad Pro 11 inch(2020)…1668×2388（約398万画素）
画素数で見ると約245～499万画素というデータ。
スマホと比較してもそう大きく変わる解像度ではないのがお判りいただけるでしょうか。
比較するとスマホとPCのディスプレイ解像度は変わらない
スマホは縦長でPCは横長な事が多いので単純比較にはなりませんが、Galaxy S20の縦解像度3040pxを上回る表示はありません。
画素数で表現すると一番高いのはSurface Pro7で、２番目に高画素数なのがGalaxy S20です。低い方で見てもiPhone 12miniが約252万画素、Surface Go2が約245万画素と一番小さなiPhoneの画素数に劣ります。
この比較で分かることは、スマホの画面の解像度はパソコン並ということ。
2010年にiPhone4でRetinaと呼ばれるドットが見えない高解像度ディスプレイが採用されてから、スマホはその小さな画面ながらにパソコンと変わらない画素数を備えるディスプレイが当たり前になりました。
スマホそのままの解像度で表示したら見えづらい
パソコン並の高解像度なスマホのディスプレイですが、その小さな画面にその解像度のままにサイトを表示したらどうなるでしょう。
こちらのYahoo!JAPANのキャプチャはiPhone6/7/8の画面にPCサイト表示を適用したシュミレートです。max-widthを指定しているので、おそらくiPhoneの画面サイズと同じようなサイズ感で見えているのではないでしょうか。
PCの縮小されたようになっていて、文字が小さすぎて全然読めないですよね。
スマホの解像度そのままにサイトを表示してしまうと、PC並の解像度にも関わらずサイズがとても小さいので縮小されたようになり、視認性が失われてしまうわけです。
ピンチインでズームして見れなくもないですが、出来ればちゃんと見やすく最適化してほしいですよね。
スマホでスマホらしく見やすく表示するためのviewport設定がdevice-width
スマホでは各端末ごとに、実際の解像度通りではない表示用の解像度としてビューポート用の端末表示サイズ設定をしています。
iPhone12では390×844、Galaxy S20では360×800といった具合です。
これがviewport設定の「device-width」にあたります。
↓端末のビューポートサイズが確認できる海外サイトです。
Screen sizes, viewport sizes and CSS media queries for Devices for Devices | Find Viewport Size | YesViz
iPhone4のRetinaディスプレイの変革
iPhone3GからiPhone4への変遷を追うと理解しやすいかもしれません。
iPhone3Gまでは実際に320×480pxの解像度だったので、その実際の解像度でちゃんとスマホに最適化して表示されるサイト作成が求められていました。
そこからiPhone4でRetinaディスプレイとして一気に640×960pxと解像度が２倍になったのです。
その際、２倍になった解像度の上で今までの表示のサイズ感を維持したまま表示し、ドットの密度を高め、ドットのギザギザが見えないよう美しく綺麗に表示するという方式でAppleはアピールしました。
そのため、あくまでブラウザではiPhone3Gと同じ320pxのまま最適化していたスマホサイトが表示されるようにビューポートサイズ設定として320pxをiPhone4の端末表示サイズとしたのです。
今までのサイト表示のまま640pxの解像度で細かく描画するので、ドットの密度が高くなり綺麗に表示されるというわけです。
スマホサイトをスマホらしく表示する設定、それが「device-width」。実際の解像度とは別の表示用の最適サイズということですね。
だいたいの端末は実際の解像度の1/2がdevice-widthになっているのではないかと思います。
デザインデータや画像も2倍で作成することに
解像度が2倍に高まったことで文字など端末に描画される部分は綺麗に表示されるようになりましたが、320px幅のサイトデザインに適して作成していた画像はそのままでは画素数が足らず、ぼやけて表示されてしまいます。
そのため、画像も綺麗に表示するためにデザインデータなどではこの２倍のデータであらかじめサイトデザインを作成されることが多くなりました。
2倍サイズのデザインデータでは文字サイズに注意
なんとなく2倍のデザインデータを使って制作していてコーディングでつまづいている方もおられました。
文字が2倍サイズになっているのに気づかずコーディングの際にサイズ指定が大きくなりすぎてバランスが狂って困るというパターンです。
多くのブラウザでは10px以下のフォントサイズ指定は正しく描画されません。
2倍サイズのデザインデータでは20pxを最低フォントサイズとしたり、標準のフォントサイズを32pxとしたり、文字のサイズ指定には注意をしましょう。
レスポンシブにはviewport="width:device-width"を忘れずに
端末ごとに見やすく表示されるために各端末のビューポート用の端末表示サイズが存在していて、その設定に合わせて描画する設定が
<meta name="viewport" content="width=device-width,initial-scale=1">
というわけです。
ご理解頂けたでしょうか。
さらに深く理解したい方などは以下の記事など参考になるのではないかと思います。
viewportを設定しない場合は980pxになるという記事は過去のスマホ変遷を知らないこれからのWebデザイナー志望の方にも非常にためになる話ではないかと思います。
是非ご参考ください。
最後までお読みいただきありがとうございました！
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
