ヨコハマとともに生きるクリエイティブ研究サイト
スマートフォン、タブレットなどのマルチスクリーン時代において、その表示対応方法として注目されているのが、レスポンシブWEBデザイン（RWD)です。2012年にはGoogleがこのレスポンシブデザインを推奨Webとしたことから、にわかに注目をあびてきましたが、ここに来て多くのサイトが作られるようになりました。
なぜ、レスポンシブWEBデザインが注目されるかについてですが、どのスクリーンでも同じURLを維持し、クローラーをひとつで済ませることができ、SEO対策、Facebookなどのソーシャルシェアに有効、さらにはアクセス解析の面で無駄がない……など、Webのマーケティング活動において無駄のない環境を作り得るからです。
ところが、このレスポンシブWEBデザインですが、軽量化においては、まだまだ多くの課題があります。どれくらい課題があるかをちょっと調べてみました。次の表は、最近公開された新しいレスポンシブサイトです。
■2013年後半に公開されたレスポンシブウエッブデザイン・サイト
※モビファイで計測。白地の部分で約8割は削減が可能なサイト。ピンク地のみ0.5秒以下。つまり8割のサイトではさらに高速化が可能です。
これらのサイトは、レスポンシブウエッブデザインのまとめサイトで有名な「RWDJP(https://responsive-jp.com/）からピックアップした45のサイトです。最新からのアトランダムなので、大小いろんなサイトが混じっていますがどれも2013年後半に公開されたものです。これらのサイトが「どれだけ軽量化できるか」について弊社のモビファイの軽量化シミュレーションでテストしてみました。
※11月6日に実施。このとき利用した「モビファイ シミュレーター」サービスは終了いたしました。
すると、なんということでしょう。45サイト中、６サイトをのぞいて39サイトにおいて、0.5秒以上の高速化が可能という結果になりました。また、容量の削減においても20％以上の効果が得られるのが38サイトでした。
※読み込みスピードは３Gで平均ダウンロードを１Mbpsで試算
モビファイのシミュレート画面。ご覧のように、このサイトでは容量を１／２に削減可能です。
表示スピードも2秒ほど改善が見込まれます。（ダウンロードが1Mbpsの場合）。
これが意味するものは、こういうことです。
ポイント１：レスポンシブデザインの画像は軽量化が不十分であること
ポイント２：それを徹底的にやるには、テクニックとコストが必要になる
次に、レスポンシブデザインで優れた作品だとされるものを計測してみました。こちらは、あまりにもびっくりです。
11サイト中８サイトで、20％以上の容量削減を期待することができ、0.5秒以上の高速化が見込めることができるからです。この中には、数百万円の予算を投じたと予測されるメガ級のレスポンシブWEBサイトも中にはあります。
しかし、誰もが知っているような企業のサイトでも、ダウンロードに数十秒がかかってしまうわけです。そしてモビファイで試算すると、短縮効果も4～8秒も期待されるというサイトもでてきました。
※モビファイで計測。代表的な評判のいいとされるサイトでもこの結果に。11サイト中、８サイト(白地部分）は0.6秒以上の短縮が可能でした。これが日本のレスポンシブウエッブデザインの実力かもしれません。
繰り返しいいますが、評判のいいとされる大手のレスポンシブWEBデザインでもこの結果です。
なぜ、このようなことが起こってしまうのでしょうか？ その理由を私なりにまとめてみました。問題は次です。
１．現状のモバイル対応とは、「表示の対応」にすぎなく、高速化はあまり考慮されていない
２．上記を対応しようとすると、画像の軽量化などの対応に工数がかかる
３．高度なレスポンシブウエッブの技術、例えば、response.jsなどの高速化手段を使うと、複雑な行程が必要となる
４．必然的に高度なテクニックが増えてコストが割高になってしまう
５．そもそも手作業のデザインでは、画像の軽量化に限界がある
これまでさまざまなモバイル対応のテクニックやサービスが紹介されてきました。これらもいろんなトライアルがされてきましたが、どうやら２つに絞られてきたようです。
北米では、マルチスクリーン時代への対応は、１）レスポンシブWEBデザインと、２）サーバーサイドデザイン調整、の２つに絞られてきました。
サーバーサイドのテンプレート調整ですが、これは予算や内部の運用体制があればこれでもいいのでしょう。サーバーサイドの調整の問題点は、3倍から5倍のコスト増が必要だとされています。これは大企業や大規模なEコマースのオペレーション体制が内部にあることが前提です。
しかし、95％の企業は、１）のレスポンシブWEBデザインを選択せざるえません。やはり、まだ課題が大きいとはいえ、レスポンシブWEBデザインには未来があるわけです。
モビファイのPRになって恐縮ですが、ではモビファイはどのポジションに属するかです。元々、アダプティブWEBだというカテゴリーで表示されてきましたが、要は「クラウドで対応するレスポンシブWEBデザイン」です。Googleが2013年の5月にモビファイを推奨のマルチスクリーンベンダーとしました。これはモビファイがレスポンシブWEBの基本を充実に再現しているからです。
また、従来のレスポンシブWEBにはない優れた特徴をもっています。
それは、
・元のサイトのPC WEBをリニューアルする必要がなく、モバイル側のサイトでレスポンシブデザインにする。
・初期構築費も複雑なレスポンシブデザインを組む必要がなくコストを下げられる。
・画像処理、リサイズ、軽量化をクラウドに任せて運用作業を削減できる。
・読み込みが遅い時に表れるJSのエラーの発生を抑えられる。
・レスポンシブに詳しいデザイナーでなくても運用は可能である。
など、いいことがたくさんあります。
モビファイのようなサービスと絡めたほうが、実は運用工数をさげ、コストダウンを図れるという大きなメリットが生まれます。ツールの費用を払ったとしても、この結果は大きいでしょう。モビファイは将来につなげられる「クラウド型レスポンシブWEBだから」です。
⇒モビファイの詳しい情報はこちら
占部雅一
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
