レスポンシブ対応されていますか？
2016年5月からモバイルフレンドリーが強化されます。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。
これによって、よりスマホでのSEO対策にはレスポンシブ対応が必須となります。

この記事ではモバイルフレンドリーに対応するためのレスポンシブ対応の作り方をすべてご紹介したいと思います。

まず、レスポンシブ対応についてですが、モバイルでサイトを閲覧した場合、今まではPC用のページを表示していました。

しかし、これをひとつのファイルだけでアクセスしてきたデバイスの横幅によってそれぞれのページを表示させるというもので、最大のメリットとしては、ひとつのファイルで運用が可能な点です。

スマホに対応させるという点では、必ずしもレスポンシブ対応でなくてはならない訳ではありません。
スマホ用のページを用意してアクセスしてきたデバイスをjavascriptやhtaccessなどで振り分けて表示させる方法も考えられます。
しかし、この場合の更新にはPC用とスマホ用の作業が発生することになり、スマホ対応にはレスポンシブ対応が広く導入されています。

レスポンシブ対応は、ページの切り替えをCSSで行っており、導入するにはスマホ用のCSSと、必要でしたらタブレット用のCSSを用意する必要があります。

viewport（ビューポート）を設定する
レスポンシブ対応には必須の設定です。
ヘッダーにビューポートというメタタグを設定してページの横幅のサイズを指定してレンダリングします。主にアクセスしたデバイスの横幅に合わせるためにwidth=device-widthを指定します。

ビューポートではこの他に、user-scalable=yes（またはno）によってズームを許可する・しないなどの設定もできます。
ページのデザインや操作性などを考慮して指定しましょう。

cssでメディアクエリを指定する
メディアクエリとは、アクセスしてきたデバイスの横幅によって読み込むcssを変えるためのものです。これによってスマホでの表示を変えることができます。

また、モバイルフレンドリーはスマホに関するアップデートなので、タブレットまで必要無ければPCとスマホのみのブレイクポイントを指定します。
例：375px以下はスマホ用とする（この数字がブレイクポイントです）

ブレイクポイントは、主要なスマホサイズを横にした時などを考慮して決めて下さい。

iPhone 5s 320px x 568px
iPhone 6 375px x 667px
例えば以下の設定だと、横幅が375px以下はスマホ用、376pxから960pxまでがタブレット用、それ以上がPC用のcssを読み込む設定となります。

@media screen and (min-width:961px) {
/*pc用のcssを記述*/
}

@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet用のcssを記述*/
}

@media screen and (max-width:375px) {
/*スマホ用のcssを記述*/
}
レスポンシブ対応の作り方はビューポートとメディアクエリの2点で準備が整います。
後は、実際に表示してみてはみ出してしまった画像などの横幅をスマホ用cssで調整していきます。

あなたの対策ページはどのクエリタイプ？「Do-Know-Go」アシスト窓口で無料診断中！
スマホ表示の画像サイズを可変にする
レスポンシブ対応ではデバイスによってcssを振り分けるだけなので、画像は主に流用することになります。
実際にスマホ表示してみると画像がデバイスの横幅より大きい場合は、はみ出して横スクロールが出てしまいます。これを調整するためには、スマホ用のcssにデバイスの横幅サイズで可変する指定をします。

img {max-width:100%; width /***/:auto; /*IE8用ハック*/} /*画像サイズが横幅に合わせて可変します*/
これによってスマホで閲覧した時に画像がデバイスサイズに可変され、見やすくなります。
この他にも、横幅を指定しているクラスなどはスマホ用cssの方でautoなどにして調整しましょう。
※IE8で横幅だけがデバイスサイズになるバグに対してハックを追加しています。

デバイスによって画像を切り替えたい場合
場合によってはスマホでは表示させたくないコンテンツやPCとは別の画像を出したい時があります。
こういった場合は、アクセスしてきたデバイスによって表示・非表示を指定して調整します。

＜div class=”sp_contents”＞＜img src=”/img/example_01.gif”＞＜/div＞
＜div class=”pc_contents”＞＜img src=”/img/example_02.gif”＞＜/div＞

@media screen and (min-width:376px) {
.sp_contents {display:none;} /*横幅376px以上では表示しない*/
}

@media screen and (max-width:375px) {
.pc_contents {display:none;} /*横幅375px以下では表示しない*/
}

ただし、このdisplay:none;は多用しないようにしましょう。
なぜならcssで画像やコンテンツを非表示にしているだけで、実際には読み込んでいるため表示速度が落ちる可能性があるからです。

もし画像の表示・非表示を多用するのであれば、デバイスの横幅によって読み込む画像が差し替わるjQueryが数多くありますので、そちらを使ってみると良いでしょう。

メニューの切り替え
PCとスマホではグローバルメニューが異なる場合が多いかと思います。
このような場合も、cssの表示・非表示でデバイスごとに切り替え、タップするとプルダウンでメニューが表示されるjQueryが多く公開されていますので、使いやすいものを探してみてください。

レスポンシブ対応の作り方まとめ
レスポンシブ対応の作り方は今回のような手順で行えば、それほど難しいものではありません。ぜひ、対応してみてください。
さらに、Googleは以下のような理由からレスポンシブ対応を推奨しています。

コンテンツの管理がしやすい
リダイレクトの必要がない
クローラーの巡回が1度で済む
スマホでの順位を落とさないために、ユーザーの使いやすさも考慮したレスポンシブ対応でモバイルフレンドリーに対応していきましょう。

最後に、一度アナリティクスで訪問しているデバイスを確認してみてください。
もしスマホからのトラフィックが多く、重要なページにスマホ対応ラベルが付いていないページがあれば早めの対応をおすすめします。
（すでにレスポンシブ対応でモバイルフレンドリーに対応しているサイトは今回のアップデートには影響ありません）

レスポンシブ対応はもはや、SEO対策に欠かせない対策のひとつとなっています。
導入の際は、必ずバックアップをとってスマホ対応に備えましょう。