【2024年版】レスポンシブデザインのブレイクポイントまとめ！

今回はレスポンシブデザインのブレイクポイントについてまとめました。

ポイントを決める際の考え方も含めて、順を追って解説していきます。

また、単位の使い分けについてはこちらの記事でまとめていますので、よかったらご覧ください。

結論

途中にも記載しますが、とにかくブレイクポイントだけ知りたい方向けに先に載せておきます。

iPhone15シリーズのサイズについて

2023年9月、iPhone15シリーズの発売発表がされました。気になる方もいらっしゃると思いますので、情報をまとめておこうと思います。

iPhone 15

6.1インチ、393 x 852

iPhone 15 Pro

6.1インチ、393 x 852

iPhone 15 Pro Max

6.7インチ、430 x 932

iPhone 15 Plus

6.7インチ、430 x 932

iPhone 15シリーズは4機種ですが、どれも微妙にサイズが違います。また、15Proと14Proは6.1インチ、15Pro Maxと14Pro Max は6.7インチと同じインチですが、こちらも微妙に異なります。

当記事はあくまでブレイクポイントを決める内容のため、CSSピクセルに焦点を置いており、Retina対応を考慮したデバイスピクセルは考慮しません。

レスポンシブデザインとは

レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

wikipedia.org/wiki/レスポンシブウェブデザイン

「端末サイズに応じて最適表示させるデザイン手法」ということですね。

WebデザインはPCやタブレット・スマートフォンなど、Webサイトを表示する端末のサイズが異なることを考慮して設計する必要がありますが、そこまで複雑に考える必要もありません。

上記のようにデザインA・B・Cがあったとして、それぞれコーディングしたものをメディアクエリで切り替え制御できればレスポンシブデザインは完成します。（他にも手法はありますが、一番わかりやすい考え方で説明していきます。）

デザインを元にコーディングをする時などは、このデザインA・B・Cがどうなっているのかを把握することから始めましょう。自分で一からデザインする場合も、先にA・B・Cのデザインを決めることが大事です。

※Webサイトによっては「タブレットサイズ（B）のデザインは別途用意しない」といったようなパターンもあります。

デザインカンプからコーディングする場合は基本的にそれぞれ分けて用意されていますが、サイト模写をする場合は自分で調べる必要があります。

Chromeブラウザなら「FireShot」や「Awesome Screenshot」など、表示させている画面のフルスクリーンをスクリーンショット撮影できる拡張機能があるので活用すると捗ります。

ブレイクポイントについて

大まかな端末毎のサイズを把握する

デザインが切り替わる画面幅のポイントをブレイクポイントといいます。

ブレイクポイントをどこにするかは様々意見がありますし、ネットでオススメされている数値もバラバラだったりします。

ただここについては、ターゲットにしている層によって見られやすい端末サイズ（PC・タブレット・スマホ）も変わるわけですし、バラバラになるのは仕方のないことです。

そのうえで、各端末の画面サイズを大まかにでも知っておくと自分がデザインする時に助かるので、一度様々なデバイスのサイズが掲載されている下記のサイトを見てみましょう。

上記サイトをざっと見てみると、各端末のサイズ範囲はこんな感じになるかと思います。

スマートフォンのブレイクポイントについて

モバイルファーストでコーディングする場合はブレイクポイントを設定する必要ありません。

最小幅は320px（iPadminiのsplit viewもこの値）です。

コーディング時は320pxで表示崩れ（横スクロールなど）が無いか確認しながら行うのが確実です。

デザインカンプや要件次第では利用率の高い375pxと、それ以下でスタイルを分けざるをえないパターンが発生する可能性もありますので、その場合は599px〜320pxの範囲内で適宜ブレイクポイントを決めることもあり得ます。

タブレットのブレイクポイントについて

タブレットの最小サイズは600pxのようなので、ここをタブレットのブレイクポイントとします。

PCのブレイクポイントについて

そもそもスマートフォンとタブレットは画面幅＝ブラウザ幅という認識でいいと思いますが、PCはブラウザウィンドウが可変します。

上でPCは1,280px〜と書きましたがそれ以下にもできるということです。

サイトのテーマ次第で、PCデザインをタブレットで表示させる場合と、タブレットデザインをPCで表示させる場合で、操作性や視認性が変わる可能性があります。

考え方として先ほども触れましたが、Webサイトを「スマートデバイスのデザインメインとしたい」のか、「PCデザインをメインとしたいか」が判断基準の一つになると思っています。

もしくは、デザイン的に大きな違いが無い場合や、閲覧端末で優先度をつけないようなWebサイトであれば、画面幅のシェア率から決めるでもいいかもしれません。

改めて下記サイトを見てみましょう。

現時点で「iPad Pro 12.9」が1,024pxでタブレット縦の最大ですが、これで見ると1,024px（サイト全体）のタブレットにおけるシェア率は0.12％、PCシェア率は1.23％です。

そもそも端末利用者数が違うので簡単に比べられませんが、閲覧される数だけで見れば1,024pxはPCの範囲と解釈しても問題無いとは思います。

ただ、もう一つ考慮するポイントとしてタブレット横表示のことです。

「iPad Pro 12.9」は横にすると1,366pxとなりますが、流石にこの画面幅はPCからのアクセスの方がメインとなってはいるはずなので、この幅はPCデザインとし判断した方が良さそうです。

次にタブレットの中で最もシェア率の高いサイズが768×1,024ですが、横にすると1,024pxです。

タブレット最大サイズの縦幅と、最もシェア率の高いタブレットの横幅が同じ1,024pxであることを考慮すると、ここをタブレット最大幅としても良いかもしれません。

ちなみにPC端末幅として「1,280px」という数字をあげましたが、これをPCのブレイクポイントとするのは微妙かなと思っています。

なぜなら、PC閲覧時にブラウザウインドウは最大化せずに見ることも多いと思います。

また、画面左右にタスクバーなどを表示させているとそもそも1,280px以下の表示にしかならない、なんてこともあるかと思います。

このことからPCのブレイクポイントは1,280px以下にしておいたほうがいい、という考え方ができます。

コーディングする際のブレイクポイントを整理

ということでこんな感じでしょうか。

PCのブレイクポイントはタブレット1,024pxにプラス1px加えた値です。

ただ、上記のようにブラウザ幅を狭めて見ることをそこまで意識しなければ、数字的にわかりやすい1,100pxや1,200pxあたりで区切ってもいいかと思います。

メディアクエリについて

ここまできたらブレイクポイントを元にメディアクエリを記述します。

ブレイクポイントは「境界線」ですが、メディアクエリは「範囲」です。ここを混同すると地味にややこしくなるので注意しましょう。

コーディング時は決められた範囲内のデザインをコーディングする、という意識が必要です。

ここで念のためメディアクエリ についても簡単に解説します。

CSS

@media only screen and (min-width:600px) {
〜〜〜
}

min-width　→　○px以上だと〜〜という設定にする
max-width　→　○px以下だと〜〜という設定にする

スマホサイズ基準で大きいデバイスに対してメディアクエリを設定していくならmin-width、PC基準で小さくしていくならmax-widthを使っていきます。

また、mediaとscreenの間にonlyをつけることで、メディアクエリに対応していないブラウザにはメディアクエリを読み込ませないようにできます。

HTML

あとはHTMLのほうにも読み込み用の記述が必要になります。一般的には下記のmetaタグをheadタグ内に記述します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これも一つずつ解説します。

name = ”viewport”

画面上の表示領域のことで、これを書くことで仮想的なウインドウサイズを設定します。

width = device-width

device-width だと、viewportのレンダリング結果（要するに画面幅）に合わせるという事になります。
ちなみにここはwidth = 480px のように数値で指定することもできます。この場合横幅480pxのviewport（仮想ウィンドウ）が設定され、仮に400pxの画面幅で見ると80px分はみ出ることになります。（デザイン的に意図してないなら横スクロールが発生、表示崩れということになります）

initial-scale = 1.0

ページが表示されたときの倍率の設定です。ここが0.5だと50％の表示になります。

メディアクエリのまとめ

今はモバイルファーストで設計していく事が主流なので、これまでの情報をもとにスマートフォンを基準にメディアクエリを設定していきます。

/* デザインA（スマートフォン） */
/* メディアクエリ の記述なし。 */

/* デザインB（タブレット） */
@media screen and (min-width: 600px) {
/* タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述 */
}

/* デザインC(PC) */
@media screen and (min-width: 1025px) {
/* PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述 */
}

ちなみにメディアクエリ の単位はpxではなくemのほうがいいという意見もあります。

ただ、ブラウザ間で挙動の違いもあるようなので、今回は直感的にわかりやすいようpx指定で記述しています。

参考にした記事があるので興味のある方はご覧ください。

参考サイト①（em推奨）

参考サイト②（px推奨）

まとめ

Webデザインのレイアウト手法は様々ありますが、レスポンシブデザインとは様々なレイアウトパターンをメディアクエリで区切りながら組み合わせて作っていくイメージになります。

大きめのPCサイズの時にブラウザ幅を広げてもサイト内のパーツが横に間延びしないように、要幅をpxやremで指定し固定（ソリッドレイアウト）させることも多くあります。

また、それ以下のサイズでは基本の要素幅を％で指定することで、画面サイズに合わせてレイアウトを維持したまま表示させる「リキッドレイアウト」に変える、というデザインも多いです。

いずれにしても、前提知識としてブレイクポイントの決め方、単位の違いとおおまかな使い所を把握しておけば、レイアウトする際の理解が進むと思います。