one web world one web ワールド

 
レスポンシブone web ワールド学び

レスポンシブWEBデザインに期待しすぎるなー!

thumb_130222_01

ドーモで作ってみたレスポンシブWEBデザイン。更新などが結構大変です。

レスポンシブWEBデザインをどう思う?

みなさんは、「レスポンシブWEBデザイン」について、どう思われていますか?

レスポンシブWEBデザインは、スマホなどへの表示対応策として注目されています。ウィンドウを伸ばしたり縮めたりすると、グリッドが突然変わって、そのデバイスに適合されるという仕組みをご存じの方も多いでしょう。このデザイン手法は、2012年6月に、Googleがモバイルサイト対応として推奨して以来、マルチスクリーン時代の対応策として注目されてきています。

responsive_design

Googleは、なぜレスポンシブWEBデザインを推奨したのか?

なにゆえに、Googleは、レスポンシブWEBデザインを推奨したのでしょうか?

Googleはこう答えています。

レスポンシブ デザイン: 1つの URL について同一の HTML を配信し、CSS メディアクエリを使って、クライアント側でどのようにコンテンツをレンダリングするかが決まります。これにより、ユーザーエージェントの検出で生じる問題がなくなり、ユーザーのリダイレクトが不要になります。 Google ではこの設定をおすすめしています。

Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

その理由が次になります。

  1. ユーザーにとってコンテンツの操作や共有、コンテンツへのリンクが簡単になります。
  2. ユーザーをリダイレクトする必要がなくなり、読み込み時間が短縮されます。
  3. サイトと Google のクローラの両方についてリソースを節約できます。

期待のデザイン手法か、それとも限界か?

ところが、期待が高まるレスポンシブWEBデザインですが、すでに限界説を唱えるムードもでてきていました。

「面倒くさい、細かい調整ができない、メンテがやりにくい――というのが、クライアント側のWEB担当者のため息の理由ですね。また、手間がかかる割には、高く請求できなくて儲からないというのがWEB制作者側のため息の理由です」

WEBデザイン雑誌の記事さえ、「ある程度関心が高いから特集を組むものの、その将来性やビジネスの上では疑問が残ります」と歯切れがよくありません。

これはなぜでしょう。高まる関心の一方で、妙に冷めた見方があります。

再度、レスポンスWEBデザインの弱点を整理すると、次のようになります。

レスポンシブWEBデザインの弱点

  1. 設計に手間がかかる
  2. 構築にコストがかかる
  3. 表示スピードに時間がかかる
  4. UIの変更がしにくい。3デバイスのデザインが共通になる
  5. サイト全体のリニューアルが必要
  6. サイトの拡張がやりにくい

この中の最大の問題の1つが、表示スピードです。

レスポンシブWEBデザインは、対象サイトにあるすべての素材を読み込んでしまいます。表示に必要ないPCサイト用のものまで読み込んでしまうため、どうしても表示が遅くなってしまうのです。調べてみると、大手のWEBサイトでもページ3MB〜5MBもあるものはざらで、中には8MBというサイトもありました。Amazonなどの軽快なサイトが、トップページの容量を100~200K(!)に押さえ込んでいることを考えると雲泥の差です。

スピード計測_表 (1)クリックして拡大する

レスポンシブWEBデザインによる大手企業トップページのファイル容量を計測。容量を削ることで大幅に表示を速くすることができます。計測:モビファイの計測ツールにて

レスポンシブWEBデザインは「最適化策」にあらず

つまり、レスポンシブWEBデザインは、デバイスに対する適合策であって、モバイルサイト全体を最適化する方法ではないという点です。

これは非常に大事な視点です。レスポンシブWEBデザインは、あくまでデバイスやスクリーンサイズに対する適合であって、スピード表示、よりベストなUIの提供、データベース連携などの拡張性においては、必ずしも最良の答えとなってはいないからです。

血眼になって高速化を追求しようとする記事も少なくありません。ソーシャルボタンをやめる、WEBサーバーとの通信量を減らす、WEBページのソースコードの見直し、キャッシュ対応……など、いろんな工夫が紹介されていますが、これはなにもレスポンシブWEBデザインのためだけの対応方法ではありません。

最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS

掛ける工数は大きいが、提供できる顧客満足度が小さすぎる

逆に、レスポンシブWEBデザインにこだわるほど、かける工数に対して、提供できる顧客満足が小さすぎるということが分かってきます。

IBM MobileFirst (モバイル・ファースト)は、「革新的な企業はあらゆるリソースを結集して顧客とのエンゲージメントを強化すること、すなわちいつでも、どこでも、モバイル端末をはじめ、好みのデバイスを顧客が使えるようにすることでビジネス・チャンスを見出している」 という考え方に根ざしています。

IBM MobileFirst

モバイルサイト全体のゴールを考えていくと、大事なことが見えてきます。顧客基点(視点)のWEB制作やマーケティング戦略を考えていくこと。より高いゴールを目指したところからベストな構築方法を考えてみてください。

 

この記事を書いた人
C1-5 占部雅一
株式会社ドーモ 代表取締役
雑誌の編集者を経て1995年にWeb制作会社を設立。女性コミュニティサイトの立ち上げ・運営、メディアサイトのコンテンツや広告開発に従事。近年は「マルチスクリーン対応」を意識した企業サイトのモバイル対応を推進。ユーザーベネフィットを生み出すモバイルWebの在り方を提唱している。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事