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

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

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

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

それでは、今回は「レスポンシブデザインの作り方」についてまとめたいと思います。

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

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

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と記述します。

この部分はサイトによって異なるかと思いますので、ユーザーにとってどちらが便利なのかを考慮した上で判断しましょう。

関連記事meta viewportとは～設定方法とスマートフォン（android・iphone）で効かない原因

各デバイス用の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」もあるようなので利用してみても良いかもしれません。

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

関連記事レスポンシブウェブデザインの参考になるサイトなどまとめ

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

レスポンシブデザインによるスマホ対応について、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を管理している場合は早めの対応が必要と言えます。
参考：レスポンシブデザインとは？メリット・デメリットについてまとめ

まとめ

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

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