ecサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 screen world対応

109
ECサイトの コミュニケーションデザイン戦略 目前に迫る3 Screen World対応 ©2013 Keynote Systems, Inc. Keynote Systems, Inc. Technical Business Representative 竹洞 陽一郎 [email protected]

Upload: yoichiro-takehora

Post on 08-May-2015

1.506 views

Category:

Technology


0 download

DESCRIPTION

Web pages are not picture, those are not "art". Web sites provide "function" to users. Especially, EC sites have a mission; let customer know and understand products and services, let them buy. End-users go back and forth among "screens": PC, tablet, smartphone and TV. Especially, for web designer/developer, 3 screens (PC, tablet and smartphone) are very important development target screen to manage. Are you going to implement all functions of desktop site to tablet and smartphone? No, it WON'T work. Do you know why? Why you should avoid using "Responsive Design"? Are you familiar with mobile network limitation? (What "packet drop" makes your smartphone/tablet browsing?) This slide explain what happened for e-commerce recently, and what kind of things web designer/developer should consider for building/revising web site. (written in Japanese)

TRANSCRIPT

Page 1: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ECサイトのコミュニケーションデザイン戦略

目前に迫る3 Screen World対応

©2013 Keynote Systems, Inc.

Keynote Systems, Inc.Technical Business

Representative竹洞陽一郎

[email protected]

Page 2: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

自己紹介

Keynote Systems…Technical Business Representative

やってきた事

Layer1~7の技術

定量化・定性化分析手法(Function Point法、COCOM II)

システム最適化

Lotus Notes → Windowsのシステム構築→ Unix/Linuxのシステム構築→ メール→

Webシステム→ ユーザビリティ→システム開発見積り・IT不良資産→ 仮想マシン→ CDN、Web高速化、ストリーミング、RMT問題→ Webコンサルティング(パフォーマンス、UX)

配信情報

Keynote Systems Japan 公式サイト(http://www.keynotesystems.jp/)

Keynote Webパフォーマンスコミュニティ(https://www.facebook.com/KeynoteSystemsJapan)

Keynote Systems Japan公式Blog

(http://blog.keynotesystems.jp/)

2013年4月15日 2©2013 Keynote Systems, Inc.

Page 3: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Keynote Systemsについて

• アメリカ合衆国カリフォルニア州サンマテオに本社を置く

• 1995年創業、1999年NASDAQ上場

• Web、モバイル、ストリーミングのパフォーマンス計測のサービスを主とする

• 計測の分野におけるマーケットリーダー

• 顧客数4,000社以上

• 計測拠点275ヵ所

• 計測用コンピュータ7,000台以上

2013年4月15日 3©2013 Keynote Systems, Inc.

Page 5: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

今日、お話する事

プリキュアで理解するValue Proposition

ECサイトのコミュニケーションデザイン戦略

3 Screen World対応

日本のスマートフォンサイトパフォーマンス最新動向

スマートフォンサイトを高速化するためには?

2013年4月15日 5©2013 Keynote Systems, Inc.

Page 6: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

あなたの会社のWebサイトが1日1万PVを超えているなら、今日の話は重要です。

2013年4月15日 6©2013 Keynote Systems, Inc.

Page 7: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

プリキュで理解する

VALUE PROPOSITION

扱っている題材は同じ、でも観ちゃうのは何故?

2013年4月15日 7©2013 Keynote Systems, Inc.

Page 8: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ふたりはプリキュア2004年2月1日~2005年1月30日

2013年4月15日 8©2013 Keynote Systems, Inc..

Page 9: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ふたりはプリキュア Max Heart

2005年2月6日~2006年1月29日

2013年4月15日 9©2013 Keynote Systems, Inc.

Page 10: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ふたりはプリキュア Splash Star

2006年2月5日~2007年1月28日

2013年4月15日 10©2013 Keynote Systems, Inc.

Page 11: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Yes! プリキュア5

2007年2月4日~2008年1月27日

2013年4月15日 11©2013 Keynote Systems, Inc.

Page 12: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Yes! プリキュア5 Go Go!

2008年2月3日~2009年1月25日

2013年4月15日 12©2013 Keynote Systems, Inc.

Page 13: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

フレッシュプリキュア!

2009年2月1日~2010年1月31日

2013年4月15日 13©2013 Keynote Systems, Inc.

Page 14: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ハートキャッチプリキュア!

2010年2月7日~2011年1月30日

2013年4月15日 14©2013 Keynote Systems, Inc.

Page 15: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

スイートプリキュア♪2011年2月6日~2012年1月29日

2013年4月15日 15©2013 Keynote Systems, Inc.

Page 16: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

スマイルプリキュア!

2012年2月5日~2013年1月27日

2013年4月15日 16©2013 Keynote Systems, Inc.

Page 17: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ドキドキ! プリキュア2013年2月3日~

2013年4月15日 17©2013 Keynote Systems, Inc.

Page 18: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

プリキュアオールスターズ

2013年4月15日 18©2013 Keynote Systems, Inc.

Page 19: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

プリキュアを構成する基本要素

中学2年の女の子が主役(2~5人)

ぬいぐるみに似ている妖精がパートナー

アイテムを使って変身する

プリキュアであることを人に知られてはいけない

戦いは素手での肉弾戦が基本、弱ったところで必殺技

敵は倒さない、浄化する

大義や使命のために戦わない、大切な人を守るために戦う

どんな過ちも、心を広く持ち、相手(敵)を許す

2013年4月15日 19©2013 Keynote Systems, Inc.

Page 20: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

作品に関連する売上高

作品名称 総話数 通算話数 プリキュア数 売上高

ふたりはプリキュアふたりはプリキュア Max Heart

49話47話

96回2人3人

101億円123億円

ふたりはプリキュア Splash Star 49話 145回 2人 60億円

Yes! プリキュア5

Yes! プリキュア5 Go Go!

49話48話

242回5人6人

105億円105億円

フレッシュプリキュア! 50話 292回

4人

119億円

ハートキャッチプリキュア! 49話 341回 125億円

スイートプリキュア♪ 48話 389回 107億円

スマイルプリキュア! 48話 437回 5人 -

ドキドキ!プリキュア -

2013年4月15日 20©2013 Keynote Systems, Inc.

Wikipediaより転載

キャラクタが似過ぎて違いが明確にならなかった

Page 21: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

レギュラーシリーズ映画興行成績作品名称 公開日 上映時間

興行収入動員数

映画ふたりはプリキュアMax Heart 2005年4月16日 約70分8億5000万円77万人

映画ふたりはプリキュアMax Heart 2 雪空のともだち 2005年12月10日 約71分5億7000万円53万人

映画ふたりはプリキュア Splash Star チクタク危機一髪! 2006年12月9日 約50分3億円27万人

映画 Yes!プリキュア5 鏡の国のミラクル大冒険! 2007年11月10日 約70分8億3000万円72万人

映画 Yes! プリキュア5 Go Go! お菓子の国のハッピーバースディ♪ちょ~短編プリキュアオールスターズGoGoドリームライブ

2008年11月8日 約75分(合計)7億8000万円72万人

映画フレッシュプリキュア! おもちゃの国は秘密がいっぱい!? 2009年10月31日

約71分

7億9000万円74万人

映画ハートキャッチプリキュア! 花の都でファッションショー…ですか!?

2010年10月30日9億3000万円86万人

映画スイートプリキュア♪とりもどせ! 心がつなぐ奇跡のメロディ♪

2011年10月29日

約70分

-82万人

映画スマイルプリキュア! 絵本の中はみんなチグハグ! 2012年10月27日 -81万人

2013年4月15日 21©2013 Keynote Systems, Inc.

Wikipediaより転載

Page 22: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

映画オールスター興行成績

作品名称 公開日 上映時間 登場プリキュア数興行収入動員数

映画プリキュアオールスターズDX みんなともだちっ☆奇跡の全員大集合!

2009年3月20日 約70分 14人10億1000万円94万人

映画プリキュアオールスターズDX2 希望の光☆レインボージュエルを守れ!

2010年3月20日 約72分 17人11億円107万人

映画プリキュアオールスターズDX3 未来にとどけ! 世界をつなぐ☆虹色の花

2011年3月19日

約70分

21人10億円94万人

映画プリキュアオールスターズNewStage

みらいのともだち2012年3月17日 29人

10億2000万円95万人

映画プリキュアオールスターズNewStage2 こころのともだち

2013年3月16日 約71分 32人 -

2013年4月15日 22©2013 Keynote Systems, Inc.

Wikipediaより転載

Page 23: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

仮面ライダーシリーズの売上推移

2013年4月15日 23©2013 Keynote Systems, Inc.

Wikipediaより転載

Page 24: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ウルトラマンシリーズの売上推移

放映当時 作品名 売上

1998年 ウルトラマンガイア 152億円

1999年 84億円

2000年 60億円

2001年 ウルトラマンコスモス 94億円

2002年 48億円

2003年 31億円

2004年 ウルトラマンネクサス 59億円

2005年 ウルトラマンマックス 39億円

2006年 ウルトラマンメビウス 36億円

2013年4月15日 24©2013 Keynote Systems, Inc.

Page 25: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

扱っているものは同じなのに、何故プリキュアは安定してヒットし(売れ)続けるのか?

作品を色づけるコンセプトとストーリーが異なる=体験が異なる

基本要素をどんどん発展させる

主人公の進化

ダンス~3Dグラフィックスを取り入れて、リアルなダンスをエンディングに入れる

歌~各プリキュアのテーマソング=声優に歌ってもらう

敵が味方になる

コレクション~キュアデコル、キュアラビーズ

2013年4月15日 25©2013 Keynote Systems, Inc.

Page 26: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

各作品のコンセプト

登場作 コンセプト

ふたりはプリキュアふたりはプリキュアMax Heart

コントラスト(白と黒)

ふたりはプリキュア Splash Star 花鳥風月

Yes! プリキュア5Yes! プリキュア5 Go Go!

お菓子

フレッシュプリキュア! フルーツ

ハートキャッチプリキュア! 花

スイートプリキュア♪ 音楽

スマイルプリキュア! 自然、絵本

ドキドキ!プリキュア トランプ

2013年4月15日 26©2013 Keynote Systems, Inc.

Page 27: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ECサイトのコミュニケーションデザイン戦略

Value Propositionから考える

2013年4月15日 27©2013 Keynote Systems, Inc..

Page 28: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Value Proposition って何?

日本語にすれば、「価値提案」

簡単に説明すれば、「何故、うちから買う必要があるのか?」(Why us?)という理由

皆さんの会社は、“Why us?”が明確ですか?

“Why us?”が明確でなければ、価格競争に陥る

2013年4月15日 28©2013 Keynote Systems, Inc..

Page 29: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

差別化要因はどこから生まれ出るのか?

2013年4月15日 29©2013 Keynote Systems, Inc.

Value Proposition

Value Propositionはどこから生まれ出るのか?

商品、サービス、価格ではない。顧客に提供したい「体験」である。

Page 30: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

顧客は、意識している・していないに関わらず、最終的には「体験」を買う

2013年4月15日 30©2013 Keynote Systems, Inc.

Page 31: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

私が一眼レフを買った理由

2013年4月15日 31©2013 Keynote Systems, Inc.

Page 32: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

コミュニケーションデザイン戦略とは?

顧客に提供したい「体験」を実現するために、どのようにコミュニケーションをデザインするか、という考え方の戦略。

昨今、流行りのUX(User Experience)の本質は、コミュニケーションをデザインする事

2013年4月15日 32©2013 Keynote Systems, Inc.

Page 33: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

“But the user experience is what we care about most, and

we‘re expanding that experience beyond the box by making

better use of the Internet.”

でも、ユーザ体験こそが我々が最も気にかけている事で、そして我々はインターネットの利用をより良くすることで(Macなどの)箱を利用して得られる体験を拡張しているんだ。

― スティーブ・ジョブズ

2013年4月15日 33©2013 Keynote Systems, Inc.

顧客に提供したい「体験」が、商品やサービスを規定する。

Page 34: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

UX(User Experience)とは何か?

UXの定義~ISO9241-210:2010

person‘s perceptions and responses resulting from the

use and/or anticipated use of a product, system or

service製品、システムもしくはサービスの利用もしくは利用によって予測される人の認知と反応

4/15/2013 34©2013 Keynote Systems, Inc.

Page 35: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

UXに関する注釈

NOTE 1 User experience includes all the users‘ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviours and accomplishments that occur before, during and after use.注釈1 … UXには、使用前・使用中・使用後における、全てのユーザの感情、意見、好み、認知、物理的且つ心理的反応、行動、成し得たことが含まれる

NOTE 2 User experience is a consequence of brand image, presentation, functionality, system performance, interactive behaviour and assistive capabilities of the interactive system, the user‘s internal and physical state resulting from prior experiences, attitudes, skills and personality, and the context of use.注釈2 … UXはブランドイメージ、見た目、機能性、システムパフォーマンス、相互作用行動並びに対話型システムの支援能力、以前の体験の結果によるユーザの内面及び物理的な状態、考え、スキル、人格、そして利用のコンテキストから成り立つ結果である。

NOTE 3 Usability, when interpreted from the perspective of the users‘ personal goals, can include the kind of perceptual and emotional aspects typically associated with user experience. Usability criteria can be used to assess aspects of user experience.注釈3…ユーザの個人的な目的の観点で見て解釈される際のユーザビリティは、一般的にユーザエクスペリエンスに関係のある認知的ならびに感情的側面が含まれる。ユーザビリティの基準はユーザーエクスペリエンスの側面の評価として使える。

4/15/2013 35©2013 Keynote Systems, Inc.

Page 36: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

UXテストには以下のものが含まれている必要があります

注釈1より

使用前・使用中・使用後における 感情、意見、好み

認知

物理的且つ心理的反応

行動

成し得たこと

注釈2より

ブランドイメージ

見た目

機能性

システムパフォーマンス

相互作用行動並びに対話型システムの支援能力

以前の体験の結果によるユーザの内面及び物理的な状態

ユーザ(パネリスト)の考え、スキル、人格

利用のコンテキスト(利用目的)

注釈3より

ユーザビリティテストはUXテストの一部として使えるが全てではない

4/15/2013 36©2013 Keynote Systems, Inc.

Page 37: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

http://www.affordabletours.com

2013年4月15日 37©2013 Keynote Systems, Inc.

Page 38: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Affordabletours.comの従業員の皆さん

2013年4月15日 38©2013 Keynote Systems, Inc.

Page 39: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

http://www.onthegotours.com/

2013年4月15日 39©2013 Keynote Systems, Inc.

Page 40: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

On The Go Toursの従業員の皆さん

2013年4月15日 40©2013 Keynote Systems, Inc.

Page 41: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

提供したい「体験」(価値)が異なれば、同じ旅行会社でもこれだけサイトデザインが異なる

2013年4月15日 41©2013 Keynote Systems, Inc.

顧客に提供したい「体験」が、サイトデザインを規定する。

Page 42: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

どこの旅行会社のサイトでしょう?

2013年4月15日 42©2013 Keynote Systems, Inc.

Page 43: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

どこの旅行会社のサイトでしょう?

2013年4月15日 43©2013 Keynote Systems, Inc.

Page 44: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

どこの旅行会社のサイトでしょう?

2013年4月15日 44©2013 Keynote Systems, Inc.

Page 45: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

価格競争から脱し、競合他社と差別化したいのであれば、サイトを通して提供したい「体験」を顧客が理解できるようにしなければいけない。

2013年4月15日 45©2013 Keynote Systems, Inc.

「選択」することは、「切り捨てる」リスクも負うという事。

Page 46: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

選択する=切り捨てる重要性

「情報が何を消費してしまうかは、とても明白だ。受け手の関心を消費するのだ。それゆえ、豊富な情報は関心の欠落を生む。また、溢れる情報が、『関心』を消費しようとしているとき、その『関心』を効果的に配置する必要性が生まれる。」

-ハーバート・サイモン(ノーベル賞経済学賞受賞者。チューリング賞受賞者)

2013年4月15日 46©2013 Keynote Systems, Inc.

Page 47: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

選択肢の数が決断に及ぼす影響

コロンビア大学ビジネススクールで経営学を教えるシーナ・アイエンガー教授が行った実験。

あるグループに6種類のジャムの商品サンプルを提示し、別のグループには24種類提示する。

24種類のジャムを提示されたグループは試食に積極的だったが、購入する割合は6種類のサンプルを提示されたグループのほうが10倍高かった。

2013年4月15日 47©2013 Keynote Systems, Inc.

Page 48: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

人が持てる関心は10以下。大抵は6~7つ。

人はあまり多くの事に関心を持ち続けることができない。

あなたにとって、サイトの運営は常日頃からの「関心事」ではあっても、顧客にとっては一時の「関心事」でしかない。

客観的統計データによってバイアスを排除することが大事

過去の努力をムダにしたくないバイアス

過去に努力してきたもの、過去にたくさん投資をしたものについては、「もったいない」と思い、それを辞めることが損をしてしまうと考えるバイアス。(これから将来に損をする話であっても、過去の投資がもったいないと考えてしまう)

現状維持バイアス

今のままではマズイとは分かっていても、現状を変えるということには抵抗を感じてしまうというバイアス。(余程のことがない限り、現状を変えようとはしない)

保有したものは、手放したくないバイアス

一度保有したモノは、他人が思っている価値(客観評価)より、自分だけ高い価値を感じてしまうようになる(愛着バイアス)

2013年4月15日 48©2013 Keynote Systems, Inc.

Page 49: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ASCII.jp:「近江牛」でGoogle上位のEC、脱・縦長ページで復活

2013年4月15日 49©2013 Keynote Systems, Inc.

リニューアル直後は、「以前より寂しい印象になった」、「購入意欲が減った」という他のECサイトオーナーからの厳しい意見もあったが、結果として、平均売り上げは前年比132%と大幅に伸びた。

Page 50: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

「他社もやっている」からと自社もやってはいけない

ソーシャルネットワークのタグ

Facebookのいいね!

Twitter

Mixi

行動ターゲティング広告

リスティング広告

O2O

Showrooming

ゲーミフィケーション等々…

自社が提供したい「価値」「体験」に照らし合わせて、取捨選択する。

2013年4月15日 50©2013 Keynote Systems, Inc.

Page 51: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

UXテストをやろう!

自社のValue Propositionが顧客に伝わっているかどうかを確認するために、UXテストをやろう!

UXテストは、A/Bテストとは違います。

A/Bテストは、例えれば「りんごとみかん、どっちが好きですか?」というテスト。

顧客が、イチゴや梨を好きだったら、それは答えに反映されない。

UXテストは、ユーザビリティテストとは違います。

日本のUXテストを提供会社が行っているのは、殆どがユーザビリティテスト。

本当のUXテストとは、自社の提供しようとしている価値を顧客が理解してもらえたかどうかを試験します。

2013年4月15日 51©2013 Keynote Systems, Inc.

Page 52: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

サイトの「断捨離」をしよう!

2013年4月15日 52©2013 Keynote Systems, Inc.

Page 53: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

April 15, 2013 53

Page 54: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

April 15, 2013 54

Page 55: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

自動的にコメントをテーマ別に

分類クリックするだけでコメント全体を表示

キーワード検索も可能分析ポータル ー コメントの分類

Page 56: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

3 SCREEN WORLD対応急がないと、出遅れてしまう

2013年4月15日 56©2013 Keynote Systems, Inc.

Page 57: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

コミュニケーションデザイン

2013年4月15日 57©2013 Keynote Systems, Inc..

Value Proposition

Desktop TabletSmartphon

eTV

利用シーン

顧客はこの4つの画面を行ったり来たりする

Page 58: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Google “The New Multi-screen World”2012年8月

ユーザは、複数の「画面」を使う場面に応じて使い分けている。

ユーザは、一つの「画面」で作業を終えず、時間を置いて別の「画面」に移って作業を完了させる。

TVは最早、全集中力を注がれる存在ではなく、他の「画面」を見ながら観られる存在となった。

持ち運び可能な「画面」は、端末から端末へと作業を持ち越すことを可能にした。その繋ぎを果たしているのは、検索である。

スマートフォンは日々の生活においてメディアのバックボーンと化した。日々の生活行動の起点ともなっている。

大抵、複数の端末を同時に利用しており、人々の注意は、どの端末で作業しているかによって分割され、注がれている。

多くの人が複数の画面を移動することによって、空き時間を有効活用して物事を成し遂げられるようになったと感じている。

2013年4月15日 58©2013 Keynote Systems, Inc.

Page 59: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

O2O(Online To Offline)の元となった調査結果

“The Mobile Movement: Understanding Smartphone Users”(2011年、Google)

95%のスマートフォンユーザは地域に関する情報を検索したことがある

61%のユーザは検索の後にそこにビジネスの電話をして、59%が実際にそこを訪問した

それらの行動を起こした90%の人々は24時間以内に、その行動(電話して訪問)をした

2013年4月15日 59©2013 Keynote Systems, Inc.

Page 60: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

画面間での作業の持越し遷移

2013年4月15日 60©2013 Keynote Systems, Inc.

Page 61: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Showroomingによって、衝動買いが増える

2013年4月15日 61©2013 Keynote Systems, Inc.

Page 62: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

増えていく主婦、年配者のタブレット使用

すぐに起動する

長時間使える

濡れた手で触っても平気

子供が触っても平気

キーボードを壊す心配がない

直観的

2013年4月15日 62©2013 Keynote Systems, Inc.

Page 63: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

3 Screen World対応で大事な事

Desktop、Tablet、Smartphone、それぞれの利用シーンを考えて、実装する

2013年4月15日 63©2013 Keynote Systems, Inc.

全ての「機能」をTabletやSmartphoneサイトに実装しない!

Page 64: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

何を削って、何を残すのか?

コンテンツを減らす~ユーザーの行動を分析し、モバイルでよく参照されるページ、機能に特化する

画像は極力減らす~ページの「美しさ」のための画像は削る

Simple is best ~機能をたくさんつけても使わない。本当に必要とされるものだけを実装する。「できる」からといって、実装しない

100KBルール~1ページあたり100KB前後で収める

CSS 1つ、JavaScript 1つ、Redirect 1つに収める

20KB以上のファイルはiPhoneではキャッシュされない

美しさより速さ~「1分ルール」を満たす

2013年4月15日 64©2013 Keynote Systems, Inc.

Page 65: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

1分ルールとは?

スマートフォンでのブラウジングは、PCと異なる

PCは、机の前に座ってブラウジングする

スマートフォンは、1日の細切れ時間の中でブラウジングする

朝起きてベッドの中で

朝食を食べながら

通勤時間中

トイレの中

お昼ご飯

タバコを吸いながら

仕事、仕事のちょっとした合間

移動中

ちょっとした待ち時間

5分未満の細切れ時間にアクセスしてくるユーザーはコンバージョンレートが高い

1分以内に「目的を達する」ことができるようにサイトを作る

2013年4月15日 65©2013 Keynote Systems, Inc.

Page 66: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

サイトは「美術的」デザインより「機能美」~工業デザインとしてのWebサイト

美しさは、お金にならない

デザイナーの言う事を疑ってみること!

Webサイトは、芸術ではない、機能を提供する場

勘、経験、感性でサイトをデザインしない~大規模UXテストで定量・定性分析を行うのが世界の主流

お客様の意図を「散らさない」こと

どんどんコンテンツが増えて下に伸びていく日本のサイト、どんどんコンテンツが削減されて上に縮んでいく海外のサイト

買って欲しいなら、買う事に集中できるようにする

2013年4月15日 66©2013 Keynote Systems, Inc.

Page 67: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

O2O対策

3つの原則

まずはGoogle Mapに載せること。

Google+のページを作ること。

スマートフォンサイトを用意すること。

モバイルアプリを作るのは一番最後、まずはスマートフォンサイト!~検索から漏れる!

2013年4月15日 67©2013 Keynote Systems, Inc.

Page 68: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Showrooming対策

家電量販店より高く販売してお客様から喜ばれるでんかのヤマグチ-ガジェット通信 http://getnews.jp/archives/74302

電球1個の交換でもトンデ行きます!

2013年4月15日 68©2013 Keynote Systems, Inc..

大阪ではアトム電器など。

Page 69: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

3 Screen World対応の肝

顧客にどのような体験・価値を提供したいか

それをDesktop、Tablet、Smartphoneに落とし込んだ時、どのようにサイトを使って欲しい、使っているかを分析

それぞれの端末の利用シーンに応じて、顧客とのコミュニケーションを設計する

端末によって向いていない「機能」「体験」は除外する

2013年4月15日 69©2013 Keynote Systems, Inc..

Page 70: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

日本のスマートフォンサイトパフォーマンス最新動向

間違いだらけの日本のスマートフォンサイトの作り方

2013年4月15日 70©2013 Keynote Systems, Inc..

Page 71: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

2013年4月15日 71©2013 Keynote Systems, Inc.

日本のEコマースTop20 SoftBank

Page 72: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

2013年4月15日 72©2013 Keynote Systems, Inc.

日本のEコマースTop20 DoCoMo

Page 73: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

制約の多いモバイルネットワーク

電波干渉という問題

ユーザがそこに多く居るからと言って、電波塔(基地局)は増やせない

基地局を乱立するとどうなるか? – “Dirty WiFi”と同じ状況に

電波の「谷間」~基地局と基地局の中間点

「繋がる」事と「通信できる」事は、違う

アンテナの表示が5本中5本立った! → 電波強度が十分というだけ

携帯基地局は、混雑するとネットワークを守るためにパケットを意図的にドロップする

レイテンシの問題

モバイルネットワークのレイテンシは100~200ms

2013年4月15日 73©2013 Keynote Systems, Inc..

Page 74: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

携帯網のパケットドロップ率の影響

無線基地局のパケットドロップ率が20%、1パケット1KBの場合

1. 全部で100KBのデータを送信する場合 失敗回数の期待値={100×(1-0.8)}÷0.8=25

失敗回数の分散={100×(1-0.8)}÷0.8^2 =31.25

失敗回数の標準偏差は、31.25の平方根、約6となります。

2σの考え方だと、下値=失敗回数の期待値-2×失敗回数の分散の平方根上値=失敗回数の期待値+2×失敗回数の分散の平方根

2σ(シグマ)の範囲を計算すると、(25-2×6, 25+2×6)=(13, 37)

95%の確率で13~37回の失敗(パケットドロップ)が発生します。

2. 全部で1,000KBのデータを送信する場合 失敗回数の期待値={1,000×(1-0.8)}÷0.8=250

失敗回数の分散={1,000×(1-0.8)}÷0.8^2 =312.5

失敗回数の標準偏差は、312.5の平方根、約18となります。

2σ(シグマ)の範囲を計算すると、(250-2×18, 250+2×18)=(214, 286)

95%の確率で214~286回の失敗(パケットドロップ)が発生します。

Page 75: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

2013年4月15日 75©2013 Keynote Systems, Inc.

Amazon Japan

楽天 約6倍 約10倍

2013年4月15日 11:11:29

2013年4月15日 11:05:26

Page 76: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Amazon Japanの場合

2013年4月15日 76©2013 Keynote Systems, Inc.

Page 77: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Amazonのパフォーマンス正規分布図

2013年4月15日 77©2013 Keynote Systems, Inc.

2013年4月1日~15日

Page 78: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

楽天の場合

2013年4月15日 78©2013 Keynote Systems, Inc.

Page 79: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

楽天のパフォーマンス正規分布図

2013年4月15日 79©2013 Keynote Systems, Inc.

2013年4月1日~15日

Page 80: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

平均を見てはいけない!

2013年4月15日 80©2013 Keynote Systems, Inc.

Page 81: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Keynote Mobile Commerce Index – December 2nd, 2012

2013年4月15日 81©2013 Keynote Systems, Inc.

http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail/index.html

Page 82: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Keynote Performance Index: Mobile Retail – World

December 2nd, 2012

2013年4月15日 82©2013 Keynote Systems, Inc.

http://keynote.com/keynote_competitive_research/performance_indices/mobile/retail-world/index.html

Page 83: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

日本の化粧品業界~iPhone SoftBank

2013年4月15日 83©2013 Keynote Systems, Inc.

Page 84: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

モバイルを「知っている」サイトと「知らない」サイトの違い

2013年4月15日 84©2013 Keynote Systems, Inc.

Page 85: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

歩留り(客観的データ)でサイトの品質を診る

Webサイトの普及によって、ソフトウェア開発に、「生産」のフェーズができた。

今まで、ソフトウェア産業に「生産」はなかった。

半製品や部品である各種ファイルを、インターネットという「ベルトコンベア」に載せて、ユーザの端末上で組み立てる。

エンドユーザサイドでの「歩留り」を監視しなければ、自社のサービスが確実に届いているかはわからない。

誰も正確な、客観的な「データ」には逆らえない

2013年4月15日 85©2013 Keynote Systems, Inc.

Page 86: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Amazonの徹底したデータドリブン主義

「ミーティングではデータを重視し、データに基づいて発言することを求める。そして、データが示すどんな細かな兆候も見逃さない。ベゾス自らが顧客のフィードバックに目を通していることもよくあるという。」

― 東洋経済ONLINE

http://toyokeizai.net/articles/-/13212

御社は、ミーティングで使う「データ」をお持ちですか?

2013年4月15日 86©2013 Keynote Systems, Inc..

Page 87: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

何故、Amazonは速さにこだわるのか?

Amazonでは、1秒速くなる毎に、10%売上が向上するから。

2013年4月15日 87©2013 Keynote Systems, Inc.

Page 88: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスと訪問者数Internet Explorer、Firefoxの場合

2013年4月15日 88©2013 Keynote Systems, Inc.

Page 89: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスと訪問者数iPhone、Androidの場合

2013年4月15日 89©2013 Keynote Systems, Inc.

Page 90: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスとページビュー数Internet Explorer、Firefoxの場合

2013年4月15日 90©2013 Keynote Systems, Inc.

Page 91: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスとページビュー数iPhone、Androidの場合

2013年4月15日 91©2013 Keynote Systems, Inc.

Page 92: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスと直帰率Internet Explorer、Firefoxの場合

2013年4月15日 92©2013 Keynote Systems, Inc.

Page 93: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

WebパフォーマンスとコンバージョンレートInternet Explorer、Firefoxの場合

2013年4月15日 93©2013 Keynote Systems, Inc.

Page 94: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

WebパフォーマンスとコンバージョンレートiPhone、Androidの場合

2013年4月15日 94©2013 Keynote Systems, Inc.

Page 95: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

相関図を作ることで、現在の収益への影響の主変数がコンテンツ要因かパフォーマンス要因かがわかる。

2013年4月15日 95©2013 Keynote Systems, Inc.

パフォーマンス

コンバージョン

Page 96: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

結果に影響を及ぼす変数を考える

2013年4月15日 96©2013 Keynote Systems, Inc.

表示速度の定量評価無しでは、PV、CV、直帰率は正しく評価できない

Page 97: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ライリーの小売引力の法則(W.F.Reilly, 1929)

2013年4月15日 97©2013 Keynote Systems, Inc.

P=α*A/D^2

P=購入確率、α=係数、A=魅力、D=距離(サイト速度)

購入確率は、人口ないし品揃えに比例し、距離(サイト速度)の二乗に反比例する

Page 98: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

ログ解析しかやっていないサイトは危ない

せっかくコンテンツを新しくしても、

マーケティングキャンペーンをやっても、

新商品を売り出しても、

パフォーマンスで足が引っ張られていた場合、正しくそれらの影響を評価できない。

商売をしているなら、ちゃんとパフォーマンスは計測しましょう。

2013年4月15日 98©2013 Keynote Systems, Inc.

Page 99: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

彼を知り己を知れば百戦危うからず

(孫子の兵法)

データを持っていない

競合についても、自社についても、知らなさ過ぎる

負けるに決まってる

2013年4月15日 99©2013 Keynote Systems, Inc.

Page 100: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

お問い合わせ

各サービス詳細資料については、Slideshareよりダウンロード頂けます。

http://www.slideshare.net/takehora/presentations

日本語Webサイトにサービス概要を掲載しております。

http://www.keynotesystems.jp/

Facebookファンページで最新情報をご覧頂けます。

https://www.facebook.com/KeynoteSystemsJapan

またブログでも記事を配信しています。

http://blog.keynotesystems.jp/

価格については、営業窓口までお問い合わせ下さい。

(和泉:[email protected]

April 15, 2013 100

Page 101: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Q&A

4/15/2013 101©2013 Keynote Systems, Inc.

Page 102: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

参考資料お時間があるときにでも見ておいてください

2013年4月15日 102©2013 Keynote Systems, Inc.

Page 103: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

数学(統計学)の重要性

2013年4月15日 103©2013 Keynote Systems, Inc.

データを「正しく」分析すれば、未来が予測できる

Page 104: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

太っているのか?痩せているのか?

2013年4月15日 104©2013 Keynote Systems, Inc.

60Kg

身長がわからなければ、太っているのか痩せているのかは、わからない

Page 105: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

見るべき数値は足りているのか?

訪問者数、ページビュー数、直帰率、コンバージョン率の数値だけで十分なのか?

↓身長を知らずに体重を眺めるようなもの

今期の売上の理由は?

マーケティングキャンペーンの影響?

時期?

コンテンツの改善の影響?

新商品の影響?

価格改定の影響?

ユーザーインターフェース改変の影響?2013年4月15日 105©2013 Keynote Systems, Inc.

Page 106: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Webパフォーマンスの影響

2013年4月15日 106©2013 Keynote Systems, Inc..

88%

11%

7%

2倍

16%

1秒速くなる毎のブランドイメージアップ

1秒速くなる毎のCVの向上

1秒速くなる毎のPVの向上

1秒遅くなる毎の顧客満足度低下率

継続的な計測による顧客満足度向上

Page 107: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

スピード = 価値「今や、250msという速度が、Webにおける競争力の強みとなる特別な数字に近い。」 Harry Shum, Microsoft

売上向上

10%の売上向上(1秒高速化される毎に)

12%の売上向上(表示速度が6秒から1.2秒に高速化することによって)

5%の売上向上(2秒高速化される毎に)

最速で表示された場合は50%

以上のPV増加(最遅表示された場合と比較)

9%以上のトラフィック増加(400ms向上される毎に)

生産性向上

2%の生産性向上

100%の生産性向上(2.7秒までアプリケーションを高速化した場合)

エラーが減少、エンジニアリングサイクルが加速、データの統一性の向上

25%の生産性向上

Page 108: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

Performance Best Practice

JavaScriptをHTMLの最後に記述する

CSSをHTMLの最初に記述する

Keep aliveを使う。Keep aliveの対象数からはみ出るコンテンツがないようにする

HTMLファイル以外はキャッシュを効かせる

MIMEが”text/*”か”*javascript*”のものについては圧縮配信する

CSSを1枚にまとめる

JavaScriptを1枚にまとめる

2013年4月15日 108©2013 Keynote Systems, Inc.

Page 109: ECサイトのコミュニケーションデザイン戦略 ~ 目前に迫る3 Screen World対応

W3C Web Mobile Best Practice

http://www.w3.org/TR/mobile-bp/ Auto refreshを使わない

レイアウトのためにTableを使わない

キャッシュを使う

フレームを使わない

テキストフリーにしない(input type=“text”)

画像のサイズを明示する(height, width)

画像のALTを明示する

ポップアップを使わない

ページタイトルを明示する

Tableの中にTableを定義しない

2013年4月15日 109©2013 Keynote Systems, Inc.