レスポンシブWebデザインのメリット／デメリットをできるだけ中立的に検証してみた

昨年は多くのレスポンシブWebデザインのサイトがリリースされましたが、現状でもさまざまな試行錯誤が続けられている状態で、賛否両論もあるのも事実です。そうした議論を見ていると、検討が十分でないものも見受けられます。

そこで、レスポンシブWebデザインのメリット／デメリットについて、可能な限り中立的に整理したいと思います。

レスポンシブWebデザインでしか実現できないメリット

メリット1　ユーザーエージェントを判別せずに見た目を調整できる

ユーザーエージェントを利用しないことは、レスポンシブWebデザインのメリットとして、よく挙げられます。さまざまな画面サイズのスマートフォンやタブレットが登場し、ユーザーエージェントの判別ではあらゆるデバイスの画面サイズへの対応は困難になっています。

画面サイズのみでレイアウトを切り替えるレスポンシブWebデザインは、そのような問題を解決する手法と言えます。

ただ、Touchイベントを使ったり、スマートフォンブラウザの仕様の差やバグに対応するためには、結局ユーザーエージェントを判別しなければならず、メリットが活かせない場合も多いようです。

メリット2　サーバーサイドプログラムに頼らず、CSSだけで実現できる

実装技術の敷居の低さもメリットとして挙げられます。レスポンシブWebデザインは設計は難しいものの、実装はHTMLとCSSのみでできるため、プログラムに弱いデザイナーでも実装することができます。

また、クライアントの事情など何らかの理由でサーバーサイドプログラムが使えないときにも有効です。

他にも実現手段はあるが、レスポンシブWebデザインなら容易に実現できるメリット

メリット3　URLがひとつ

この点も、レスポンシブWebデザインのメリットとしてよく挙げらる項目です。ユーザー視点で考えた場合、URLを意識することなくデバイス毎に対応したサイトで閲覧できることのメリットは大きいと言えるでしょう。

特に、ソーシャルメディアの広がりによってURLが共有されることが多くなり、マーケティング面でもURLの共通化の重要性は高まっています。また、Googleはスマートフォンサイトの構築方法としてレスポンシブWebデザインを推奨しており、SEO面でも効果があると考えられます。（「Google Webマスター向け 公式ブログ」）

URLの共通化は、デバイス毎にソースを分ける場合でも、HTMLを動的生成したり、.htaccessにリライトの記述をすることにより実現できます。しかし、PCサイトとスマートフォンサイトとでサイト構造を変えてしまうと設定が複雑になるなど一長一短があります。

レスポンシブWebデザインによるURLの共通化のメリットは、下層まで含めすべてのページのURLの共通化が容易に実現できることと言えるでしょう。

メリット4　ワンソース

レスポンシブWebデザインは、仕組み上PCサイトもスマートフォンサイトも全く同じ情報構造になります（どう見せるかは別として）。これは、スマートフォンサイトを作る上で強力なメリットとなり得ます。

リテラシーが高いユーザーの中には、スマートフォンサイトの多くがPCサイトよりも情報が少ないことを知っていて、あえて「PCサイトを見る」ボタンを押す人がいます。一方、スマートフォンでアクセスしたサイトがスマートフォン対応していない場合、直帰率が高くなる傾向もあります。

こうした双方の要請を満たすには、複数デバイス向けのサイトで情報をできるだけ同等に保つ必要があります。

単純に複数のデバイス向けにソースを用意した場合、同じ内容を対応デバイス毎に反映しなければならず、運用に膨大な手間がかかります。CMSを使い、デバイス毎にテンプレートを出し分けることにより、ワンソース化することもできますが、ブログのような単純な構造のサイトはともかく、複雑な構造サイトでは完全な情報の同一性を実現しようとすると、かなり設計や構築が困難になります。

レスポンシブWebデザインは、複数デバイス向けに情報の同一性を保ちたい場合には、有力な手段となります。

デメリット

デメリット1　クライアントの理解が得にくい

実はこれがレスポンシブWebデザインを導入する上で一番大きなデメリットだと考えています。レスポンシブWebデザインは、制作側・運用側のメリットはあるものの、ユーザーにとってのメリットが見えにくのも事実です。

また、以下のに述べるようにデメリットも多く、制作コストも決して安くはなりません。こうしたことをクライアントに理解してもらいつつ、レスポンシブWebデザインを採用する理解を得るのは大変な作業と言えます。

しかも理解を事前に十分に得ておかないと、トラブルにつながる可能性が非常に高く、プロジェクト・マネジメントが難しい手法と言えるでしょう。

デメリット2　サイトの容量が大きくなる

サイトの表示の遅さは、直帰率にダイレクトにつながり、非常にシビアな問題です。レスポンシブWebデザインは、仕組み上どうやってもスマートフォンのみに最適化されたサイトより表示速度が遅くなります。

Webフォント、アイコンフォント、画像の出し分けなど、さまざまな軽量化の手法が開発されているので、そういった手法を使いつつ、どこまでストレスのない表示が可能になるかがキモとなります。

もっとも、ソースを分ける場合でも、動的生成するのであれば表示遅延はおこります。また、スマートフォンサイトにリダイレクトさせる場合も同様です。

さらにRetinaディスプレイを考慮に入れると、よりややこしい問題になります。表示速度を多少犠牲にしてもRetinaでの見栄えにこだわるのであれば、スマートフォンにのみ最適化したサイトとの表示速度の差は小さなものになるかもしれません。

こうしてみると、マルチデバイス対応サイトにおける表示速度の問題は、必ずしもレスポンシブWebデザインに限ったことではありません。

こうしたことを念頭に、手法を選択する必要があります。

デメリット3　レイアウトやデザインの自由度が低い

前述の情報構造まで含めてワンソースであることが、そのままデメリットにもなります。

レスポンシブWebデザインは、同じHTMLソースでCSSのみでPCとスマートフォン用の表示を切り替えます。そのため、レイアウトやデザインでクライアントの要望に応えられない（応えようとすると作り直しになる）ことが多々あります。

従来のサイト制作手法と異なり、ちょっとした要望にも応えられない場合もあり、しっかりと事前に理解を得ておく必要があります。

デメリット4　ユーザビリティ面でもマーケティング面でも「最適化」にはならない

前項と内容が重なる部分がありますが、レスポンシブWebデザインは、あくまでデバイス毎の見た目の違和感や読みやすさ、操作性を改善するだけであって、最良のユーザビリティ、最良の効果を提供するわけではありません。

PCにはPCの、スマートフォンにはスマートフォンの最適な情報構造があり、本当に効果のあるサイトを作るためには、ファーストビューの表示内容や視線の移動、コールトゥアクションの配置などをPC／スマートフォンそれぞれに考慮する必要があります。

また、そもそもPC用とスマートフォン用とで、それぞれのデバイスが使われる状況（コンテキスト）を考え、コンテンツを変えた方が良い場合もあります。

テーマパークを例に挙げると、PC用サイトは訪問前に家で閲覧することが想定されることから、アクセスの方法や開園時間、どの日にどういったイベントが行われるかといった情報が重要となると考えられます。

一方、スマートフォン用サイトは訪問時に閲覧することが想定されることから、各アトラクションの待ち時間や近くのレストランの場所がすぐにわかった方がいいかもしれません。

「モバイルファースト」という考え方もありますが、あくまでモバイルのコンテキストを第一にコンテンツを考えて情報を吟味するという考え方であり、サイトの内容にもよりますが、各デバイス毎に最大の効果を発揮するサイトを作ることにはなりません。

また、直近のデータではBtoCサイトでは3～4割がスマートフォンで閲覧されていると言われていますが、残り6～7割はPCサイトでの閲覧です。また、BtoBサイトへのアクセスは直近でも9割以上がPC経由と言われています。サイトにもよりますが、近い将来モバイルの比率が上がるとはいえ、現状でコンテンツをモバイルに振り切るのは時期尚早と言わざるを得ません。

情報の構造や内容をデバイス毎に変えられないレスポンシブWebデザインは、デバイス毎に最大限の効果を発揮するサイトを作るには不十分と言えるでしょう。

デメリット5　制作コストが安くない

レスポンシブWebデザインは、ワンソース化やURLの共通化がメリットであって、制作コストが安くなるというメリットはありません。むしろPCサイトとスマートフォンサイトとを別々に作るよりも高くつくと考えた方が良いでしょう。

レスポンシブWebデザインでソースを一本化できるのはHTMLのみで、CSSについては別々につくるよりもむしろ難易度は高くなります。

また、開発手法も従来のものとは大きく変える必要があります。

従来は、設計／デザイン／実装の各段階ごとにクライアントの了承をもらう「ウォーターフォール方式」が主流でした。

レスポンシブWebデザインは動作が多面的となるため、ワイヤーフレームやデザインカンプといった静止画だけでクライアントの承認を得るのには限界があります。結果、設計／デザイン／実装を同時に行ない、モックアップを作って実際の動きを確認しながら承認を得るプロセスが必要となるため、開発工数が膨らむ傾向があります。

また、従来はPC用サイトはPCブラウザのみで確認し、スマートフォン用サイトは各種スマートフォンブラウザのみで確認していましたが、レスポンシブWebデザインでは、PCもスマートフォンもひとつのHTMLソースで問題なく表示させる必要があります。

現状ではPCブラウザにもスマートフォンブラウザにも種類やバージョンによって仕様の違いやバグがあるため、個別対応が必要な場合が数多くあります。こうした対応をワンソースで行なうことも、工数増加の要因となります。

これらの要因により、レスポンシブWebデザインの開発には工数がかさみ、コストが増える傾向があります。

コストを抑えるには、案件の性質にもよりますが、「Twitter Bootstrap」のようなフレームワークをうまく使うことがカギになるでしょう。

デメリット6　デバイス毎にレイアウトや操作方法が変わってしまうことを嫌うユーザーがいる

PCサイトを使い慣れたユーザーの中には、スマートフォンサイトにおけるレイアウトの違いによって操作方法がわからなくなってしまうことを嫌う人がいます。これはレスポンシブWebデザインの問題というよりは、そもそもスマートフォン用サイトを作るべきかどうかという問題です。

また前述のとおり、スマートフォンでアクセスしたサイトがスマートフォン対応していない場合、直帰率が高くなる傾向もあり、デバイス毎の操作性の差よりも、見やすさを重視するユーザーが多いことも事実です。

こうした問題を解決するために、スマートフォンサイトには「PCサイトを見る」ボタンが用意されていることがあります。

レスポンシブWebデザインでもこうしたボタンを実装することは可能です。詳しくは「レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた」をご覧ください。

まとめ

こうしてみると、メリットと言っても十分に活かせないものであったり、他の手法でも実現できるものである場合もあります。逆にデメリットと言っても、他の手法も50歩100歩である場合もあります。

メリットをことさらに強調してレスポンシブWebデザインをごり押ししたり、デメリットを強調して全否定するのではなく、十分な比較検討を行う必要があるでしょう。

レスポンシブWebデザインはあくまでマルチデバイス対応の一手法です。導入ありきで話を進めてしまうと、誰も幸せにならない結果となりかねません。

サイトの目的やターゲットユーザーから必要とされる要件を洗い出し、見込まれる効果とコストを他の手法と比較した上で、導入を検討していくべきと考えています。

その際、検討すべき事項を挙げると、以下のようになります。

• コスト、レイアウトの自由度、制作の進め方の違いなどのデメリットについて、クライアントの理解が十分に得られているか
• メリット・デメリットについて、ターゲットユーザーに対する効果・影響が大きいか、あるいは制作・運営サイドに対する効果・影響にとどまるか
• より良い代替手段があるか

正直、私自身もバズワード的に使われている「レスポンシブWebデザイン」という言葉に乗っかることもあります…。

ただ、クライアントに対しては、できるだけ費用対効果を考えた提案ができればと考えています。