MENU
カテゴリー
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

Devices

どうも、ダイチです。

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

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

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

あわせて読みたい
【px、em、rem、%】CSS単位の使い分けについて考察
【px、em、rem、%】CSS単位の使い分けについて考察どうも、ダイチです。今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。先にお伝えしておくとコーディング時の単位に関しては「これ...
目次

結論

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

PC基準でコーディングする場合

• スマートフォン:599px [max-width : 599px]
• タブレット:1024px [max-width : 1024px]
• PC:設定なし(実質1025px以上)

SP基準でコーディングする場合

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

iPadAir4・iPhone12シリーズのサイズについて

2020年9月にiPadAir4、10月にiPhone12シリーズの発売発表にともない、当記事のアクセス数も急増しているようなので、一旦今ある情報を公開しておこうと思います。

iPhone 12mini

5.4インチ、375×667

iPhone 12,12Pro

6.1インチ、390×884

iPhone 12ProMax

6.7インチ、428×926

iPadAir 4

10.9インチ、820×1180

iPhone 12ProMaxが歴代iPhoneの中でも最大サイズになるようです。そしてiPhone 12 miniが375ということだったので、SP最低幅はSEの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」など、表示させている画面のフルスクリーンをスクリーンショット撮影できる拡張機能があるので活用すると捗ります。

あわせて読みたい
【2021年】Web制作に使えるchrome拡張機能おすすめ21選
【2021年】Web制作に使えるchrome拡張機能おすすめ21選どうも、ダイチです。今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。開発環境がしやくなる拡張機能がたくさんあるChromeですが、たく...

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

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

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

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

ただここについては、ターゲットにしている層によって見られやすい端末サイズ(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推奨)

コリス
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要で

参考サイト②(px推奨)

まとめ

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

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

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

Webサイトのレイアウト手法にもについて以前当ブログでまとめた記事も最後にご紹介しておきます。

あわせて読みたい
Webサイトのレイアウト手法と参考サイトまとめ【Webデザイン】
Webサイトのレイアウト手法と参考サイトまとめ【Webデザイン】どうも、ダイチです。 今回はWEB制作におけるレイアウト構成の手法と、実際にそのレイアウト手法が取り入れられているWebサイトをまとめました。WEBサイトのレイアウト...

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


また、この記事に辿り着いた方はコーディング学習中の方も多いかと思います。

デザインやコーディングの基礎知識を学びたい方向けに、書籍とUdemy、それぞれのオススメ教材をまとめてますので良かったら参考にしてみください!

あわせて読みたい
【書籍紹介】Web制作を学べるオススメ書籍紹介!
【書籍紹介】Web制作を学べるオススメ書籍紹介!どうもダイチです!今回はWeb制作関連のオススメ書籍を紹介します!オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。とは...

※Udemyはセール期間になればサイト内でお知らせします!

あわせて読みたい
【Udemy】Web制作学習のオススメ講座紹介!
【Udemy】Web制作学習のオススメ講座紹介!当記事では動画学習教材「Udemy」について、Web制作に関連するものを紹介します!Webデザインやプログラミングの優良な学習教材も数多くありますが、どれを選んだらいい...

それでは今回はこのへんで!

Devices

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

コメント

コメントする

CAPTCHA


目次
閉じる