レスポンシブデザインに対応したWebサイトの重要性とポイント スマートフォンやタブレットが広く普及し、モバイルからWebサイト検索を行う人が増加しました。このようななかで定着されているのが、モバイルフレンドリーという考え方です。モバイルフレンドリーを意識したレスポンシブデザインのWebサイトを構築すれば、効果的なSEO対策につながるだけでなく、UX（ユーザーエクスペリエンス）の向上にも貢献します。この記事では、Webサイトをレスポンシブデザインにする必要性と、レスポンシブ対応の際に重視すべきポイントをご紹介します。

 

Googleは、モバイルファーストインデックスというロジックを採用しています。モバイルファーストインデックスとは、Webサイトの評価や検索順位を決定する対象として、PCではなくモバイル対応されたWebコンテンツを採用する仕様のことです。これはGoogleが「利用率の高いモバイルからの操作性こそWebサイトに重視されるべき」とするモバイルフレンドリーの理念を表しています。モバイルフレンドリーなWebコンテンツは、SEOにおける評価や順位を向上させるだけでなく、Webサイトのユーザーエクスペリエンスの向上にも寄与します。

 

Googleの推奨するモバイルフレンドリーの方法として、「レスポンシブデザイン」「ダイナミックサービング」「セパレートURL」の方法があります。レスポンシブデザインとは、スマートフォンやタブレット、ゲーム機など、多様化するマルチデバイスに対応するためのWebサイト制作の手法です。近年多くのWebサイトでレスポンシブ対応が進んでいますが、レスポンシブデザインには、デバイスすべてで同じURLを利用できる、更新がしやすい、SEO順位が上がるといったメリットがあります。一方でレスポンシブデザインは表示デバイスのスペックへの配慮が必要になり、回線速度や画面サイズなど幅広いことを考慮しなければなりません。またレスポンシブデザインは基本的に単一のHTMLを使用するため、ほかのモバイルフレンドリーの方法と比べると設計上の制約があります。

 

モバイルフレンドリーのダイナミックサービングは、ユーザーエージェントなどを参照してデバイスを判別し、それぞれに異なるHTMLを作成する方法です。レスポンシブデザインと同じくすべてのデバイスで共通のURLを利用でき、更新が比較的容易で拡張性もありますが、開発コストがかかるのがデメリットです。ほかには、セパレートURL、つまりURLそのものを分けるモバイルフレンドリーもあります。デバイスごとに専用サイトを設置できるため、それぞれの特性に最適化したWebサイトを構築できます。しかしレスポンシブデザインとは異なり、デバイスごとにURLが変わってしまうため、ユーザーエクスペリエンスにおいてはマイナスになることがあります。

 

モバイルでWebサイトを閲覧するのが当たり前になった現在、レスポンシブデザインなどのモバイルフレンドリー対応ができていないWebサイトは、Googleの評価やSEO順位が下がる傾向にあります。またレスポンシブ対応・モバイルフレンドリー対応はWebサイトの操作性や視認性の違いとも深く相関しており、企業やブランドのイメージにも影響します。そのため、企業Webサイトは早急にレスポンシブ対応、あるいはモバイルフレンドリー対応を行い、ユーザエクスペリエンスの向上をはかることが大切です。

 

モバイルフレンドリー対応には3種類ありますが、Webサイトで高い効果を得たいと考えるならレスポンシブデザインです。レスポンシブデザインは、単一のHTMLを用意し、画面のサイズに応じて適応するCSSを切り替えることによって、マルチデバイスに対応できるようにする手法です。デザインを切り替えるためにCSSのメディアクエリを使用するので、レスポンシブデザインではほかのモバイルフレンドリー方法のように、デバイスのユーザーエージェントを気にする必要がありません。

 

Webサイトをレスポンシブ対応できれば、モバイルフレンドリーに対応しているとしてGoogleの評価やSEO順位の向上が期待できるため、強力なSEO対策になります。レスポンシブデザインはワンソースなのでリソースの更新や管理が簡単で、すべてのデバイスで同一のURLを使用できるためユーザーエクスペリエンス向上にも寄与します。レスポンシブ対応やモバイルフレンドリー対応によって検索順位が上がり、ユーザーエクスペリエンスが向上することによって、WebサイトのPV数やコンバージョン数も向上するでしょう。コンテンツをSNSで共有する際にも、レスポンシブデザインなら単一のURLなので共有やリンクが簡単に行えます。このようにモバイルフレンドリーの方法のなかでもレスポンシブデザインのメリットは多く、Webサイトを企業戦略の一翼と位置付けるのであれば、レスポンシブ対応が最適です。

 

SEO対策としてレスポンシブ対応・モバイルフレンドリー対応を行っていたとしても、Webサイトがユーザーにとって快適なものになっていなければ、早々に離脱されてしまうリスクがあります。そのためレスポンシブデザインを導入する際には、見やすさや読みやすさ、操作のしやすさとユーザーエクスペリエンスを意識することが大切です。

 

○Viewport（ビューポート）を設定する

ビューポートとは、PCやスマートフォン、タブレットなどのデバイスにおける表示領域のことであり、レスポンシブ対応においてはとくに重要な要素です。スマートフォンはPCと比べて画面サイズが小さいため、レスポンシブデザインとしてそれぞれの領域を設定することによって、表示を見やすくする必要があります。レスポンシブデザインにおけるビューポートでは、ブラウザの表示幅（width）を指定することで、スマートフォンの画面サイズにフィットした表示を実現できます。widthの値には200から10000までの値を設定できますが、一般的なレスポンシブデザインでは「width=device-width」と指定するケースが多いでしょう。レスポンシブデザインとしてdevice-widthを指定した場合、「各デバイスの解像度÷デバイスピクセル比」が自動的に算出され、解像度が異なるデバイスであっても同じような表示領域で描画が可能になります。

 

○ユーザビリティを重視する

レスポンシブ対応、モバイルフレンドリー対応において、ユーザビリティとくに注視すべきポイントです。もしWebサイトがレスポンシブ対応・モバイルフレンドリー対応されていなければ、入力フォームやリンク、ボタンなどがスマートフォンでは小さく表示され、操作する際に不便です。ユーザビリティは低くなり、ユーザーエクスペリエンスが低下するばかりか、SEOにも悪影響を及ぼします。このためレスポンシブデザインにおいては、PC、モバイルいずれの場合でも操作がしやすくなるような配慮が必要です。選択や入力が必要なレスポンシブデザインでは、各要素間の距離を空けるなどによって、ストレスなく入力できる工夫をしましょう。

 

○視認性も重視する

小さなスマートフォンの画面では、細かい字を読むことにストレスを感じる人も少なからずいるものです。レスポンシブ対応・モバイルフレンドリー対応されていないWebコンテンツは、スマートフォンにおいて文字やアイコン、ボタンなどがすべて小さく表示され、読む気を失ったユーザーに離脱されるリスクがあります。このためレスポンシブデザインにおいては、スマートフォンで表示される文字の大きさや広さ、文章の長さ、段落の長さなどへの配慮が必要です。またレスポンシブなクリエイティブにおいては、サイズが小さすぎたり解像度の極端に低い画像は使用しない、alt属性で代替テキストを使用するといった配慮もあると良いでしょう。

 

○再生不可能な動画コンテンツを使用しない

動画コンテンツは近年有力な集客ツールであり、多くのWebサイトで利用されています。ただしレスポンシブデザインでは、PC、モバイルいずれの場合でも再生できるもの以外は使用しないよう注意が必要です。レスポンシブデザインで使用する動画コンテンツはサポートされている形式のみとし、<video>、<embed>、<iframe>、<object>などのHTMLタグを使用して識別しやすくする工夫も大切です。なお、Flash形式は現在のモバイルデバイスではほぼサポートされていないため、使用しているWebサイトはレスポンシブ対応の際に見直しが必要になります。

 

○ポップアップ広告を使用しない

モーダルなどのポップアップ広告は、商品やブランドを強く印象付けられることから、現在多くのWebサイトで利用されています。しかし実は、このようなポップアップやダイアログは、レスポンシブ対応やモバイルフレンドリー対応、SEO対策には逆効果です。Googleはポップアップ広告やダイアログ（インタースティシャルな広告）を「ユーザーによるコンテンツ閲覧の妨げとなるページ要素」と判断し、ユーザーの不満、さらにWebサイトへの信頼度の低下さえ引き起こすものであると指摘しています。
（参考：煩わしいインタースティシャルやダイアログを避ける｜Google検索セントラルhttps://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials?hl=ja）
企業マーケティングとしてレスポンシブデザインを導入する際には、コンテンツを邪魔するポップアップ広告は使用しないよう心がけましょう。 。

 

○サイトスピードを向上させる

Webコンテンツの読み込み速度が遅ければ、どれほど自社の商品やブランド、サービスに関心を持ったユーザーであったとしても、しびれを切らして離脱してしまう恐れがあります。レスポンシブデザインをWebサイトに導入する際には、サイトスピードを向上させる取り組みも不可欠です。レスポンシブ対応としてサイトスピードを向上するためには、たとえば、CDN（コンテンツデリバリネットワーク）を導入する、画像を次世代フォーマットへ変更する、HTMLを最適化する、JavaScriptやCSSなどの不要タグを削除する、サーバーを増強するなどの方法があります。

 

○モバイルフレンドリーテストを実施する

Webサイトのレスポンシブ対応やモバイルフレンドリー対応が完了したら、専用ツールを用いてモバイルフレンドリーテストを行いましょう。WebコンテンツのURLを入力するだけでモバイルフレンドリーかどうかがスコア化され、スクリーンショットとともに、問題になる内容が一覧表示されます。モバイルフレンドリーではないと指摘された問題点をもとに、さらなるレスポンシブ対応・モバイルフレンドリー対応を行って改善していくことが大切です。

 

モバイルフレンドリー対応、とくにWebサイトをレスポンシブデザインにすることで、Webサイトの評価は向上しSEO対策にもなります。一方で、レスポンシブ対応やモバイルフレンドリー対応だけを行っていればWebサイトの評価が上がるわけではなく、Webマーケティングにおいては継続的なサイト更新がとくに重要です。より効果的な集客を目指すなら、Webサイトのレスポンシブ対応・モバイルフレンドリー対応とともに、サイト更新の頻度や方法についても見直しましょう。

 

多くの企業が採用しているワードプレスは、多機能のためプログラミングなどの知見がない人には難易度が高く、更新がしにくいという課題があります。また、セキュリティの脆弱性を突かれてサイバー攻撃を受けるリスクもあります。自社内でのレスポンシブ対応、モバイルフレンドリーに苦慮している、限界を感じているという企業もあるかもしれません。毎回Webサイトの更新に苦労している、レスポンシブ対応やモバイルフレンドリー対応に躓いているというのであれば、当社のオリジナルCMS「更新プログラム＋」はブログ感覚で簡単に操作ができ、運用担当者の作業負担を軽減できます。また高いセキュリティ性能でサイバー攻撃リスクにも備えられ、レスポンシブデザインやモバイルフレンドリーにも対応しています。

 

当たり前のようにスマートフォンでWeb検索を行う現在、企業Webサイトのレスポンシブ対応・モバイルフレンドリー対応は必須といえます。まだレスポンシブ対応やモバイルフレンドリー対応ができていないという企業Webサイトは導入を検討し、UXの向上で集客を加速させていきましょう。自社サイトの更新作業やレスポンシブ対応、モバイルフレンドリー対応に悩みがあるという方は、お気軽にご相談ください。