Magazine

Webデザイン横幅のサイズ感とRetina Display対応について

Webデザイン横幅のサイズ感とRetina Display対応について

今回は、Webページをデザインする際にとても重要な横幅のサイズ感について詳しく解説していきます。

Webサイトは、大きく分けてPC/タブレット/スマホの3サイズのデザインを作る必要があります。Webサイトはデバイスごとに横幅が可変する仕様になっている為それぞれのデバイスに対応した横幅でデザインを行う必要があります。

近年ディスプレイの高解像度化が進み、従来のモニターよりもとても綺麗な画面になっています。

これは従来のモニターよりもピクセル数が2倍〜3倍多く敷き詰まっていているからです。Apple製品のほとんどはRetina Displayという高解像度モニターが採用されていて、目を奪われるような美しい解像度で表現されています。

Webデザインを進める上で、高解像度のモニターに対応したデザインを作る事はとても重要です。従来の横幅でデザインを作ってしまうと、高解像度モニターでデザインを表示した時に画像が引き延ばされて画質が劣化して表示されてしまうからです。

こちらの記事では、Webデザインの最適なサイズ感を解説していますのでぜひ参考にしてみて下さい。



ディスプレイモニターの解像度とは?

これからWebデザインを勉強する方はモニターの解像度の知識はとても重要です。解像度というのは、とても難しく聞こえるワードですが、今あなたが使っているモニターの横幅と縦幅のサイズの事です。

今お使いのPCの横幅と縦幅のサイズは簡単に調べる事が出来ます。

Macの解像度の調べ方

Macをお使いの方は、以下の方法で解像度を確認する事が出来ます。

  1. アップルメニューをクリック
  2. このMacについてをクリック
  3. ディスプレイをクリック
  4. モニターの表示を確認します(以下の画像の場合は、モニターサイズは21.5インチ 縦4096ピクセル× 2304ピクセル)のモニターである事がわかります。

Mac解像度の調べ方

Windowsの解像度の調べ方

Windowsをお使いの方は、以下の方法でモニター解像度を確認する事が出来ます。

  1. スタートボタンをクリック
  2. コントロールパネルをクリック
  3. デスクトップのカスタマイズの画面の解像度をクリック
  4. ここでモニターサイズの確認を行う事が出来ます。(以下の場合は、現在使っているモニターサイズは横1680ピクセル × 横1050ピクセル)である事が確認出来ます。

windowモニターサイズ解像度の調整

従来のモニターの解像度

それでは、従来の標準モニターの解像度を把握しておきましょう。これまでに採用されていた標準ディスプレイサイズの目安は以下の通りです。

高解像度モニターと比べると横幅のピクセル数が少なく、最新のモニターよりも2/1の解像度が主流であった事がわかります。

13インチ ノートパソコン

従来の13インチのノートパソコンの解像度の目安は以下の通りです。

横幅 1280px × 縦幅 800px

15.4インチノートパソコン

従来の15インチのノートパソコンの解像度の目安は以下の通りです。

横幅 1440px × 縦幅 900px

24インチデスクトップパソコン

24インチのノートパソコンの解像度の目安は以下の通りです。

横幅1920px ×  縦幅 1080px

Retina Display/高解像度モニターの仕組み

それでは次にApple製品などで採用されているRetina DisplayとWindowsでリリースされている高解像度モニターのサイズ感を把握しておきましょう。同じモニターサイズでも従来のディスプレイと比較するとピクセル数が約2倍あるのがおわかりいただけると思います。

MacBook Pro 13インチ

横幅2560ピクセル × 縦幅 1800ピクセル

MacBook Pro 16インチ

横幅3072ピクセル × 縦幅 1920ピクセル

iMac 21.5インチ 4Kディスプレイ

横幅4096ピクセル × 縦幅2304ピクセル

【結論】Webデザインは基本的に2倍の大きさでデザインしましょう

現在は、モニターの高解像度化が進みモニターの解像度が約2倍になっている事がおわかりいただけたと思います。その為、高解像度モニターに対応したWebデザインがとても重要になっています。

解像度に合わせたサイズ感でデザインを作らないと、作成した画像が引き延ばされて劣化してしまうからです。

各デバイスごとの横幅のサイズ感

各デバイスごとのサイズ感

これからWebデザインをする場合は、2倍のサイズで作成する事は前述した通りです。それでは、ここからは各デバイスの解像度とサイズ感を把握しておきましょう。

PCデスクトップサイズ

PCのWebデザインのサイズは何インチのモニターサイズまで対応させるのかをはじめに決めておく必要があります。PCのモニターサイズで一番シェアの多いサイズは以下の統計データが参考になると思います。

SYNCER社のモニターサイズ統計データ (デスクトップ)

SYNCER 画面幅のシェアの統計情報より引用 (2019年度)

一番シェアの多いモニターサイズは、横幅1920ピクセル × 1080ピクセルですので、この解像度の2倍のデザインデータを作れば、Apple社のRetina Displayに対応する事も可能です。

つまりPCサイトのWebデザインは2020年現在、以下のサイズ感で作成すれば問題ありません。最もシェアの多いモニターサイズでデザインを行う事がとても重要です。

(横幅1920×2)+(縦幅1080×2) = 横幅3840ピクセル × 縦幅2160ピクセル(縦幅は固定ではないので自由に決めてOKです)

タブレットサイズ

タブレット主要モニターサイズ

SYNCER 画面幅のシェアの統計情報より引用 (2019年度)

それでは次にタブレットサイズの場合ですが、タブレットでシェアが多いのはiPadの横幅768ピクセルです。こちらもPCと同じくRetina Displayに対応させなければいけませんので、2倍の横幅でデザインを作成する必要があります。

(横幅 768×2) + (縦幅は固定ではないので自由に決めてOKです) =  横幅1536ピクセル × (縦幅は固定ではないので自由に決めてOKです)

スマホサイズ

モバイル シェアモニターサイズ

SYNCER 画面幅のシェアの統計情報より引用 (2019年度)

スマートフォンで現在最も横幅が太いサイズはiPhone 11 Max Pro(2020年10月5日現在)です。iPhone 11 Pro Maxの画面解像度は、 横幅1,242ピクセル × 縦幅2,688ピクセルです。

iPhone 11 Pro Maxの画面解像度はSuper Retina XDRディスプレイというモニターが搭載されていて従来のモニターの3倍の解像度で表現されていてとても綺麗です。

しかし2020年時点で、iPhone 11 Pro Maxのシェアは少ない状態ですので横幅を3倍で作成する必要は今の所ありません。

2020年はiPhone 11を購入された方も多いと思います。iPhone 11の画面解像度は、横幅414pxのRetina Display搭載のモデルで従来の375pxの横幅のシェアは少なくなっていく事が予想されます。

スマートフォンのデザインも最も横幅の太いモニターに合わせてデザインを行う事が推奨されますので、iPhone 11の横幅サイズ×2以下のサイズでデザインを作成すると良いでしょう。

(横幅 414×2) + (縦幅は固定ではないので自由に決めてOKです) = 横幅828ピクセル x (縦幅は固定ではないので自由に決めてOKです)

Photoshopを使ってデザインを作る際のサイズ感まとめ

それではここまで、Webデザインを行う時に最低限必要な各デバイスの横幅について解説させていただきました。Photoshopを使ってデザインを行う事が多いと思いますが、各デバイスのページデザインのサイズをまとめると以下の通りになります。

Photoshopを使って新規ファイルの作成を行う際に設定していただく数値となりますので確認してみて下さい。

PC

横幅3840ピクセル × (縦幅は固定ではないので自由に決めてOKです)

タブレット

横幅1536ピクセル × (縦幅は固定ではないので自由に決めてOKです)

スマートフォン

横幅828ピクセル x (縦幅は固定ではないので自由に決めてOKです)

2020年10月5日現在、Webデザインの横幅は今回ご紹介したサイズで作成すれば問題ないでしょう。各デバイスの横幅については今度も変化していく事は間違いありませんので、その際は最新の情報をシェアさせていただく予定です。



The following two tabs change content below.
鳥取県米子市出身。大阪市在住。 株式会社STACK ONLINE 代表取締役。2018年11月に株式会社STACK ONLINEを設立し、デザインの教育事業を展開。デザイナー歴17年。好きなデザインはシンプルで力強いデザイン。
  1. 通りすがりのIT弱者

    Retinaモニターの横幅が1920ピクセルならそれを想定して横幅を決めてもRetina以外はその半分になるのだからいいような気がします。
    なぜ更に倍にするのでしょうか?

    • 石原 誠之

      コメント頂きましてありがとうございます。ご質問の件についてご回答させていただきます。
      Apple社のRetina Displayは本来のノーマルモニター解像度の約2倍のピクセル数で表現されています。

      ■iMac 21.5インチ 非Retinaのモニター解像度は
      横幅1920px × 縦幅1080pxです。

      ■iMac 21.5インチ 4K Retina Displayモデルのモニター解像度は
      横幅4096px × 縦幅2304px

      となっておりまして、ノーマルモニターの2倍以上の解像度がございます。

      その為、横幅1920pxのデザインデータを作成し、コーディングを行ってしまうと、Retina Displayモデルで見た時には作成したデザイン画像が2倍に引き伸ばされて表示される為、画像がボケて劣化してしまいます。その為Retina Display対応する為には、2倍のデザインデータの作成が必要です。

      参考サイトのリンクを貼っておきますのでご確認下さいませ。
      https://www.apple.com/jp/imac/specs/

  1. この記事へのトラックバックはありません。

関連記事一覧

最新の記事