はるなぴログ

WEBサイト作成技術研究

【2018年版】メディアクエリのブレークポイントを考える

はてなブログで自作テーマを制作するにあたりメディアクエリを考えてみます。

2018年現在のベストなブレークポイントを考えてみようというわけです。

今使っているテーマはInnocentですが、このテーマは細かくメディアクエリのブレークポイント設定をしています。つまりどんな端末でもキレイに見えるように工夫されているということ。

でもあまり細かすぎてもメンテナンスが大変です。ちょうど具合のいいところを探す必要がありますね。

1カラムか2カラムか

f:id:hal7pi:20180908082112j:plain

自作テーマは基本2カラムにしようと考えています。3カラムだとゴチャゴチャしてきてしまうし、1カラムだとサイト内回遊効果が狙えないと考えるからです。

スマホは当然1カラムで見せます。なので、まず第一に考えるべきことはどのサイズで2カラムに切り替えするかということです。

いろいろなテーマを見ていくとiPad(縦持ち)でも2カラムで表示しているテーマを見かけます。でもこれはさすがに厳しいですね。小さくて見にくいです。

iPadはやはり1カラムで見せたいと思います。とは言えiPadにもいろいろな機種があるわけです。少し整理してみました。

機種 CSSピクセル横 CSSピクセル縦
9.7インチiPad 768px 1,024px
10.5インチ iPad Pro 834px 1,112px
12.9インチ iPad Pro 1,024px 1,366px

12.9インチのiPad Proは欲しいなと思って何度も手に取ってみたのですが、これは2カラムで表示した方が良いサイズだなと思いました。でも普通のiPadは1カラムがいいと思います。

なので1カラムと2カラムのブレークポイントの境目は834px~1,024pxの間に設定するのが良いと分かります。

iPadの横持ちを考える

メディアクエリではorientationによってもCSS切り替えが可能です。

でもそこまで指定するのはやや煩雑。管理も大変です。そこで横持ちの場合を少し考えてみます。

iPadの何がいいかというと簡単に縦持ちと横持ちを変えられるところだと思っています。なので横持ちにしたときには2カラムに見えてほしいというのが私の希望です。(12.9インチは除く)

9.7インチiPadのCSSピクセルサイズは縦で1,024pxです。なのでやはり1,024pxの手前で2カラムに切り替わってくれればOKと分かります。

iPhoneの横持ちを考える

では2カラムの最低ピクセルはどの程度にしたら良いでしょうか?

これを考えるヒントはiPhoneの横持ちから来ると考えています。

iPhoneの横持ちの場合は2カラムで見せる必要はないと思います。1カラムで見せた方が良いです。そこでiPhoneのピクセルサイズを整理してみました。

機種 ピクセルサイズ横 ピクセルサイズ縦
iPhone X 375px 812px
iPhone6/7/8Plus 414px 736px
iPhone6/7/8 375px 667px
iPhone5/SE 320px 568px

これを見るとiPhone Xは縦が812pxもありますね。他の機種に比べて縦に細長い形状をしているということになります。

ということでiPhone Xの横持ちで1カラムに見せるためには812pxよりも大きいところにブレークポイントを設定する必要があることが分かりました。

これからもっと細長いスマホが現れるでしょうか?iPhone Xは画面が縦長すぎるのも人気がイマイチになった原因のように思います。もう十分縦長過ぎるのではないでしょうか。

Googleアナリティクスで画面サイズを確認する

結局のところiPhone Xの縦持ち1カラム表示を優先することにして834px~1,024pxの間にブレークポイントを設定すればいいことは分かりました。

ではどこに?

ここまできたらもう実際に訪問してくれている人の画面サイズを元に割り出すのがいいのではないかと考えました。

それにはGoogleアナリティクスが使えますね。

機種 ピクセルサイズ横 ピクセルサイズ縦
Google Nexus 7 960px 600px
Amazon KFDOWI Kindle Fire HD 8 962px 601px
OnePlus A5010 5T 823px 412px
Essential PH-1 Phone 854px 438px
Samsung SC-03J Galaxy S8+ 846px 412px
Microsoft Windows RT Tablet 960px 600px

それにしても随分いろいろなタブレットやらスマホがあるものですね。

Samsungのタブレットがピクセルサイズ横で800pxちょっとのところにありますね。これは横持ちで2カラムで見せたいところかな。そうするとiPhone Xの834pxにブレークポイントを設定するのが良いということになります。

結論

1カラムと2カラムのブレークポイントをiPhone Xの横持ちをベースに834pxにすることとします。

スマホとタブレットの境目

これはiPhoneとiPadで考えます。

機種 ピクセルサイズ横 ピクセルサイズ縦
iPhone X 375px 812px
iPhone6/7/8Plus 414px 736px
iPhone6/7/8 375px 667px
iPhone5/SE 320px 568px
機種 CSSピクセル横 CSSピクセル縦
9.7インチiPad 768px 1,024px
10.5インチ iPad Pro 834px 1,112px
12.9インチ iPad Pro 1,024px 1,366px

iPhoneの最大が414pxでiPadの最小が768pxです。かなり幅があります。なのでここはInnocentを踏襲して仮に540pxとしておきます。

タブレットとPCの境目

モニタ画像のシェアを調べてみると2018年現在1920×1080pxがトップ、次いで1366×768などとなっているようです。

タブレットに近い方では1280×800というのもあります。これはGoogleアナリティクスの結果からも頷けます。

なのでタブレットとPCの境目は1280pxにします。

まとめ

メディアクエリひとつとっても結構調べたり考えたりすることは多いですね。

でもお陰でいろいろなことが分かりました。今後は実際に自作テーマを作りこんでいく中で解決していきたいと思います。お楽しみに!