最新のレスポンシブウエッブサイトでも、8割のサイトはまだまだ高速化が可能！

続々増え続けるレスポンシブウエッブデザインだが、

8割のサイトは、表示スピードが遅いサイト

　スマートフォン、タブレットなどのマルチスクリーン時代において、その表示対応方法として注目されているのが、レスポンシブウエッブデザイン（RWD)です。

　2012年にはGoogleがこのレスポンシブデザインを推奨Webとしたことから、にわかに注目をあびてきましたが、ここに来て多くのサイトが作られるようになりました。

　

　なぜ、レスポンシブウエッブデザインが注目されるかについてですが、どのスクリーンでも同じURLを維持し、クローラーがひとつで済ませられることができ、ひいてはSEO対策、Facebookなどのソーシャルシェアに有効、さらにはアクセス解析の面で無駄がない。など、Webのマーケティング活動において無駄のない環境を作り得るからです。

　ところが、このレスポンシブウエッブデザインですが、軽量化においては、まだまだ多くの課題があります。どれくらい課題があるかをちょっと調べてみました。次の表は、最近公開された新しいレスポンシブサイトです。
　　　　　　　　

　　　　　2013年後半に公開されたレスポンシブウエッブデザイン・サイト

※モビファイで計測。白地の部分で約8割は削減が可能なサイト。ピンク地のみ0.5秒以下。つまり8割のサイトではさらに高速化が可能です。

　これらのサイトは、レスポンシブウエッブデザインのまとめサイトで有名な「RWDJP(http://responsive-jp.com/）からピックアップした４５のサイトです。最新からのアトランダムなので、大小いろんなサイトが混じっていますがどれも2013年後半に公開されたものです。これらのサイトが「どれだけ軽量化できるか」について弊社のモビファイの軽量化シュミレーションでテストしてみました。11月6日に実施。

シュミレーターについて

※モビファイ　シュミレーター　　http://www.mobify.com/

※モビファイスピードについて　　http://www.domore.co.jp/mobify/lp_speed.html

　

　すると、なんということでしょう。４５サイト中、６サイトをのぞいて３９サイトにおいて、0.5秒以上の高速化が可能という結果になりました。また、容量の削減においても２０％以上の効果が得られるのが３８サイトでした。

※読み込みスピードは３Gで平均ダウンロードを１Mbpsで試算

　容量は１／２に削減可能。だから速くロードが可能に

モビファイのシミュレート画面。ご覧のように、このサイトでは容量を１／２に削減可能です。表示スピードも2秒ほど改善が見込まれます。（ダウンロードが1Mbpsの場合）。

　これが意味するものは、こういうことです。

ポイント１：レスポンシブデザインの画像は軽量化が不十分であること

ポイント２：それを徹底的にやるには、テクニックとコストが必要になる。

日本を代表するレスポンシブウエッブデザインのサイトを調査

次に、レスポンシブデザインで優れた作品だとされるものを計測してみました。こちらは、あまりにもびっくりです。

　１１サイト中８サイトで、２０％以上の容量削減を期待することができ、0.5秒以上の高速化が見込めることができるからです。この中には、数百万円の予算を投じたと予測されるメガ級のレスポンシブウエッブサイトも中にはあります。

　
　しかし、誰もが知っているような企業のサイトでも、ダウンロードに数十秒がかかってしまうわけです。そしてモビファイで試算すると、短縮効果も４～8秒も期待されるというサイトもでてきました。

※モビファイで計測。代表的な評判のいいとされるサイトでもこの結果に。11サイト中、８サイト(白地部分）は0.6秒以上の短縮が可能でした。これが日本のレスポンシブウエッブデザインの実力かもしれません。

　繰り返しいいますが、評判のいいとされる大手のレスポンシブウエッブデザインでもこの結果です。

従来のレスポンシブウエッブデザインサイトでは限界？
読み込みスピードに時間のかかりすぎます

　なぜ、このようなことが起こってしまうのでしょうか？

その理由を私なりにまとめてみました。問題は次です。

１．現状のモバイル対応とは、「表示の対応」にすぎなく、高速化はあまり考慮されていない

２．上記を対応しようとすると、画像の軽量化などの対応に工数がかかる

３．高度なレスポンシブウエッブの技術、例えば、response.jsなどの高速化手段を使うと、複雑な行程が必要となる。

４．必然的に高度なテクニックが増えてコストが割高になってしまう。

５．そもそも手作業のデザインでは、画像の軽量化に限界がある。

絞られてきたマルチスクリーン対応。１つは、レスポンシブウエッブデザイン。もうひとつはサーバーサイドテンプレートの調整になる。

　これまでさまざまなモバイル対応のテクニックやサービスが紹介されてきました。これらもいろんなトライアルがされてきましたが、どうやら２つに絞られてきたようです。
北米では、マルチスクリーン時代への対応は、１）レスポンシブウエッブデザインと、２）サーバーサイドデザイン調整　の２つに絞られてきました。

　サーバーサイドのテンプレート調整ですが、これは予算や内部の運用体制があればこれでもいいのでしょう。サーバーサイドの調整の問題点は、3倍から5倍のコスト増が必要だとされています。これは大企業や大規模なEコマースのオペレーション体制が内部にあることが前提です。

　しかし、９５％の企業は、１）のレスポンシブウエッブデザインを選択せざるえません。やはり、まだ課題が大きいとはいえ、レスポンシブウエッブデザインには未来があるわけです。

モビファイは「クラウド型レスポンシブウエッブデザイン」である。

　モビファイのPRになって恐縮ですが、ではモビファイはどのポジションに属するかです。元々、アダプティブWebだというカテゴリーで表示されてきましたが、要は「クラウドで対応するレスポンシブウエッブデザイン」です。Googleが2013年の5月にモビファイを推奨のマルチスクリーンベンダーとしました。これはモビファイがレスポンシブウエッブの基本を充実に再現しているからです。
また、従来のレスポンシブウエッブにはない優れた特徴をもっています。

　それは、
・元のサイトのPCウエッブをリニューアルする必要がなくモバイル側のサイトでレスポンシブデザインにする。
・初期構築費も複雑なレスポンシブデザインを組む必要がなくコストを下げられる
・運用において、画像処理、リサイズ、軽量化をクラウドに任せて運用作業を削減できる。
・読み込みが遅い時に表れるJSのエラーの発生を抑えられる
・レスポンシブに詳しいデザイナーでなくても運用は可能である。
など、いいことがたくさんあります。

　モビファイのようなサービスと絡めたほうが、実は運用工数をさげ、コストダウンを図れるという大きなメリットが生まれます。ツールの費用を払ったとしても、この結果は大きいでしょう。モビファイは将来につなげられる「クラウド型レスポンシブウエッブだから」です。

企業サイト6割はスマホ対応済みというが、このままでは マルチスクリーン時代には行けない！

企業サイトの6割がすでにスマートフォンサイト対応済みという。
しかし、その8割のサイトは、やり直ししないとマルチスクリーン対応が難しい。



ブームは来る前がニュースになり、すでに流行はじめると、話題にはなりにくくなります。スマートフォンサイト対応もそうです。どんどん加速化しています。すると、企業サイトの6割がスマホ対応済みなんてニュースが、9月5日には電通ワンダーマンの調査で明らかになりました。


さすがに弊社も本業としてやっている立場からすると、本当に対応済みなのか、そのパフォーマンスはどうなのか、このあたりはハッキリさせないといけません。
なにしろ、対応済みサイトの中には、トップページ1枚だけをスマートフォン対応にしただけで、スマホ対応済みとしている企業もいるくらいです。そこで、いったい、どのような構築方法で、スマートフォン対応がされているかを調査してみました。

大手サイト389サイトを抽出し、目算でのURLとサイト調査で、

それぞれの構築方法を解析したところ、意外な結果に。

調査方法は、人力作戦です。「スマートフォンサイト制作」というキーワードで検索表示される上位２つのスマートフォンサイトのまとめサイトをピックアップ。大手サイトを目算で判断し、それぞれの重複を排除して389サイトをピックアップして、その内容をチェックしてみました。調査に協力してくれたのは、わがドーモのイベント・コンパニオンなども勤める青山学院大学の社会情報学部の学生3人の「リケ女」が　3日かかりで調べ尽くしたものです。もちろん、確認には弊社の技術スタッフがチェックをしてあります。この調査は、2013年7月に実施しました。

　２つのまとめサイト

・スマートフォンサイト集めました　 http://sp-web.jp/

・iPhone デザインボックス　　　　　http://design.web-hon.com/

もちろん、大手サイトの基準は感覚的なものであります。またこれらのサイトをURLおよびサイト構造にのぞきながらのチェックのため、厳密には多少の間違いがあることはご了承ください。

• ５６％　　スクラッチでの専用サイト構築。
• １９％　　プロキシーソリューションによる変換サービス
• １２％　　レスポンシブウエッブデザイン
• ７％　　　Onewebによる最適化サービス
• ３％　　　サーバーサイドテンプレートによる調整
• ３％　　　その他、および不明

　　以上のような結果となりました。

約6割は、スクラッチでのスマホ専用サイトだった。
8割のサイトはマルチスクリーンにいくのは無理！

こうしてみると、大手企業のサイトでも半数以上はスクラッチで構築されています。
スクラッチというのは、従来のオーソドックスなweb構築方法のことで、モバイル専用サイトを構築していることを指します。多くは、www.domain.co.jp/sp/ という表記がされたりします。これが56％にも上ります。当然ワンソース・マルチデバイスではなく、それぞれ独自のデザイン、原稿を用意し、それぞれPCと同じように確認チェックする作業が発生します。

また次に多かったのが１９％を占めるプロキシーソリューションです。
これはプロキシーサーバー側にモバイル専用のキャッシュを置いて、PCからのリダイレクトすることにより見ることができます。これはガラケー時代から多くやられていた手法で、URLは　sp.domain.co.jp など頭に、spだったり、mだったりのサブドメインがつきます。この２つは領域が違うことが問題で、SEO対策、ソーシャルシェアに難があります。

驚くのは、スクラッチとプロキシーソリューションを足すと、全体で75％にもなります。つまり、
全体３／４のサイトは、この方法で構築されているわけです。これらの２つの構築の問題は、ランディングページとしての領域が異なることがす問題です。

絞られたレスポンシブウエッブとサーバーサイドテンプレート。

つまり2割のサイトしかマルチスクリーンに行けない！！

3番目に多かったのがレスポンシブウエッブデザインの12％です。Googleが推奨している方法でもあり、どのデバイスでも領域が１つであり、同一URLをキープすることができます。これがSEO、ソーシャルシェア、アクセス解析に有利であることはGoogleが認めています。

また同じくOneWebを実現するサーバーサイドのテンプレート調整での対応はわずか３％足らずでした。この方法は、コストがかかるためにECサイトなど大規模サイトに比較的多く採用されていますが、まだまさ割合として小さいといえます。北米では、マルチスクリーンへの対応は、このレスポンシブウエッブとサーバーサイド・テンプレートの調整という２つの方法に絞られてきたと言われています。

ちなみに、弊社のモビファイなどが展開している、クラウド型のOne Webソリューションがまだ７％。モビファイの解決方法は、「クラウド型のレスポンシブウェブ」ともいえますが、これらのOneWebを実現する方法として、従来型のレスポンシブウエブを合算しても、まだ２２％程度でした。つまり、わずか2割程度のサイトしか、マルチスクリーンには対応できない可能性があるわけです。

これからタブレットが普及し、タブレット対応をせざる得なくなると、残りの8割は、改修どころか、「やり直し」をせざる得ないということになります。ワンソース・マルチデバイス対応なんて言葉は頻繁に,使われていますが、ほとんどのサービス対応ができないという現状を知る必要があります。

結論として、

企業のスマートフォン対応済みは6割かもしれませんが、そのほとんどがタブレットを含めたマルチスクリーン時代には置いてきぼりとなる可能性が高いのです。つまり、もう一度、作り直しが避けられない状況にあるということです。いち早くモバイル対応をするか、それともこのまま放置するか、これからの判断が問われてくるでしょう。


参考/http://news.mynavi.jp/news/2013/09/05/024/