簡単！レスポンシブデザインの作り方のすべて

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

念のため、スマホで上位表示させたい重要なページがモバイルフレンドリーに対応しているかどうか確認しておきましょう。
参考：モバイル フレンドリー テスト

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

レスポンシブデザインとは？

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

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

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

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

viewport（ビューポート）を設定する

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

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

<!--最小限のビューポート設定-->
<meta name="viewport" content="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で調整していきます。

スマホ表示の画像サイズを可変にする

レスポンシブデザインではデバイスによって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対策に欠かせない対策のひとつとなっています。
導入の際は、必ずバックアップをとってスマホ対応に備えましょう。