レスポンシブデザインとは？作り方や実装時の注意点、SEO効果など初心者向けに解説！

レスポンシブデザインとは、PCやモバイル（スマホ・タブレットなど）といったあらゆるデバイスサイズに応じてcssを切り替え、ひとつのhtmlで複数の見せ方を可能にする方法のことです。別名「レスポンシブWebデザイン(レスポンシブウェブデザイン)」とも呼ばれます。
このレスポンシブデザインをうまく実装すれば、SEOへの良い効果が期待できます。
一方、レスポンシブデザインが実装できなければ、モバイル向けページを個別にスマホ対応する必要があります。
個別にできなければ、スマホ対応を放置することになります。
この場合、モバイルフレンドリー未対応でぺージエクスペリエンスが劣るので、Googleから評価されづらくなります。
結果、検索順位が上がりづらくなるというわけです。
こうした良くない状況を回避する為に、レスポンシブデザインを積極的に採用して、モバイルユーザーが使いやすいサイトにしましょう。
この点踏まえて今回は、レスポンシブデザインの定義や概要、作り方など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

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

レスポンシブデザインとは、PCやモバイル（スマホ・タブレットなど）といったあらゆるデバイスサイズに応じてcssを切り替え、ひとつのhtmlで複数の見せ方を可能とする方法のことです。
PC・スマホそれぞれ異なるページを用意しているような「別々のURL」のサイト構成では、リンクやコンテンツに差異が生じることから、検索ランキングへの影響が懸念されてます。
こういった複数デバイス対応、サイトパフォーマンス維持・向上に貢献できる優れたサイト構成を実現できるのが、Googleも推奨する「レスポンシブデザイン」ということです。

レスポンシブデザインの重要性

レスポンシブデザインによるスマホ対応について、G-Squared InteractiveのデジタルマーケティングコンサルタントであるGlenn Gabe（グレン・ゲイブ）氏が、ジョンミュラー氏が以下のよう言及したとTwitterでつぶやいてます。
これによると、m.example.comといったモバイルページ用のURLが存在するサイトを、レスポンシブデザインにしてURLを一本化する場合、モバイルファーストインデックス前に実施しておいた方が良いということです。

レスポンシブデザインのメリット

レスポンシブデザインのメリットがいくつかあります。
SEO効果が期待できる
サイト修正がしやすい
リソースが節約できる
リダイレクトの手間が省ける

SEO効果が期待できる

PC、スマホ、タブレットなどのあらゆるデバイスから同じURLでアクセスできることからURLの正規化、サイト評価の統一など、SEO効果が期待できます。
もちろんURLがひとつに統一されるため、リンク効果が高まりやすいと考えられます。

サイト修正がしやすい

一般的に「レスポンシブデザイン」は、css記述のみで済み、「動的な配信」や「別個のURL」のよう複数ファイル修正するような手間が省けるため、サイト修正がしやすいというメリットが挙げられます。

リソースが節約できる

上記と重複しますが、URLが統一されることにより、クロールするために必要なリソースを節約できるという点もメリットと言えるでしょう。

リダイレクトの手間が省ける

最適なページにリダイレクトする必要がないため、「動的な配信」「別々のURL」で運用するより、読み込み時間の短縮も考えられます。

レスポンシブデザインのデメリット

レスポンシブデザインのメリットがいくつかあります。
フィーチャーフォン（ガラケー）に対応してない
コストがかかる
サイトの読み込み速度（表示速度）が遅くなる

フィーチャーフォン（ガラケー）に対応してない

フィーチャーフォンは、レスポンシブデザインに対応してないため、「動的な配信」か「別個のURL」を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要があります。

コストがかかる

レスポンシブデザイン用のcss等、必要に応じて新たなファイルや記述が必要となり、構築時間や費用がかかります。

サイトの読み込み速度（表示速度）が遅くなる

PC用のHTMLコードやcss、画像など大きいファイルを読み込む場合もあるため、環境によってはスマホ・タブレット等でサイトの読み込み速度（表示速度）が遅くなる場合があります。

レスポンシブデザインの作り方

レスポンシブデザインの作り方について手順をご説明していきます。
meta viewportタグを入れる
各デバイス用のcssを記述する（メディアクエリを使用する）
レスポンシブデザインに便利なcssについて

meta viewportタグを入れる

レスポンシブデザインでスマホ対応するためにはまず、HTMLソースのheadタグ内に、meta要素のname属性値の一つである「viewport（ビューポート）」と呼ばれるメタタグを下記のように記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
そして、上記ではcontentの中にいくつか属性を指定していますが、ここに属性を記述することによって、いくつか挙動を指定することができます。

横幅の指定について

ここでは、「width=device-width」と記述していますが、これは訪問してきたデバイスの横幅を取得するといった意味です。
アクセスしたデバイスの横幅がサイトの横幅になるように表示されます。そのため、この時点ではまだ表示自体は変わらないはずです。
その他に数値を指定することもできますが、意図的な理由がない限り“device-width”で良いかと思われます。

倍率について

続いてカンマ区切りで表示する倍率を指定することができます。（上記の例ではinitial-scale=1.0）
これは表示する倍率を指定するもので、こちらも特に目的がないかぎり1.0の指定で問題ないでしょう。
initial-scaleは初期のズーム倍率を意味し、最少倍率（minimum-scale）、最大倍率（maximum-scale）を指定することができます。
これらも特に記述しなければいけないものではないので、多くのサイトがinitial-scale=1.0の指定を採用しているようです。

ズームの許可について

さらにカンマで区切ってユーザーに表示されているページをズームすることを許可するのかどうかを指定することができます。
もし許可するならuser-scalable=yesと記述し、許可しないならnoと記述します。
この部分はサイトによって異なるかと思いますので、ユーザーにとってどちらが便利なのかを考慮した上で判断しましょう。

各デバイス用のcssを記述する（メディアクエリを使用する）

続いてPC用のcss、スマホ用のcss、そして必要であればタブレット用のcssを用意します。
この書き方は以下のようにメディアクエリと呼ばれる記述によって、横幅ごとに見せ方を変えています。
この横幅はもちろん任意で決めることができます。最近のスマホの横幅などを参考に決めると良いでしょう。

PC用のcss

@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
#menu-bg {
background-color: #00FFFF; /*青色*/
}
}

タブレット用のcss

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
#menu-bg {
background-color: #FF0000; /*赤色*/
}
}

スマホ用のcss

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/
}
}
また、先ほども説明したように、無理にタブレット対応する必要もない場合もありますので、こちらはアナリティクスで訪問デバイスの割合を調べたり、サイトの内容によって用意するかどうかを決めると良いかと思われます。

レスポンシブデザインに便利なcssについて

次にスマホやタブレット用にcssを編集していくわけですが、まずはPC用のスタイルを上記のメディアクエリを利用して同じものをコピーしてきましょう。
そして、少しずつスマホやタブレットの表示に対応していきます。（※理想としてはテスト環境があれば良いですが、もし無い場合はファイル名を変えてテストしてみてください。）
では、その際に便利なcssやコツをご説明したいと思います。

コンテンツを非表示にする

PC用ページをうまくスマホ対応できないコンテンツも出てくるかと思います。そういった場合は、「display:none」で非表示にするという方法もあります。
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxの場合に適用*/
#menu-bg {
display:none; /*非表示*/
}
}
しかし、これを使い過ぎると各デバイス用のページに差異が生じてしまう可能性もありますので、代替とするコンテンツを用意するなどの考慮が必要です。（PCは画像、スマホはテキストなど）

floatを解除する

先述したように、PC用・スマホ用のcssを完全に分けて記述していれば問題ありませんが、PC用のスタイルをスマホにも適用されてしまっている場合は横並びでデザインしたfloatを解除する必要があります。
@media screen and (max-width: 479px) { /*ウィンドウ幅が0～479pxの場合にcssを適用*/
#contents #l_contents {
width: auto;
float: none;
}
#contents #r_contents {
width: auto;
float: none;
}
}
上記のよう、カラムを分けて左右に振っているコンテンツは「float:none;」を記述し、解除する必要があります。
もちろん、デザインによってはfloatを使用する場合もありますので、多少の可変でもデザインが崩れないことを想定して判断しましょう。

画像やコンテンツの横幅を調整する

スマホで閲覧した場合、まだまだ横スクロールが出ていると思います。
それは各コンテンツ（画像も含め）の横幅が可変になっていないことが大きな理由と考えられます。
ひとつひとつ確認して可変に対応する調整が必要です。
img {
max-width: 100% ;
height: auto;
}
#menu {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
上記のように、「max-width」「width:100％」を活用し、画像やコンテンツがはみ出ないようスマホ対応していきましょう。

レスポンシブデザインを作るときに避けたいこと

レスポンシブデザインを作るときに避けたいことがいくつかあります。
必要なHTMLタグやCSSのマークアップを忘れる
特定のデバイスだけメインコンテンツの量を減らす
モバイル向けページのデザインチェックを怠る

必要なHTMLタグやCSSのマークアップを忘れる

レスポンシブデザインを作るときに避けたいことは、必要なHTMLタグやCSSのマークアップを忘れることです。
例えば、HTMLファイルにmeta viewportタグをマークアップしなかったり、CSSファイルにメディアクエリの記述を忘れます。
この場合、スマホやタブレットといったモバイルデバイス用にWebページが最適化されません。
そうなれば、モバイルユーザーにとって利便性の低いWebページになります。
結果、モバイルフレンドリー未対応でページエクスペリエンスが劣るので、検索順位が上がりづらくなるというわけです。
こうして、必要なHTMLタグやCSSのマークアップを忘れることが、レスポンシブデザインを作るときに避けたいことです。

特定のデバイスだけメインコンテンツの量を減らす

レスポンシブデザインを作るときに避けたいことは、特定のデバイスだけメインコンテンツの量を減らすことです。
例えば、CSSで「@media screen and (max-width: 640px)」といったモバイル用のデザインが指定できるメディアクエリがあります。
このメディアクエリ内のメインコンテンツの文章デザインに該当する要素に「display:none;」を指定します。
この場合、スマホで見たときにメインコンテンツの一部の文章が非表示になります。
そうなれば、PC向けページと差異が生じて、スマホ向けページだけメインコンテンツの量が少なくなります。
結果、モバイルファーストインデックスの影響によってGoogleから評価されづらくなり、検索順位が上がりづらくなるというわけです。
こうして、特定のデバイスだけメインコンテンツの量を減らすことが、レスポンシブデザインを作るときに避けたいことです。

モバイル向けページのデザインチェックを怠る

レスポンシブデザインを作るときに避けたいことは、モバイル向けページのデザインチェックを怠ることです。
例えば、CSSで「@media screen and (max-width: 640px)」といったメディアクエリ内でモバイル用のデザインを指定して調整したとします。
この調整がうまくいってるかどうか、モバイルフレンドリーテストしなかったり、実際にブラウザでの確認をしなかったとします。
この場合、スマホやタブレットで閲覧したときのコンテンツのデザイン状況がわかりません。
そうなれば、文章や画像がはみ出たり、装飾がズレるなどしてモバイルユーザーにとって見ずらいコンテンツになってる可能性が高まります。
結果、モバイルフレンドー未対応でページエクスペリエンスが劣るので、、検索順位が上がりづらくなるというわけです。
こうして、モバイル向けページのデザインチェックを怠ることが、レスポンシブデザインを作るときに避けたいことです。

レスポンシブデザインのおすすめテンプレート

レスポンシブデザインのおすすめテンプレートがいくつかあります。
ここでは、WordPress向けのものを中心にご紹介します。

BizVektor

htmlやcssの知識が無くても管理画面からの設定だけで簡単に高品質な企業や店舗などのビジネス向けホームページが作れるように開発したスマートフォン対応（レスポンシブデザイン対応）のWordPressテーマです。
参考：BizVektor

Catch Box

WordPress公式サイトが提供する、キャッチボックス形のシンプル、軽量、ボックス、およびブロガーや専門家のための適応可能なレスポンシブデザイン用ワードプレスのテーマです。
様々なデバイスで表示するにはHTML5、css3やレスポンシブデザインに基づいています。
参考：Catch Box

PR News

WordPress公式サイトが提供する、PRニュースは、ニュースや雑誌、ブログ、ウェブサイトおよび多くのための完璧な強力な応答多目的レスポンシブデザイン用ワードプレスのテーマです。
参考：PR News

まとめ

今回はレスポンシブデザインによってスマホ対応する方法についてご説明してきましたが、どのデバイスからの訪問でも見やすく、ユーザーにとってのパフォーマンスを統一しておくことが重要と言えます。
URLやコンテンツ、被リンクを統一し、高く評価されるようにサイト構築しておくことがユーザーにとっても使いやすいサイトとなり、それがGoogleに評価されやすいサイトにも繋がりますので、今のうちに対応しておきましょう。