PC、タブレット、スマートフォンなど現代ではさまざまな種類のデバイスを通してWebサイトを閲覧しています。
多種多様な見方が存在するからこそ近年はレスポンシブデザインがより重要視されています。そこで今回はレスポンシブデザインについて、2023年における最適な画面幅のサイズについて紹介していきます。
そもそもレスポンシブデザインとは？
レスポンシブデザインとは、Webサイトを「ユーザーが使用する各デバイスの画面サイズに応じて表示を最適化したデザイン」のことを言います。
今までWebサイトを見るときはPC画面で見ることが主流でしたが、近年ではユーザーの使用するデバイスがスマートフォンやタブレットへと変化したため、画面サイズが多種多様になりました。そのため、現在ではレスポンシブデザインが重要視されています。
レスポンシブデザインが主流になったきっかけ
レスポンシブデザインが主流となる前は、パソコンとスマートフォンで別々のサイトを用意して出し分けをしていました。ただこれではWebサイトの制作者にとって、Webサイト更新時のコストが2倍になってしまい、定期的な運用を継続するのがコストになっていました。
そこで登場したのが「レスポンシブデザイン」という考えです。
レスポンシブデザインというものは数年前から存在していましたが、2021年にGoogleが「モバイル・ファースト・インデックスに移行する」と発表したことにより、さらに関心が高まりました。
本記事では、世界各国のブラウザ、OS、画面幅などのシェア率がグラフ化されている「Stat Counter」というアイルランドのアクセス解析サービス企業が提供しているサービスを参考に、日本で使われているモニターサイズのシェア率を見ながら各デバイスの適切なブレイクポイントを紹介していきたいと思います。
各デバイスのブレイクポイント
PC：950px〜1200pxが最適な範囲
PCは1000px前後〜1280pxのブレイクポイント間でレスポンシブデザインを考えるのが良いということがわかりました。
PCのモニターサイズのシェア率が一番高いのは約26%の横幅1920pxですが画面最大で見ているとは限らないので、その場合も考慮しなくてはなりません。
1280px以上の比較的大きいサイズが50%以上を占めていますが、これらの場合でも最大画面で見ているとは限りません。
日本のサイトのレスポンシブデザインはおおよそどれも950px〜1200pxのサイズで設定されています。
大きいサイズが50%以上を占めているからといって、横幅をそれぞれに合わせてしまうと、文章が横に伸びてしまったり間延びしてしまったりと視認性が悪くなるため、大きいモニターの最大限で見た場合の時のことも考慮して、ブレイクポイントは最大でも1280pxにしておきましょう。
また、タブレットのシェア率50%を占めるサイズは768×1024pxです。これを横向きで見るとすると、横幅1024pxの小さなPCのサイズと同程度になります。
従って、PCのレスポンシブデザインは1000px前後〜1280pxのブレイクポイント間で綺麗に見えるようにしておけば、おおよそのモニター、横向きにしたタブレットで綺麗に見えるでしょう。
タブレット：768(600)px〜834pxが最適な範囲
タブレットでは768(600)px〜834pxのブレイクポイント間でレスポンシブデザインをすれば良いということがわかりました。
約50％を占めている768×1024pxは、一体なんのサイズなのかというと「iPadmini(1〜5)、iPad(1〜6)、iPad Air(1〜2)、ipad pro9.7」で多くのApple製品のタブレット機種で使用されています。
全体を見ると、約67%のタブレットが横幅768px〜834pxのサイズであることが分かります。
しかし、横幅600〜640pxの小さめのタブレットも全体の8%を占めているので最低でもブレイクポイント600pxまではデザインの崩れがないように制作すれば良いでしょう。
iPad Pro 12.9インチのような大きめのタブレットは全体の6％を占めていますが、横幅が1024px〜1280pxなのでPCのレスポンシブになります。
768pxが全体の5割を占めているので、768pxを基準に768(600)px〜834pxのブレイクポイント間でレスポンシブデザインを綺麗に見せることができればおおそよのタブレットで問題なくWebサイトが見れるでしょう。
スマートフォン：375(360)px〜414pxが最適な範囲
スマートフォンでは375(360)px〜414pxのブレイクポイント間でレスポンシブデザインをすれば良いということがわかりました。
スマートフォンでは、横幅375px〜414pxのサイズが87%を占めています。
ここで１つ豆知識なのですが、その他の割合18%の中に、高齢者のシェア率の高い「らくらくスマートフォン」(横幅360px)が含まれています。
Webサイトのターゲットユーザーが比較的若い層向けならば良いですが、老若男女が見れるようなサイトもしくは高齢者向けのサイトを制作するときは、ブレイクポイント360pxまではデザインに気を遣う必要があります。
一番シェア率の高いサイズは375pxなので、375pxを基準に360px〜414pxのブレイクポイントの間でレスポンシブを綺麗に見せることができていれば、日本のほとんどのユーザーが問題なくWebサイトを見ることができます。
全てのブレイクポイントを合わせる必要はない
デバイス | ブレイクポイント |
|---|---|
パソコン | 960px〜 |
タブレット | 520〜960px |
スマートフォン | 320〜520px |
それぞれのブレイクポイントはこのようになっていますが、全ての範囲で合わせる必要はありません。
細かく全ての範囲で合わせようとすると、全体をチェックするときに"綺麗に表示されているか"という見方ではなく"崩れているとこがないか"という見方になり、これはブレイクポイントの範囲が広いほどデザインのクオリティが閑散してしまいます。
レスポンシブデザインの際に最も大切なことは、ユーザーのシェア率が高い画面サイズをより綺麗に見えるようにデザインし、より多くの人に気持ちよくWebサイトを見てもらうことです。
参考サイト：WEBデザインの横幅サイズはこれで決まり！基礎から徹底解説
出典サイト：statcounter
ノーコードでWeb制作を勉強しませんか
ノーコードWeb制作ツール「STUDIO」を使ってWeb制作を学ぶオンラインスクール「カロアキャンプ」を運営しています。
現場で実践している知識や小話が入ったオリジナルの動画教材に加えて、講師による充実の1on1（フィードバック）など色々なコンテンツを用意しています。
