【Studio】ブレイクポイントの設定方法｜画像を用いて解説

現代で⁨⁩はスマホ・タブレット・パソコンなど色々な端末が登場しているため、サイトも各端末で綺麗に見えるように調整しなければなりません。

そこで必ず設定しなければならないのが「ブレイクポイント」です。

今回は、Studioでレスポンシブ対応する上で、必須で設定しなければならないブレイクポイントについて詳しく解説していきます。

Studioのブレイクポイントとは

Studioのブレイクポイントとは、画面サイズに応じてデザインやレイアウトを切り替えるための基準点を指します。

初期状態だと「デフォルト・タブレット・モバイル」の3つが用意されています。

デフォルトでパソコン版のデザイン、タブレットでタブレット版のデザイン、モバイルでスマホ版のデザインに編集します。これによって、各端末で見やすいデザインが実現できます。

レスポンシブ対応を完璧に行うためには、ブレイクポイントを使いこなす必要があります。

Studioのブレイクポイントの設定方法

Studioのブレイクポイントは、下記4つの設定方法があります。

それぞれ画像を用いて、詳しく解説します。

ブレイクポイントの切り替え方法

ブレイクポイントを切り替える手順は、下記の2ステップです。

ブレイクポイントの追加方法

デフォルトでは「デフォルト・タブレット・モバイル」の3つのブレイクポイントが準備されています。

ブレイクポイントは最大5個まで増やせるので、ぜひ追加してみましょう。

ブレイクポイントの追加手順は、下記の4ステップです。

ブレイクポイントの数値の変更方法

ブレイクポイントの数値を変更する手順は、下記の4ステップです。

ブレイクポイントの削除方法

不要なブレイクポイントがある場合は、ブレイクポイントを削除することも可能です。

ブレイクポイントの削除手順は、下記の3ステップです。

ブレイクポイントのシェア率について

Web業界で働いている方だと、ブレイクポイントのシェア率を知っている方が多いと思います。

ですが違う畑出身の方からすると、「ブレイクポイントって何？美味しいの？」というレベルです。

そこで2025年の日本のブレイクポイントのシェア率についてまとめてみました。

ブレイクポイント	主な端末	シェア率
1920×1080	24インチ前後のフルHDモニター、ノートPC（15〜17インチ）	12.9%
390×844	Androidスマートフォン（6〜6.5インチ）	8.13%
393×852	iPhone 13 / 14 / 15 シリーズ（標準モデル）	6.07%
1536×864	1920×1080（フルHD）の125%スケーリング	4.18%
2560×1440	27インチモニター	3.24%
375×667	iPhone SE（第2/第3世代）	3.04%

ただし、制作するサイトのジャンルによって閲覧端末が異なります。

例えば、飲食店サイトであればほとんどの閲覧者はスマホユーザーであり、BtoB商材を売っているサイトはパソコンユーザーが過半数を占めます。

なのでスマホユーザーが多いサイトであれば、「モバイル・ミニ」あたりのブレイクポイントは設定した上で、ブレイクポイントの数値も緻密に調整しなければなりません。パソコンユーザーが多いサイトも然りです。

そこでスマホ別、タブレット別、パソコン別のブレイクポイントのシェア率についてもまとめておきます。

スマホのブレイクポイントのシェア率

スマホのブレイクポイントのシェア率は、下記のとおりです。

ブレイクポイント	主な端末	シェア率
390×844	Androidスマートフォン（6〜6.5インチ）	17.03%
393×852	iPhone 13 / 14 / 15 シリーズ（標準モデル）	12.73%
375×667	iPhone SE（第2/第3世代）	6.37%
375×812	iPhone X / XS / 11 Pro / 12 mini / 13 mini	5.83%
430×932	iPhone 13 Pro Max / 14 Pro Max / 15 Pro Max（6.7インチ）	5.35%
412×915	Androidスマホ（GalaxyやXperiaなどの大画面）	5.29%

細かくレスポンシブ対応したい場合は、「ミニ」のブレイクポイントを追加して、細かく調整するのがおすすめです。

タブレットのブレイクポイントのシェア率

タブレットのブレイクポイントのシェア率は、下記のとおりです。

ブレイクポイント	主な端末	シェア率
768×1024	iPad 2, 3, 4, Air（初代）, iPad mini（非Retina）	19.4%
820×1180	iPad Air（第4世代以降, 10.9インチ）、iPad Pro 11インチ（最新モデル含む）	13.75%
810×1080	iPad（第10世代, 10.9インチ）	12.39%
834×1194	iPad Pro 11インチ（第1〜第3世代, 10.5インチモデル含む）	8.11%
744×1133	iPad mini（第6世代, 8.3インチ）	6.84%
1024×1366	iPad Pro 12.9インチ（全世代）	5.86%

上記だけを見ると、タブレットのシェア率も高そうに見えますが、スマホやパソコンと比べれば全体のシェア率は低いです。

レスポンシブ対応だと最も重要度が低いのが、「タブレット」だといえます。基本的には「標準・モバイル」あたりを念入りに調整するようにしましょう。

パソコンのブレイクポイントのシェア率

パソコンのブレイクポイントのシェア率は、下記のとおりです。

ブレイクポイント	主な端末	シェア率
1920×1080	24インチ前後のフルHDモニター や、ノートPC（15〜17インチ）	25.71%
1536×864	ノートPC（14〜15インチ）	8.38%
2560×1440	27インチモニター や一部のハイエンドノートPC	6.49%
1366×768	安価なノートPC（11〜14インチ）	5.34%
1280×720	安価なWindowsノートや古い端末	3.61%
1440×900	古いMacBook Pro / MacBook Air（2012〜2015あたり）	2.33%

現代では、モニターを使用してサイトを閲覧しているユーザーが多くいます。

そのため、パソコンユーザーが多い方は「検証」を行いながら2560pxまで、サイトが潰れていないか確認するのがおすすめです。

Studioのブレイクポイントに関するよくある質問

最後に、Studioのブレイクポイントに関するよくある質問について答えていきます。

Studioでのサイト制作は「Terace」にお任せ！