レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編

SEOならSEOパック
ご利用実績9002件 (2017/04/26現在)
2016年04月12日 2016年08月24日

レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編

運営中のサイトを自分でスマホ対応にしたいという方へ、具体的なレスポンシブデザインの導入方法を数回に分けて、まとめていきたいと思います。

レスポンシブデザインについては、2015年4月21日からスマホ対応していないサイトに対して、スマホでの検索結果が下がる、モバイルフレンドリーアルゴリズムが導入されることから、モバイルユーザーの多いサイトは必須の対応となります。

モバイルフレンドリーに対応しているかどうかは、こちらから確認できます。
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja
※モバイルフレンドリーはサイト単位ではなく、ページ単位となるので、全ページ対応しないといけない訳ではありません。

今回は、このモバイルフレンドリーに対応する方法としてGoogleが推奨しているレスポンシブデザインにするための準備とポイントをご紹介します。

SEO対策のすべてが揃うSEO Pack

htmlやcssファイルなどは必ずバックアップを取って作業するようにしてください。
※モバイルフレンドリーは、レスポンシブデザインを推奨していますが、スマホユーザーに対して使いやすいサイトにする、ということが目的です。

ビューポート(viewport )を設定する

レスポンシブデザインの導入はまず、ビューポートと、メディアクエリの設定から始めます。
ビューポートというのは、アクセスしているデバイスの横幅を取得して、pc、タブレット、スマホのそれぞれに対応したcssでレンダリングします。
その横幅を取得するために、ヘッダーに下記のビューポートタグを設置します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

ビューポートの設定について

content="width=device-width /*端末画面の幅に合わせる*/
initial-scale /*初期のズーム倍率*/
minimum-scale /*最小倍率*/
maximum-scale /*最大倍率*/
user-scalable /*ズームの操作 yes 許可する (初期値)/ no 許可しない*/

レスポンシブデザインにするためには、width=device-widthは、必須です。
user-scalableについては、サイトの使いやすさを考慮して決めてください。

メディアクエリ(Media Queries)でcssを振り分ける

ビューポートで取得された横幅(ブレイクポイント)によって、使用するcssを振り分けます。
このブレイクポイントの数値は任意で、様々なデバイスがある中、悩みどころでもありますが、アナリティクスの、モバイル>デバイス>セカンダリディメンション:画面の解像度を確認してサイズを決めると良いでしょう。
20150326_responsive-web-design-viewport-media-queries_02

主要スマホサイズ参考

  • 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) {
/*ここにスマホ用スタイルを記述*/
}

そして、いったんpc用のcssをそれぞれタブレット用、スマホ用の箇所にコピーします。
まだタブレットに対応しなくても良いという場合は、ブレイクポイントを○○px以上はpc、それ以下はスマホ、という振り分けにします。

レスポンシブデザイン導入の準備まとめ

以上でレスポンシブデザイン導入の準備が整いました。
ここまでをサーバーにアップすると、横幅はスマホ用でcssはpc用のもので表示するので、崩れてしまいます。

メディアクエリは、ビューポートを設置していない限りcssが振り分けられないので、テスト用のページにビューポートを設置して確認するようにしてください。

また、レスポンシブに対応してもクローラーが巡回しないことにはインデックスもされず、スマホ対応ラベルも付きません。素早いクロールや頻度は被リンクが有効なことから被リンク獲得・クローラー対策として、SEO PackでのSEO対策をおすすめします。
それでは、次回は実際にスマホ用に対応する設定をご説明します。

また、レスポンシブデザインの作り方については下記の記事もご参考ください。
レスポンシブデザインの作り方すべて

SEO内部対策 トップに戻る
コンテンツSEOの強い味方「ezorisu-seo」
順位が上がるページには必ず評価されるコンテンツがあります。
その評価されるコンテンツとは何か?本ツールが解析します!
上位表示を目指すキーワードを入力してください
ezorisu-seoについて
SEOツールseodoor(せおどあ)に無料版が登場しました