レスポンシブWebデザインでスマホ・タブレット・パソコンに対応

レスポンシブウェブデザイン (Responsive Web Design, RWD) という言葉をご存知ですか？レスポンシブウェブデザインとは、ユーザーの利用しているデバイス（パソコン、タブレット、スマートフォンなど）に関係なく、同じ URL で、画面サイズに応じて最適なページが表示できることを目指したウェブデザインの手法です。当社ではレスポンシブウェブデザインのホームページ制作を推奨しております。

Googleの発表によれば、スマートフォンの急速な普及により、モバイル端末からの検索が急増してPCからの検索を上回ったとか。そのため、今後はモバイルユーザー 向けの利便性を重視していくことは間違いありません。スマホ対応はSEO対策の観点から見ても、より重要になってくるといえるでしょう。

そのモバイル対応に有効なのが、レスポンシブウェブデザインの導入です。

従来は、パソコン用のホームページとスマートフォン用のホームページを別々に用意する必要がありました。しかし、Webサイト表示技術の進歩と、ウェブデザイン手法の成長により、一つのホームページで様々なデバイスをサポートできるようになったのです。

いいことだらけのレスポンシブウェブデザインですが、もちろんメリット・デメリットはありますので解説します。

レスポンシブウェブデザインの主なメリットを紹介します。

パソコン用とかスマートフォン用とかソースを別々に用意する必要がないので、文言修正や画像差し替えなどの簡単な作業は一回で済みます。モバイルサイトは情報が古いままだった・・・などの表示エラーがなくなります。情報の統一が保てるのはメリットが大きいですね。またページの変更が一回で済む分、費用も半分で済みます。

パソコン用、スマートフォン用と別々にホームページを用意することでURLが別々になると、ユーザーのデバイスによっては最適でないページを表示させてしまうこともあります。単一のURLであるということは、ユーザーデバイスに適したページを表示できるので、シェアされる角度も上がります。

Googleはレスポンシブウェブデザインの使用を推奨しています。Googleの検索エンジンクローラーにとって単一のURLであることは、巡回の手間が少なくなるという利点があるためです。ただGoogleは、レスポンシブウェブデザインを推奨してはいるのもの、レスポンシブウェブデザインでなくとも検索順位結果には影響はしないとしています。つまり、コンテンツ重視ということですね。ただし、今後モバイルファーストインデックス （MFI：Mobile First Indexing）の導入により、モバイル向けページ の評価が検索結果に反映されることになりそうなので、レスポンシブウェブデザインの導入はSEOに有利に働くのではと推測しています。

・SEO対策について詳しく知りたい方はこちら

レスポンシブウェブデザインで作成されたホームページは、端末の画面サイズに依存しない(表示サイズの横幅によってデザインを切り替える)ため、今はまだないサイズの端末に対しても対応できます。よほどのことがない限り、新たなデバイスの登場によって、デザインを変更するということはないでしょう。

レスポンシブウェブデザインの主なデメリットを紹介します。

パソコン用のホームページだけに限定するより、作業工数が増えるため、費用が高くなります。ただし、パソコン用スマートフォン用と別々に用意しても同じことです。こちらについては、管理・運用にかかるコストを減らせるというメリットをどう考慮できるかによって、考え方は変わってくると思います。また、当社では作業工数を抑えるため、CSSフレームワーク(汎用的な機能をまとめた土台となる雛型)を積極的に導入して生産性の向上を図り、お客様への負担を最大限に減らすよう努めております。

パソコンとスマートフォンでは画面サイズが違うため、表示できる情報量にも違いがあります。パソコン用では画像を多用して多くの情報を表示できたとしても、小さなスマホ画面ではユーザビリティ重視のコンテンツ作りをする必要があります。パソコンで見た場合、タブレットで見た場合、スマホで見た場合など、デバイスごとに表示されるコンテンツの精査をおこない、伝えたいことを漏れなく表示する構想を考案しなければなりません。

スマホ専用のホームページに比べると、レスポンシブウェブデザインは表示が遅くなる傾向があります。高画質の画像を配置する場合には特に注意が必要です。回線速度は年々向上してきていますが、構想中にユーザーがストレスを感じないような配慮をしていくことが重要となります。