• HP制作・運営
• 2014.06.26

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

今や多くの企業様が、ホームページを制作する際にレスポンシブwebデザインを希望されます。

特にスマートフォンからのアクセスが多いwebサイトにおいては、「レスポンシブウェブデザインにするために、ホームページをリニューアルしたい」とご依頼をいただくほどになりました。

しかし、まだまだ明確にレスポンシブwebデザインのメリット・デメリットを把握している企業様は少なく、多くが「スマートフォンユーザに対して、webサイトの見せ方を変えることができる」という認識での検討となっています。

そこで今回は、レスポンシブウェブデザインにはどういうメリットがあり、デメリットがあるのかを分かりやすくご紹介します。

レスポンシブWebデザインとは

ユーザがホームページを閲覧する端末は、スマートフォン・タブレット・PCの3つになります。

従来のホームページ制作であれば、PC・タブレットで閲覧するユーザにはPC用サイト、スマートフォンで閲覧するユーザにはスマートフォンサイトを表示させていたために、2種類のホームページを制作しなくてはなりませんでした。

しかし、レスポンシブウェブデザインを活用することで、PC・タブレット用とスマートフォン用でホームページを分ける必要が無く、1つのサイトで、PC・タブレット・スマートフォンのそれぞれの端末に最適化されたホームページを表示させることができるようになりました。

このように、端末ごとにそれぞれのホームページを制作せずとも、1つのホームページで端末ごとに最適化されたwebデザインを表示できる手法をレスポンシブウェブデザインと言います。

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

レスポンシブウェブデザインで制作されたwebサイトのメリットをご紹介します。

1ソースで端末ごとのホームページを作成可能

レスポンシブWebデザインの最大のメリットは、従来であればPC用とスマートフォン用で2サイトの運営を行わなくてはならなかったのですが、1サイトの運用で対応可能という点になります。

webサイトを更新する際に、従来であればPC用とスマートフォン用で2サイトの更新が必要でしたが、レスポンシブウェブデザインでは、PC用とスマートフォン用で同一のソースコードとなるため、1サイトの更新で対応可能になります。

そのため、ホームページ運用のコスト削減を図ることが可能になりますし、更新時のミスの発生なども防ぐことも可能です。

今後発売される端末への対応が容易

レスポンシブWebデザインで作成されたホームページは、CSSと呼ばれる外部ファイルに、端末ごとの横幅を設定するだけで、レイアウト崩れが無く、ブラウザに表示させることが可能です。

そのため、新しい横幅の端末が発売されても、従来であれば、新しい端末での確認と細かな調整を行わなくてはなりませんでしたが、レスポンシブウェブデザインでは、端末の横幅設定を追加するだけなので、大きくコストの削減を図ることが可能になります。

URLを1本化できるためSEO効果が高い

従来であれば、PC用とスマートフォン用で別サイトを作成していたために、表示させている原稿や内容が全く同じでも、別のURLとなっていました。

しかし、これはグーグルの検索エンジンスパムである「重複コンテンツ」となってしまい、SEO対策において良い状態であるとは言えませんでした(重複コンテンツとは、同じ原稿のページを量産することで、SEO対策の成果向上を図る検索エンジンスパムのことを言います)。

レスポンシブWebデザインでは、PC用とスマートフォン用で同一のURLとなるため、SEO効果としても非常に効果的であると言えます。

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

レスポンシブウェブデザインで制作されたホームページのデメリットをご紹介します。

端末ごとの細かなデザイン変更ができない

端末ごとに表示方法を変えているだけなので、例えば「PCで見たユーザにはこういう風に見せたいけど、アイフォンで見た人にはまったく別の見せ方をしたい」などの細かなご要望を実現できないこともあります。

ある程度の制限の中でしか、デザインの変更を行えない仕様となっています。

スマホファーストでの制作

従来のホームページは、PCファーストで制作されていました。

PCファーストとは、PCで見ることを前提にwebサイトを作成し、その後その他の端末でも正しく表示されるように最適化していくことになりますが、レスポンシブWebデザインで作成されたサイトは、スマホファーストでの作成になり、スマートフォンありきでPCサイトを制作しなくてはなりません。

そのため、システムの組み直しや運営体制の変更などにより、多くの手間とコストが掛かってしまう可能性があります。

ホームページの表示が重くなってしまう可能性がある

レスポンシブウェブデザインで制作されたサイトは、PCサイトだけに表示させる内容や画像であっても、スマートフォンでの閲覧時に、スマートフォンの画面上には表示されていませんが、画面外で表示されています。

そのため、容量の大きな画像を多く使ってしまうと、読み込みに時間が掛かってしまうwebサイトとなってしまいます。

現在グーグルは、webサイトの表示速度も検索順位に反映させている可能性があるため、画像を多く使ったレスポンシブwebデザインでのホームページ制作を行う場合には、必ず画像の圧縮を行いながら制作しなくてはなりません。

目的に合わせてレスポンシブウェブデザインを採用

レスポンシブWebデザインは、メリットも多くありますが、デメリットも多くある手法です。

そのため、現段階では全てのホームページに導入すべきとは言えませんが、例えば、ECサイトや大学サイトなどのスマートフォンからのアクセスの多いwebサイトであれば導入をしたほうが良いかもしれません。

レスポンシブウェブデザインの導入を検討されている企業様は、「競合他社がレスポンシブWebデザインで制作したから、うちも導入しよう」ではなく、御社のwebサイトに訪れるユーザの端末状況や、運営コストなど、様々な点から検討することが重要になります。