レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編
運営中のサイトをスマホ対応にしたいとお考えの方へ、具体的なレスポンシブデザインの導入方法を数回に分けてご紹介します。
レスポンシブデザインについては、2015年4月21日からスマホ対応していないサイトに対して、スマホでの検索結果が下がる、モバイルフレンドリーアルゴリズムが導入されることから、モバイルユーザーの多いサイトにとっては無視できない対応となります。
モバイルフレンドリーに対応しているかどうかは、Googleの「モバイルフレンドリーテスト」から確認できます。
※モバイルフレンドリーはサイト単位ではなく、ページ単位となるので、全ページ対応しないといけない訳ではありません。
今回は、このモバイルフレンドリーに対応する方法としてGoogleが推奨しているレスポンシブデザインにするための準備とポイントをご紹介します。
htmlやcssファイルなどは必ずバックアップを取って作業するようにしてください。
※モバイルフレンドリーは、レスポンシブデザインを推奨していますが、スマホユーザーに対して使いやすいサイトにする、ということが目的です。
ビューポート（viewport）を設定する
レスポンシブデザインの導入はまず、ビューポート（viewport）と、メディアクエリの設定から始めます。
ビューポートというのはpc、タブレット、スマホなどのデバイス毎に認識してほしい表示領域を指定する記述となります。
htmlのmeta要素で、ヘッダーに下記のビューポートを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
ビューポートの設定について
ビューポートで設定できる値はwidth=device-widthなどいくつかありますが、レスポンシブデザインにするためには、width=device-widthは必須です。
user-scalableについては、サイトの使いやすさを考慮して決めてください。
viewportの代表的な値には次のようなものがあります。
width=device-width /*端末画面の幅に合わせる*/ initial-scale /*初期のズーム倍率*/ minimum-scale /*最小倍率*/ maximum-scale /*最大倍率*/ user-scalable /*ズームの操作 yes 許可する （初期値）/ no 許可しない*/
メディアクエリ（Media Queries）でcssを振り分ける
ビューポートで取得された横幅（ブレイクポイント）によって、使用するcssを振り分けます。
この「ブレイクポイント」の数値は任意で、様々なデバイスがある中、悩みどころでもありますが、数値の決め方のひとつとして
アナリティクスでユーザーの解像度を確認するといった方法もあります。
アナリティクスの モバイル ＞ デバイス ＞ セカンダリディメンション：画面の解像度を確認してサイズを決めると良いでしょう。
主要スマホサイズ参考
- iPhone 4s 320px x 480px
- iPhone 5s 320px x 568px
- iPhone 6 375px x 667px
- iPhone 6 Plus 414px x 736px
cssを振り分けるには次のように記述します。
※この場合は、961px以上はpc用、641px以上、960px以下はタブレット用、640px以下はスマホ用の設定として振り分けている例です。
/* pc */
@media screen and (min-width: 961px) {
/*ここにpc用スタイルを記述*/
}
/* tablet */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}
cssをそれぞれ設定していく方法としてそれぞれやりやすい方法はあると思いますが、
筆者は、いったんpc用のcssを設定し、その内容をタブレット用、スマホ用の箇所にコピーし修正・調整しています。
まだタブレットに対応しなくても良いという場合は、ブレイクポイントを○○px以上はpc、それ以下はスマホ、という振り分けにします。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
レスポンシブデザイン導入の準備まとめ
ビューポート（viewport）と、メディアクエリの設定でレスポンシブデザイン導入の準備が整いました。
しかし、この状態でサーバーにアップすると、横幅はスマホ用でcssはpc用のもので表示するので、崩れてしまいます。
メディアクエリは、ビューポートを設置していない限りcssが振り分けられないので、まずはテスト用のページにビューポートを設置して確認するようにしてください。
また、レスポンシブに対応してもクローラーが巡回しないことにはインデックスされません。素早いクロールや頻度は被リンクが有効なことから被リンク獲得・クローラー対策として、SEO PackでのSEO対策をおすすめします。
それでは、次回は「レスポンシブデザイン簡単導入法02 – よく使うcssまとめ編」として、実際にスマホ用に対応する設定をご説明します。
また、レスポンシブデザインの作り方についてはレスポンシブデザインの作り方すべての記事もご参考ください。
