カテゴリー

キーワード

 
> 【CSS】適切なブレイクポイン...

【CSS】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)


2016 年 4 月 8 日 投稿    view: 65252
タグ:
このエントリーをはてなブックマークに追加

CSS ブレイクポイント

こんにちは、ウェブマーケティング部の杉尾です。

 

前々回、CSS3のメディアクエリについてお話しさせていただきました。

また、前回は『スマホ、タブレットの横幅』(端末解像度と実質解像度)を紹介しました。

 

今回はその続きとして、ブレイクポイント(CSSの切り替え地点)を考えてみます。

レスポンシブデザインでサイトを作る際に必ず必要となってくるので、参考にしてみてください。

 

レスポンシブデザインとメディアクエリ

現場において、メディアクエリは主にレスポンシブデザインのサイトを制作する際に使われます。

 

レスポンシブデザインは、一つのHTMLソースで、スマホからPCまで画面構成を崩すことなく表示できます。

 

閲覧端末ごとの制作が必要なくなり、また管理もしやすいので、ここ数年でかなり普及しました。


【詳しくはコチラ】
http://scene-live.com/page.php?page=95

 

ブレイクポイントとは

レスポンシブデザインにおいては、基本的に画面の横幅でCSSを切り替えます

 

その切り替え地点、つまり「何px以上(もしくは何px以下)なら、このCSSを適用する」という基準になるところをブレイクポイントと言います。

 

モバイル、タブレット、デスクトップそれぞれの横幅

まず、いつものようにStatCounterhttp://gs.statcounter.com/)へ行き、2016年1月~3月の3ヶ月に日本国内で、どんな横幅の端末が使用されたか調べます。

 

モバイル

 

モバイル 解像度シェア(2016年1~3月)

これは、2016年1~3月の日本国内におけるモバイル端末の解像度を調べたものです。

 

最も多いのは、横幅375pxです。iPhone6、iPhone6Sの実質解像度がこれですね。
次に多いのは、横幅320pxです。iPhone5Sまでが、この実質解像度です。

 

上記二つだけで、52.97%ですから、日本人の半数はiPhone(6S以前のもの)を使っているということになります。

 

そして、横幅360pxはアンドロイド端末に多い実質解像度です。

 

その次に多い、横幅720px、横幅1080pxに関しては、前回紹介した端末解像度と実質解像度の違いの部分ですね。

こちらは両方ともブラウザ表示は、横幅360pxのアンドロイド端末です。

 

その次の、414pxはiPhone6 Plusですね。
これを含めると、モバイル端末を使用している中で、6割近い人がiPhoneであると言えます。

 

 

代表的な各端末の端末解像度、実質解像度はコチラをご覧ください。

http://scene-live.com/page.php?page=96

 

 

タブレット

 

タブレット 解像度シェア(2016年1~3月)

 

こちらは、2016年1~3月の日本国内におけるタブレット端末の解像度を調べたものです。

 

圧倒的に多い768px×1024pxはiPad、iPad mini、Nexus9の解像度です。

 

次に多い、1280px×800pxは、Nexus10などの大型タブレットを横置きにして使っていると思います。

4番目に多い800px×1280pxはその縦置きですね。

 

3番目に多い600px×960pxは、Nexus 7です。小型タブレットですね。

 

 

デスクトップ

デスクトップ 解像度シェア(2016年1~3月期)

 

こちらは、2016年1~3月の日本国内におけるデスクトップ端末のディスプレイサイズのシェアを調べたものです。

 

1920px×1080px』、『1366px×768px』、『1280px×1024px』の順に多くなっています。

 

 

しかし、ここで気をつけなければいけないのは、これはあくまでディスプレイのサイズだということです。

 

おわかりになるでしょうが、ウェブブラウザのウィンドウを最大にして使っているユーザーは多くないはずです。

ですので、ユーザーがどのサイズでウェブを閲覧しているか正確な数字はわかりません。

 

適切なブレイクポイントとその書き方

前項の調査結果を踏まえて、適切なブレイクポイントを決めたいと思います。

 

とはいえ、それぞれに要件があると思いますので、一概にどれがいいというのは判断が難しいところです。

 

ですので、今回は最近特にアクセスが増えているスマホ(モバイル)を優先させます。

 

まずは結論から

モバイル専用の見せ方が必要になるので、タブレットで見たときとデザインを分ける必要があります。

 

結論から言うと、ブレイクポイントは、600px960px(と1281px)です。

つまり、

 

599pxまではモバイル専用

600px~959pxまではタブレット(とブラウザを狭くしたデスクトップ)

960px~1280pxまではデスクトップ(と横置きしたタブレット)

(・1281px以上はデスクトップ専用

 

ということです。

 

 

以下、説明です。

 

モバイルとタブレットの区切り

モバイルの中で最も横幅が広いものと、タブレットの中で最も横幅が狭いものを比較した場合、600pxがその区切りになります。

 

よく使われているモバイル端末では、iPhone6 Plusの414pxが横幅最大となっています。

また、Xperia Z Ultraのように横幅540pxのファブレット(モバイルとタブレットの中間)と呼ばれるようなものもあります。

 

一方、タブレット端末で最も小型なのは、Nexus 7の600pxです。

これらのことから、600px未満で、モバイル専用のレイアウトを組めば問題なく表示できそうです。

 

タブレットとデスクトップの区切り

そして、この場合、600px以上でタブレット端末用のレイアウトを組みます。

 

問題となるのが、タブレットを縦でみるときと、横で見るときがあることです。

 

タブレットを縦で見ている場合800px(Nexus10が800px×1280px)が最大の横幅と言えそうです。

また、横にして見た場合は、最小で960px(Nexus 7の600px×960px)、最大で1280px(Nexus10が800px×1280px)です。

 

ここから考えると、ブレイクポイントを801px ~ 960pxの間で考えることになります。

 

とはいえ、801pxにすると、それより広い場合とかなりの差が出ます。

 

たとえば、1200pxと800pxでは400pxの差がありますので、この二つを同じデザインにしようとすると、中の要素を小さくするなど調整が煩雑になります。

 

ですので、その差を狭くするために960pxでデザインを変更するのが、適切ではないかと考えます。

 

960px以上はデスクトップと見た目を一緒にするということですね。

 

更に、デスクトップ専用を設けてもよい

それに加えて、1281pxで横幅が広いデスクトップ専用のデザインを組んでもいいかもしれません。

そうしない場合は、1281pxより大きくなった場合、サイトの要素が真ん中にくるよう調整してください。

 

 

メディアクエリの書き方はこちらをご覧ください。

 

http://scene-live.com/page.php?page=95

 

 

まとめ

スクリーンサイズに合わせてCSSを切り替えるので、メディアクエリとレスポンシブデザインは非常に相性の良いものです。

 

要件によって、ブレイクポイントは変わってくると思いますが、是非、一つの参考例にしてください。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事