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

SEOならSEOパック
2016年04月12日 2022年09月28日

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

只今タイムセールを実施中です。

運営中のサイトをスマホ対応にしたいとお考えの方へ、具体的なレスポンシブデザインの導入方法を数回に分けてご紹介します。

レスポンシブデザイン簡単導入法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を振り分けます。

この「ブレイクポイント」の数値は任意で、様々なデバイスがある中、悩みどころでもありますが、数値の決め方のひとつとして
アナリティクスでユーザーの解像度を確認するといった方法もあります。

アナリティクスの モバイル > デバイス > セカンダリディメンション:画面の解像度を確認してサイズを決めると良いでしょう。
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) {
/*ここにスマホ用スタイルを記述*/
}

cssをそれぞれ設定していく方法としてそれぞれやりやすい方法はあると思いますが、
筆者は、いったんpc用のcssを設定し、その内容をタブレット用、スマホ用の箇所にコピーし修正・調整しています。

まだタブレットに対応しなくても良いという場合は、ブレイクポイントを○○px以上はpc、それ以下はスマホ、という振り分けにします。

\無料診断の活用で課題を明確に/

外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。

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

ビューポート(viewport)と、メディアクエリの設定でレスポンシブデザイン導入の準備が整いました。

しかし、この状態でサーバーにアップすると、横幅はスマホ用でcssはpc用のもので表示するので、崩れてしまいます。

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

また、レスポンシブに対応してもクローラーが巡回しないことにはインデックスされません。素早いクロールや頻度は被リンクが有効なことから被リンク獲得・クローラー対策として、SEO PackでのSEO対策をおすすめします。

それでは、次回は「レスポンシブデザイン簡単導入法02 – よく使うcssまとめ編」として、実際にスマホ用に対応する設定をご説明します。

レスポンシブデザイン簡単導入法として全3回に分けレスポンシブ対応方法をご紹介していますが、前回の記事「レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編」を参考に、レスポンシブデザインの導入のためにビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していきます。本記事ではレスポンシブ対応によく使うcssのポイントをご紹介したいと思います。レスポンシブデザインに対応するには各デバイス用のcssを設定し表示します。対応に必要なcssは、本記事でご説明するc...

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

ウェブサイトにレスポンシブデザイン導入されていますか?2016年5月からモバイルフレンドリーアルゴリズムが強化される事をGoogleが発表しました。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。これによって、よりスマホでのSEO対策にはレスポンシブデザインが必須となります。念のため、スマホで上位表示させたい重要なページがモバイルフレンドリーに対応しているかどうかモバイル フレンドリー テストで確認しておきましょう。この記事ではモバイルフレンドリーに対応するためのレスポンシブデザインの...

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook