2013年12月14日土曜日

ネットショップは、スキーショップの賑わいを減らす!

ネットショップは、ひとつの街の賑わいさえ減らし始めた!


師走となった土曜日の夕方の御茶ノ水の界隈のことです。
スポーツ用品が並ぶ靖国通り裏手にあるラーメン店の中。

店主がいいます。
「もうこのあたりガラガラでしょう。昔はこんなことはなかった」

「ん・・・・・・」 

まだ夕方の6時をまわったにすぎない。

「今はみんなインターネットだから、ここまでくる必要がないですよ」


 かつて、ここ御茶ノ水のスキーショップ街は、「安さ」を求めて、東京近郊から
人々が集まり、車がごった返していました。

この街に来る目的は、少しでも安いモノを求めたり、バーゲンやタイムセールスだったり、特別クーポンだったりと、客寄せの仕掛けにのって、少し前はものスゴク人が集まっていたのです。

ところが、ここ数年はめっきりその数が
減ったといいます。

 私自身も、インターネットを生業としている手前、ネットスーパーや価格ドットコムなどの勢いは、理解はしているつもりでいましたが、ひとつの街の賑わいさえ減らし始めたとは思いもよりませんでした。

ネットはネット。お店はお店だったのだが・・・・

それぞれの役割は別々に機能し、それぞれ両立していたように思っていたのですが、
どうやら、少々事情がかわってきました。ひとつ街の賑わいさえ、深刻な影響を及ぼす時代になってきたようです。

 裏通りのラーメン店は、3軒ほど並んではいたもの、どの店のガラガラ。
通りに駐車するクルマの数も少なく、クライマックスを迎えようとしている12月の週末としては確かに寂しい感じがします。

確かに、もっときれいでスペースもたっぷりなデパートあたりで物色して、
丁寧に試着してサイズさえわかれば、あとはネットショップの出番です。

 御茶ノ水のように、かつてのメッカだけど、小売店街が集まる街というのはとうとう厳しくもなっているのでしょうか?秋葉原、浅草橋、小伝馬町などの街は、どうなんでしょうか?これからちょっとリサーチが必要です。

インターネット・ショップという勢いは、10年を超えて、いよいよ街そのものを変え始めてきたようなのです。









2013年12月12日木曜日

加速するモバイルコマース。トラフィックは34%も増。ブラックフライデーレポート

ブラックフライデー&サイバーマンデー・レポート

今年のブラックフライデー、およびサイバーマンデーはどうだったのでしょうか? 各メディアやオンラインのEマーケッターは、まさに「モバイルの年」と、レポートしています。

今年のネットショッピングでは、いかにスマートフォンやタブレットが、そのパフォーマンスを発揮したのか、そして人々がどのように行動したのかについてみてみましょう。

 下記の数字は、北米のネットショッピングに関するホットなニュースやデータを整理したものです。


 北米の数字を、私たち日本はどう受け止めるべきでしょうか?これらの数字を参考に2014年のモバイル戦略を考えてみましょう。



マーケッター、リテイラーが認める「モバイルの年」!


 少しなじみのない「ブラックフライデー」や「サイバーマンデー」について少しおさらいします。


 アメリカの祭日の1つに感謝祭(=サンクスギビングデイ)があります。
 毎年11月の第4週の木曜日とされ、その翌日は、感謝祭のバーゲンやクリスマス商戦がスタートします。アメリカ国民が狂ったように各店に殺到するのですが、この日をブラックフライデーと呼びます。 ネットショップも同様です。
 また翌週の月曜日には、オフィスからのネット注文が殺到することから「サイバーマンデー」と呼ばれます。感謝祭からサイバーマンデーにかけての数日の動きが、その年のクリスマス商戦を占う大切な指標として古くから注目されてきましたが、2000年以降は、オンラインショッピングにおいても、動向を把握する上で重要な指標となってきています。

まずは、IBMの発表です。

2013年、オンラインの売上は、それぞれ1日で、ブラックフライデーには11億9000億ドル(1190億円)サイバーマンデーには22億9000万ドル(2290億円)に達しました。     
出展:IBM



スマートフォンとタブレットのモバイル合計では、ブラックフライデーに2億5900万ドル(259億円)。サイバーマンデーに4億1900万ドル(419億円)という新記録を達成しました     

出展:Adobe Digital index 2013



ブラックフライデーのモバイルからのトラフィックは、全オンライントラフィックの39.7%に達し、2012年に比べて34%も増加しました。 
出展:IBM Black Friday Report



Jay Henderson, (IBM スマートコマース・戦略ディレクター)によると、「今年はモバイルの年です。ブラックフライデーにおけるモバイルのセールスは。2012年に比べて43%もアップし、オンラインショッピングに占める割合は22%となりました。」 

出展:IBM Black Friday Report



モバイル・セールスは、2012に比べて55.4%も増加し、全オンラインセールスの17%にも上りました。  
出展:IBM Black Friday Report



「ウォルマートでは、サイバーマンデーのトラフィックの半分以上は、モバイルから来ました。今年オンラインショッピングは、まさに"モバイルの年"と記憶されるでしょう」

ウォルマート・CEO Joel Anderson     出展:USA Today


iPadが、オンラインショッピングで利用されたツールです。感謝祭 ブラックフライデー、サイバーマンデーまでの数日の動きだけで売上は、4億1700万ドルとなりました。

出展:Adobe Digital index 2013



タブレットのコンバージョンレートは、スマートフォンの2倍以上となり、それぞれ5.4%、1.8%となりました   
出展: IBM Cyber Monday Report



平均のオーダー単価は、ブラックフライデーでは、タブレットは132.75ドル スマートフォンは115.63ドル。またサイバーマンデーでは、それぞれ126.30ドル、106.50ドルでした。 

出展: IBM Cyber Monday Report


Comscoreによると、2013年のブラックフライデー(11月29日)に、デスクトップのネット売上は11.98億ドルを記録し、同時期で初めて1日10億ドルを突破する史上最大のオンライン消費デーとなりました。2012年のブラックフライデーの15%増。サンクスギビングデー(11/28)は、前年比21%増の7.66億ドルでした。


ブラックフライデーには、6610万人のアメリカ人がデスクトップパソコンからネットショッピングサイトを訪れました。これは1年前より16%多い数字です。Amazonは、予想どおり、ブラックフフライデーで最も多くの人が訪れたサイトとなり、eBay、Walmart、Best Buy、およびTargetがこれに続きました。

出展:テッククランチ



北米に比べて2年ほど遅れているといわれる日本のモバイル利用ですが、2013年は普及率や利用率が驚くほどのスピードで高まってきました。むしろ提供側のモバイル対応やサービス対応のほうが追いつかない状況です。

 昨年は、タブレットコマースがスマートフォンコマースを追い越したといわれて、話題になりましたが、それでもモバイルからの売上は、全オンラインからの売上の10%前後でした。今年はモバイルからの売上の数字がかなり膨らんできました。
 
すでに北米でのモバイル対応策は、スマートフォンの最適表示のみだけでなく、タブレット対応を含めたマルチスクリーン対応での最適化策が本格化しはじめています。

 解決策の1つ、レスポンシブウエブデザインの採用の増加もそうです。これからはPCリニューアルではなく、モバイルリニューアルというカタチで、タブレットをにらんだ動きも少しと表れてきました。

さて、2014年の日本はどういう動きになるでしょうか?ぜひ、あなたご意見を聞かせてください。







2013年12月5日木曜日

どうやらプロキシー・ソリューション時代は終わった!

mドット、spドットのプロキシーソリューションは
そろそろ限界にきたようだ。

ようやく私たち、モビファイの競合となる企業向け、Eコマース向けのモバイルソリューションが登場してきました。
 競合の彼らは、いままでサブドメインに、mドット、spドットが付いてしまうプロキシーソリューションを販売してきましたが、ようやくそのパフォーマンスに見切りをつけ、新しい仕組み、つまりモビファイタイプのOne Webソリューションを開発してきたのです。

そもそもプロキシーソリューションの仕組みとは?

プロキシー(proxy)ソリューションは、フューチャーフォンの時代に2000年の中頃から利用されていた手法です。モバイルからPCサイトをアクセスすると、リダイレクションをしてプロキシーサーバー側にあるキャッシュされた画像を取りにいくという手法です。
ワンソース・マルチデバイスとして、PCの資産を生かすためには、有益な方法とされていましたが、いくつかの問題がありました。

プロキシーソリューションの限界とは?
セキュリティ、SEO、ソーシャルシェア、アクセス解析

最大の問題はセキュリティ的に脆弱であるという問題です。

 モビファイのCTOジョン・ボクサールに言わせると、「プロキシーソリューションでは、カートの決済においてセキュリティ的な限界が生じてしまう」と言います。それは
いくら高額なSSLサーバーを認証設定をしても、プロキシーというハードそのものがセキュリティ的に脆弱な環境だからというのがその理由です。
 また2012年6月にGoogleがレスポンシブウエブデザインを推奨したことも大きな起点となりました。Googleは、クローラーは1つでないといけない。SEO効果、ソーシャルシェア、アクセス解析の上で、理想とするのはOne Webを実現するレスポンシブウェブデザインを推奨したからです。


 プロキシーソリューションの場合は、WEBサイトがPC側とモバイル側では別領域になってしまうのです。そのためGoogleとしては、別のモバイルサイト作るスクラッチの手法とともに、プロキシーソリューションを推奨できない仕組みとしました。


3年半による基礎研究から開発された
アメージングなモビファイのOne Webソリューション

 実はモビファイの初期のモバイルソリューションは、このプロキシーソリューション(通称:オールドスタジオ)でした。私たちも日本の販売のおいて、プロキシーソリューションを販売しましたが、わずか半年ばかりで、2012年の7月には、新しいOne Webソリューション「モビファイデザイン」に切り替えたのです。つまり私たちは、両方の仕組みのメリットとデメリットを熟知しています。
モビファイ社では、プロキシーの限界を当初から気づいており、2年半の基礎研究とスクラッチでの構築の中で、ユーザー側でも使えるプラットフォームとして完成させたのです。
このモビファイデザインは、アダプティブウエブの手法ですが、わかりやすくいうと、クラウドで実現するレスポンシブウエブデザインです。
すでに実運用が3年半にもなり、世界では1500サイト、日本でも30サイト以上の構築事例ができるまでになってきました。

併売はできない。売る理由がなくなってしまった。
それは私たちが目指すビジョンの問題でした。

2012年夏に、OneWEBソリューションの「モビファイデザインのPRO」をリリースしたあと、私たちは古いプロキシーソリューションの「オールドスタジオ」をどう扱うかに悩みました。熟成してきたプロキシーソリューションも併売するか、OneWEBソリューション「モビファイデザイン」に思い切って切り替えるかです。
 技術習得の点では、やや不安の残るOneWEBソリューションの「モビファイデザイン」でしたが、私たちは、わずか2ヶ月で「モビファイデザイン」1本に絞ったのです。

 その理由は、プロキシーソリューションをお客様に売る理由がまったくなかったからです。モビファイデザインは、プロキシーソリューションに比べて圧倒的なパフォーマンスを持ち、すべての点で凌駕していたのです。
 一番の判断は、我々のビジョンの問題です。
「私たちは理想のモバイル環境を提示していく、マルチスクリーン時代をOneWEBで!」というビジョンです。

 モバイルサイトの問題は、表示の問題だけはありません。高速表示やOneWEB、モバイルファースト、マルチスクリーン対応、サイトガバナンスという大事なテーマを抱えています。私たちが あえてプロキシーソリューションを葬り去ったのも、私たちの追求するモバイルビジョンと、まったくベクトルが異なってしまうからです。

 ようやく競合が現れきたのも、私たちのモビファイが認められている証です。2014年はもっと刺激的なモバイルWEBの展開が予想されそうです。

2013年11月12日火曜日

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

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

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

 スマートフォン、タブレットなどのマルチスクリーン時代において、その表示対応方法として注目されているのが、レスポンシブウエッブデザイン(RWD)です。
 2012年にはGoogleがこのレスポンシブデザインを推奨Webとしたことから、にわかに注目をあびてきましたが、ここに来て多くのサイトが作られるようになりました。
 
 なぜ、レスポンシブウエッブデザインが注目されるかについてですが、どのスクリーンでも同じURLを維持し、クローラーがひとつで済ませられることができ、ひいてはSEO対策、Facebookなどのソーシャルシェアに有効、さらにはアクセス解析の面で無駄がない。など、Webのマーケティング活動において無駄のない環境を作り得るからです。

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

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

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

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

 すると、なんということでしょう。45サイト中、6サイトをのぞいて39サイトにおいて、0.5秒以上の高速化が可能という結果になりました。また、容量の削減においても20%以上の効果が得られるのが38サイトでした。
※読み込みスピードは3Gで平均ダウンロードを1Mbpsで試算



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




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

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

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



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

次に、レスポンシブデザインで優れた作品だとされるものを計測してみました。こちらは、あまりにもびっくりです。
 11サイト中8サイトで、20%以上の容量削減を期待することができ、0.5秒以上の高速化が見込めることができるからです。この中には、数百万円の予算を投じたと予測されるメガ級のレスポンシブウエッブサイトも中にはあります。
 
 しかし、誰もが知っているような企業のサイトでも、ダウンロードに数十秒がかかってしまうわけです。そしてモビファイで試算すると、短縮効果も4~8秒も期待されるというサイトもでてきました。


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

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


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

 なぜ、このようなことが起こってしまうのでしょうか?
その理由を私なりにまとめてみました。問題は次です。

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

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

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

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

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



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

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

 サーバーサイドのテンプレート調整ですが、これは予算や内部の運用体制があればこれでもいいのでしょう。サーバーサイドの調整の問題点は、3倍から5倍のコスト増が必要だとされています。これは大企業や大規模なEコマースのオペレーション体制が内部にあることが前提です。
 しかし、95%の企業は、1)のレスポンシブウエッブデザインを選択せざるえません。やはり、まだ課題が大きいとはいえ、レスポンシブウエッブデザインには未来があるわけです。

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

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

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

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





2013年11月5日火曜日

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


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



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


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


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

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


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

 2つのまとめサイト

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

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



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



  • 56%  スクラッチでの専用サイト構築。
  • 19%  プロキシーソリューションによる変換サービス
  • 12%  レスポンシブウエッブデザイン
  • 7%   Onewebによる最適化サービス
  • 3%   サーバーサイドテンプレートによる調整
  • 3%   その他、および不明
  以上のような結果となりました。



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


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

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

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


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

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


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

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

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


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


結論として、

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


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

2013年10月18日金曜日

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

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

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

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

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


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

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

1.コンテンツ・機能が同一である(Complete)

2.操作が
直感的であること(Intuition)

3.スピード表示がされること(Fast)


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



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

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

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

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



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

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


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

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

知人に尋ねると

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

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


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

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




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

1.レスポンシブウエッブデザインと
2.サーバーサイドのテンプレート調整

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

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





2013年9月11日水曜日

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

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



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


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

 これまでのSafariでは、スクリーンの上端から下に向かってスワイプすることでNotification Centreを引き出すことができました。しかし、iOS 7ではデバイスの4辺がすべてが活用されます。
iOS 7では、ジェスチャ機能が組み込まれ、左から右へとスワイプすることでブラウザの履歴を一つ戻ることができ、右から左へとスワイプすることで一つ進むことができます。また画面下から上へとスワイプすることでControl Centerへアクセスができます。


サイトへの影響

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

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

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

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

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

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

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




サイトへの影響

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


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


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


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

 例えば、下のMobifyのページのスクリーンショットでは、iOS 7iOS 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をダウンロードすることをおすすめします。