スマートフォンサイトの検証は、アップル製品だけで十分という理由

Androidでの検証は不要？
アップル製品だけで検証を済ませられるか？

モバイルに注力をしようとする企業にとって、課題のひとつが

「ユーザーはどのデバイスを使って、モバイルコマースをするか」です。

　下記の調査は、モビファイ社(カナダ）で、同社のクラウドサービスを利用する主要20のモバイルウェブサイトからデータを集めたものです。ちなみにモビファイを使ったウエブの閲覧は、2012年に、合計560,792,165人(約5.6億人）により閲覧されており、この数字は世界人口の約8%、総計３0億個のウェブを閲覧した人たちに相当します。

　下記のチャートは、トップ20のモバイルウェブにアクセスした　20機種のデバイスを特定し、閲覧率に分けてみたものです。これほどの規模のデータサンプルは、ほかにありません。どのデバイスで閲覧と買い物が起こっているかがわかります。

※注意点としては、一種類のAndroid端末がiPhoneより売れることはないため、このデータではAndroidが少し過小評価されています。今後の記事では、デバイス毎ではなくOS毎にアクセス数を掲載します。

データを解釈

　驚くことに、iPhone, iPadとiPodユーザーが全体の85%をも占めていることが分かります。逆にトップ20の中から上位5位より下位の機種は、全体の1%にも達しません。
Apple製品からのアクセス率は極めて高いのです。

　モバイル市場調査会社のAsymcoによると：

　この２年間でモバイルアクセス量が5.2%から24%に増えた以外にも、iOSの成長がAndroidを上回るという現象が起こっている。ブラックフライデーのオンラインアクセス率を比較してみると、Androidは2010年の1.43%から2012年の4.92%へと成長したのに対し、iOSは、3.85%から18.46%へと成長しています。これはiOSがAndroidよりも５倍のアクセス数を占めているということになります。

　これらの数字は何を意味するのでしょうか？2012年時点では、台数のシェアはともかく、閲覧率においては、どのAndroid端末もAppleには対抗できていません。
　ということは、なにはともあれ、iPhoneやiPadに最適化したモバイルサイトの制作に注力すべきなのです。また端末検証のおいても、この数字をみればアップル製品のみでも事実上問題はないともいえます。

　もっともAndroid端末を無視しろという意味ではありませんが、AndroidはまだまだアプリおよびEコマースにもおいても利用率が低いというレポートがあります。こうしたデータを参考に、現時点においてどこに注力すべきかを費用対効果を考えて対応していくべきでしょう。モバイルサイトのデザイン制作においては、特定の端末で表示が崩れてしまい、その対応方法に苦慮しているという問題がありますが、こうした場合は、そのユーザー数の数と利用率を計算してみると判断が明快になるのではないでしょうか？

（参考資料）--------------------------------------------------------------------------------------------

　各国ごとのモバイルコマースにおけるApple製品の比率を見る場合には、下線のグローバルモバイルコーマスに関してのインフォグラフィックを参照ください。

世界のモバイルコマースは、平均27%。対して日本は24％。また、日本のモバイルコマース45％はアップル製品から生じています。またPCとスマートフォンとタブレットの割合は、それどれ 88%: 9%: 3% になっています。

デバイス上位10位（ユニークユーザー）

• iPhone                                       61.6%
• iPad -                                         17.1%
• Unknown                                    8.6%
• Sony Ericsson Xperia Arc          4.7%
• iPod Touch                                 4.6%
• Samsung Galaxy S II                   0.9%
• Motorola Droid X                        0.9%
• HTC Incredible                            0.5%
• HTC Incredible 2　                     0.5%
• Samsung Galaxy Nexus              0.1%

注：2012年10月15日まで、Google AnalyticsはGalaxyS2/S3/Note, Razr 4g, MyTouchをXperia Arcとして認識してしまうバグが報告されました。このバグはデバイス上位10位のリストのみ影響します－Android/iOS毎に分けたグラフは影響しません。もしGoogleがUAを正しく報告したのであれば、Xperia Arcの代わりにGalaxy S3が入り、不明機種のパーセンテージが減少するはずです。バグの詳細はここより参照できます。

見てのとおり、10月15日と16日の間で、Xperia Arcと不明のアンドロイド機種からのアクセス数が劇的に落ち、Galaxy S2/S3/Note, Razr 4g, MyTouchが増えています。

サイト分析から考える、モバイルサイト最適に構築するための4つの方法

モバイルサイト最適化のための4つのキーワード

　スマートフォンサイトの特徴は、PCサイトとは異なります。そのため、多くの混乱が生じています。モバイル向けに重要なコンテンツとはなにか？どのページを最適化させるべきか？さらにタブレットが登場し、新たなタブレットサイトの必要性も生まれ、混乱の度合いはますます高まっています。

今回は、モバイルサイトを素早く構築するためのアプローチをまとめてみました。

やっぱり、まずはサイト分析！

「迷ったらデータを見ろ」という鉄則どおり、スマートフォンやタブレットのためにPCサイトを最適化するには、サイト分析から始めるのが一番です。まだその割合が少なくてもモバイルからアクセスする人がいます。彼らの行動を研究することで、なにが一番大事なのか、どのようにニーズを満たせばいいかを考えていきます。

ステップ１：スマートフォンとタブレットの訪問者を区別する

　今回のレポートでは、調査分析にGoogle Analyticsを使います。人はデバイスによって行動パターンを変えることが分かってきました。
　しかもスクリーンサイズよりもコンテンツが大事なのです。

まずはモバイルのトラフィックを分析：

1.      Google AnalyticsのReporting項目に行きます

2.      Standard ReportsでAudienceからOverviewに変えます

3.      Advanced Segmentsを選択します

4.      All Traffic, Mobile Traffic, と Tablet Trafficをチェックします

5.      適用をクリック

　それぞれのデバイスから訪問数など、有益な情報がみてとれます。モバイルのトラフィック分析のやり方を学べば、直帰率（Bounce Rate）や平均PV数をデバイスごとに見ることができます。

ステップ２：トップページではなく、トップコンテンツをどうするか？

　ユーザーはどのページをもっとも訪れるのか？必ずしもトップぺージとは限りません。ほかのソースから訪れる場合は、どのページにランディングするのかをチェックしてみましょう。例えば、検索エンジンでは、トップページではなく、あなたの会社情報が見られているかもしれません。

トップコンテンツを探しだすためのステップ：

1.      Conent > Site Content > All Pagesへ行ってください。

2.      3つの項目（すべて、スマートフォン、タブレット）を個別に見て、違いがないか探ります。

3.      以上の手順をContent > Site Content > Landing Pagesで繰り返してください。

　ここから、どのページ制作に専念すべきかわかります。最も訪問されるトップ5と、ランディングページのトップ5をしっかり分析することです。ここだけでおよそ40-80％のモバイル・トラフィックを占めるはずです。

ステップ３　：もっとも重要なデバイスを選択する

どのデバイスを利用してサイトにアクセスされるのかをチェックしましょう。

まず、Google AnalyticsでAdvanced Segmentsの項目をすべて解除し、Audience > Mobile > Devicesへ行きます。

　ここから、どのモバイルデバイスに最適化するべきかの順位づけを考えます。スマートフォンサイトとタブレットサイトのどっちを先に作成するべきか？両方同時にやるべきか？などです。

ステップ４　：ベンチマークに必要な測定基準とは？

　モバイルでの訪問者がどのコンテンツを閲覧し、どのデバイスを使用しているかを理解すれば、モバイル化のための決断がしやすくなります。最後は、重要測定基準のレポート、ベンチマークやゴールを求めることです。

　モビファイで行っている測定基準：

•  コンバージョン率と収入

• モバイル訪問と全体比率

•  デバイス毎の直帰率

•  一訪問あたりのPV

•  よいコメントVS　マイナスのコメント（品質重視）

　ROI（投資収益率）を計算するためにも、これらの数値を必要です。

　最後に

　期的な成功に導くために、よくデザインされ、高いパフォーマンスを持つモバイルサイトが必要です。サイト分析により、モバイル化するのにあたって大事な情報を得たり、より良い決断をしたりすることが可能になります。

(この内容は、カナダ・Mobify社のレポートを日本向けにアレンジしたものです）

iOS対Android そのシェア争いの結果は？

iOS対Android　そのシェア争いの結果は？

ドコモからはTIZAN、KDDIではFirefoxによるモバイルOSが発表されましたが、ではこの新しいモバイルOSは、どういう戦いをこれから挑むことになるのでしょうか？

　アメリカにおけるモバイルOSの割合が、Mobify社により発表されました。これらは約2億人のユニークユーザーと2万件モバイルサイトを持つ、同社独自のネットワークから算出されたものです。

　私たちは、iOSとAndroidばかりに注目しているように思えますが、実はこの２つのOSだけで全体の93％のシェアを持っています。またBlackberryは４％。つまり残っているのがWindowsを含め３％に過ぎないというわけです。

• 赤＝Android
• 青＝iOS
• 紫＝イーブン　50:50

　結果として、赤く見える部分が、Androidのシェアが高い州。青く見えるエリアが、iOSの割合が高い州です。５０：５０のイーブンの州がむらさき色で表しています。

　ここで言えるのは、PCとモバイルでは異なる環境にあるということです。つまり、今後のモバイル戦略を考えるならば、93％のシェアを持つ iOSとAndroidにフォーカスしたほうが無駄がありません。

　よく質問を受ける中に、Windows Phone や　上記にあげた新OSについて質問がでますが、シェアが上がってくるまでは無視してもいい存在です。同様に、ブラウザも　Safari Chrome, Firefox Operaぐらいにとどめておくことが重要です。そのほかのブラウザはなきに等しいのです。またKindle Fireに搭載されているブラウザ、　Amazon Silkもまだまだシェアは小さすぎるといってかまいません。

　数字的な根拠とともに、注力する対象にフォーカスして、無駄のないモバイルサイト構築をすることが重要です。

モバイルサイトは、スクラッチで構築したほうが儲かるという「妖怪の正体」！

モバイルサイトは、

スクラッチで構築したほうが儲かるという「妖怪の正体」！

この1年間は、ずっとモバイルサイトをより効率的に作る方法というものを調査・研究してきました。ようやく、はっきりしてきたので、これらを整理してまとめようとおもっています。
　ところがやっかいなのが、目に見えぬ壁、理想を追わないほうが儲かるという壁です。

１．スクラッチで構築する

まず、スマートフォンサイトの多くが「スクラッチ構築」で作られています。つまり、手作業で、別途でスマートフォンサイトを作る手法のことで、大手サイトの約6割はこの構築方法で作られています。

○と×

○自由に、制限なくモバイルサイトが構築できる。

×運用コストが延々にかかる。×別サイトでマーケティング的に不都合。

　だから、そろそろ企業のWEB担当者はもう気づいています。スクラッチで構築すると「最初はやすく済ませられるけど、あとあとのコストが大変に無駄」と。

２．サーバーサイドでテンプレート調整

CMSをベースにする手法のひとつですが、サーバーサイトでのテンプレート調整で対応します。これはエンジニアがテンプレートを設計する方法です。仕組みとして持っているというよりも、個別でスクラッチで構築される場合もあります。一元管理できるという点では、ある意味で理想のアプローチですが、エンジニアのコストや微調整におけるスピード感、またデザインのフレキシビリティで考えると、問題は少なくありません

○一元管理できる 

×コストがかかりすぎる。 

×小回りがきかない。融通性がない。 

×実際の対応はスクラッチで構築が多い 

　このほかにも、プロキシーソリューションやアプリ対応などがありますが、北米では、ほぼレスポンシブウエブデザインと、このサーバーサイドテンプレート調整の２つに絞られてきた感じがあります。（後述しますね。今度）

古いやり方のほうが業者は儲かるという現実

　ともかく、スクラッチは、マルチスクリーン時代においては、領域が変わるため、今後のモバイル対応には向かない手法です。
　またサーバーサイドのテンプレート調整を含め、より効率的にものごとを解決するよりも、従来のやり方をしたほうが、都合がよく「儲かる」という本音もあります。

（なんとなく暴露系ジャーナリズムのようになってきましたが、、、、）

　スクラッチでの構築は、制作費がかかり、その後の運用更新でも作業料がかかります。また、サーバー代やチェックにもが二重にコストがかかるために、理屈として請求がしやすくなるようです。
　業者の口説き文句は、「モバイルとPCは違うから、専用サイトでいいですよ。」「スマホはモバイルファーストで作る必要があります」「デザインも自由にできます」と、ものすごい根拠のセールストークをするようです。


　また、サーバーサイドのテンプレート調整でも、ある大手ベンダーの技術担当者がいいまいした。「安く効率的に作るよりも、5000万円ぐらいのCMSを売りつけたほうが儲かるですよ」「毎月のメンテナンス費用も結構稼げます」「コンテンツ移行させるのだけでも結構手間だから200万円～300万円くらいかかります」

（もうすっかりナニワ金融道の世界です。）

　大手広告代理店においては「もっと儲かる仕組みならうれしいんですけど、なんとかなりませんか？」と尋ね返して来る始末です。

某・元大手ITベンダーの関係者が、私にアドバイスしてくれました。

「昔からそうなんですよ。ITやインターネットといっても、元は建築関係の見積もり構造なんです。なのでオーソドックスで儲かる仕組みをキープしようとします。大手になればなるほどそういうもんですよ」


企業担当者もわかってはいるが、なかなか整理は難しい。

　企業担当者の方もいいます。「まあ相手も儲けないといけないだろうから、今は高くならなければ許せる部分があるけど、今後はねえ～。そりゃもちろん、ダメでしょ。」

　もっとも、企業担当者の大変です。スマートフォンだけではなく、タブレット対応も考える必要があるし、One　WEB化対応の必要性、PCではなくモバイル中心のWEBリニューアルなど、まさに激動期で、「なにがベターか」は、混乱は高まるばかりでしょう。

　私としては、今後の変化に対応できる、リーズナブルで、フレキシブルなモバイルステップアップ方法をレポートしていきいたいと考えています。なのでよろしくお願いします。

Googleのエンハンスド・キャンペーンは、モバイルサイトをどう変える？

「グーグルが、モバイルとデスクトップ、それぞれの広告の壁を吹き飛ばす！」

　2月6日に、Googleが自らのブログニュースで、奇妙なニュースを流しました。
2013年の半ば、7月頃に、いままでのモバイル広告とPC向けの広告の区別を止めて、ひとつに広告手法に統合するというものです。これを「エンハンスド・キャンペーン」といいます。

http://www.businessinsider.com/google-blends-desktop-and-mobile-ads-2013-2?utm_source=Responsive+Design+Weekly&utm_campaign=82238c0a14-Responsive_Design_Weekly_044&utm_medium=email


　この発表が意味するものはなんでしょうか？

　　今後のGoogleの広告キャンペーンにおいては、スマートフォン、タブレット、パソコンなどの複数のスクリーンにおいて常に橋渡しができるように設計されます。また、全媒体を合わせたレポートの作成も可能になるといいます。


　これによるメリットはなんでしょうか？　CNETで報じられいるメリットでいえば、

• デバイス、場所、時間帯といった状況に合わせたデータ管理。ひとつの広告キャンペーンで、すべての表示媒体に対しての入札単価の調整が可能。

• ユーザーの状況に合わせた広告の最適化が可能

• 異なるデバイスにまたがってコンバージョンを測定できるレポートの作成が可能

つまりチャネル単位ではなく、より人にフォーカスしたプロモーションが可能になるといいます。


　また、逆にデメリットはなんでしょうか？

クライアントにとっては２つありそうです。ひとつは、いままでより多くの広告費を支払う必要があるということ。これはGoogleのAdwords広告のクリック単価（CPC)が、５四半期連続で下がり続けていることにも要因があります。Googleには下がりきったモバイル広告の単価をあげたいという目論見があるからです。

　ランディングページのOneWeb化も大きな課題

これも重要な問題です。というのも、現在はモバイル用とPC用では、ほとんどの場合、ランディングページが別々に作られています。つまり「領域」がことなるわけです。スクラッチの方法もそうですが、CMSでサーバーサイドテンプレート構築、プロキシーソリューションの変換サービスで作られたモバイルサイトは、どれもそうです。

　もし、今後のリスティング広告を結果を正確に分析しようとすると、ランディングページは同一URL、OneWeb化が必至となります。そうしないと、レポートの整理が乱雑になってしまい、その整理はやっかいになるからです。

　あるメディアの友人が応えてくれました。

「メディア側というよりも、企業側のほうが大変じゃないでしょうか。Eコマースやリスティング広告を使用する企業なら、One　Web化のためにサイト設計をやり直す可能性もでてくるでしょう。解決策は、Onewebによる最適化サービスやそれに対応したCMS構築、レスポンシブデザインの３つしかありません。それ以外の方法で構築すると、再び手直しが必要になって来る可能性があります」

　つまり、現状では、ランディングページは別々の場合がほとんどである。いままでは、デバイスというチャンネルに対して広告課金されていたから、それ専用のランディングページでもよかった。それが今後は、人に対して広告料をとるという仕組みになってくる。もうチャンネルはどこでもよくて、その経由など補足するには、「One Web」=ひとつのURLでないと都合が悪くなるというわけです。
　　企業側はマルチ・チャンネル化によりコスト増なのに、別ページとなるモバイルページやプロキシーソリューションでは、再びやり直す必要もでてきている。

タブレット対策、OneWeb化など、いまから無駄のないモバイルサイトの構築を考えておく必要がますます大切になってきました。

モバイルファーストは、ファーストフードなり～？

モバイルファーストは、ファーストフードなり～？


 前回のレポートでは、「PCサイトは幕の内弁当なり～！」というテーマをまとめて見ました。これはPCサイトには、できるだけ多くの要素を詰め込むことが常に考えられてきたからです。過去15年間以上、私たちに染みついてしまったパッケージ手法です。それは、受け手というよりもむしろ、「送り手の思いを詰め込むためのテクニック」だったようにも考えられます。

 さて、今後重要視されるモバイルファーストのデザインとはなんでしょうか？
 これは（１）圧倒的に画面スペースが小さいということです。次に、使われ方が（２）屋外で利用されることが多いということです。これらは、フューチャーフォンの時代にも、よく語られたことでしたが、以前は、PCとフューチャーフォンは別ものと捉えられていました。しかし、今ではスマートフォンがPCと同じものであり、PCやタブレットと連携しながら使うことが可能になったことから、よりモバイルに適した設計やPCとの連動できる設計が求められています。

 米国のスターバックスのWebサイトは、現在レスポンシブデザインで展開されていますhttp://www.starbucks.com/。

 レスポンシブデザインというのは、さまざまなデバイスに対して、適合できる手法の一つで、今後のマルチスクリーン、マルチデバイスへの最適表示方法として注目されている手法の一つです。
しかし、私の友人のMobify社イゴール・ファレスキーが、昨年末にシアトルでスターバックスのWeb担当者からコメントをもらったようです。「今回のリニューアルは、一部では失敗だった」ことを認めたようです。

みなさんは、なにが失敗だったのか、実際にスマートフォンで試してみてもらえますか？

http://www.starbucks.com/

 　結論としては、モバイルでムービーは不要だったということです。つまり、PCと同じコンテンツの扱いは、かならずしも正ではないということです。モバイルで必要だったのは、ストアロケ-ター（店舗位置情報）だったり、キャンペーン限定商品だったりと、優先準備が変わってきます。
モバイルファーストの発想に立てば、よりターゲットの状況に即したコンテンツを提供することが重要です。


 この場合、レスポンシブデザインは、マルチスクリーン対応を考慮したものの、モバイルファーストは十分に考慮されていなかったと言えます。

  モバイルファーストを考える上で、例えのひとつとしてファーストフードがふさわしいでしょう。マクドナルド、吉野屋、ケンタッキーなどなど、前回の「PCサイトは幕の内弁当なり～」とは大きく変わってきます。

  ポイントは、素早いこと、目的が明確であること、価格がリーズナブル、この３つに集約できるのではないでしょうか？

（１）すばやいこと
目的の商品がすばやく探せますか？つまりローディング時間が高速でないといけません。また、素早く探せるUIも必要です。

（２）目的が明確であること
目的が買い物なのか、地図なのか、料金表なのか、より明確な選定が必要です。スターバックスの場合は、ショートムービーよりは店舗情報検索でした。ターゲットをもう一度見直して、彼らが求める内容を精査する必要があります。

（３）価格がリーズナブル＝モバイルならでの手頃感
お手軽であることが重要です。とくにEコマースの場合は手軽に購入できる商品を中心にまとめることを考慮する必要があり、そういう意味では、PCサイトとは違う商品を用意することも必要のようです。

　そして、ここでは、より多くの要素ではなく、限られた要素に絞ることも重要です。PCサイトは真逆なミニマムな発想をもって検討してみることが必要です。
これらを検討しながら、「モバイルファーストのためのサイト作り」を考えてみてはいかがでしょうか？

PCサイトは、幕の内弁当なり〜！

　最近、「モバイルファースト」を考える機会が多いのですが、そもそもデスクトップサイトというのは「いかに情報を詰め込むか」という、なりゆきで始まったと感じています。
　つまり限られたサイズの中で、いかに情報を効率よく詰め込み、ポイントを押さえるか。これは雑誌のレイアウトの原則だったのではないかと思っています。かつて、雑誌の編集者をしていた頃に、デザイナーのN親分が、教えてくれたことがあります。
「ただ詰め込んじゃダメ。なにがポイントかを考えてラフを描くんだ」と。

ビギナー編集者というのはどうしても要素を詰め込んでしまいがちです。「白スペース恐怖症」というのもありました。でも、こういうページは、「どこがポイントであるかどうか、わからない」からダメページにあるというのです。
答えとしては、「つまりポイントを作れ」でした。

今考えると、雑誌デザインは、雑多な要素に調和をといれた「幕の内弁当」だったともえいえます。この写真の場合、ポイントとなるのは、エビフライです。



さて、幕の内弁当デザインといえばヤフーです。

かつてのヤフーのデザインはこれでした。それが10年後にはこうです。

1997年　　　　　　　　　　　　　　　　　　　　　　　2010年

→　

どうでしょうか？
複雑化をつづけながらも、「そうじゃいけない、よりわかりすく、より多く」という「整理とポイントの歴史」を続けてきたといえるでしょう。
ヤフーの場合はレクタングル・バナー枠が「エビフライ」に相当するのでしょう。


モバイルファーストの時代は、ファーストフードの発想で。

モバイルファーストの時代になってくると、今度は、情報を最小化していく必要があります。幕の内弁当ではなく、「ファーストフード」に切り替える発想だとおもっています。

マクドナルト、吉野屋、Coco壱番屋、KFC・・・・・


『モバイルファースト』著者　ルーク・ウロブロスキーがいいます。
ユーザーに場所や、そのときのニーズ、つかい用途を考えてデザインしていく必要があると。

しかし、問題は、それをどう実践していくかが重要です。なにしろ我々は15年以上も「幕の内弁当」の発想でWebサイトを作り続けてきたきたわけですから、そう簡単には切り替えられないのです。シンプルで要素の少ないデザインをできるでしょうか。

雑誌デザインでいう「白スペース恐怖症」に似た、シンプルすぎる要素を
どう判断していくことになるでしょうか？
ぜひこれについて、ご意見お願いします。