今さら聞けないWebサイトのレスポンシブ対応を行うべき理由と依頼時の注意点

Webサイトの利用や検索など、スマホで閲覧するユーザーが増加しています。
その中で求められているのが、スマホやPC等どの媒体でも快適に使えるサイトデザインです。ここでは、今さら聞けないレスポンシブ対応のメリットと対応方法をご紹介します。

「自社サイトをレスポンシブ対応したいけど、どこに相談したらいいかわからない」という方は、リカイゼンまでお問い合わせください。
リカイゼンでは、サイトのレスポンシブ対応など部分的な依頼にも対応可能な会社のみを厳選して無料で紹介いたします。
まずは対応可能かどうかの相談だけしたいという方も、サポートデスクが電話対応いたしますので、お気軽にご連絡ください。

1.レスポンシブ対応とは？

レスポンシブ対応とは、画面に合わせWebサイトのデザインが最適化されることです。PCだけではなくスマホなどのデバイスに合わせ、画面の表示形式やデザインが変更となります。 サイトを新たに作るタイミングでPCとモバイル端末向けで開発することが理想的ですが、既存サイトのデザインを引き継いで、レスポンシブ対応させることも可能です。既存サイトがPC画面を想定して作られている場合、PC画面の見え方とスマホやタブレット画面での見え方では、ユーザーからの印象が異なります。それぞれの画面のサイズに応じて、ブレイクポイント（どの画面サイズ用のデザインを適用させるかの切り替え点）を設け、制作を行うかたちになります。

２．レスポンシブ対応が必要な理由

①「ユーザビリティ」の問題

レスポンシブ対応になっているサイトではユーザーにとってどんなメリットがあるのでしょうか。 大きなポイントとして、1つのURLになったことにより、ページのシェア・リンクがしやすくなりました。例えば、PCサイトが友人からシェアされたとき。レスポンシブ未対応だと、スマートフォンで閲覧しようとすると、リダイレクトされる時間がかかりユーザーの離脱につながります。しかし、レスボンシブ対応だと、同一のURLでスマートフォン用に最適化されるのでページからの離脱を防ぐことが出来るのです。

②「SEO」対策で重要に！

レスポンシブ対応が必要な理由として、最近重要度が高まったのが「SEO対策」です。PC向けサイトは、モバイル端末では見づらくて使いにくいことがあります。現在、インターネットの利用ユーザーの多くがスマホからであることからも、レスポンシブ対応はほぼ必須となっています。レスポンシブ対応が言葉として登場し、一般に広まり始めたのは2011年の年末頃からです。Googleも「モバイルフレンドリーアップデート」として2015年4月から検索結果の表示順位の要因の一つとして取り入れることを発表し、2018年7月にはモバイル端末での表示速度をアルゴリズムに追加することを発表しました。

レスポンシブ対応を行うことで、モバイルフレンドリー（スマホ対応）となることはもちろんですが、URLをパソコン用とモバイル用に分ける必要がなくなります。1つのページを１つのURLで管理することが出来ます。URLが１つなので、ユーザーの利用環境に左右されずTwitterやFacebookでも同一のURLとなります。例えば、PCとモバイルでURLが区別されている場合（https://example.com/pcとhttps://example.com/mobile）、意図しないURLがシェアされてしまい、評価も2分されてしまう恐れがあります。もちろんサイト運営側で、OGP（Open Graph protocol）を適切に設定することで対応することも可能です。しかし、同じコンテンツのページをいくつも管理する工数を考えると、やはり単一のURLで管理が可能なレスポンシブ対応がおすすめです。

また、レスポンシブ対応されていないサイトでよくある問題が、PC向けサイトとスマートフォン向けサイトをユーザーの端末に応じてリダイレクトする処理です。多くはユーザーエージェントと呼ばれる識別子をもとにリダイレクト処理を行うのですが、新しい端末やブラウザが登場するたびに対応が必要になるため、対応までの間エラーが発生しやすいこと、またそのエラーがユーザーエクスペリエンス（UX）に悪いこともあり注意したいポイントです。

・【迷ったらチェック】モバイルフレンドリーなサイトか確認しよう

レスポンシブ化を考えているが、自社のサイトにどの程度必要かが分からないとどうしても後回しになってしまいます。適切な判断をする材料として、モバイルフレンドリーテストを行うとよいでしょう。モバイルフレンドリーテストとは、Googleが提供するテストツールです。特に「SEO対策」としてレスポンシブ対応を行う際には、モバイルフレンドリーテストを行うことで自社サイトの対応状況を視覚的に確認することが出来ます。

▷モバイル フレンドリー テスト - Google Search Console
https://search.google.com/test/mobile-friendly

対象サイトのURLを入力すると、自動でそのサイトがモバイルフレンドリーか否かを判定してくれます。例えば制作を外注した際に、制作会社との目標共有としてテスト結果をひとつのKPIとしてもよいでしょう。

レスポンシブ化が必要なサイトでしたら、依頼を検討してみるとよいでしょう。
レスポンシブ対応を行うことで得られるメリットも多いので、レスポンシブ化を行う場合の費用や制作期間を確認して検討してみるのはいかがでしょうか。
ビジネスマッチングサービスのリカイゼンでは、完全無料でサイトのレスポンシブ化に乗ってくれるような制作会社を見つけることができます。

3.Webサイトのレスポンシブ対応での注意点

・複雑なCSSデザインによるコストがかかる

レスポンシブデザインは、1つのHTMLとCSSを使って、デザインのレイアウトを変えています。この複雑なレイアウト変更を表示させるには一定の技術が求められてきます。

・転送データが重くなる表示が遅くなる場合も

スマートフォンのサイトは画面の大きさ上、PCサイトよりも情報量が少ないことが一般的です。しかし、レスポンシブの場合だと、スマートフォンサイトでもPCサイトと同じ情報量をフルで読み込むため、データ量が重くなってしまうことがあります。

・デザイン・レイアウトに制約がかかる

レスポンシブサイトでは、PCサイトでのデザインとスマートフォンサイトのデザインの折衷案が採用されることが多いです。その際、複雑なデザインは表示サイズによっては崩れてしまう場合があります。また、レイアウトやデザインを修正したい場合、まるごとHTML・CSSを書き換える必要があるため、始めのデザイン構成力が非常に求められます。

4.レスポンシブ対応を外注する際のポイント

まずは制作会社とやり取りを円滑にすすめるために、下記の情報を予め確認しておくことをおすすめします。

・確認用端末（デバイス）を設定する

昨今、ユーザーが利用するデバイスはiPhoneやAndroidなどのスマートフォンや、iPadやHuawei MediaPadなどのタブレットなど非常に多くの機種が存在します。画面の大きさも違えば、解像度も異なります。例えば、Retinaディスプレイは通常のPCに比べ解像度が非常に高いです。
これらすべての機種に対応できることがベストですが、現実的ではありません。実際レスポンシブ対応を行う際は、「iPhone 5s/5c以降で表示を確認する」「タブレットはiPad（第5世代）での表示を確認する」という形で検証する端末を最初に設定した上で構築していきます。

・ユーザーのデバイス毎のデータを確認する

対象サイトの閲覧ユーザーが、どのデバイスを使用しているか確認し、対応端末の設定を決めます。既存のPCサイトをレスポンシブ対応にする場合は、Googleアナリティクスなどの分析ツールで確認することができます。
デバイス別のデータが表示され、デスクトップ、モバイル、タブレットどのデバイスでのアクセスが多いのかをひと目で確認することができます。極端な話ですが、例えばタブレットを利用しているユーザーの比率が低い場合、タブレット対応のために時間を費やすより、その時間をコンテンツ制作やデザイン、情報設計に充てるほうが有意義だと判断することができます。

5.レスポンシブ対応Webサイトの外注先とは

いまや、多くのWEB制作会社がレスポンシブ対応での制作は行っています。しかし、単にレスポンシブ化させるだけでなく、各デバイスに応じてユーザーの利用シーンに適したデザイン設計ができる会社は貴重です。
デバイスに応じて画面の大きさ、解像度は異なりますので、どのような情報をどのような順で表示させるか、どのような文字の大きさ、画像の大きさ、ボタンの大きさを用意するかなど、デバイスごとのデザイン設計に強い企業に依頼することがおすすめです。

サイトのデザイン制作やレイアウトの微調整などを得意とする会社を探すなら、リカイゼンに問い合わせてみましょう。
専任スタッフがデザイン・画面設計が得意な会社だけを厳選して紹介してくれるので、時間や作業工数を少なく、依頼先を見つけることができます。