8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【2021年】レスポンシブデザインのブレイクポイントまとめ!

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

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

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

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

【px・em・rem・%】CSS単位の使い分けについて考察

結論

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

PC基準でコーディングする場合
  • PC:設定なし(実質1025px以上)
  • タブレット:1024px [max-width : 1024px]
  • スマートフォン:599px [max-width : 599px]
SP基準でコーディングする場合
  • スマートフォン:設定なし(実質599px以下)
  • タブレット:600px [min-width : 600px]
  • PC:1,025px [min-width : 1025px]

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

2021年9月、iPhone13シリーズの発売発表がされました。前作12シリーズと変化はありませんでしたが(画面幅という意味で)、情報をまとめておこうと思います。

iPhone 13mini

5.4インチ、375×812

iPhone 13,13Pro

6.1インチ、390×884

iPhone 13ProMax

6.7インチ、428×926

iPhone 13ProMaxが12ProMaxと同様最大サイズです。iPhone 13 miniは根強い人気がある375のサイズだったため、SPコーディング時に気をつけるべき最低幅はiPhone SE(第1世代)の320で変わりありません。

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

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

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

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

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

  • スマートフォンのデザインはA
  • タブレットのデザインはB
  • PCのデザインはC

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

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

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

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

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

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

Web制作に使えるchrome拡張機能おすすめ 【2021年】Web制作に使えるchrome拡張機能おすすめ19選

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

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

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

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

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

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

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

  • スマートフォン:320px〜540px
  • タブレット:600px〜1024px
  • PC:1,280px〜

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

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

最小幅は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以下にしておいたほうがいい、という考え方ができます。

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

  • スマートフォン:設定なし(実質599px以下)
  • タブレット:600px
  • PC:1,025px

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

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で指定し固定(ソリッドレイアウト)させることも多くあります。

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

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


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介! Web制作のおすすめ本24選!(コーディング・Webデザイン)

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!