最新のレスポンシブウエッブサイトでも、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/

マルチスクリーン時代に必要なこと。 コンテンツ・機能の同一性をどう考えるべきか？

10月17日（木曜日）モビファイのCTO（技術最高責任者ジョン・ボクサールによる「マルチスクリーンの時代のモバイルWeb対応方法」についての技術セミナーを銀座・フェニックス会館で開催させていただきました。

今回は、マーケティングというよりも、構築のための技術解決を中心としたために、
この分野において積極的なフロントエンドエンジニアが集まり、熱心な受講が行われました。

その中で、ややマーケティング的なテーマですが、ジョンが話したことで、重要なことがありました。

Mobify　CTO　John Boxall　　　　　(ジョン・ボクサール) 

北米では、すでにタブレットの普及率が過半数を越え、マルチスクリーン対応の動きが急速に広がっています。つまり、スマートフォン対応から、完全にタブレットを含めた3スクリーンなどの動きが本格化しているようです。Googleグラスなどを考えると4スクリーン対応が必要になってきます。

こうした中で、重要なのが、モバイルWebを作る上での大切な３つのキーワードです。

１．コンテンツ・機能が同一である（Complete)

２．操作が直感的であること(Intuition)

３．スピード表示がされること(Fast)

気になったのが、１．コンテンツ・機能が同一である（Complete)ということです。これは、すべてのスクリーンで、コンテンツ、機能が同一であるべきで、各デバイスで異なるのはおかしいし、不都合が生じるという意味です。

日本では、モバイルWebは別でもいいという声もある

ところが、日本ではモバイルはモバイル独自のユーザーがいて、その中での使われ方のシーンやシナリオがあるから、モバイル独自のWebがあってもかまわないという声があります。さらにUI/UXデザイナーの第一人者のルーク・ウブロスキーが提唱したことからも、「モバイルファースト」というキーワードもバズワードのように広まっています。

そのため、勝手に解釈して、別のモバイルサイトでも十分だと考えても生まれてしまったようです。いった北米ではそのあたりの整理や解決はどうなっているのでしょうか？
私は、主催者ですが、質問をしてみました。

「これは北米では2008年くらいに盛んに議論したテーマです。しかし、いまでは、”コンテンツは同一であるべき”ということで決着しています。その理由として、モバイルに必要なコンテンツや機能をすべて同じにする苦労よりも、変えてしまうことのほうが無駄が生じるし、それぞれのデバイス間で遷移しながら利用するユーザーのことを考えると、異なることで新たな混乱してしまうからです。」

ユーザーはデバイス間を遷移するからコンテンツ・機能は同一であるべきだ。

Googleも昨年末に新しいレポートを出しています。ユーザーは二者択一のデバイスの選択ではなく、それぞれのデバイス間を移動したり、デバイス間での遷移をしながら利用しているというのです。となると、やはり「コンテンツや機能は同一」であるべきなのです。


それにしても、北米での2008年の議論が、まだ2013年の日本では盛んに議論されていたりする。2年遅れどころか5年も前の話だ。

このあたりの理由なぜだろうか？

知人に尋ねると

「日本では10年間、独自のガラケー文化が根付いてしまったから。つまりガラケーとPCは別モノだったのです。逆にスマホやタブレットは、PCと同じように使えます。ガラケーのWebならば違っても仕方ないという感覚の影響でしょうね」。

ガラケー10年の経験が、「モバイル独自のWebでもいい」という根拠にもなっているといいます。


あるクライアントの参加者は、
「むしろ、制作会社の根拠のない勝手な提案をしていて、Web担当者がそれを受け入れてるからではないですか？」
という声もでた。

それにしても5年の隔たりがあるのは、ちょっとショックでした。
我々はいま、先行する北米のモバイル状況をみながら「タイムマシンビジネス」を行っています。すべてが予言成就するわけではありませんが、よりオープン化された世界共通のインフラ環境の中のトレンドは、やはり北米主導の考え方に収束されるのではないでしょうか？




続いて、北米でのモバイル対応への方法が、

１．レスポンシブウエッブデザインと
２．サーバーサイドのテンプレート調整

以上に、絞られてきた話がでてきました。

なぜスクラッチやプロキシーではだめなのか？
次回は、この「2つに絞られたきたマルチスクリーン対応」についてまとめてみます。

新しいiOS 7のウェブデザインのための3つのポイント

本記事は、アップルの製品に最適化する上で注目すべき、iOS 7のSafariにおいて3つの重要なUX/UIへの変更点を、カナダのMobify社のマイク・アバソヴと、(株)ドーモの大賀匠竜からレポートします。

世界中の全モバイルページビューの内56.5%を生み出しているのがiOSです。その新バージョンには、さまざまな素晴らしい機能やデザインの向上が用意されています。最も大きな変更点は、「モバイルSafari」です。これらの変更点は、単にフラットデザインを採用しただけではなく、ユーザビリティに大きく影響が出る機能面での重要な変更があります。

1. フリックの扱いを慎重にする

　これまでのSafariでは、スクリーンの上端から下に向かってスワイプすることでNotification Centreを引き出すことができました。しかし、iOS 7ではデバイスの4辺がすべてが活用されます。

iOS 7では、ジェスチャ機能が組み込まれ、左から右へとスワイプすることでブラウザの履歴を一つ戻ることができ、右から左へとスワイプすることで一つ進むことができます。また画面下から上へとスワイプすることでControl Centerへアクセスができます。

サイトへの影響

　もしスライドアウト-ナビゲーション(画面端からスワイプして引き出すナビゲーションメニュー)の使用を考えていた場合は、実装を考えなおす必要があります。ユーザーエクスペリエンスを壊さないように、今後のナビゲーションは、端からのスワイプではなくタップで呼び出すようにすべきです。

　次に、カルーセル（フリックスライド）のデザイン方法も考え直す必要があります。いままでのように、カルーセルが画面端いっぱいにあり、その両端でパディングする場合、iOS７ では「戻る/進む」のジェスチャが実行されてしまいます。カルーセルをスクロールしようとすると、別の画面をスワイプを始めてしまいます。既存サイトのカルーセルには、修正が多く発生しそうです。

　また、PCサイトを表示の場合は、ピンチインで拡大することが多いのですが、その際に横スクロールをするとページ遷移が発生したりします。ユーザーのストレスを抑えるためには、モバイルに最適化するようんして不要な横スクロールがないようにしましょう。

左: iOS 6でのSkinny Ties: カルーセルは想定どおりに動く
右: iOS 7でのSkinny Ties: カルーセルをスワイプしようとしてページを戻ってしまう

 2. 分かりやすいナビゲーションが重要

　新しいSafariでは、スクロールに合わせてSafariのインターフェイスが縮小されるようになっています。

　URLバーは最小化され、ナビゲーションバーが非表示になる事で、有効なスクリーン領域は大きくなりました(iOSのGoogle Chromeと似ています)。ブラウザのページ遷移機能が不慣れな人には分かりにくくなったので、WEBサイト側で使いやすいナビゲーションを用意してあげるようにしましょう。

サイトへの影響

　新しいUIは、分かりやすくデザインされたサイトには非常にいいエクスペリエンスを提供できますが、逆にナビゲーションの分かりにくいサイトだと、「戻る/進む」ボタンが自動で隠される中でページを前後しなければなりません。

　固定型のヘッダーフッターを用意すると、サイト内はいつでも自由に移動できるようになります。一部のAndroidでは固定の要素がうまく動かないこともあるので、心配な場合はiOSのみで固定するようにしましょう(大賀)

3. より広くなったスクリーンと、これまでとは違う表示範囲

　新しいSafariではインターフェイスが縮小され、フルスクリーンに近くなります。ページの表示範囲も変わってきます。これも考慮すべき点です。

　例えば、下のMobifyのページのスクリーンショットでは、iOS 7とiOS 6ではカスタマーロゴの見え方が異なっていることが分かると思います。

企業にとっては、ブランド表記は重要なことの一つです。ロゴがどのようなデバイス、スクリーンサイズでも表示されるようレイアウトの再考が必要です。

サイトに与える影響

　モバイルサイトの構築の上で、テストしなければならない環境がまた一つ増えました。もしページの表示範囲がユーザーエキスペリエンスにとって重要なことなら、そのサイトがiOS 7でどのように映るかを可能な限り早く確認してみるべきです。

　URLバーに表示される情報はドメインのみになりました。（www.example.comなど）

現在のページをURLで知るには、URLバーをタップしてアドレスの編集モードにする必要があります。パンくずリストなど、サイト内での現在地を示す情報を置くようにしましょう。

　また、ドメイン名が常に表示されることになるので(隠せません)、サブドメインを含めてドメイン表記まで気を遣いましょう。「m.example.com」のように別のサブドメインで展開するよりは、PCサイトもモバイルサイトも同じ「www.example.com」で表示されるほうがサイトの統一感が高まります。

iOS7デビューにおいて

　iOS 7、モバイルSafariの新バージョンがいよいよ市場に出回ります。ジョナサン・アイブのチームが下した新しいアプローチは、今後のアプリやウェブ、インターフェイスをどのように変えていくか、とても楽しみです。ウェブ開発者やデザイナーは、ぜひこの新OS上でのサイトがどのように表示されるか確認してみてください。

　そのためiOS 7の搭載された実機にいち早く手に入れるか、Xcode 5をダウンロードすることをおすすめします。

上司にモバイル投資を理解してもらう13のデータ

頑固の上司は、データをもって説得しましょう。

　北米のWeb担当者も、スマートフォンサイトの重要性は十分理解しているようですが、日本と同様に、頑固な上司や経営者をどう説得するかが課題です。

　ほとんどの上司や経営者は、ユーザー・エクスペリエンスなどにはまったく興味がなく、収益やコストの面だけでものごとを考えます。そして彼らは、スマートフォンサイトへの最適化はどういうものか、仕組みの話などはまったく理解しません。
　そして、こう考えます。
「すぐには、十分な見返りは得られない、やっかいな新しい投資をどうすべきか？」　と考えます。

　こういう状況は日本でも同じです。それでは、いまあなたができることはなんでしょうか？　

　それは、少しでも具体的で説得できるようなデータを集めて上司に提案をすることです。以下は北米でのデータですが、必ず懐疑的だった上司や顧客に対して、強い関心を与えることができるはずです。

インターネット人口は23億人
モバイル人口はすでに12億人！

モバイルに関する役立つ統計

アメリカの消費者のうち、すでに58%がスマートフォンを所有している。

　　　　　　　　　　　　　　　　　　　　　　　　　　　ソース: comScore

すでに12億人以上がモバイルからウェブにアクセスしています。

ソース: Trinity Digital Marketing

モバイルトラフィックは、すべてのインターネットトラフィックの15%を占めている。

ソース: Internet Trends 2013

20%以上のシェアを持つスクリーンサイズはいまだに無い。

ソース: Mobify Research & Development

いいモバイルエクスペリエンスに対して、61％がそのブランドに対していい印象を持つ。

ソース: Latitude

モバイル消費者のうち60%は実店舗内でスマートフォンを使用し、

また50%は、ショップに向かう途中でスマートフォンを使用する。

ソース: Deloitte Digital

90%の人々は、スマートフォン、PC、タブレット、TVなど、複数のデバイスを利用して目的を達成しようとする。

ソース: Google

2013年と2014年の2年間だけで、約5億台のタブレットデバイスが出荷される。

ソース: Gartner

タブレットユーザーは、PCユーザーに比べて50%も多くの消費を行う。

ソース: Adobe

Eメールのうち、25.85%はスマートフォンフォンから開封され、10.16%はタブレットで開封される。

ソース: Knotice

すべてのウェブ検索のうち、25%はモバイルデバイスから行われる

ソース: The Search Agency

95%のスマートフォンユーザーは、地域情報(ローカル情報）に関する検索を行ったことがある。

ソース: Google

Webの表示時間が0．1秒遅れることに、売上は1.0%ほど減っていく。

ソース: Amazon

最後に、日本でも参考となるのが、総務省のデータです。

スマートフォン等の急速な普及と端末市場の変化(総務省）

http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h24/html/nc122110.html

モビファイが、Googleのマルチスクリーンベンダーに推奨の理由

モビファイが、米Googleのマルチスクリーンベンダーに認定！

うれしいニュースです。
　米国のGoogleから、弊社のパートナーのモビファイ(Mobify）が同社のマルチスクリーンベンダーとして認定されました。
　マルチスクリーン対応として、クラウド型のレスポンシブウエブデザインを提供する同社のサービスがこうして、はっきりとお墨付きを得たのです。パートナーとしての我々としても、このモビファイサービスを日本で展開できることを非常にうれしく思います。

https://sites.google.com/a/domore.co.jp/speed/

モバイルファーストからマルチスクリーン時代へ。

　そもそもモバイルファースト対応というキーワード以上に、マルチスクリーン対応が注目されているのはご存じでしょうか？スマートフォンまたタブレットを利用者がシフトするということではなく、スマートフォンを起点にタブレットやPCへの行動の遷移が重要視されているからです。スマートもタブレットもPCも、どのデバイスを利用し、どう遷移していくのか重要になっています。

重要なのは、ユーザー遷移を知るということ

モバイル表示への対応がひととおりの目処がつくと、次に重要なのは何になるでしょう？
　表示スピードの高速化性能も大事ですし、UI/UXをどう高められるかというデザインの柔軟性も重要です。
　表示スピードは、Eコマースのコンバージョン率に直結します。またA/Bテストなどで、モバイルUIを改善することで、コンバージョン率が跳ね上がってきています。
また、なにより重要なのは「ユーザー遷移」を把握できるアクセス解析のしやすさも大切なポイントになってきます。

領域が異なったり、リダイレションが多いと遷移は見えにくくなる。

残念ながら、スクラッチ別サイト構築したり、ｍドットのようなプロキシーソリューションで作られたサイトは、そもそも領域が異なってしまいます。つまりランディングページが複数異なる場所にあります。
　これでは、異なるチャンネル単体でのCTRやコンバージョン率は見えにくくなります。上記のGoogleの図のように、それぞれのデバイスで遷移するの時代となると、Webはどのスクリーンにおいても、レスポンシブウェブデザインと同じ１つのURL＝「OneWeb」であることが非常に重要になってきます。

　アクセス解析のテクニックの問題だけではありません。リダククションを繰り返したり、mドットのような最初から領域のことなる対応では、入り口と出口はみえても、その間の遷移が見えてこないからです。

こうした理由から、Googleは、常に重要なのはOneWebであること、つまりレスポンシブデザインを推奨してきていました。

　マルチスクリーンの時代において重要なのは、「One Web」であることです。それは表示方法を超えて、ユーザーがどこからやってきて、どこへ遷移していくのかを把握するためのマーケティング活動そのものを意味しています。
　コムスコアのカントリーマネジャーの前川洋輔氏がこういいます。

「デジタルメディアは計測できるから価値がある」

マルチスクリーン時代こそ、OneWebという意味がますます重要になってでてきます。

レスポンシブウェブデザインの期待と不人気の２つのトレンド

一部では熱狂的に注目され、一部ではまったくダメとされる

レスポンシブウェブデザインの期待と難しさとは？

これまでも、マルチスクリーン対応のために、レスポンシブウェブデザイン（RWD)という手法が注目されてきました。かつてはリキッドデザイン、その後は、可変グリッドデザイン、最近では「レスポンシブウェブデザイン」として注目を集めています。

この背景を分析すると、
１）Googleが今後のマルチスクリーン対応の解決策として推奨してきた
２）コーディングを駆使する上で　Webデザイナーにとってはチャレンジングな手法。
これらがいまだにHotな状態をキープしているのでしょう。

企業が敬遠するレスポンシブウェブデザインの課題
　ところが、企業のWeb担当者にとっては、やっかいなアプローチとして、少々あきらめ感があります。つまり敬遠気味なのです。

その理由として
１）制作コストが3倍近くかかってしまう。
２）フルリニューアルが必要で、そんなコストは出せない
３）更新運用が少し面倒であり、改修などにはそれなりのスキルを要する
４）ローディングスピードが遅い。
５）そもそもモバイルファーストで設計がされていない

　以上のような課題を抱えています。

レスポンシブウェブデザインでは儲からない!?
　ところが、制作サイドからもレスポンシブウェブデザインを、あまり好まれないという考え方もでてきました。あるWebデザイナーによると、
「割にあわないんですよ。結局、レスポンシブウェブデザインでは、１ページで３ページ分をまかなうわけです。ところが、3倍のお金が請求できません。せいぜい請求できても2倍程度です。つまり、作業負荷などは3倍以上もかかるのに、コストとしてが見合わないんですよ」

　このあたりも、ちょっと課題の多い話です。このままでは日本のレスポンシブウェブデザインの勢いがなくなっていまうのではないでしょうか。うーん。


アダプティブウェブという柔軟な方法で

　こうしたレスポンシブウェッブデザインというものに対して、「アダプティブウェブ」という概念も登場してきた。
　アダプティブウェブとは「既存のPCサイトを元に、各スクリーンにアダプティブ(適合）させていこう」というものです。これはレスポンシブウェブデザインという手法の良さは認めつつ、形式にとらわれないで、柔軟な姿勢で適合策を図っていくというアプローチです。図にすると下記のようになります。

　アダプティブウェブとは、まだ日本では聞き慣れない言葉ですが、米国ではアーロン・グスタフソンによる解説書も登場してきました。

　アダプティブウェブの良さとはなんでしょうか？この概念のとらえ方にはいくつかありますが、

１つは、リニューアルが必要なく、現在のPCをベースに対応できることです。アダプティブウエブが広まるということは、現在のレスポンシブウェブデザインという手法を取り込み、もっと柔軟で小回りの利くWebアプローチがどんどん増えてくるということになりそうです。

アーロン・グスタフソンによる

アダプティブウエブデザイン