レスポンシブウェブデザインとは?基本的な仕組みと対応方法を解説

レスポンシブウェブデザイン

登場人物

  • 解説猫(仮)
    解説猫(仮)
    自社サイトマーケティング担当
    SEO解説担当の猫さんです
    元SEOディレクターで、現在は自社マーケティングやってるみたいです

    ・趣味:昼寝
    ・どんな人でもわかる優しい説明をこころがけているが、そんなにうまくはない
    ・冷静な判断で仲間からの信頼も厚い(自称)
  • 唐澤さん
    唐澤さん
    Webディレクター
    Webディレクターの唐澤さんです
    webサイト制作に携わって12年超のベテランさんです

    ・特技:毎日うどんを食べる
    ・趣味:低音の研究
    ・備考:「私のキャリアパスは南国のジジイです」と発言したが、入社出来た強者

運営されているサイトは、スマホ対応済みですか?
ウェブサイト閲覧に利用するデバイスはスマートフォンが主流です。

今回は、Googleも推奨するスマホ対応方法「レスポンシブウェブデザイン」について解説します。
メリットやデメリット、実装方法など、ぜひ参考にしてください。

解説猫(仮)
こんにちは、こんばんは、解説の猫(仮)と申します。
この記事では、レスポンシブウェブデザインについて解説しています。
よろしくお願いしますね。
唐澤さん
こんにちは。唐澤です。
サイトのスマホ化はもはや当たり前!
まだの方はこの記事を参考に、是非ご対応を!

レスポンシブウェブデザインとは?

レスポンシブウェブデザインは、「デバイスサイズにあわせて表示を変更する手法」のことです。
パソコン、スマートフォン、タブレットなど、デバイスの種類に応じた表示を設定できます。

デバイスごとの設定を行いますが、用意するHTMLは一つで大丈夫です。
デバイスサイズに応じて、読み込むCSS(もしくはCSS内の記述)を選択することで、表示の切り替えが可能です。

※下記のようなイメージです。

レスポンシブ説明用イメージ

スマホ対応の手法(方法)紹介

モバイル対応の3つの手法

スマホ対応を実施するには大きく分けて3つの手法があります。

・レスポンシブウェブデザイン
・ダイナミックサービング
・セパレートURL

各手法の特徴を見てみましょう。

項目 レスポンシブウェブデザイン ダイナミックサービング セパレートURL
URL 同一 同一 個別
HTML 同一 個別 個別
デザインの自由度 低い 高い 高い
管理工数 少ない 多い 多い
不備によるリスク 少ない 普通 多い

レスポンシブウェブデザインは、管理(修正や更新)の手間がかからず、リスクも少ない手法です。
用意するHTMLは一つで済みますし、URLも一つなのでデバイスによる転送も不要です。
ただし、デザインの自由度は低いので、その点は注意しましょう。

各手法の詳細については、こちらの記事では説明していません。
下記のリンクでご確認いただけます。

もはや前提?MFI(モバイルファーストインデックス)の対応方法と注意点

解説猫(仮)
おすすめの手法はレスポンシブかダイナミックサービングですかね。
Googleはモバイル対応の手法としてレスポンシブを推しています。
唐澤さん
URLもソースコードも同じだからですね!
基本的にPCとモバイルで「同じ評価対象」になりますので、SEOでのリスクが少ない手法です。
解説猫(仮)
デザインを拘りたいなら、ダイナミックサービングが良いと思います。
デバイスごとに異なるHTMLを読むので、個別のデザインをしやすい手法です。
唐澤さん
私もダイナミックサービングで提案/制作した経験あります。
サイト次第ですが、見た目や動きが重要となるケースもありますからね。
解説猫(仮)
サイトに適した手法を選ぶといいですね。
次のセクションでレスポンシブのメリット/デメリットを紹介します。
モバイル化を検討中の方、参考に見ていってくださいね。

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

モバイル化の手法について、ザックリと紹介させていただきました。
次は、レスポンシブウェブデザインにはどんなメリット・デメリットがあるのか。
解説していきます

  • SEO観点でリスクが発生しにくい
  • 少ない工数で更新や修正が可能
  • 情報をシェアしやすい(されやすい)

SEO観点でリスクが発生しにくい

前述したとおり、レスポンシブウェブデザインはURL・HTMLが1つです。
これにより、PC・モバイル間でコンテンツに差が出る可能性が低くなります。

2019年12月現在、検索エンジンの評価はモバイルサイトが優先して行われます。
PCにあってモバイルにはないコンテンツは評価されず「もったいない」状態になってしまいます。

また、PCとモバイルでURLが違うと、転送設定(デバイスごとのURL振り分け)や、URLの関連付け(アノテーション)といった作業が発生します。

レスポンシブウェブデザインは1URL1HTMLで管理するため、上記のようなコンテンツ差異が起こりにくく、URLの紐づけや転送の設定が不要です。
それに伴い、設定ミスによるリスクが少ない手法になります。

少ない工数で更新や修正が可能

HTMLが1つなので、ページの修正や更新を行うファイルも1つです。
「修正における作業工数」の観点で言えば、効率的でありがたい手法になります。

情報をシェアしやすい(されやすい)

URLが一つなので、シェアやリンクを行いやすいのもメリットの一つです。
アクセスしたデバイスによらず、「必ず同じURLが使用される」ことになります。

デバイスに応じて別のURLを送らなくていいので楽ですね。
加えて、外部リンクによる評価分散も発生しません。

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

  • デザインに制限が出る(HTMLが複雑になる)
  • 制作に工数がかかる
  • コンテンツの精査が必要になる
  • スマートフォンでの表示速度が遅くなる

デザインに制限が出る(HTMLが複雑になる)

HTMLが1つなので、デバイスに応じて、デザインやレイアウトの設計が必要になります。
例えばコンテンツの順番を変更だけでも簡単にはできません。
場合によっては、別URLを用意するよりも制作コストが高くなる可能性もあります。

このように、制作時点でかかる工数が多いことは、デメリットの一つです。
デバイスによってデザインの見せ方を大幅に変更したい場合、適している手法とは言えません。

コンテンツの見せ方を調整する必要がある

PCとモバイル端末はサイズが異なり、表示できるコンテンツの量も異なります。
サイズの違いにより、コンテンツのサイズ変更や表示の制限が発生します。

ですが、コンテンツを精査・削減してしまうことはSEOの観点から推奨できません。
タップでの表示やサイズ変更など、見せ方を調整する必要があります。

スマートフォンでの表示速度が遅くなる

レスポンシブウェブデザインで構成されたページは、1つのHTMLにPCとモバイル、両方のソースコードが記述されます。
1ファイルあたりのデータ量が大きくなる傾向にあり、表示完了するまでに時間がかかる可能性があります。

(極端ではありますが)例えば下記の設定を行ったとします。

横幅1200px以上:画像Aを表示
横幅1199px以下:画像Aを非表示

モバイル端末(横幅が1199px以下)でアクセスした際も、「画像A」の情報が読み込まれます。
表示速度低下に伴うユーザビリティの悪化に、注意が必要です。

唐澤さん
いろいろ解説しましたが…
正直多くのケースではレスポンシブを推奨します。
解説猫(仮)
何故でしょう?
唐澤さん
一番の理由はリスク回避です。
別URLや別HTMLは、設定ミスによるリスクがあります。
管理面でのリスクはできる限り減らしたいところです。
唐澤さん
次いでSEOでの優位性があげられます。
レスポンシブならPC・モバイル差異による「もったいない評価」によるマイナスを防げます。
転送やアノテーション設定などの懸念がなくなるのも◎です。
解説猫(仮)
なるほど。
デメリット以上に、おすすめする理由が強いわけですね。
唐澤さん
まさにその通り!
もちろん他の手法が絶対不可能という訳ではありません。
ですが「おすすめ」としてはレスポンシブを推します。
解説猫(仮)
よくわかりました。
では、次は実装方法を見てみましょう。
サイトに反映できないと意味ないですからね。

レスポンシブウェブデザイン実装方法

レスポンシブウェブデザインは、下記の手順で実装します。

・meta viewport(ビューポートタグ)を記述
・各デバイスのCSSを記述する

それぞれの実装作業について、詳細を解説します。

meta viewport(ビューポートタグ)を記述する

最初の設定は簡単です。
headタグ内に、下記のコードを記入してください。

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

「Viewport」は表示領域のことで、ページの横幅になります。
端末に合わせた表示領域を指定するタグで、文字や画像などをデバイスサイズに応じて見やすく調整してくれます。

各記述は下記の意味になります。

・width=device-width:アクセスされたデバイスの横幅を取得
・initial-scale:表示する倍率を指定(基本は1.0)

モバイル端末は「縦持ち」と「横持ち」で表示が違います。
表示を変更したい場合は、HTMLとCSSに下記を記入します。

●HTML

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

●CSS

-webkit-text-size-adjust: 100%;

各デバイス用にCSSを記述(メディアクエリ)

PC・スマートフォン・タブレットといった各モバイルごとのCSSを記述します。
CSSファイルそのものは、一つ用意すれば大丈夫です。

●CSSの記述例

@media screen and (min-width: 1024px) { /* 横幅1024px以上 */
#contents01 {
background-color: #CCC; /* 背景色グレー */
}
}


@media screen and (max-width: 1023px) { /* 横幅1024pxまで */
#contents01 {
background-color: #FFF; /* 背景色白 */
}
}


@media screen and (max-width: 480px) { /* 横幅480pxまで */
#contents01 {
background-color: #000; /* 背景色黒 */
}
}

解説猫(仮)
ブレイクポイント(表示切替の境界線)に関しては、まとめてる方がいました。下記になります。

●ブレイクポイント①:600px
●ブレイクポイント②:1024~1280px
┗PC用デザインを基準に作っている場合:1024px
┗シェアの高いタブレットだけは絶対にモバイル用デザインを見せる場合:1025px
┗モバイル用デザインを基準に作っている場合:1280px

引用元:レスポンシブCSSで使うブレイクポイントの決め方

唐澤さん
ブレイクポイントには、絶対的な答えは存在しません。
デバイスのシェアを見ながら、調整していく必要があります。

CSSファイルの設定

メディアクエリの記述が一般的に広く知られていますが、CSSファイルの設定でファイルに分けて設置をするというやり方も存在します。

●スマホ用CSS
<link href=”sp.css” rel=”stylesheet” type=”text/css” media=”(max-width: 767px)” >
 
●タブレット用CSS
<link href=”tablet.css” rel=”stylesheet” type=”text/css” media=”(min-width: 768px) and (max-width: 1023px)” >
 
●PC用CSS
<link href=”desktop.css” rel=”stylesheet” type=”text/css” media=”(min-width: 1024px)” >

複数のファイルを用意し、それをHTMLファイルのhead部分で各CSSファイルと関連付けるようにすれば、ブレイクポイントで適用されるCSSファイルが切り替わるという仕組みです。

唐澤さん
レスポンシブは「実装するだけ」ならシンプルで簡単です。
ですが実際にはデザインを調整する必要があります。
解説猫(仮)
横並びの画像を縦並びにしたり、コンテンツをタップ展開にしたり、サイズを調整したり、みたいなことですね?
唐澤さん
その通り!
デバイスごと違和感のない表示にすることが前提です。
知識・技術が必要ですが、使いやすさも追求しなければなりません。
解説猫(仮)
(む、この流れは!)
なるほどお、コーディングできる人が必要ということですね?
この記事をご覧のみなさん、実装にお困りなら是非ご相談を!
唐澤さん
あれ?
猫さん、案外営業気質強い?
解説猫(仮)
ふぁ!?

まとめ

今回紹介した手法は、いずれもメリット・デメリットがあります。
スマホサイト対応がまだでしたら、サイトのデザイン・目的・ユーザー行動など様々な要素を考えた上で、最適な方法でスマホ対応を実施してみてください。

レスポンシブウェブデザインは、管理やSEO観点からもおすすめの手法です。
猫さんに先を越されてしまいましたが、実装でお困りでしたら是非ご連絡ください!