Qcon Tokyo 2012で講演した「米国のスマートフォンサイトの設計・テスト・運用監視手法」のスライドです。この分野で世界シェアNo.1のKeynote Systemsのサービスを中心に説明しています。

1. 米国のスマートフォンサイトの設計
・テスト・運用監視手法
©2012 Keynote Systems, Inc.
2015年1月30日
Keynote Systems, Inc.
Technical Business Representative
竹洞 陽一郎
Yoichiro.Takehora@keynote.com

2. 自己紹介
 最近の経歴
 2004～2006 VMware … Professional Service Organization、
日本人初のVCPトレーナー
 2006～2009 Akamai…Professional Service、
Technical Project Manager
 2009～2010 Verizon Business…Global Service、
Principal Consultant
 2011～ Keynote Systems…Technical Business Representative
 やってきた事
 Lotus Notes → Windowsのシステム構築 → Unix/Linuxのシステム構築 → メ
ール → Webシステム → システム開発見積り・IT不良資産 → 仮想マシン →
CDN、Web高速化、ストリーミング、RMT問題 → Webコンサルティング
2015年1月30日 2©2012 Keynote Systems, Inc.

3. Keynote Systemsについて
• アメリカ合衆国カリフォルニア州サン
マテオに本社を置く
• 1995年創業、1999年NASDAQ上場
• Web、モバイル、ストリーミングのパ
フォーマンス計測のサービスを主とす
る
• 計測の分野におけるマーケットリーダ
ー
• 顧客数4,000社以上
• 計測拠点275ヵ所
• 計測用コンピュータ4000台以上
2015年1月30日 3©2012 Keynote Systems, Inc.

4. 4
New MediaAutomotive
Retail
Financial Services
Technology & Telecom TravelPortals/Media
Business-to-Business
Keynoteをご採用頂いているお客様
©2012 Keynote Systems, Inc. 2015年1月30日

5. 今日、お話する事
 米国のスマートフォンサイトの設計・テスト・運用監視手
法
 Evidence-based development
 スマートフォンサイトの設計
 スマートフォンサイトのテスト手法
 スマートフォンサイトの運用監視手法
Keynoteの製品説明が多いですが、アメリカ・ヨーロッパではデファクトスタンダードなので
許してください。
2015年1月30日 5©2012 Keynote Systems, Inc.

6. EVIDENCE-BASED
DEVELOPMENT
データに基づいて開発する
2015年1月30日 6©2012 Keynote Systems, Inc..

7. 今の日本のIT業界に足りないモノ
Evidence-based development
（証拠に基づいた開発、データに基づいたIT投資）
2015年1月30日 7©2012 Keynote Systems, Inc.

8. 日本のスマートフォンサイトのパフォーマンスの現状を知る
2015年1月30日 8©2012 Keynote Systems, Inc.
Softbank 2011/10/19～2012/4/15

9. 日本のスマートフォンサイトのパフォーマンスの現状を知る
2015年1月30日 9©2012 Keynote Systems, Inc.
NTT Docomo 2011/10/19～2012/4/15

10. Keynote Mobile Commerce Index – April 8th, 2012
2015年1月30日 10©2012 Keynote Systems, Inc.
http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail/index.html

11. Keynote Performance Index: Mobile Retail – World
April 8th, 2012
2015年1月30日 11©2012 Keynote Systems, Inc.
http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail-world/index.html

12. このパフォーマンス（表示速度）
の差は、何が原因なのか？
2015年1月30日 12©2012 Keynote Systems, Inc.

13. 2015年1月30日 13©2012 Keynote Systems, Inc.
Amazon Japan
DHC
約13倍 約17倍

14. 2015年1月30日 14©2012 Keynote Systems, Inc.
Amazon Japan
EC Current
約1.5倍 約2.6倍

15. Amazon Japanの場合
2015年1月30日 15©2012 Keynote Systems, Inc.

16. EC Currentの場合
2015年1月30日 16©2012 Keynote Systems, Inc.

17. DHCの場合
2015年1月30日 17©2012 Keynote Systems, Inc.

18. Topページのファイル数の違い
Amazon
Japan
EC Current DHC
Redirect 1 4 4
HTML 1 2 3
CSS 1 3 6
JavaScript 1 10 18
画像 10 10 56
Beacon 0 1 2
XML 0 0 1
合計 14 30 90
2015年1月30日 18©2012 Keynote Systems, Inc.

19. マーケティングデータ～スマートフォンの興隆
 2010年のガートナーの調査、2011年のGoogleの内部データ、2011年のCiscoの調査
 2013年までに、より多くの人々がPCよりモバイルでのオンラインアクセスを使うようになる
 2010年以降、モバイルによる検索エンジンの利用が4倍の量で増えている
 2015年までに、全世界の人々が1人1台のモバイル端末を持つようになる
 “Canalys: Smartphone shipments surpassed PCs in 2011”
 2011年、スマートフォンの出荷台数がPCのそれを超えた
 スマートフォン 4億8800万台
 PC 4億1500万台
2015年1月30日 19©2012 Keynote Systems, Inc.

20. マーケティングデータ～ユーザの声
 “What Users Want from Mobile”（Compuware 2011）
 60%のユーザがモバイルサイトの表示速度が3秒以内であることを望
んでいる
 71%のユーザがPCサイトより早く表示されることを望んでいる
 78%のユーザがサイトにアクセスしても表示されない場合には、再
読み込みを試すのは2回以下
 57%のユーザが、使い勝手の悪いモバイルサイトについて薦めない
 40%のユーザが、使い勝手の悪いモバイルサイトにアクセスした後
、競合他社のサイトへ行く
 23%の成人が、モバイルサイトが動かないと悪態をついたことがあ
る
2015年1月30日 20©2012 Keynote Systems, Inc.

21. マーケティングデータ～ユーザの行動
 “The Mobile Movement: Understanding Smartphone Users”（Google,
2011）
 95%のスマートフォンユーザは地域に関する情報を検索したことがある
 61%のユーザは検索の後にそこにビジネスの電話をして、59%が実際にそ
こを訪問した
 それらの行動を起こした90%の人々は24時間以内に、その行動（電話して
訪問）をした
 “Adobe Mobile Experience Survey 2011”（Adobe, 2011)
 価格を調べるのに、81%のユーザがネイティブアプリよりモバイルサイト
の方を使いたいと答えた
 商品情報を調べるのに、79%のユーザがモバイルサイトを使いたいと答え
た
 商品を買うのに、63%のユーザがモバイルサイトを使いたいと答えた
2015年1月30日 21©2012 Keynote Systems, Inc.

22. ユーザーはスマートフォンで何をする？
行動 パーセンテージ
地図・住所録の利用 81%
ソーシャルメディアのアクセス 76%
地域情報を探す（イベント、天気、評判、
地図など）
73%
ニュースを読む 68%
銀行口座の確認 67%
音楽を聴く 63%
ショッピング・購買 62%
ゲームを1日1回以上遊ぶ 61%
2015年1月30日 22©2012 Keynote Systems, Inc.
(Keynote Systems, Inc.
2010)

23. マーケティングデータ～ユーザの行動2
 "The Mobile Movement: Understanding Smartphone Users“(Google,
2011)
 70%のモバイルユーザが携帯電話で価格比較を行った
 65%のユーザが携帯電話で商品情報を見た
 50%のユーザが購入に際してモバイルで検索した
2015年1月30日 23©2012 Keynote Systems, Inc.

24. 彼を知り己を知れば百戦危うからず
（孫子の兵法）
↓
データを持っていない
↓
競合についても、自社についても、知らなさ過ぎる
↓
負けるに決まってる
2015年1月30日 24©2012 Keynote Systems, Inc.

25. スマートフォンサイトの設計
Lean and Mean
2015年1月30日 25©2012 Keynote Systems, Inc.

26. スマートフォンサイト設計で考慮すべき様々なデー
タ
 スマートフォンユーザーは急速に増加している
 そして、PCよりスマートフォンでWebブラウジングするよ
うになっている
 スマートフォンでのブラウジングは3秒以下であることが望
まれている
 3G回線でのコンテンツ配信は遅い。コンテンツの量に比例
して、表示時間は遅くなる。
 ユーザーはネイティブアプリより、Webを希望している
2015年1月30日 26©2012 Keynote Systems, Inc.

27. ネイティブアプリの良い点・悪い点
良い点 悪い点
ユーザエクスペリエンスをコントロールするのに最良。デバイスマーケット毎に細分化されてしまう。各プ
ラットフォーム毎にビルドしなければいけない。時間
とリソースの点で集約が必要。
デバイスの全ての機能を活用できる。ロケーション、
カメラ、電話等。
全てのプラットフォームをカバーしないと、大きな
マーケットセグメントを失うことになる。
一般的に、現状のモバイルWebより読込と実行が速
い。
モバイルWebサイトで同じような機能を実装した場
合に比べて、メンテナンスコストが高くつく。各プ
ラットフォームのアプリ毎に更新が必要になる。
キャッシュが効き、ブランドに箔がつく。 プラットフォーム依存のコードや制約に精通すること
が求められる。
プッシュ配信を有効活用できる。 検索エンジンで見つけてもらうという事が出来なくな
る。
ローカルコンテンツストレージを使える。インター
ネットの接続なしに稼働できる。
デバイス依存のプログラミングスキルが求められる。
マネタイズの潜在性。アプリ＋アプリ内の購入。
購入と精算の手続きが合理化できる。
2015年1月30日 27©2012 Keynote Systems, Inc.

28. モバイルWebサイトの良い点・悪い点
良い点 悪い点
消費者へのリーチが最大。殆どの機器に
一度のコーディングで対応できる。
アプリに比べて、機能性が制限される。
FlashやHTML5を使った拡張機能であれ
ば、全ての機器に亘って一度の更新で済
む。
HTML5標準はまだ完全に開発・実装され
ておらず、Flashは全てのスマートフォン
でサポートされているわけではない。
位置情報/GPS情報を活用できる。 プッシュ配信ができない。
開発者が使い慣れたHTML、CSS、
JavaScriptを使える。
利用に際してはインターネット接続が必
要。
検索エンジンで見つけてもらえる。
2015年1月30日 28©2012 Keynote Systems, Inc.

29. ネイティブアプリよりスマートフォンサイト
で始める
 スマートフォンサイトで始めた方が戦略上、理に適ってい
る
 広範囲にユーザにリーチする
 収益の最大化を図る
 リリースとメンテナンスの効率化を図る
 検索エンジンに引っかかるようにする
 ユーザーは急いでいるときに、アプリをインストールしない
 予算とリソースを割くことが可能になったら、主要な携帯
プラットフォーム毎にアプリを開発して提供することで、
ユーザに更なる付加価値を提供し、ブランド力を高める
2015年1月30日 29©2012 Keynote Systems, Inc.

30. 第三の方法”Wapplication”
2015年1月30日 30©2012 Keynote Systems, Inc.

31. 第三の方法”Wapplication”
2015年1月30日 31©2012 Keynote Systems, Inc..

32. スマートフォンサイトを作るなら
…
2015年1月30日 32©2012 Keynote Systems, Inc.

33. スマートフォンサイトの設計方針
削れ！
Lean and Meaｎ
2015年1月30日 33©2012 Keynote Systems, Inc..

34. 何を削って、何を残すのか?
 コンテンツを減らす～ユーザーの行動を分析し、モバイル
でよく参照されるページ、機能に特化する
 画像は極力減らす～ページの「美しさ」のための画像は削
る
 Simple is best ～機能をたくさんつけても使わない。本当に
必要とされるものだけを実装する。「できる」からといっ
て、実装しない
 美しさより速さ～「1分ルール」を満たす
2015年1月30日 34©2012 Keynote Systems, Inc.

35. 1分ルールとは？
 スマートフォンでのブラウジングは、PCと異なる
 PCは、机の前に座ってブラウジングする
 スマートフォンは、1日の細切れ時間の中でブラウジングする
 朝起きてベッドの中で
 朝食を食べながら
 通勤時間中
 トイレの中
 お昼ご飯
 タバコを吸いながら
 仕事、仕事のちょっとした合間
 移動中
 ちょっとした待ち時間
 5分未満の細切れ時間にアクセスしてくるユーザーはコンバージョンレ
ートが高い
 1分以内に「目的を達する」ことができるようにサイトを作る
2015年1月30日 35©2012 Keynote Systems, Inc.

36. Performance Best Practice
 JavaScriptをHTMLの最後に記述する
 CSSをHTMLの最初に記述する
 Keep aliveを使う。Keep aliveの対象数からはみ出るコンテ
ンツがないようにする
 HTMLファイル以外はキャッシュを効かせる
 MIMEが”text/*”か”*javascript*”のものについては圧縮配信す
る
 CSSを1枚にまとめる
 JavaScriptを1枚にまとめる
2015年1月30日 36©2012 Keynote Systems, Inc.

37. W3C Web Mobile Best Practice
http://www.w3.org/TR/mobile-bp/
 Auto refreshを使わない
 レイアウトのためにTableを使わない
 キャッシュを使う
 フレームを使わない
 テキストフリーにしない（input type=“text”)
 画像のサイズを明示する（height, width）
 画像のALTを明示する
 ポップアップを使わない
 ページタイトルを明示する
 Tableの中にTableを定義しない
2015年1月30日 37©2012 Keynote Systems, Inc.

38. スマートフォンサイトのテスト
手法
Functionality, Usability, Load Test
2015年1月30日 38©2012 Keynote Systems, Inc.

39. スマートフォンサイトのテスト
 機能テスト
 ユーザビリティテスト
 負荷テスト
2015年1月30日 39©2012 Keynote Systems, Inc..

40. 機能テスト
2015年1月30日 40©2012 Keynote Systems, Inc.

41. MITE（Mobile Internet Testing Environment） 2.3
http://mite.keynote.com – 無料です
© 2012 Keynote Systems, Inc. 1/30/2015 41

42. Automate testing
by running a
matrix test across
multiple devices
Mobile Internet Testing Environment 2.3
18,000の機種プロファイルを登録。複数の機種を対象に同時にテストが可能
© 2012 Keynote Systems, Inc. 1/30/2015 42

43. デモ
2015年1月30日 43©2012 Keynote Systems, Inc.

44. ユーザビリティテスト
2015年1月30日 44©2012 Keynote Systems, Inc.

45. Keynote WebEffective™: How it Works
January 30, 201545
We get hundreds of people to go to your website,
carry out tasks and as they do so, we capture their
behaviors and ask them about their experience.

47. 47

48. 48

49. 49

51. January 30, 2015 51

52. Keynote WebEffective™: Mobile Research
January 30, 2015
Search
20%
Home Lighting
20%
Philips Mobile Homepage
N=25
Household products
75%
N=17
Espresso
82%
Coffee
6%
Home
6%
Irons
6%
Household Products
N=14
Gaggia Brera
photo
50%
Bean-to-cup
42%
Gaggia Classic
Photo
8%
Espresso Webpage
©2012 Keynote Systems, Inc. 52

53. 負荷テスト
2015年1月30日 53©2012 Keynote Systems, Inc.

54. January 30, 2015 54©2012 Keynote Systems, Inc.
Test Perspective Work Flow
Create one or more scripts using the Keynote recorder
Create a Load Test:
 Duration
 Arrival Rate or Number of Concurrent Users
 Scripts to use
 Sampling locations (17 Worldwide)
 User access speeds (modem, DSL, Cable, 2.5G, 3G, T1, Datacenter)
Schedule the Load Test
 Start immediately or schedule time
View Results in Real Time
 Response times, successful page loads, etc.

55. January 30, 2015 55©2012 Keynote Systems, Inc.
Keynote’s Easy-to-Use Script Recorder
 Modify page context and
vary form input
 Vary pause times between
actions
 Configure cookies
 Set up username &
password combinations
 Validate the existence of
specific text on Web page

56. January 30, 2015 56©2012 Keynote Systems, Inc.
Keynote’s Convenient Testing Portal
 Unlimited user accounts
 3 different user roles: Admin, Power User, and Viewer
 3 configurable email reports

57. Visualize line speed distribution
January 30, 2015 57©2012 Keynote Systems, Inc.

58. January 30, 2015 58©2012 Keynote Systems, Inc.
Valuable Load Test Reports
Quickly see how
well your system
performed relative
to the load that
was applied
Determine
whether your page
response times
met your
performance
requirements

59. January 30, 2015 59©2012 Keynote Systems, Inc.
価値ある負荷テストレポート
テスト中、システムの帯域
ストレスを判定。
接続要求に対して、新規に
TCP/IPの接続を与えれば
効率が良いかを判定。

60. January 30, 2015 60©2012 Keynote Systems, Inc.
Realistic Testing Yields Realistic Results
Concurrent Users is the result of Many Factors
Concurrent Users Sessions per Hour Response Time
Minutes
Seconds

61. January 30, 2015 61©2012 Keynote Systems, Inc.
Arrival Rate Methodology
 同時ユーザ数は、トラフィックの完全な指標とはなり得ない
 どれだけのユーザに配信できるかは、ユーザのトランザクションがどれ
だけ早く終えられるかにかかっている
 インターネットとサイトのパフォーマンスは時間経過で変わる
Simulated Load
0
100
200
300
400
500
600
700
800
900
1000
Time 0 1 2 3 4 5 6 7 8
Minute
"ConcurrentUsers"
Simulated Load
Real Internet Traffic
0
100
200
300
400
500
600
700
800
900
1000
Time 0 1 2 3 4 5 6 7 8
Minute
"ConcurrentUsers"
Simulated Load Real Internet Traffic

62. スマートフォンサイトの運用監視手法
Quantitative and Qualitative measurement
2015年1月30日 62©2012 Keynote Systems, Inc.

63. H
63
Solutions for Enterprises
The mobile ecosystem today can be boiled down to two approaches:
mobile Web sites or mobile applications downloaded to the device.
Mobile Sites Mobile Apps
Challenges presented by each path
 Speed & reliability are determined by site design and
construction similar to a Web page
 Gathering information on load times for page elements as
well as availability of the entire page is crucial for
Operations to manage the mobile Web site
 Data collected from as close to the customer as possible
is critical and requires a broad geographic monitoring foot
print
 Speed & reliability are impacted by device hardware characteristics,
network speeds and geographic locations
 Applications are developed for the specifications of a single device;
growing application market requires rigorous testing across multiple
devices
 On demand access to
 50 global locations
 35 operator networks
 Database of over 1,700 device profiles
 Smart Alerts
 Real devices connected to live operator networks capturing
performance experienced by end users
 Solution capable of supporting complex actions performed on the latest
smartphones
 Smart Alerts
 Ability to conduct real-time troubleshooting for quick issue resolution
 Pixel-perfect view of smartphone LCD
Keynote mobile monitoring solutions
©2012 Keynote Systems, Inc.

64. MyKeynote
RF
Mobile Web Perspective 5.0
MWP monitors the availability of infrastructure delivering a mobile website without the impact of the network operator.
MWP-Air accurately monitors the response time and availability of the mobile website as experienced by the end user.
MWP-Air
(35 Networks)
IP Backbone
Corporate Firewall
MWP
(50 Global Locations)
Mobile Web Content
Servers
©2012 Keynote Systems, Inc.

65. HKeynote Mobile Solutions
Monitoring and Interactive Testing
MITE
Virtual device interactive testing
MDP
Real device automated monitoring
MWP
Virtual device automated monitoring
MyKeynote
MyKeynote
© 2012 Keynote Systems, Inc. 2015/1/30 65

66. デモ
2015年1月30日 66©2012 Keynote Systems, Inc.

67. Q&A
1/30/2015 67©2012 Keynote Systems, Inc.