2025/04/23

2025年版｜Webサイトに最適な画面幅とは？デバイス別のシェアとデザインの考え方

今やWebサイトのスマートフォン表示を考慮するのは当たり前になっていますが、ユーザーがWebサイトを閲覧する環境は多様化していて、どの画面幅を想定して設計、デザインしていくのかは、Web制作者にとって悩ましい問題です。

画面幅が考慮されていないWebサイトはユーザーにとってストレスになるだけでなく、離脱率の増加やCV（コンバージョン率）の低下にも直結します。

この記事では、Webサイトを制作する上で考慮するデバイス幅やコンテンツ幅について解説していきます。

【2025年版】日本国内でよく使われている画面サイズ

ここからは、日本で使われている画面サイズのシェア率を見ていきます。

日本でよく使われているPC解像度TOP5

※出典：StatCounter Japan Desktop Screen Resolution Stats – 2025年3月

現在のPC市場では、**フルHD（1920×1080）**のモニターが標準となっており、価格・性能のバランスも良いため、一般家庭やビジネスシーンで幅広く利用されています。

日本でよく使われているタブレット解像度TOP5

※出典：GoleadGrid / DesignMentor – 2024年タブレット閲覧データ

• iPad（第9世代 / 無印）：768×1024
• iPad mini（第6世代）：744×1133
• iPad Air / Pro：820〜834px 幅クラスが多い
• Androidタブレット（Fire HDなど）：800px前後

横幅は「768px〜834px」あたりに集中しているのが特徴です。

日本でよく使われているスマートフォン解像度TOP5

主要機種の解像度

iPhoneユーザーが圧倒的に多い日本において、375pxは“事実上の標準”といっても過言ではありません。
この幅をベースにしつつ、414px、428pxといったやや広めの画面にも可変対応できるレイアウトが理想的です。

デバイスの解像度シェア率を踏まえてWebサイトをどう設計するか？

ブレイクポイントとは？

「ブレイクポイント」とは、Webサイトのレイアウトやスタイルを切り替える画面幅の基準点のことです。
レスポンシブWebデザインを実現するために使われるCSSの概念で、画面サイズに応じてデザインを最適化するために不可欠な仕組みです。

ユーザーが使っているデバイスは、スマホ・タブレット・PCとさまざま。
それぞれの画面幅に対して同じレイアウトをそのまま表示してしまうと、見づらかったり使いづらかったりします。

たとえば：

• スマートフォンで2カラム表示 → 読みにくくなる
• PCで1カラム表示 → 画面の中央に文字が寄ってスカスカになる

こういった問題を防ぐために、特定の幅を超えたタイミングで大きくレイアウトを切り替えるのが「ブレイクポイント」です。

ブレイクポイントとそれぞれのデバイスの基準値の考え方

ブレイクポイントをどこに設定するかはWebサイト制作者によって考え方が様々ですが、以下がよく用いられるブレイクポイントになります。

私の感覚としては、スマートフォンからタブレット表示に切り替わるポイントは、タブレットのシェア率から考えても768pxからに設定するのが妥当ではないかと思います。スマートフォンやタブレットではほとんどの場合全画面表示でブラウザを使用するため、デバイス幅≒ブラウザ幅と考えることができます。

もちろん画面幅に応じて調整は必要ですが、この幅があればPC用のデザインとそんなに大きな変更点もなくレイアウトできるため、ブレイクポイントを一箇所しか設定しない場合はこの値がベストかと思います。

例）

ブラウザ幅767px以下　→　１カラム、サイドバーなし、メニューはハンバーガーメニュー表示に

ブラウザ幅768px以上　→　2カラム、サイドバーあり、フルメニュー表示など

PCの場合はデバイス幅＝ブラウザ幅ではない点に注意

スマートフォンやタブレットと違い、PCではユーザーが自由にブラウザのウィンドウサイズを変更できるのが特徴です。
つまり、PCの「画面解像度（デバイス幅）」が1920pxだったとしても、実際にWebサイトが表示されるブラウザ幅はその通りになるとは限らないということです。

意外かもしれませんが、多くのユーザーは常にブラウザを最大化しているわけではありません。

• 他のアプリやウィンドウを同時に開いている
• 複数モニターや横並び表示で作業している
• ノートPCで画面が小さいから左右を縮めている

…などの理由で、ブラウザの表示幅が1280px未満になることも珍しくありません。

実際、私も1920pxのモニター上でブラウザを使用する際、ほとんど半分の幅しか使っていないことが多いです。

ブラウザを全画面表示で使用するユーザーは世間的にもそれほど多くないため、PCでの表示を設計するときにも、1,000〜1,200px程度と思ったより小さめの画面幅で設計されることが多いです。

Webサイトを制作する際に想定する最適なコンテンツ幅とは？

Webサイト制作をする上で最適なコンテンツ幅を設定するために、デバイス別の主要な画面幅をまとめます。

これらを踏まえると、想定するコンテンツ幅は以下のように考えるのを基本とした方が良さそうです。

スマートフォン向け：360px〜450px

• コンテンツ幅は最大で450pxに抑えるのが◎
• 横スクロールや文字詰まりを防ぎ、タップ操作もしやすくなる

タブレット向け：約768pxベース

• iPadの縦持ちにフィットする768pxを基準に
• 横持ちではPC寄りの表示に切り替えてもOK

PC向け：1000〜1100pxが王道

• 全画面表示でも、実際の表示エリアは1100px前後が最多
• それ以上は“デザインがスカスカに見える”リスクもある
• センター寄せレイアウト＋左右余白で高い可読性を確保

でも結局最適解はターゲット次第

上記をベースに設計していくのが以下とは思いますが、結局はどんなユーザーがどんなシチュエーションで閲覧することが想定されるか次第だと思います。

アクティブな若者がターゲットで、ほとんど屋外で、スマートフォンで見られることが多いだとか、その場で施設案内を見られることなどが想定されるサイトであれば、モバイルファーストの設計でスマートフォンのデザインから作り始め、ブレイクポイントは最低限の768px一発、タブレットやPCでも大きくレイアウトは変えず、ただ横幅をコンテンツが埋め尽くすように少し調整するなどといった作り方になると思います。

逆にアニメーションやレイアウトにこだわったたり、ブランディングのために迫力あるWebサイトにしたい、などという場合はコンテンツ幅を1920px幅に設定してPC版を重視して制作したりという感じになるかと思います。

学会系や一部のビジネス系などは、PCで見られることが多いので、レスポンシブ対応すらしないこともあるぐらいです。

また、文字情報が多いWebサイトは、PCで見るときにも同時に他のアプリケーションを開きながら、調べ物をするために閲覧していることも多いため、そういうサイトであれば最大コンテンツ幅は1,000px前後で設定しても問題ないでしょう。

Attachmentではどうしているか？

Web Studio Attachment（Webスタジオアタッチメント）では、基本的にブレイクポイントを768pxに設定し、それから370px程度までの間で崩れることがないようリキッドレイアウト的に調整しております。標準では最大コンテンツ幅は1120pxで設計しています。

13〜14インチ程度のノートPCであれば、全画面にしても左右の余白がそれほど気にならないコンテンツ幅です。

もし1920pxなどのワイド画面表示も重視したい、という場合は、ブレイクポイントを1280pxあたりでもう一箇所設定して、ダイナミックにレイアウトを切り替えたりすることも可能です。

ヒアリングをした上でお客様にとって最適なご提案をさせていただきますので、まずはお気軽にお問い合わせください。

最後までご覧いただきありがとうございました！