レスポンシブデザインの作り方！簡単にスマホ対応する方法について

レスポンシブデザインの作り方についてお悩みではありませんか？

スマホ対応するにはいくつかの方法が考えられますが、その中でもひとつのHTMLファイルに対して訪問してきたデバイスのサイズによってcssを振り分ける「レスポンシブデザイン」が非常に便利です。そしてそのレスポンシブデザインを導入するためにはいくつかの手順が必要となります。

スマホで閲覧しようと思ってタップしてみたところ、PCページが表示され、その瞬間に検索結果ページに戻ったという経験はありませんか？
そういったユーザーの直帰を防ぐためにもスマホ対応は今後のSEO対策に必須の項目と言えます。

それでは、今回は「レスポンシブデザインの作り方」について中心に、初心者にもわかりやすくポイントをまとめたいと思います。

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

レスポンシブデザインとは、PCやモバイル・タブレットなど、あらゆるデバイスサイズに応じてcssを切り替え、ひとつのhtmlで複数の見せ方を可能とする方法のことです。

PC・スマホそれぞれ異なるページを用意しているような「別々のURL」のサイト構成では、リンクやコンテンツに差異が生じることから、検索ランキングへの影響が懸念されてます。

こういった複数デバイス対応、サイトパフォーマンス維持・向上に貢献できる優れたサイト構成を実現できるのが、Googleも推奨する「レスポンシブデザイン」ということです。

point!!この「レスポンシブデザイン」は、Google公式のモバイルガイドに掲載されてる推奨のSEO対策です。

レスポンシブデザインのメリット・デメリットについて

では、この「レスポンシブデザイン」のメリット・デメリットについてご説明したいと思います。

※参考：レスポンシブ ウェブ デザイン – ウェブマスター向けモバイルガイド「レスポンシブ デザインにする理由」

メリットについて

SEO効果が期待できる

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

サイト修正がしやすい

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

リソースが節約できる

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

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

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

デメリットについて

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

フィーチャーフォンは、レスポンシブデザインに対応してないため、「動的な配信」か「別個のURL」を使ってフィーチャーフォン用のコンテンツを配信するようにサイトを設定する必要があります。
※参考：フィーチャーフォン – ウェブマスター向けモバイルガイド

コストがかかる

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

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

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

レスポンシブデザインの重要性について

レスポンシブデザインによるスマホ対応について、G-Squared InteractiveのデジタルマーケティングコンサルタントであるGlenn Gabe（グレン・ゲイブ）氏が、ジョンミュラー氏が以下のよう言及したとTwitterでつぶやいてます。

Via @johnmu Planning to migrate from an m. to responsive site, do it BEFORE the m-first index arrives https://t.co/TS0UXLQxu8 h/t @DeepCrawl pic.twitter.com/TisF3pMT5t

— Glenn Gabe (@glenngabe) 2017年6月19日

これによると、m.example.comといったモバイルページ用のURLが存在するサイトを、レスポンシブデザインにしてURLを一本化する場合、モバイルファーストインデックス前に実施しておいた方が良いということです。

point!!このことからも、スマホ対応する方法はやはりレスポンシブデザインが有効だということがわかります。
各デバイス毎にURLを管理している場合は早めの対応が必要と言えます。

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

では、さっそくレスポンシブデザインの作り方について手順をご説明していきます。

meta viewportタグを入れる

レスポンシブデザインでスマホ対応するためにはまず、HTMLソースのheadタグ内に、meta要素のname属性値の一つである「viewport（ビューポート）」と呼ばれるメタタグを下記のように記述します。

そして、上記では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

タブレット用のcss

スマホ用のcss

また、先ほども説明したように、無理にタブレット対応する必要もない場合もありますので、こちらはアナリティクスで訪問デバイスの割合を調べたり、サイトの内容によって用意するかどうかを決めると良いかと思われます。

point!!ポイントとしては、PC用のスタイルはきちんとメディアクエリで分けておいた方が良いという点です。
それは、きちんと分けておかなければ（PC用のメディアクエリを指定しない場合）、そのスタイルはスマホにも適応されているため、後々管理しにくくなってしまうからです。

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

次にスマホやタブレット用にcssを編集していくわけですが、まずはPC用のスタイルを上記のメディアクエリを利用して同じものをコピーしてきましょう。

そして、少しずつスマホやタブレットの表示に対応していきます。（※理想としてはテスト環境があれば良いですが、もし無い場合はファイル名を変えてテストしてみてください。）

では、その際に便利なcssやコツをご説明したいと思います。

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

PC用ページをうまくスマホ対応できないコンテンツも出てくるかと思います。そういった場合は、「display:none」で非表示にするという方法もあります。

しかし、これを使い過ぎると各デバイス用のページに差異が生じてしまう可能性もありますので、代替とするコンテンツを用意するなどの考慮が必要です。（PCは画像、スマホはテキストなど）

floatを解除する

先述したように、PC用・スマホ用のcssを完全に分けて記述していれば問題ありませんが、PC用のスタイルをスマホにも適用されてしまっている場合は横並びでデザインしたfloatを解除する必要があります。

上記のよう、カラムを分けて左右に振っているコンテンツは「float:none;」を記述し、解除する必要があります。

もちろん、デザインによってはfloatを使用する場合もありますので、多少の可変でもデザインが崩れないことを想定して判断しましょう。

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

スマホで閲覧した場合、まだまだ横スクロールが出ていると思います。
それは各コンテンツ（画像も含め）の横幅が可変になっていないことが大きな理由と考えられます。

ひとつひとつ確認して可変に対応する調整が必要です。

上記のように、「max-width」「width:100％」を活用し、画像やコンテンツがはみ出ないようスマホ対応していきましょう。

レスポンシブデザインをチェックする方法

ある程度対応が終わったら、正しく対応できているかどうかチェックしておきましょう。
その簡単な方法として、実機で確認する方法もありますが、作業しながらブラウザでも簡単に確認することができます。

対応したページのURLを検索窓に入力し、ブラウザ自体を縮小・拡大することで、以下のようレスポンシブウェブデザインのチェックができます。

ブラウザ以外に専用のツール「レスポンシブデザインチェックツール | LIQUID DESIGN」もあるようなので利用してみても良いかもしれません。

また、レスポンシブデザインを導入する際に参考になるサイトなどをまとめたこちらの記事もぜひご覧ください。

まとめ

ということで、今回はレスポンシブデザインによってスマホ対応する方法についてご説明してきましたが、どのデバイスからの訪問でも見やすく、ユーザーにとってのパフォーマンスを統一しておくことが重要と言えます。

URLやコンテンツ、被リンクを統一し、高く評価されるようにサイト構築しておくことがユーザーにとっても使いやすいサイトとなり、それがGoogleに評価されやすいサイトにも繋がりますので、今のうちに対応しておきましょう。