WEBサイトのデザインをはじめる時、どの画面サイズで作ればいい？いろんなデバイスがあるけどどうやってサイズを決めたらいいの？と迷ったことはありませんか？
今回はWEBサイトの最適なコンテンツ幅について、レスポンシブやブレイクポイントについても紹介しながらお伝えしようと思います。
適切な画面幅でサイトをレスポンシブに対応させる
PCやスマートフォンなどのデバイスごとに見やすいコンテンツ幅やレイアウトは異なります。
画面の幅に合わせてレイアウトなどを調整するレスポンシブ対応をすることでユーザーはどのデバイスからでも快適にサイトを閲覧することができます。
画面のサイズが変わり特定の画面幅のときにレイアウトが変わる点をブレイクポイントと言います。
そもそもコンテンツ幅とは？
WEBデザインにおいて、画面幅にはアートボードの幅とコンテンツ幅の2種類があります。
アートボードの幅
XDやFigmaなどでWEBサイトのデザインをする際のアートボードの幅です。PCやタブレット、スマートフォンのサイズを想定して設定されています。
コンテンツ幅
サイト内の要素が広がる最大の幅です。画面幅が広がった時にこのコンテンツ幅がないとサイト内の要素がどんどん広がっていき見づらくなってしまうため、要素が広がっていける最大の値を設定します。
写真などをあえてコンテンツ幅からはみ出してレイアウトすることもあります。
デバイスごとの最適なコンテンツ幅・ブレークポイント
デザインの作成時には、アートボードの幅、コンテンツ幅、ブレークポイントをシェアのあるデバイスサイズを元に設定します。
主に使われるPC、タブレット、スマートフォンの3つのデバイスごとに、レスポンシブデザインの最適なサイズとブレークポイントを解説していきます。
PCに最適なコンテンツ幅とブレイクポイント
PCの主なデバイスサイズは、1920×1080（シェア：25.9％）、1536×864（シェア：11.56％）です。
ブレークポイントとしては、900〜1300pxあたりの設定がおすすめです。
また、シェアが多い画面幅が1920〜1536だとしても画面いっぱいにブラウザを広げてみることはあまりないことや、コンテンツ幅がそこまで広がった時、写真や文字などサイトの要素が間延びしてしまうことを考えると、コンテンツ幅としては1100pxくらいを最大幅として設定するのがおすすめです。
タブレットに最適なコンテンツ幅とブレイクポイント
タブレットの主なデバイスサイズは、768x1024（シェア：37.38％）、810x1080（シェア：10.61％）です。
ブレークポイントとしては、800px〜1000pxあたりでの設定がおすすめです。
PCの時は最大のコンテンツ幅を設定しましたが、それ以下では左右にpaddingで余白をとりデバイスのサイズやブラウザの幅に合わせてコンテンツ幅が変わるよう設定されることが多いです。
スマートフォンに最適なコンテンツ幅とブレイクポイント
スマートフォンの主なデバイスサイズは、390×844（シェア：18.83％）、375×667（シェア：12.71％）です。
ブレークポイントとしては、タブレットのブレークポイント以下になります。
コンテンツ幅に関しては、タブレットでの説明と同じで左右にpaddinで余白をとりそれぞれ使用するスマートフォンのサイズにより表示されるコンテンツ幅は変わるというイメージです。
以上のように、それぞれのデバイスのサイズに合わせてブレークポイントやコンテンツ幅が設定されます。
今回の記事ではPC、タブレット、スマートフォンでご紹介しましたが、実際にはタブレット画面は結構大きくPCの表示でも問題なかったりするのでタブレット用でレスポンシブの設定はしていないことも多いのではないかなと思います。
おわりに
デバイスごとの最適な画面の幅やブレークポイントがについてお伝えしました。
適切なコンテンツ幅やブレークポイントでサイトをレスポンシブ対応することで、よりユーザーが快適にサイトを閲覧できるるようになりユーザビリティが向上します。
レスポンシブを考慮したサイトのデザインをする際は、ぜひ参考にしてみてください。
投稿者プロフィール
