企業サイト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アプローチがどんどん増えてくるということになりそうです。

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

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

「モバイルの時代」に行くため不可欠な「サイト表現の標準化」について

モバイルファースト時代への対応とはなにか？

マルチスクリーン対応にむけた

ベースサイトの整備と基本構造の重要性　

このレポートは、私たち、ドーモが1年間に渡ってスマートデバイスへの最適化をしながら、発見したこと、見えてきたことを占部、大賀、坂井の3人によるディスカッションをインタビュー形式でまとめてみました。

　　　　　　出席　坂井潔（Webエンジニア）大賀匠津（Webデザイナー）司会：占部雅一（DOMO代表）

そう簡単ではない、「モバイルの時代」に行くということ

ようやく時代がモバイルに向かっていくんだということが、認知され始めてきました。もはやスマートフォンとタブレットはPCのおまけではなく、今後はこれらが中心のデバイスの時代になっていくんだ、ということです。

では、モバイル向けサイトをどう考えて、どう構築していくかですが、実は、そう簡単ではないわけです。スクラッチ構築は高コストとか、無駄が多く生じる。プロキシーソリューションは、セキュアが課題に加え、PCとスマホでは領域が異なる問題。またレスポンシブデザインにはJavascriptの処理に負荷がかかる上、小回りの運用が効かないなど、いくつかの問題が存在しています。

どれが最良の方法というのは難しいのですが、PCサイト、スマホサイト、タブレットサイトのそれぞれで最適化させ、安定した運用を得るためには、実は土台のWEBの構造。つまり基本（ベース）サイトの正規化が重要だということが分かってきました。

ワンソース・マルチデバイス、OneWeb実現のために必要なこと

今後は、マルチデバイス、マルチスクリーン向けに最適表示させるためには、表向きのAdaptive策だけでなく、実はしっかりと構造化されたベースサイトの正規化が必要になってきます。

「ダメなサイトでもどうにか再構成はできます。しかし、ダメなサイトを無理にやりくりするより、実はゼロから作ったほうが安上がりになる可能性もある。無理をすると、パッチを当て続けることになるわけですから、あとからの破綻の可能性が大きくなります」

（坂井 潔氏／Webエンジニア）

そういう意味では、モビファイは、マルチスクリーン時代に移行するこの時期には、最適のツールではないかと。なぜなら、ダメなPCサイトであれば「修正しないといけない」と、ベースサイトの程度の良さを見極めるいい機会を作ってくれるからです。

「スクラッチやサーバサイドテンプレートで対応すると、個別対応になりがちです。WEB担当者は、エンジニアにその部分をまかせきりになる傾向もあります。案外、その場しのぎなんです。だから無理のままを続けたり、問題にフタをしたままやり通すことにもなり、あとになって大変な処理をしないといけない可能性がでてきます」（同・坂井氏）。

「モビファイタグの挿入」とは、モバイルを意識すること。

「モビファイタグの挿入は、もっと広い視点でモバイルへのグランドデザインを意識させることにつながります。」（大賀匠津／WEBデザイナー）

家に例えると、構造がしっかりしたものとそうでない場合がありますが、ダメな土台に増築を重ねても、一時しのぎにしかなりません。本質的な改善のためには、生活スタイルに会った土台を立て直す勇気が必要なんです。

同じように、とってつけたようにスマートフォンサイトを作った場合、運用面や構造変更、更新性までを考えると、いきなり破綻が起こりやすくなるわけです。下手をすると大きな連鎖反応を引き起こしてしまうことも可能性があります。これはEコーマスサイトでは命取りです。（同・大賀氏）

日本のPCサイトの場合、欧米に比べて日本流のカスタマイズが氾濫したせいか、複雑なものが多い。つまり、Webサイトの基準に適合して作れられていないものが多いのです。

これからは、Webサイトの基準に合わせた構造に修正することが重要です。マルチスクリーン対応にむけた構造設計が必要になってくるわけです。

構造設計のとともに重要になる「モジュール」の設計

モビファイの素晴らしいところは、よりよい環境を用意すれば、さらにいいパフォーマンスを発揮できます。その優しさはスクラッチで構築する比ではなく、運用面、コストにおいて素晴らしい状態を提供してくれるでしょう。

構造設計をしっかりと基準にあわせて作り、ソースを正しく記述することが終わったら、次に大事なってくるのがモジュールの設計です。

「これからは、デスクトップ用のデザインだけでなく、とともに、マルチスクリーンにむけた各パーツをモジュールとして設計する必要があります。例えば、3カラムデザインを作った場合でも、スクリーンが変わっても、各パーツの配置が有機的につながるような考え方です」（同・大賀氏）

またモビファイの提唱するアダプティブWebでは、レスポンシブデザインに比べて、もっと自由な配置が可能になります。そうした意味でも、モジュールの設計はもっと考えて行く必要があります。

モバイルファースト、そしてコンテンツファースト

構造設計の見直しとともに、重要になってくるのは，ターゲットユーザーの利用スタイルです。ユーザーに必要なコンテンツファースト、および機能としてのモバイルファーストも含めて見直す必要があります。

しかし、これを一気にやろうとすると複雑すぎて混乱してしまう。そのためには、再構築フェーズを分けて展開する必要があります。

ローンチしてからが始まりです。

またモバイルサイトをつくってから、それから改修していくことが必要です。

「我々は、スマートフォンでのUI改善で、どうコンバージョンをあげていくかに対しても責任を持つ必要あります。ローンチして終わりではなく、それから改良をしていく、よりいいものに高めていく。A/Bテストをやらないで、いい結果は作れないでしょう」（同・坂井氏）

PCサイトだけを考えればいいという時代は、終わろうとしています。むしろ、モバイルを先に考え、スマートフォン、タブレット、そしてPCサイトへのそれぞれに結びつくコミュニケーションの最適化が必要です。マルチスクリーンの時代は混沌としてしまいます。

まとめ

　最適化の過程でみえてくるのは、マルチスクリーン対応にむけて、基本のベースサイトがどうあらねばならないかを考えさせてくれます。Onewebでの対応、,高速表示、有効なUI/UXデザイン、セキュア対応など重要なことはいくつかありますが、その前提において、いままで意識せずに行ってきた部分ですが、ベースサイトの善し悪しが、マルチスクリーン時代の最適表示の対応策の鍵につながっていくはずです。