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

ウェブサイトにレスポンシブデザイン導入されていますか？

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

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

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

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

はじめに、レスポンシブデザインについてご説明します。

モバイルでサイトを閲覧した場合、モバイル対応していないサイトだとPC用のページを表示していました。

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

スマホに対応させるという点では、必ずしもレスポンシブデザインでなくてはならない訳ではありません。

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

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

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

レスポンシブデザインを導入するにあたり、必須の設定に「viewport」の設定があります。

viewportはPCやモバイルの表示領域を指定する為設定しますが、
head要素の中にメタタグを設定してページの横幅のサイズを指定・レンダリングします。
主にアクセスしたデバイスの横幅に合わせるために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">

ビューポートのcontent属性の設定には次の記述が可能です。

width=device-width

デバイスの横幅に合わせる指定です。Googleは「width=device-width」を推奨しています。

user-scalable

user-scalable=yes（またはno）によってズームを許可する・しないなどの指定が可能です。

initial-scale

initial-scaleは、初期のズーム倍率を指定できます。initial-scaleを指定しなければ、「initial-scale=1」となり、
initial-scale=2.0と指定すると初期倍率は2倍となります。

ページのデザインや操作性などを考慮して指定しましょう。

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対策に欠かせない対策のひとつとなっています。
導入の際は、必ず現状のサイトのバックアップをとってスマホ対応に備えましょう。