Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
i メディア をもっと面白く!

スマートフォンサイト
対応の大誤解!

Copyright © 2014 DOMO.INC All Rights Reserved.

1
i メディア をもっと面白く!

モビファイ

マルチスクリーン対応のための信頼のサービス

Googleのマルチスクリーン
アプルーブド・ベンダー」に認定
「アプルーブド・
モビファイは、米Googleによる「アプルーブド・ベンダー」に認
定...
i メディア をもっと面白く!

マルチスクリーン時代へ
モバイルの波は今後…
モバイルの波は今後…
スマートフォンからタブレットへ

さらにマルチスクリーンへ
ポータル革命

1995~
~

サーチエンジン革命

2000~
~

ソーシャ...
i メディア をもっと面白く!

大誤解 1

日本はモバイルの先進国だ

Copyright © 2014 DOMO.INC All Rights Reserved.

4
i メディア をもっと面白く!

2012年スマートフォン普及率

←後進国?
後進国?

Copyright © 2014 DOMO.INC All Rights Reserved.

5
i メディア をもっと面白く!

数字で見るモバイル時代
• アメリカでは普及率はすでに58%に到達
(出展: comScore)

12億人以上がモバイルからWEBアクセスをしています。
( 出展: Trinity Digital Marke...
i メディア をもっと面白く!

私たちがここ数年で感じる数字
•
•
•
•
•

ガラケーを問う人 2012年春に絶滅!
PCが残るという人 40-50代の男性か?
女性の普及率が 40%を超え始めてきている。
ファーストフードでは 80%...
i メディア をもっと面白く!

大誤解 2
まずは、スマートフォン対応だ。
まだタブレットは少ない!

Copyright © 2014 DOMO.INC All Rights Reserved.

8
i メディア をもっと面白く!

iPad対応も時間の問題です。
2012年のモバイルコマースの売上高は前年比81%増の約250億ドル
約250億ドル、また2013年は前年比55.7%
億ドル
増の384億ドル
384億ドル
384億ドルに達す...
i メディア をもっと面白く!

モバイル最適化とは?
2012年以前
=
スマートフォン対応のみ
2013年
=
=
=

スマートフォン対応
タブレット10inch
タブレット 7inch

スマホ対応から、
マルチスクリーン時代へ
Cop...
i メディア をもっと面白く!

スマホ対応だけの問題ではない!

By Brad Frost
Copyright © 2014 DOMO.INC All Rights Reserved.

11
i メディア をもっと面白く!

大誤解 3

アンドロイド躍進。
iOSを塗り替えていく!

Copyright © 2014 DOMO.INC All Rights Reserved.

12
i メディア をもっと面白く!

iPhone、iPadとiPodユーザーが
全体の85%を占めている
Mobify社調査
主要20のモバイルウェブ
サイトからデータを集めた
ものです。2012年にこれら
サイトは、合計
560,792,165...
i メディア をもっと面白く!

もっとも利用が高いデバイスで
最適なWEBを考えるべき
最適な
を考えるべき
デバイス上位10位(ユニークユーザー)
iPhone
61.6%
iPad 17.1%
Unknown
8.6%
Sony Eric...
i メディア をもっと面白く!

つまり、
・注力すべきは、アップル製品である。
個々のアンドロイド端末は

1%にも満たない。
・iPhoneだけでなく、iPadへの対応は不可欠
・解決策として、
検証はコスト高。アプリのように割り切る
各機...
i メディア をもっと面白く!

大誤解 4
これからもずっと
PC中心に
Webリニューアルがいい

Copyright © 2014 DOMO.INC All Rights Reserved.

16
i メディア をもっと面白く!

「モバイルファースト」を提唱したLuke Wroblewski氏

Luke Wroblewski ルーク・ウロブルスキー
プロダクトの戦略や製品のデザインのコンサルタント会社「LukeW Ideation &...
i メディア をもっと面白く!

「モバイルファースト」を
推進する理由
成長するモバイル市場をターゲットにできる。
モバイルのマーケットは、拡大しています。Google Map の利用者は40%がすでに
モバイルからです。また、シーズンによっ...
i メディア をもっと面白く!

Copyright © 2014 DOMO.INC All Rights Reserved.

19
i メディア をもっと面白く!

大誤解 5
専用サイトをスクラッチで
構築すれば、面倒ではないし、

安く、早くできる?

Copyright © 2014 DOMO.INC All Rights Reserved.

20
i メディア をもっと面白く!

校正作業をできますか?

Copyright © 2014 DOMO.INC All Rights Reserved.

21
i メディア をもっと面白く!

運用コストの削減

ワンソース・マルチデバイス
Copyright © 2014 DOMO.INC All Rights Reserved.

22
i メディア をもっと面白く!

大誤解 6

モバイルのサイトは
専用の別サイトで作る

Copyright © 2014 DOMO.INC All Rights Reserved.

23
i メディア をもっと面白く!

OneWeb以外では、領域が異なる
SEO
PC

メールリンク

領域B
領域A

m.yourdomain.co.jp
yourdomain.co.jp/SP/

領域
領域C
スマート
フォン
タブレット...
i メディア をもっと面白く!

●領域が変わると、リンクが異なる。ランディン
グページが別になる。
●スクラッチやプロキシーソリューションでは、
計測がしにくくなる。つまり…各デバイス間にお
けるユーザー遷移がわかりにくくなる。
デジタルメデ...
i メディア をもっと面白く!

レスポンシブウェブデザイン

Copyright © 2014 DOMO.INC All Rights Reserved.

26
i メディア をもっと面白く!

なぜ、OneWebが必要か?
が必要か?
なぜ、
グーグル、スマホ対応が不適切な
サイトの検索順位を引き下げへ

Googleは、リダイレクト設定の間違った例としてこの例を紹介している。Googleは、
この設...
i メディア をもっと面白く!

結論
マルチスクリーン時代は

One Web
でなければならない
Copyright © 2014 DOMO.INC All Rights Reserved.

28
i メディア をもっと面白く!

マルチスクリーン対応で、さらに絞られる
レスポンシブ
プラグイン対応

携帯コンバート

スクラッチ構築

Copyright © 2014 DOMO.INC All Rights Reserved.

デザイ...
i メディア をもっと面白く!

大誤解 7
LTEの時代だから、
表示スピードは気にしなくていい

Copyright © 2014 DOMO.INC All Rights Reserved.

30
i メディア をもっと面白く!

離脱が起こる

スマートフォンの表示時間に
5秒以上かかると、74%が
離脱する。 By Google

Copyright © 2014 DOMO.INC All Rights Reserved.

31
i メディア をもっと面白く!

アマゾン発表 amazon
0.1秒ごとに1%のコンバージョンロス発生

Copyright © 2014 DOMO.INC All Rights Reserved.

32
i メディア をもっと面白く!

ページロードに

1秒 遅れると・・・・・

7%

11%

16%

のコンバージョン
が減少

のページビュー
減少

のユーザー満足
度の減少

もし金額におきかえると、

1日1000万円を売り上げて...
i メディア をもっと面白く!

大誤解 8
とりあえずマートフォンサイトの
デザインをすればいい。

Copyright © 2014 DOMO.INC All Rights Reserved.

34
i メディア をもっと面白く!

Copyright © 2014 DOMO.INC All Rights Reserved.

35
i メディア をもっと面白く!

UIの改善で
効果がUP!
Copyright © 2014 DOMO.INC All Rights Reserved.

36
i メディア をもっと面白く!

ポイント
• 柔軟なデザイン 再現性はあるか?
• UI/UXデザインを高められるか?
→多くのソリューションでは、融通性が
きかないケースが多い
Copyright © 2014 DOMO.INC All R...
i メディア をもっと面白く!

大誤解 9

タブレット専用デザインは、
まだ時期尚早だ

Copyright © 2014 DOMO.INC All Rights Reserved.

38
i メディア をもっと面白く!

タブレットも15%が保有

総務省調査
タブレット型端末の普及率は前年末の8・5%から
15・3%に上昇。パソコンは77・4%から75・8%
15・3%
に微減となった。

■タブレットに適している対象
子供用...
i メディア をもっと面白く!

国内実績

タブレットデザインの意味

4~5inch

ポートレート表示

確実にコンバージョンがアップ!
7inch
Copyright © 2014 DOMO.INC All Rights Reserve...
i メディア をもっと面白く!

やってはいけないこと
×スクラッチでの専用サイト構築
×プロキシーソリューションでのサイト構築
×リダイレクト

Copyright © 2014 DOMO.INC All Rights Reserved.

...
i メディア をもっと面白く!

マルチスクリーン対応
とは?

• One Web 同一
同一URL
• ワンソース・マルチ
デバイス
• 高速ローディング表
示
• デザイン再現性
UI/UX
• タブレット対応
Copyright © 2...
i メディア をもっと面白く!

Mobifyは米
は米Googleが認定した
が認定した
は米
が認定
マルチスクリーンベンダーです。
http://www.google.com/think/mult
iscreen/vendors.html...
Próxima SlideShare
Cargando en…5
×

モバイルサイト構築の大誤解!

809 visualizaciones

Publicado el

スマートフォン対応の潜在意識を変える!

その認識でホントにいいのですか?
スマートフォン・タブレットの急速な普及によって迫られるマルチスクリーン対応。いままでの概念を覆す8つの大誤解を紐解きます。

Publicado en: Tecnología
  • Sé el primero en comentar

モバイルサイト構築の大誤解!

  1. 1. i メディア をもっと面白く! スマートフォンサイト 対応の大誤解! Copyright © 2014 DOMO.INC All Rights Reserved. 1
  2. 2. i メディア をもっと面白く! モビファイ マルチスクリーン対応のための信頼のサービス Googleのマルチスクリーン アプルーブド・ベンダー」に認定 「アプルーブド・ モビファイは、米Googleによる「アプルーブド・ベンダー」に認 定されています。Googleはレスポンシブウェブデザインをマルチ スクリーン時代の推奨Webとしていますが、モビファイはレスポ ンシブウェブデザインと同じ状態をJavaScript適合で実現します 。結果、SEO対策、ソーシャルシェア、アクセス解析においても 理想的なWeb環境を作り出します。 米フォレスター・リサーチ:レポート モバイルEコマースのトップベンダー10社の 中で、Web部門において最高得点を獲得 米フォレスター・リサーチは、2013年12月27日、今後のEコマー ス・リテイラーの用途や目的にかなうトップモバイルベンダー10社 の評価を発表しました。このモバイルWeb部門において、モビファ イ社は全10社の中でもっとも高い評価ポイント(5.0point)を獲得 しました。 Copyright © 2014 DOMO.INC All Rights Reserved. Mobile Web部門 部門 5点満点 点満点
  3. 3. i メディア をもっと面白く! マルチスクリーン時代へ モバイルの波は今後… モバイルの波は今後… スマートフォンからタブレットへ さらにマルチスクリーンへ ポータル革命 1995~ ~ サーチエンジン革命 2000~ ~ ソーシャル革命 2010~ ~ マルチスクリーン革命 2014~ ~ マルチスクリーン革命が必ず来る! Copyright © 2014 DOMO.INC All Rights Reserved. 3
  4. 4. i メディア をもっと面白く! 大誤解 1 日本はモバイルの先進国だ Copyright © 2014 DOMO.INC All Rights Reserved. 4
  5. 5. i メディア をもっと面白く! 2012年スマートフォン普及率 ←後進国? 後進国? Copyright © 2014 DOMO.INC All Rights Reserved. 5
  6. 6. i メディア をもっと面白く! 数字で見るモバイル時代 • アメリカでは普及率はすでに58%に到達 (出展: comScore) 12億人以上がモバイルからWEBアクセスをしています。 ( 出展: Trinity Digital Marketing) • 日本の保有率 45.6% (博報堂DY) • スマートフォン(多機能携帯電話)の2012年末の世 帯普及率が49・5%と前年末(29・3%)から大きく伸 び、世帯のほぼ半数に達した (出展:総務省) • Eメールのうち25.85% はモバイルで開封され、10.16% はタブレットで開封されます。(出展: Knotice 46%) Copyright © 2014 DOMO.INC All Rights Reserved. 6
  7. 7. i メディア をもっと面白く! 私たちがここ数年で感じる数字 • • • • • ガラケーを問う人 2012年春に絶滅! PCが残るという人 40-50代の男性か? 女性の普及率が 40%を超え始めてきている。 ファーストフードでは 80%越えもでてきた スマートフォンの滞在時間が非常に長い • シニア層のタブレット利用が20%を越えはじめ てきた。 Copyright © 2014 DOMO.INC All Rights Reserved. 7
  8. 8. i メディア をもっと面白く! 大誤解 2 まずは、スマートフォン対応だ。 まだタブレットは少ない! Copyright © 2014 DOMO.INC All Rights Reserved. 8
  9. 9. i メディア をもっと面白く! iPad対応も時間の問題です。 2012年のモバイルコマースの売上高は前年比81%増の約250億ドル 約250億ドル、また2013年は前年比55.7% 億ドル 増の384億ドル 384億ドル 384億ドルに達すると予測。eコマース総売上高の中でモバイルコマースの占める割合も、 2012年が11% 11%で、2013年が15% 15%と増え続けています。 注目はモバイルデバイス別の売上高で 11% 15% 2012年には、タブレットによる売上げは、スマートフォンの売上げを追い越し、さらにその差は広 がっていくと予測されています。今後のモバイルコマースを牽引するのはタブレットであり、日本 でも、PCに置き換わる利用が見込まれています。 eMarketer調査 Copyright © 2014 DOMO.INC All Rights Reserved. 9
  10. 10. i メディア をもっと面白く! モバイル最適化とは? 2012年以前 = スマートフォン対応のみ 2013年 = = = スマートフォン対応 タブレット10inch タブレット 7inch スマホ対応から、 マルチスクリーン時代へ Copyright © 2014 DOMO.INC All Rights Reserved. 10
  11. 11. i メディア をもっと面白く! スマホ対応だけの問題ではない! By Brad Frost Copyright © 2014 DOMO.INC All Rights Reserved. 11
  12. 12. i メディア をもっと面白く! 大誤解 3 アンドロイド躍進。 iOSを塗り替えていく! Copyright © 2014 DOMO.INC All Rights Reserved. 12
  13. 13. i メディア をもっと面白く! iPhone、iPadとiPodユーザーが 全体の85%を占めている Mobify社調査 主要20のモバイルウェブ サイトからデータを集めた ものです。2012年にこれら サイトは、合計 560,792,165人(約5.6億人) から閲覧されており、この 数字は世界人口の約8%、 総計30億個のウェブを閲 覧した人たちに相当。 Copyright © 2014 DOMO.INC All Rights Reserved. 13
  14. 14. i メディア をもっと面白く! もっとも利用が高いデバイスで 最適なWEBを考えるべき 最適な を考えるべき デバイス上位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% Copyright © 2014 DOMO.INC All Rights Reserved. 85%が アップル製品 14
  15. 15. i メディア をもっと面白く! つまり、 ・注力すべきは、アップル製品である。 個々のアンドロイド端末は 1%にも満たない。 ・iPhoneだけでなく、iPadへの対応は不可欠 ・解決策として、 検証はコスト高。アプリのように割り切る 各機種対応を改める必要がある Copyright © 2014 DOMO.INC All Rights Reserved. 15
  16. 16. i メディア をもっと面白く! 大誤解 4 これからもずっと PC中心に Webリニューアルがいい Copyright © 2014 DOMO.INC All Rights Reserved. 16
  17. 17. i メディア をもっと面白く! 「モバイルファースト」を提唱したLuke Wroblewski氏 Luke Wroblewski ルーク・ウロブルスキー プロダクトの戦略や製品のデザインのコンサルタント会社「LukeW Ideation & Design」のデザイナー兼設立 者。 実績は素晴らしく、Twitterに買収された「Bag Check」のCTO、Yahoo!USAのチーフアーキテクトとしてマル チデバイス向けの商品開発、eBayのユーザーインターフェイスデザイナーとして「eBay Express」のリリース など様々な企業での役職を経験し、現場で活躍している ”できるデザイナー” として世界的に有名です。 さらには、Interaction Design Association(IxDA)はボードメンバーであり共同設立者の一人です。その実力 から世界初のグラフィカルがブラウザが生まれたイリノイ州立大学でインターフェイスデザインの教授として 教鞭をとっています。著書には「モバイルファースト」と「Web Form Design」がある。 著書 「 Mobile First 」 「 Web Form Design & Site-Seeing 」 「 A Visual Approach to Web Usability 」 Copyright © 2014 DOMO.INC All Rights Reserved. 17
  18. 18. i メディア をもっと面白く! 「モバイルファースト」を 推進する理由 成長するモバイル市場をターゲットにできる。 モバイルのマーケットは、拡大しています。Google Map の利用者は40%がすでに モバイルからです。また、シーズンによっては50%以上がモバイルからGoogle Map を 利用しています。そのモバイルの市場自体は、大きく成長しており2012年にはモバイ ルの市場はデスクトップ市場を超えると予測されています。 コンテンツフォーカスできること。 モバイルのスクリーンは表示できるサイズが限られています。それゆえ不要なコン テンツは表示せず必要なコンテンツだけを表示します。「モバイルファースト」を推し進 めることで重要で必要なコンテンツが浮き出ます。 モバイルの様々な機能を利用する発想を得ること。 モバイルには様々な機能が備えられています。例えば、GPS、加速度センサー、オリ エンテーションなどの機能があります。モバイルを最初に開発することは、デスクトップ にはない、モバイル固有の機能を利用したアプリケーション開発を意味することでもあ ります。 Copyright © 2014 DOMO.INC All Rights Reserved. 18
  19. 19. i メディア をもっと面白く! Copyright © 2014 DOMO.INC All Rights Reserved. 19
  20. 20. i メディア をもっと面白く! 大誤解 5 専用サイトをスクラッチで 構築すれば、面倒ではないし、 安く、早くできる? Copyright © 2014 DOMO.INC All Rights Reserved. 20
  21. 21. i メディア をもっと面白く! 校正作業をできますか? Copyright © 2014 DOMO.INC All Rights Reserved. 21
  22. 22. i メディア をもっと面白く! 運用コストの削減 ワンソース・マルチデバイス Copyright © 2014 DOMO.INC All Rights Reserved. 22
  23. 23. i メディア をもっと面白く! 大誤解 6 モバイルのサイトは 専用の別サイトで作る Copyright © 2014 DOMO.INC All Rights Reserved. 23
  24. 24. i メディア をもっと面白く! OneWeb以外では、領域が異なる SEO PC メールリンク 領域B 領域A m.yourdomain.co.jp yourdomain.co.jp/SP/ 領域 領域C スマート フォン タブレットの場合も yourdomain.co.jp/T/ t.yourdomain.co.jp Copyright © 2014 DOMO.INC All Rights Reserved. 24
  25. 25. i メディア をもっと面白く! ●領域が変わると、リンクが異なる。ランディン グページが別になる。 ●スクラッチやプロキシーソリューションでは、 計測がしにくくなる。つまり…各デバイス間にお けるユーザー遷移がわかりにくくなる。 デジタルメディアは、「計測できるからこそ価値 がある」。ーーComscore WEBの問題ではなく、事業戦略の問題だ。 Copyright © 2014 DOMO.INC All Rights Reserved. 25
  26. 26. i メディア をもっと面白く! レスポンシブウェブデザイン Copyright © 2014 DOMO.INC All Rights Reserved. 26
  27. 27. i メディア をもっと面白く! なぜ、OneWebが必要か? が必要か? なぜ、 グーグル、スマホ対応が不適切な サイトの検索順位を引き下げへ Googleは、リダイレクト設定の間違った例としてこの例を紹介している。Googleは、 この設定がモバイル端末でウェブサイトを閲覧しているユーザーにとってわずら わしいものだと述べた。このような設定では、そのウェブサイトは、モバイル検索 結果での表示順序が下がることになる。 出展:Google Copyright © 2014 DOMO.INC All Rights Reserved. 27
  28. 28. i メディア をもっと面白く! 結論 マルチスクリーン時代は One Web でなければならない Copyright © 2014 DOMO.INC All Rights Reserved. 28
  29. 29. i メディア をもっと面白く! マルチスクリーン対応で、さらに絞られる レスポンシブ プラグイン対応 携帯コンバート スクラッチ構築 Copyright © 2014 DOMO.INC All Rights Reserved. デザイン 最適化サービス 簡易コンバート 自動変換や プロキシーソリューション CMS サーバーサイド テンプレート調整 HTML5? 29
  30. 30. i メディア をもっと面白く! 大誤解 7 LTEの時代だから、 表示スピードは気にしなくていい Copyright © 2014 DOMO.INC All Rights Reserved. 30
  31. 31. i メディア をもっと面白く! 離脱が起こる スマートフォンの表示時間に 5秒以上かかると、74%が 離脱する。 By Google Copyright © 2014 DOMO.INC All Rights Reserved. 31
  32. 32. i メディア をもっと面白く! アマゾン発表 amazon 0.1秒ごとに1%のコンバージョンロス発生 Copyright © 2014 DOMO.INC All Rights Reserved. 32
  33. 33. i メディア をもっと面白く! ページロードに 1秒 遅れると・・・・・ 7% 11% 16% のコンバージョン が減少 のページビュー 減少 のユーザー満足 度の減少 もし金額におきかえると、 1日1000万円を売り上げているEコマースリテイラーの場合、年間で 算出すると、 2億5000万円の売上損失となる。 Copyright © 2014 DOMO.INC All Rights Reserved. 33
  34. 34. i メディア をもっと面白く! 大誤解 8 とりあえずマートフォンサイトの デザインをすればいい。 Copyright © 2014 DOMO.INC All Rights Reserved. 34
  35. 35. i メディア をもっと面白く! Copyright © 2014 DOMO.INC All Rights Reserved. 35
  36. 36. i メディア をもっと面白く! UIの改善で 効果がUP! Copyright © 2014 DOMO.INC All Rights Reserved. 36
  37. 37. i メディア をもっと面白く! ポイント • 柔軟なデザイン 再現性はあるか? • UI/UXデザインを高められるか? →多くのソリューションでは、融通性が きかないケースが多い Copyright © 2014 DOMO.INC All Rights Reserved. 37
  38. 38. i メディア をもっと面白く! 大誤解 9 タブレット専用デザインは、 まだ時期尚早だ Copyright © 2014 DOMO.INC All Rights Reserved. 38
  39. 39. i メディア をもっと面白く! タブレットも15%が保有 総務省調査 タブレット型端末の普及率は前年末の8・5%から 15・3%に上昇。パソコンは77・4%から75・8% 15・3% に微減となった。 ■タブレットに適している対象 子供用 主婦層・女性層 シニア層 Copyright © 2014 DOMO.INC All Rights Reserved. 勉強・ホビー 料理、ショッピング 趣味、株トレード 39
  40. 40. i メディア をもっと面白く! 国内実績 タブレットデザインの意味 4~5inch ポートレート表示 確実にコンバージョンがアップ! 7inch Copyright © 2014 DOMO.INC All Rights Reserved. 9.7inch ランドスケープ表示 40
  41. 41. i メディア をもっと面白く! やってはいけないこと ×スクラッチでの専用サイト構築 ×プロキシーソリューションでのサイト構築 ×リダイレクト Copyright © 2014 DOMO.INC All Rights Reserved. 41
  42. 42. i メディア をもっと面白く! マルチスクリーン対応 とは? • One Web 同一 同一URL • ワンソース・マルチ デバイス • 高速ローディング表 示 • デザイン再現性 UI/UX • タブレット対応 Copyright © 2014 DOMO.INC All Rights Reserved. 42
  43. 43. i メディア をもっと面白く! Mobifyは米 は米Googleが認定した が認定した は米 が認定 マルチスクリーンベンダーです。 http://www.google.com/think/mult iscreen/vendors.html Copyright © 2014 DOMO.INC All Rights Reserved. 株式会社ドーモ モバイル事業部 東京都中央区築地2-11-26 築地MKビル TEL:03-6228-4616 今井・西村・山崎 43

×