レスポンシブデザインのメディアクエリは何pxに設定するのが最適だろう

Googleがモバイルフレンドリーを発表したこともあってか、検索でヒットするページでスマホ未対応のページはなかなか見なくなりました。で、そのスマホ対応と一口に言いましても、実は色々と方法があります。

⒈スマホ端末かどうかを判定してスマホ用ページに切り替える
⒉端末画面が特定のサイズ以下になったらデザインを切り替える

1はユーザーエージェントで判別する方式です。Wordpressをお使いならば、現在はwp_is_mobile()という関数で簡単に条件分岐させることができます。

2はレスポンシブデザインと言われていて、画面幅毎にメディアクエリでデザインを制御する方式です。

やり方が複数あるとどちらが正しいのか?となるのですが、こちらについてはGoogleのガイドラインの中に方法やコストがしっかり書かれています。

概要-モバイル向けウェブサイト

使ってみる-モバイル向けウェブサイト

この中に

Googleでは他のデザインパターンよりもRWD(レスポンシブWebデザイン)の採用をおすすめしています

とあるように、現在の正解はレスポンシブウェブデザインです。あるサイトがレスポンシブウェブデザインかどうかを調べるのは簡単で、パソコンでブラウザの表示サイズを狭くした時、デザインが切り替わればそのサイトはレスポンシブWebデザインが採用されているということになります。そうでない場合はスマホ対応していないかユーザーエージェント判定で切り替えているということなので、早めに対応してください。

レスポンシブデザイン設定方法

やることはそんなに多くありません

meta viewportタグを設定する

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta viewportタグをしないとスマホやタブレットでもパソコン画面幅(約980px)でレンダリングされてしまい、ピンチして拡大する必要が出てきたりします。そのようなサイトをGoogleはモバイルフレンドリーだと判定しないことがあるので注意です。

cssで設定する

方法はlinkタグでcssファイルを出し入れする方法と、一つのcssファイル内でメディアクエリを使う方法とがあります。

linkタグで設定する

画面サイズによってcssファイルを出し分けるlinkタグ設定ですが、cssファイル内でのメディアクエリ記述で分ける方法の方が圧倒的に採用されています。

<link href="sp_style.css" rel="stylesheet" media="screen and (max-width:767px)" />
<link href="pc_style.css" rel="stylesheet" media="screen and (min-width:768px)" />

メディアクエリで設定する

@media screen and (max-width: 768px) {
 div{
  width: 100%;
 }
}

()内でブレイクポイントを設定し、どのサイズから表示デザインを切り替えるかを記述します。(max-width: 768px)というのは「最大768pxまで」がブレイクポイントとなり、ブラウザのサイズが768px以下の時にスタイルを適用されます。

最も採用されているブレイクポイント

どこにプレイクポイントを設定するか、というのが問題です。大きすぎれば間延びしたデザインになりますし、小さすぎればコンテンツが圧迫されます。

ここではWeb制作でよく使われる、3つのcssフレームワークのブレイクポイントを参考にしたいと思います。

Bootstrap4のメディアクエリ(576px、768px、992px、1200px)

.container {
 width: 100%;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

@media (min-width: 576px) {
 .container {
  max-width: 540px;
 }
}

@media (min-width: 768px) {
 .container {
  max-width: 720px;
 }
}

@media (min-width: 992px) {
 .container {
  max-width: 960px;
 }
}

@media (min-width: 1200px) {
 .container {
  max-width: 1140px;
 }
}

Foundation6のメディアクエリ(640px、1024px)

@media print, screen and (min-width: 40em) {
 .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
 }
}

@media print, screen and (min-width: 64em) {
 .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
 }
}

Skeltonのメディアクエリ(400px、550px)

@media (min-width: 400px) {
 .container {
  width: 85%;
  padding: 0;
 }
}

@media (min-width: 550px) {
 .container {
  width: 80%;
 }
}

ご覧の通りブレイクポイントはバラバラ。

これはつまり、ブレイクポイントに一意的な解はないということを意味しています。

スマートフォン、タブレット、パソコンのサイズ

デバイスのサイズはどうなっているのでしょうか。次にデバイスサイズを確認します。

・320px__iPhone4,iPhone5
・414px__iPhone7 Plus
・600px__Nexus7,Kindle Fire
・768px__iPad
・1024px__iPad(横)

450~500pxあたりがスマホサイズと呼べそうな括りになりました。また、7インチから20インチ程度まであるということもあり、タブレットとPCとの差は曖昧になっています。

ですが、webデザイナーは960px基準でPCデザインを作ったりしますし、960Grid Systemというフレームワークが普及したこともあり、一つの区切りとしては1000px付近が選ばれる傾向にあります。

また、一般的な15インチノートパソコンでブラウザを開いた時のサイズが大体1000px付近だということもあるので、タブレットとPCの基準は1000px前後と考えて問題ないでしょう。

それ以上のサイズについては、最大幅をフルードにするかリキッドにするか、コンテンツに応じて選択することになります。

シンプルにするか、複雑にするか

ブレイクポイントはデザインのカラムが2つか6つかで変わります。コンテンツの量でも変わります。なので、「絶対にこのブレイクポイントで」という数字はありません。

自身が「見やすい」「わかりやすい」と思ったサイトをメディアクエリを検証していくと、自分なりのベースラインが固まってくると思います。

Pass On

ikeda
(いけだきょうすけ)1989年生まれ。愛知県のwebデザイナー兼プログラマー兼ライター。基本的に企画からデザイン、プログラミングまで一貫して請け負っているがイラストはへたくそ。誰かの人生がちょっと良くなれば嬉しいです。