サイト改善 / 制作 2021.12.06

レスポンシブデザインの最適ブレイクポイント【最新版】

近年は、新しいデバイス(iPhone/Andoroid/タブレット端末など)が発売されるたびに、画面サイズも端末ごとに変わってきています。WEBサイトを作っている制作担当は、端末ごとに違う画面サイズでレイアウトを崩さずに表示させるため、レスポンシブデザインを考慮した上でサイトを作らなくてはいけません

さまざまなデバイスやSplit View等の分割サイズなども考慮したとき、どの画面でも見やすい最適なブレイクポイントは何pxなのか頭を抱える方も多いのではないでしょうか。

この記事では最新で最適なレスポンシブデザインのブレイクポイントを解説します。

レスポンシブデザインを適用させる方法も知りたいという方のために、CSSの記述も解説していますので、ぜひ最後までお読みください。

最適ブレイクポイントはこれだ!(2021年12月現在)

結論から言うと、2021年版の最適なブレイクポイントは520px・960pxです。

以前までは、iPad Air10.9のSplit View(585px)に合わせて560px・960pxが推奨されていましたが、iPad10.2のSplit View (535px)の画面表示を考えた結果、520pxが最適と言えるように変わってきました。

また、最適なブレイクポイントを決めた理由は端末ごとのサイズ幅です。

520px・960pxが最適な理由を、代表的な端末のサイズ幅を見ながら解説していきます。

そもそもレスポンシブデザインのブレイクポイントとは?

レスポンシブデザインとは、「ウェブサイトを閲覧する端末によって最適なデザインを表示させる手法」です。

具体例:ウェブサイトを作るときに以下のようなデザインを作るとします。

  • PC表示のデザインA:写真を4つ横並びにさせる
  • タブレット表示のデザインB:写真を2つ横並びにさせる
  • スマートフォン表示のデザインC:写真を縦並びにさせる

端末によってデザインがA・B・Cへ切り替わるよう、CSSにメディアクエリを記述することでレスポンシブデザインの表示が実装できます。

ちなみに、レスポンシブデザインをコーディングする前に、A・B・Cのデザインをサイトにどう表示するか決めておいた方が良いでしょう。    

サイトによってはデザインBを作成する必要がないというようなケースもあるかもしれません。

※メディアクエリとは、ユーザーがサイトを閲覧するデバイスによってデザインを変化させるために必須のタグのことです。(見出し8で詳しく解説しています)

ブレイクポイント

ブレイクポイントとは、レスポンシブデザインの表示を切り替えるポイントのことです。

このブレイクポイントは、年々新しい端末が発売されるたびに最適と言われる数値が変わり、おすすめされるサイズも様々です。

その理由の一つとして、運営するサイトによって利用するターゲット層が違うため、どの端末の表示を優先させるのかが違っているというのがあります。

本記事では各端末のサイズやSplit Viewの表示幅をまとめ、最適だと思われるブレイクポイントを決めています。

ここからは、画面幅のシェアを判断材料にして、各端末の代表的なサイズを解説していきます。

端末ごとのサイズまとめ

     代表的な各端末のサイズは以下となります。発売された年代やメーカー、デバイス(スマートフォン/PCタブレット)により、それぞれ全く違っているのがわかると思います。

(出典:https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327 )

それでは、スマートフォン・タブレット端末・PCそれぞれの画面サイズを確認していきます。

スマートフォンのサイズ

日本で使われているスマートフォンのサイズ幅は375px×640px、414px×896px、360px×640pxのシェアが高くなっています。(以下のグラフ参照)

日本で使用されているスマホ端末のサイズ幅のシェア
出典:statcounter (https://gs.statcounter.com/)

375×640と414×896はApple社のスマートフォンに採用されているサイズ幅で、360×640はAndroidのスマートフォンに多く採用されているサイズ幅です。

ここから、iPhoneとAndroid端末の画面サイズについてさらに詳しく見ていきます。

iPhoneの画面サイズ

iPhoneの画面サイズですが、2021年時点で発売されている端末の横幅は320px〜428pxとなっています。

◆(NEW)iPhone13

2021年9月に発売されたiPhone13シリーズのサイズ幅は、12シリーズと変化はありませんでした。

機種画面サイズインチ
iPhone 13ProMax428×9266.7 
iPhone 13/13Pro390×884 6.1
iPhone 13mini375×8125.4

iPhone13シリーズの最大横幅は428px、最小幅はiPhoneシリーズの中でも人気の375pxです。

◆iPhoneの代表的なサイズ

iPhoneの各端末のサイズ幅をまとめた表がこちらです。

機種画面サイズ
5/5s/SE(第1世代) 320×568
6/6s/7/8/ X/XS/11 Pro375×667
Plus 6/6s/7/8414×736
XR/11/XS Max/11 Pro Max414×896
12/12 Pro/13/13Pro390×844
12 Pro Max/13 Pro Max428×926

上記の表と前述した日本のスマホ画面サイズのシェア率のグラフから、iPhoneシリーズの代表的なサイズは375px×667px、続いて414px×896pxと言えます。

Android端末

続いて、Android端末のサイズ幅についてみていきます。

Android端末のサイズ幅は320px〜540pxと、iPhoneよりも最小と最大に差があります。

◆Android端末の代表的なサイズ

代表的なAndroid端末の画面サイズをまとめたものがこちらです。

機種画面サイズ
MUSASHI(2016年発売)320×534
Rakuten Mini360×640 
AQUOS R3360×780 
Galaxy S20360×800
Pixel 5/4a393×851 
OnePlus 8T412×914 
Galaxy S20 Ultra412×915 
Xperia 12418×976 
(参照:Webのあれこれ
https://hashimotosan.hatenablog.jp/entry/2020/12/06/182327)

前述したグラフより、Android端末のサイズ幅の使用率は360px×640pxがほとんどを占めています 。

(日本で使用されているスマホ端末のサイズ幅のシェア率 出典:statcounter )

また、集計結果が表示されているその他のAndroid端末は14位の412px×869px(3.13%以下)のサイズ幅しか見られませんでした。

この結果から、Android端末のサイズ幅の代表的なサイズは、Android端末の半数以上の使用率を占める360px×640pxと言えます。

また、360px以外のサイズ幅も調査したところ、Android端末の最小幅は320pxと考えて良いでしょう。

参照:はてなブログ/こやまカニ大好き

(https://nein37.hatenablog.com/entry/2017/01/03/200142)

元々のサイズ幅が320pxの端末は減ってきているものの、Androidにディスプレイサイズ変更機能が追加されたため、最小幅は320pxで対応する必要があります。

一方、最大幅はZenFone 3 Ultra(ZU680KL) 6.8インチという端末の540px×960pxがあります。

540pxのAndroid端末は使用率が低いため、iPadのSplit Viewを優先して520pxとしました。

 タブレットのサイズ

次は、タブレット端末のサイズについてです。

タブレット端末全体の大まかなサイズ幅は600px〜1,024pxでした。

日本で使用されているタブレット端末のサイズ幅のシェア
出典:statcounter (https://gs.statcounter.com/)

圧倒的なシェアの768px×1,024pxはiPadシリーズに多く採用されているサイズ幅です。

iPadシリーズで最大横幅のiPad Pro12.9が1,024pxとなっています。一方、Androidのタブレット端末には600px×960pxというサイズも見られました。

では、端末の種類ごとの画面サイズを見ていきます。

iPad 

初めに、iPadシリーズのサイズ幅を見てみます。

機種画面サイズ
iPadmini/mini(2~5)/ iPad(1~6)/Air(1/2)/Pro9.7768×1024
iPad mini(6)744×1,133
iPad(7/8/9)810×1,080
iPad Air10.9820×1,180
iPad Air(3)/Pro10.5834×1,112
iPad Air(4)834×1,180
iPad Pro11(1/2/3)834×1,194
iPad Pro12.9(1~5)1,024×1,366

iPadシリーズの最小サイズ幅はiPad mini(6)の744px、最大サイズ幅はiPad Pro12.9(1~5)の1,024pxでした。

◆iPadのSplit Viewの画面幅

iPadは、画面を分轄して2つのアプリを同時に表示・操作できる機能「Split View」があります。(iPad Pro , iPad Air2以降 , iPad(第5 世代) , iPad mini 4以降で利用できる)

画面幅だけでなく、Split Viewの画面の中の幅も考慮してブレイクポイントを考えました。

iPadのSplit Viewの等分分割を考えると以下のサイズ幅も出てきます。

機種画面サイズ
iPad Air10.9585×820
iPad 10.2535×810
iPad mini507×768

iPad 10.2のSplit View 535pxの表示ではタブレット表示に切り替えたいので、以前まで560pxが推奨されていましたが、520pxとしています。

この理由としては、実際の見え方に違いがあるからです。

iPad miniはピクセルの密度が高いため、実際に画面を見てみると解像度の差以上に表示が小さめに見えます。iPad 10.2とiPad Air 10.9のSplit ViewとiPad miniのポートレートの画面表示を実際に採寸してみると、1センチ前後しか差がなく、ほぼ表示が一緒でした。

iPad miniではタブレット表示に切り替えなくても良いということを考慮し、タブレット表示のブレイクポイントを520pxとしています。

iPad 10.2とiPad Air 10.9のSplit View ではタブレット表示、iPad miniではスマホ表示になります。

Android端末

Androidのタブレット端末とは、「Android OS」というGoogleが提供するオペレーティングシステムを搭載した端末のことを言います。

タブレット端末のサイズ幅使用率を集計できる範囲まで挙げると以下の結果になりました。

800px×1,280px Androidタブレット 7.69%
600px×960(601×962)px  Androidタブレット (3.23%以下その他集計)
640px×1,024px Androidタブレット (3.23%以下その他集計)

大まかなサイズ幅は600px〜800pxとなっています。

 ◆Android端末の代表的サイズ

では、Android端末の代表的なサイズを紹介します。

【Android端末サイズ幅の使用率】

800px×1,280px Androidタブレット 7.69%
600px×960(601×962)px  Androidタブレット (3.23%以下その他集計)
640px×1,024px Androidタブレット (3.23%以下その他集計)

上記のことから、800px×1,280pxの使用率が半数以上を占めるので、800pxが代表的なサイズ幅と言えるでしょう。

PCのサイズ

続いて、PCの画面サイズをみていきます。

PCのサイズ幅は1,280px〜5,120pxの端末がありました。

ここではPCの端末をMacとWindowsに分けて、それぞれ代表的なサイズ幅を紹介します。

Mac

Macシリーズのサイズ幅をまとめました。

【Macの端末のサイズ幅】

・MacBook

機種画面サイズ
MacBook Pro Retina 15.4インチ2,880×1,800
MacBook Pro Retina/MacBook Air 2018 13.3インチ2,560×1,600
MacBook Air 13.3インチ1,440×900
MacBook Air 11.6インチ1,366×768
MacBook 12インチ2,304×1,440

・iMac

機種画面サイズ
iMac 21.5インチ1,920×1,080
iMac 21.5インチ Retina 4K1,920×1,080
iMac 27インチ2,560×1,440
iMac Pro /iMac Retina 5K 27インチ5,120×2,880

Macシリーズの最小幅はMacBook Air 11.6インチの1,366pxで最大幅がiMacの5,120pxでした。

Macシリーズの各端末からの見え方はサイズ幅が1,366px〜5,120pxと差が大きく、思ったレイアウトにならないこともあります。

またPCの表示はブラウザの種類やバージョンによって、レイアウトが崩れることもあります。

サイズ幅の異なる端末やGoogleChoromやFireFox、Internet Explorerなどメジャーなブラウザでは最低限レイアウトのチェックをしましょう。

Windows

WindowsPCの大まかなサイズ幅は1,280px〜1,920pxとなっています。

Windowsの各PCの画面サイズについてですが、Windows端末は種類があまりにも多いため、PC全体の画面サイズシェアから大まかなサイズを特定しました。

日本におけるPC画面サイズのシェア
(参照:statcounter (https://gs.statcounter.com/)

上記のグラフから、WindowsのPCの端末が該当する1,920px×1,080pxのサイズが最もシェアが高くなっています。

続いてシェアが高い1,536px×864pxのサイズはMacに該当する端末がないので、全体のWindowsのPCのシェアと言えるでしょう。

各端末サイズを踏まえたうえでの最適なブレイクポイントは?

各端末の代表的なサイズを紹介してきました。

これらを踏まえて、最適なブレイクポイントは520px・960pxとしています。

端末の種類やSplit Viewなどの「使い方」も多様化してきたので、ブレイクポイントの設定はより複雑になってきています。

今回、最適とした520pxですが、もしiPad miniのSplit Viewを気にしないという方は、2019年頃に推奨されていた560px・960pxで問題ないと思います。

まとめ
・iPad 10.2とiPad Air 10.9のSplit View ではタブレット表示
・iPad miniではスマホ表示
※507〜535pxの間なら520pxでなくてもいいのですが、他も8の倍数に設定されているので520pxとしました。

メディアクエリを記述しよう

レスポンシブデザインを適用させるために、CSS(Cascading Style Sheets)にメディアクエリというタグを記述します。

CSSとは、簡単に言うとサイトをデザインするマークアップ言語です。

メディアクエリとは

メディアクエリとは、ユーザーがサイトを閲覧するデバイスによってデザインを変化させるために必須のタグです。

例えばこんなとき。

「タブレットではタッチしやすいようなデザインがいい」

「スマホでは縦長のデザインがいい」

メディアクエリタグで設定した画面幅によって指定のCSSを読み込ませることにより、レスポンシブデザインを実装できます。

このデザインが切り替わるポイントが、今回のテーマの「ブレイクポイント」というわけです。

では、実際に記述方法を説明します。

メディアクエリの記述法

スタイルシートへの記述ですが、ご経験の無い方もいらっしゃるかもしれません。そういう場合は、まず書いてみて適用されるか試してみましょう。

ここではパソコン表示に適したデザイン→タブレット→スマホと切り替えていきます。

ブレイクポイントは、この記事で決めた520px・960pxです。

記述法がわかれば、サイトによって適したブレイクポイントを設定してください。

HTML

まずはデザインを適用させる要素となるHTMLを書きます。

簡単に言語の解説をすると、HTMLは文字などを配置するためのマークアップ言語で、その文字などの色や大きさを装飾できるのがCSSと覚えておきましょう。

では、テキストエディタにindex.htmlというファイルを作って、コードを記述していきましょう。

【HTMLに記述するコード】

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>レスポンシブデザインのブレイクポイント</title>
</head>

<body>
<p class="tablet sp">画面幅によってデザイン(文字色)が変わります。
</p>
<!-- 要素にclass指定をしてcssを適用させます -->


</body>
</html>

【ここまで】

<HTMLコードの解説>

上記のコードで画面に表示されるのは<body>タグで囲まれた部分です。

<body>以外の上下のタグはHTMLを書きますと宣言するお決まりのようなコードなので、画面には表示されません。

・<link rel=”stylesheet” href=”style.css”>このタグで別ファイルのCSSを読み込みます。

・<p class=”tablet sp”>画面幅によってデザイン(文字色)が変わります。</p>

文章を<p>タグで囲んで、class=”tablet sp” というクラス指定をしました。

簡単にいうと、tabletとspという2つの名前をつける感じです。(名前はわかりやすい名前ならOKです)

・このコードをブラウザに表示すると下図になります。

これでHTMLの準備ができました。

CSS

続いて、HTMLを装飾するためにstyle.cssという別ファイルを作って、CSSを記述していきましょう。

【CSSに記述するコード】

/*960px以下で文字色が赤色になる*/
@media screen and (max-width: 960px) {

/* 960px以下で適用させたいcssを記述していく */
.tablet {
  color: red;}
}

/*520px以下で文字色青色になる*/
@media screen and (max-width: 520px) {
  /* 520px以下で表示させたいcssを記述していく */
  .sp {
    color: blue;
  }
}


【ここまで】

<CSSコードの解説>

まずはHTML の<p>につけた名前を指定して文字色を赤にしますというコードを書きます。

「.tablet {  color: red;}」

(先頭のドットはclass指定をした名前につけるもの)

spには文字色を青色しますという記述です。ここで文字色を960px以下で赤色、520px以下で青色にさせたいのでメディアクエリを書きます。

メディアクエリのタグはこちら

/* メディアクエリタグ 大きい幅から小さい幅へ適用 */
@media screen and (max-width: 960px) {
}

メディアクエリの{}で囲んだ範囲のスタイルが適用されます。※スタイルタグの{}とは別なので要注意。

960pxの部分がブレイクポイントの数値になります。ここでは960px以下ではタブレット表示(文字が赤色)、520px以下でスマホ表示(文字が青色)という記述です。

PCならブラウザに表示してウインドウ幅を伸び縮みさせると、デザインが適用されます。

では、画面を見てみましょう。

・960px以下の画面表示

・520px以下の画面表示

以上がCSSのメディアクエリの記述例でした。

ちなみに、上記はサイズ幅を縮めていくPC→タブレット→スマホの流れですが、スマホファーストで記述していく際には、「〇〇px以上で適用」というようにしたいですよね。

実は、メディアクエリには〇〇px以下があるように〇〇px以上で適用させるタグもあります。

/* メディアクエリタグ  小さい幅から大きい幅へ適用*/
@media screen and (min-width: 520px) {
}

このメディアクエリを使えば「520px以上でスタイルを適用」させられます。

最近はスマホデザインからサイトを作っていくことも多いので、ぜひ試してみてください。

まとめ

本記事ではレスポンシブデザインの最適なブレイクポイントを解説してきました。

レスポンシブデザインの最適なブレイクポイントは、「520px・960px」とします。

前年まで推奨されていた560px・960pxと少し変更した理由は、「iPad 10.2のSplit View 535pxの表示ではタブレット表示に切り替えるため」です。もしSplit Viewを気にしないという方は560pxでも問題ないでしょう。

レスポンシブデザインの最適なブレイクポイントは、新たなデバイスが増えるたびに悩みの種になると思いますが、この記事が少しでもデザインの手助けになれば幸いです。

ヒトノテロゴ

執筆者:阿部直記

株式会社ヒトノテの代表取締役COO。KLab株式会社、クラウドワークスを経て、株式会社ヒトノテへ。新規サービス/タイトルの立上げや企画、運営中案件の分析を行いながら改善しグロースさせるなど、事業作りを中心とした提案が得意です。

ヒトノテ坪昌史

監修者:坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。

ご質問やご相談など
お気軽にお問い合わせください

お問い合わせ お電話でのご相談は平日10:00-18:00 03-6265-6636