2010年頃からWEB制作現場の新たなトレンドとして注目を集めてきた「レスポンシブ・ウェブデザイン」。

WEB制作現場だけでなく、徐々に発注者側にも知名度が知られるようになり、2015年4月21日にGoogleが実施したモバイルフレンドリーによって「スマホ対応」が検索結果に影響を与えることからも、スマホ未対応の企業サイトの多くがスマホ対応が求められるようになってきています。

Googleウェブマスター向け公式ブログ：検索結果をもっとモバイル フレンドリーに（2015/02/27）

発注者の方から、「レスポンシブのメリット・デメリットってどうなの？」「PC用とスマホ用で別々に最適化したホームページを作るのと何が違うの？」という質問の声が、まだまだ多く寄せられますので、ここではレスポンシブウェブデザインのメリット・デメリットについてご紹介します。

レスポンシブ・ウェブデザインとは？

従来は、PC用サイトとスマホ用サイトを用意する場合、ユーザが閲覧しているOSやブラウザ（ユーザーエージェント）を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるというのが一般的でした。

• パソコンでアクセスしたユーザーには → PC用サイトを表示
• スマートフォンでアクセスしたユーザーには → スマホ用サイトを表示

 

それに対して、「レスポンシブ・ウェブデザイン」は、ユーザーエージェントの判別を基準にせず、ユーザーが閲覧するブラウザの横幅サイズを判断基準にしています。ブラウザの横幅サイズに応じて、CSS（スタイルシート）切り替える手法です。

• 1150pxの横幅サイズのブラウザで閲覧しているユーザーには → 640px以上のブラウザ用のCSSでHTMLを装飾
• 480pxの横幅サイズのブラウザで閲覧しているユーザーには → 640px未満のブラウザ用のCSSでHTMLを装飾

 

このGrowth EngineのWEBサイトもレスポンシブ・ウェブデザインとなっていますので、ブラウザの横幅サイズを可変してみてください。

ここまでは、レスポンシブ・ウェブデザインの基本的な考え方について説明しましたので、次はレスポンシブ・ウェブデザインのメリットやデメリットについて紹介します。

【メリット①】メンテナンスが作業時間の軽減

前述の[レスポンシブ・ウェブデザインとは]で説明した通り、HTMLのプログラムをワンソースであるため、例えばホームページ公開後にメンテナンスや更新などの作業を行う場合に作業時間を軽減することが可能になります。従来の通り、PC用サイトとスマホ用サイトを別々に構築していた場合には、それぞれのHTMLに対して作業を施すことが必要なため作業時間がかかってしまいます。

作業時間が軽減するということは、ホームページの運用管理をWEB制作会社に依頼する場合のコストも安く抑えられることが多いです。

【メリット②】SEOに有効的

Google では、スマートフォンに最適化されたコンテンツの対応の向上を推奨しています。スマートフォン専用コンテンツを識別する方法として、2011年12月にスマートフォン版「Googlebot-Mobile」を導入したことで、よりスマートフォンに最適化されたコンテンツが検索エンジンに影響を与える一因になっています。

ただし、Googleは、レスポンシブ・ウェブデザインを使用することが適切とはいえない状況があることを理解しています。そのためレスポンシブとレスポンシブではない方法でスマホに最適化したホームページとでは、大きくSEOに有利・不利はないと言われています。

スマートフォンに最適化されたホームページを構築する際に、Googleは、次の3つの方法での構築を提言しています。

1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

Googleウェブマスター向け公式ブログ：Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 （2012/06/12）

【メリット③】URLが統一されることで、SNS等でのシェアやリンクがされ易い

Googleウェブマスター向け公式ブログでは以下のように紹介されています。

PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Googleのアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。

「ユーザーにとってシェアやリンクが容易…」というのは、例えば次のようなケースのことを指します。

[ケース①]企業Zが、キャンペーン用LPのURL（PC用URL）をfacebookで投稿

●PCでfacebookの投稿記事を閲覧したユーザーAさん

PCでキャンペーン用LPを閲覧。ストレスフリーでキャンペーン内容を見ることができた（結果◎）

●スマートフォンでfacebookの投稿記事を閲覧したユーザーBさん

スマートフォンで、キャンペーン用LPを閲覧。スマートフォンでは、文字が小さく情報を得るのにストレスが…。（結果×）

 

上記の通り、SNSで投稿する際に共有するURLは1つです。そのためURLを統一することができるレスポンシブ・ウェブデザインのホームページでは、ユーザーの閲覧環境に問われることなく、情報を最適化した状態で発信でき、さらにシェアやリンクされやすくなる利点があります。

 

さて、ここまではレスポンシブ・ウェブデザインのメリットについてご紹介しましたが、レスポンシブ・ウェブデザインにもデメリットはありますのでご紹介します。

【デメリット①】細かいデザイン・サイト構造の調整ができない

スマホ用サイトの場合のみ、要素（例えばテーブルや、スマホのみに表示させる画像とか）を表示・非表示で何とか調整することはできます。

しかし、スマートフォンの画面サイズは、PCと比べても明らかに小さく、一昔のガラケーのように表示できる情報が限られてしまいます。そのため、モバイルユーザーを取りこぼさないために「モバイルファースト設計」を特に意識したい企業には、あまりレスポンシブ・ウェブデザインはおすすめしません。また、PC用サイト、スマホ用サイトでデザインを大きく変えたい企業は、レスポンシブ・ウェブデザインでスマートフォンに最適化させるのはやめておくべきです。

【デメリット②】表示速度が遅くなる

レスポンシブ・ウェブデザインで設計されたホームページの場合、表示はスマートフォンに最適化された状態にはなりますが、裏側のプログラムでは、PCで表示するべき画像なども含めて膨大なデータをダウンロードするため、表示パフォーマンスが悪くなります。回避方法もありますが、調整コストが膨大に必要になります。

現状、LTEなどの登場で回線速度もかなり早くなってはいるものの、それでもやはりまだまだです。表示速度の遅さは、ユーザーにストレスを与え離脱率も悪くなるため、SEOに影響を与えるとも言われています。

レスポンシブ・ウェブデザインでの設計時には、できる限り軽量化を図ることを意識しなければいけないため、自ずとデザインやコンテンツに少なからず影響が出てしまいます。

 

【まとめ】どちらにしても「ユーザーファースト」を意識することが大事

ここまでレスポンシブ・ウェブデザインのメリット・デメリットをお伝えしてきましたが、レスポンシブ・ウェブデザイン、他のマルチデバイス対応方法でも共通して大事なことは、ユーザーのファーストビューに拘り、「ユーザーファースト」を意識したスマホ最適化を図ることです。

ユーザー基点で必要な情報を的確に届けるための設計やデザインを考え、レスポンシブ・ウェブデザインでホームページを構築するかどうかを考えることが必要です。

レスポンシブ・ウェブデザインは、制作者側からすると設計やデザインにかなり手間がかかります。ワンソースで便利でホームページ公開後のメンテナンスは楽になりますが、作るまでが非常に大変です。そのため、制作コストもかかってしまいます。

レスポンシブ・ウェブデザインは、あくまでもデバイスやスクリーンサイズに対する適合策です。ベストなユーザーインターフェース（UI）、データベース連携などの拡張性という意味では、必ずしも最良策とは言えません。

あくまでもレスポンシブ・ウェブデザインは「手段」です。

まず考えなければいけないのが、あなたがホームページに求める「成果」と「目的」です。その「成果」「目的」を達成するために、レスポンシブ・ウェブデザインが最良な手段であれば採用しましょう。レスポンシブ・ウェブデザインありきでホームページを制作すると、本来の目的を満たすことができない可能性もありますので、あらかじめ見識あるプロに相談するようにしましょう。