レスポンシブデザインとは、訪問ユーザーの各種デバイスに合わせた見やすいページを表示させるもので、基本はデバイスの幅を元に読み込むcssを切り替えることによってユーザビリティや利便性を向上させるデザイン設計です。
そして、このレスポンシブデザインを導入することによって昨今のSEOには欠かせないモバイル対応が可能となり、文字や画像を適切なサイズとしてユーザーに見せることができるわけです。
ただし、スマホに対応する方法は他にもいくつかあります。しかしそういった中でもこの“レスポンシブデザイン”は大変メリットが多く、以下のように各ページひとつのURL（htmlファイル）で管理できるため、Googleからの評価を間違いなく統一させることが可能となります。（PCとモバイルを別のファイルで管理する場合、htmlファイルもそれぞれ必要となり、他にも適宜METAタグを記述しなければいけません。）
- スマホ用のhtmlファイルを用意する必要がない
- cssのみで完結する
- デバイスに関係なくURLが1つで済む
- 様々なユーザーに読みやすいページを見せられる
そのため、“レスポンシブデザイン”を導入することで基本的に用意するhtmlファイルは1ページに付き1つで済み、そのファイルを更新していくだけで良いので作業効率は当然良く、モバイル用ページと分けて管理している際に起こりうる単純なミスなどを防ぐことも可能です。
特に最近ではPCよりもスマホからの検索が多い傾向にありますので、PC用ページをスマホで読み込むといった非常に見づらいデザインを表示していれば離脱率も増えるでしょうし、そもそも文字が小さく表示されるため、利便性も低くなってしまいます。（最近ではほとんどのサイトがこのレスポンシブデザインを導入してスマホ対応しているのではないでしょうか？）
他にもWordPressをお使いの場合だと、すでにモバイル対応済みのテーマがほとんどですので、サイトをリニューアルするタイミングでWordPressを導入するというのもひとつの手です。（最近では特にデザインに優れたテーマやSEOに特化したテーマなど実に様々な種類が公開されています。）
では今回はこのモバイルファーストやスマホ対応に必要な“レスポンシブデザイン”について意味やメリット・デメリット、そして作り方などを詳しくご説明していきたいと思います。
目次
レスポンシブデザインとは
レスポンシブデザインとは訪問するデバイスの幅に合わせてcssを切り替え、文字・画像・レイアウトなどを適宜見やすく変更する方法で、正式名称は…“レスポンシブウェブデザイン（“responsive web design”、または“RWD”）と呼ばれています。
それによってひとつのhtmlファイルで様々なデバイスに対応することが可能となり、主にPCとスマホの2種類だと思われますが、最近では実に様々なサイズのデバイスが登場していますので、細かく対応しているという方も多いかもしれません。
また、実際にはhtml側にビューポート（viewport）と呼ばれるMETAタグをhead内に記述し、訪問するデバイスの幅によって適用させるcssを切り替えているため、拘ればいくらでも細かく設定することが可能です。（その代わりデザイン変更する際はその数だけcssを修正する必要があるので、ざっくりとPC・タブレット・スマホ辺りで用意しておけば問題ないでしょう。）
特に最近ではユーザビリティも間接的に検索エンジンの評価に関わる重要な要因のひとつとなっているため、特にモバイル対応は必須とも言える要素のひとつであり、そもそもPC検索よりもモバイル検索の方が多く、これからもその差は増していくものと思われるのでユーザーの利便性を考慮して対応したり、PCとはまた異なるユーザー行動を解析してコンバージョンに繋げることが大切です。
というのも以前はWeb上で買い物をする場合、クレジットカードを入力するといった行動そのものが不安に感じられる方も多かったのかもしれませんが、今はむしろ気軽にスマホから買い物を済ませる方が非常に多く、外出を控えるという点においても需要は今後も増え続けていくと思われます。そのためにもどういった端末・デバイスからも見やすいレイアウトでページを用意する必要があり、ユーザーヒートなどを参考に改善を繰り返すということも重要となってくるでしょう。
レスポンシブデザインのメリットとデメリット
そしてこの“レスポンシブデザイン”は、上記の通りひとつのhtmlで様々なデバイスに対応できる（文字や画像が見やすい・読みやすい）という点が大きなメリットと言えるわけですが、以下の通りデメリットもいくつか考えられます。
- 導入するためにはcssの知識が必要
- デザイン変更する際に適宜cssの修正が必要
- PCと共通で画像ファイルを読み込むため表示スピードに影響する
- スマホ特有のUIが必要となる（ハンバーガーメニューの作成など）
特に既存のサイトをレスポンシブデザインにするには各種対応したいデバイス用のcssが必要で、ブレイクポイントと呼ばれる横幅によって読み込むcssを切り替えているため、主にcssの知識が必要となります。
※このブレイクポイントはcssファイルに任意で記述する要素です。
他にも画像は共通して読み込むため、どうしてもスマホの場合だと環境によっては読み込みスピードにもかなり影響してしまい、離脱率も高くなってしまいますので画像の適切な圧縮方法をはじめhtmlファイル自体の軽量化が必要となってきます。この辺りに関しては「PageSpeed Insights」を参考に読み込みスピードを確認してみてください。
それと、よく“デザインに制限がある”といったデメリットを見かけますが、基本的に“モバイル対応”することがポイントとなるため、PCとモバイルでデザインを大幅に変える必要はありません。むしろPCで見るデザインをスマホで見やすく整理することが重要となりますのでブロック要素で組み立てていきます。
そしてなんと言っても“モバイルファーストインデックス”によってモバイル用のページを元に検索順位を決めるといったGoogleからの公表があり、今後は検索順位にも影響してしまうため、メリット・デメリットをしっかりと把握した上で必須とも言える対応となります。
つまり、ここで重要となるのがPCとスマホのコンテンツ内容をほぼ同じくすることです。
スマホの読み込みスピードを上げるためにcssでコンテンツを一部隠してしまうと検索順位にも影響する可能性があり、「モバイル ファースト インデックス登録に関するおすすめの方法 | 検索セントラル | Google Developers」にも記載されているように、インデックスはモバイルサイトから行われるため、モバイル用のページをシンプルにしてしまうと評価が落ちることで検索順位が下がってしまうというわけです。
レスポンシブデザイン集を参考にしてみる
基本的にレスポンシブデザインとは各種デバイスに合わせたcssを記述するだけなんですが、中には拘ったデザインでうまく表現しているサイトも数多く公開されており、特に秀逸なレスポンシブデザインを集めたサイトもいくつか存在しますので、色々なデザインを参考にしてみても良いでしょう。
こういった様々なサイトを参考にしてみると、ビューポートやメディアクエリを使用したレスポンシブレイアウトだけでなく、%で横幅を可変させる“リキッドレイアウト”や“フレキシブルレイアウト”といった手法でモバイル対応しているサイトも見受けられます。しかし、それらはcssを切り替えて表現するわけではありませんので、部分的にコンテンツを入れ替えたい場合など柔軟にモバイル対応するのであればレスポンシブデザインの導入をおすすめします。
どちらにしても上記のようなモバイル対応だと1ページにつきhtmlファイルがひとつで済みますから、今後の更新などサイト管理が非常に楽です。もし今もまだPCとモバイルを別のURLで管理しているなら、評価を統一させるためにもレスポンシブデザインの導入を検討してみてください。（検索エンジンにこれらの評価を統一させるタグも存在しますが、全てのページに記述しなければいけないのでかなりの手間がかかってしまいます。）
そしてなんと言ってもデザインに統一性を持たせることによって、どういったデバイスからアクセスしても画面の幅に合ったページが表示されますので当然ブランディングにも繋がります。
レスポンシブデザインの作り方
通常のサイトにレスポンシブデザインを導入するには以下のような流れで進めていきます。（テスト環境があればそちらで構築し、動作確認してみると間違いありません。もしくは該当するページとcssを複製して本番環境でテストしてみても良いでしょう。）
- htmlファイルのhead内にビューポートを記述する
- cssもしくはhtmlにメディアクエリを記述する
- cssで調整していく
このようにレスポンシブデザインの導入は意外とシンプルです。
基本的に必須となる“ビューポート”を記述して、デバイス毎のcssを適宜用意するだけでモバイル対応となるレスポンシブデザインの完成です。
まずはhtmlファイルのhead内に以下のビューポートを記述します。（METAタグはbody内だと無視されるので必ずhead内に記述してください。）
<meta name="viewport" content="width=device-width">
こちらを簡単に説明すると…属性にviewport、プロパティにdevice-width（デバイスの横幅という意味）を指定するだけです。そもそもビューポートとはWebページの表示領域を意味するため、要は訪問するユーザーが使用するデバイスの横幅といった指定となり、この横幅によってcssを切り替えているというわけです。
続いてメディアクエリをhtmlファイル、もしくはcssに記述します。
こちらは横幅を指定して、それに該当するデバイスにcssを適応するという意味となり、下記の場合だと768pxを最小値としてPC用・767pxを最大値としてモバイル用のcssを記述していきます。（横幅768px以上のデバイスはPC用、同じく横幅767px以下のデバイスはモバイル用という意味です。）
※ここで指定する数値をブレイクポイントと呼びます。
@media screen and (min-width: 768px) {
（ここにPC用スタイルを記述）
}
@media screen and (max-width: 767px) {
（ここにモバイル用スタイルを記述）
}
そして、うまくモバイル対応できているかどうかの確認は実機で確認するのが一番です。しかし現在、実に様々なサイズのデバイスが数多く存在しますので、レスポンシブデザインのテストツールなどを活用し、例えば「Responsinator」だとURLを入力するだけでいくつものデバイスでの表示を一括で確認できるため、手元にないデバイスなどのチェックを簡単に行うことも可能です。
cssの書き方について
例えばPCとタブレットを同じ表示でモバイルのみ分けて対応するとしたら、上記のようにメディアクエリで訪問してきたデバイスの横幅で読み込むcssを切り替えていきます。
この場合、基本的に現状のcssはPC用に作られているかと思いますので、モバイル用のメディアクエリに括られた箇所に一旦PC用のcssをまるごとコピーし、横幅や横並びしていたものを縦に組み直したり、フォントサイズを微調整したりなど…順番にモバイル対応していくとPCとモバイルで管理しやすいのでおすすめです。（PC用・スマホ用のcssをしっかり分けて記述するということです。）
そして、メディアクエリさえしっかりと記述していればPC・スマホで適応されるcssが振り分けされるので、cssファイルを分けて管理しても良いでしょうし、ひとつのファイルで管理しても問題ありません。特にPC用とモバイル用をそれぞれ独立して作成していない場合（多くの箇所を共通のcssで対応しているケース）だと、例えばPCの方を修正したつもりがモバイルの方では崩れてしまうなど後々の管理が非常に面倒になります。
その大まかなモバイル対応としては…
- 各コンテンツの横幅（横スクロールが出ている箇所の修正）
- floatなどで横並びしていたものを縦並びに変更
- 基本となるフォントサイズや見出しなどの変更・調整
- グローバルメニューをモバイル用に変更
- 読み込み速度の調整・改善
など、少なくてもこれらの修正が必要で普段からcssに慣れていればそこまで面倒な作業ではありません。また、今回は手動でサイトを制作した場合のモバイル対応を想定してご説明しているわけですが、WordPressをお使いならほとんどのテーマがモバイル対応しているかと思われますので、これを機に導入を検討してみるというのもひとつの手です。
他にも画像など重くなりがちなファイルは別途モバイル用の画像を用意して分岐させたり、“WebP（ウェッピー）”と呼ばれる圧縮方式を導入するなど検討してみると良いでしょう。（cssでdisplay:none;を記述して部分的に隠しているケースも見受けられますが、実際には読み込まれているため、軽量化にはなりません。）
レスポンシブデザインのサイズについて
レスポンシブデザインは様々なデバイスの幅に対応できるため、ブレイクポイントの数値に悩むかもしれませんが、PC・タブレット・スマホの最大値や最小値を参考にすると考えやすくなります。
その前にブレイクポイントに設定するpxは単純に解像度を指定するのではなく、cssピクセルと呼ばれる数値を使用します。というのも…同等サイズのデバイスでも解像度が異なることで鮮明で綺麗な機種も数多く存在しますよね？それらをデバイスピクセル比と呼ばれる疑似的なピクセル数によってまとめているわけです。
例えばこちら「iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 – Qiita」のデバイス一覧を見てみると、ここでブレイクポイントに使用するのがポイント（cssピクセル）の数値となり、例えばモバイル対応はiPadの最小値768×1024の“768px”を基準にしてみると良いでしょう。（2021年9月24日に第6世代となるiPad miniが744×1133のサイズで発売されています。）
※参考のページでは恐らくポイントがcssピクセル・Retinaがデバイスピクセル比・ピクセルが解像度のことを意味しているかと思われます。
こうすることでタブレットの最小値以下はモバイル用のcssが読み込まれ、スマホの検索ユーザーに対して快適に閲覧してもらうことが可能となります。この辺りは閲覧ユーザーがどういったデバイスを利用しているのか？サイトの方向性にもよりますので、一度アナリティクスで確認してみても良いでしょう。（極端な話、モバイルが98%を占めているのならモバイルサイトに注力するとサイトの売上げにも直結するため、PCには時間をかけない・後回しといった考えが重要です。）
ただ、国内ではiPhone使用率が非常に高いので、そちらの数値を参考にしていますが、Androidを使用しているユーザーも少なからず存在します。この辺りの表示も確認したい場合はChromeのデベロッパーツールを活用すると便利です。（確認したデバイスの種類を追加することも可能です。）
テンプレートを活用する
レスポンシブデザインを導入するにはビューポートを記述してメディアクエリでcssを追加していく他にWordPressを検討するとお伝えしました。しかしWordPressを導入するほど本格的な運用をするわけではなく、更新頻度も低い場合なら無料で公開・配布されているレスポンシブデザインに対応済みのテンプレートを活用するといった手もあり、それだと文言や画像の差し替えのみでモバイル対応かつ高品質なサイトを簡単に構築することが可能です。
こちらは有料版や無料版がありますので、しっかりと確認した上でファイル一式をダウンロードして適宜差し替え作業を行ってください。
そして、これは上記の通りあまり更新性のないサイトにおすすめの方法で、すでにモバイル対応が細かくcssに記述されているため、ある程度カスタマイズしたい場合は融通が利かず若干面倒かもしれません。（Bootstrapも便利ですが、cssに慣れている方なら逆に更新しにくく感じられるのではないでしょうか？）
レスポンシブデザインの注意点
レスポンシブデザインとはモバイル対応、すなわちモバイルフレンドリーなサイトにすることを意味し、先ほどご紹介した見た目のチェックだけでなく、「モバイル フレンドリー テスト – Google Search Console」を活用して検索エンジンからも正しく認識されているかチェックしましょう。
ここでは主に以下のようなエラーが確認でき、ピンポイントで修正していくことが可能です。
特にテキストやボタンに関してはスマホの場合、フォントサイズはもちろん行間に気を使ったり、視覚的に押せるボタンであることをひと目で伝える必要がありますので、実機で試してみてユーザビリティなんかも確認しておくべきです。
- 互換性のないプラグインを使用しています
- ビューポートが設定されていません
- ビューポートが「端末の幅」に収まるよう設定されていません
- コンテンツの幅が画面の幅を超えています
- テキストが小さすぎて読めません
- クリックできる要素同士が近すぎます
そもそもWebページは“読ませる・見せる”、そして伝えることが最も重要となりますので、実機でチェックしてみて読みにくいと感じたとしたら検索ユーザーも同じく思うでしょうし、ブラウザバックして別のサイトのページへと遷移することでしょう。そうならないためにも（サイト内を回遊してもらうためにも）PCとの内容を踏襲しつつ、モバイルでも見やすいデザイン設計を心がけてください。
他にも基本的に全て共通の画像ファイルを使用することになりますので、モバイルの場合だと検索する環境によっては読み込みに時間がかかってしまうかもしれません。これを回避するためにもなるべく画像を使わずWebフォントなどで対応したり、見せ方としてのエフェクトをなるべく控える、デフォルトのフォントを使用するなど…様々なファイルの軽量化が重要となってきます。
まとめ
今回はモバイル対応には欠かせない「レスポンシブデザイン」について意味や作り方について詳しくご説明しました。
上記の通りこれからのSEOはモバイル対応が必須です。そして検索そのものもスマホからのユーザーがPCを超えているため、ひとつのhtml（php）ファイルで管理が済むレスポンシブデザインは今後の更新が非常に楽で、ほとんどのサイトが導入している柔軟なモバイル対応と言えます。
そして、レスポンシブデザインを導入した後もユーザーの行動をチェックしてスマホを中心に改善を行っていくと良いでしょう。というのもPCからの検索ユーザーとモバイルからの検索ユーザーでは検索意図や調べたい内容そのものが違うケースも考えられるため、それぞれに合った導線やボタンの見せ方が必要となります。（もちろんサイトの傾向にもよりますのでアナリティクスでどちらが多いのか調べてみて下さい。）
また、レスポンシブデザインにはどうしてもPCと同じファイルを読み込むケースが多く見受けられるため、ページによっては読み込みスピードにも影響してしまうので、そちらも合わせて定期的にチェックしてみると良いでしょう。
「キーワードファインダー」
キーワード選定でお悩みですか？
「キーワードファインダー」なら、検索ボリュームから順位チェック、関連語や新しいキーワードの発見など、アクセスを伸ばすために重要なキーワード選定を自動取得、一括管理が可能！
また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。この整理された情報を元にあなたの集客経路の拡大にお役立てください！
