Webken 03: Project Design for Optimaizing User Experience
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
1. Developers
Summit
モバイルファースト再考
Rethinking Mobile First concept
15-E-3 佐藤伸哉
#devsumiB AKQA
Group User Experience Director
Developers Summit 2013 Action !
2. Developers
Summit
自己紹介
P R O F I L E
• 佐藤伸哉 @nobsato
• エクスペリエンスデザイナー
• 元々はプロダクトデザイン
• 1994からWebデザイン
• 大規模なサイトの情報設計や企業のグローバル戦略
• 近年はAndroidのUI/UX開発やプラットフォーム戦略
• 現在は米イノベーションエージェンシーAKQAに所属
Developers Summit 2013 Action !
3. Developers
Summit
自己紹介
P R O F I L E
–
B O O K S ,
E T C
• IA/UX関係の翻訳本とかも
Developers Summit 2013 Action !
4. Developers
Summit
自己紹介
A K Q A
T O K Y O
Developers Summit 2013 Action !
9. Developers
Summit
モバイルファーストの時代…
M O B I L E
F I R S T
E R A …
“Mobile
First”
• モバイル向けのWebサイト
• スマートフォン対応
• モバイルアプリ
Developers Summit 2013 Action !
10. Developers
Summit
モバイルファーストの時代…
M O B I L E
F I R S T
E R A …
“Mobile
First”
…例えばレスポンシブデザイン
• モバイル向けのWebサイト
• スマートフォン対応
• モバイルアプリ
Developers Summit 2013 Action !
11. Developers
Summit
モバイルファーストの時代…
M O B I L E
F I R S T
E R A …
“Mobile
First”
• モバイル向けのWebサイト
• スマートフォン対応
• モバイルアプリ
WebデザインやWebテクノロジーの中で語らえる事が多いので
上記の話が多いが本来はそういう話ではなかった
Developers Summit 2013 Action !
12. Developers
Summit
モバイルファースト
M O B I L E
F I R S T
• モバイル端末を起点にしたサービス戦略
• モバイルを第一に考えて開発することでより
良いサービスが作れる(という理念)
Eric
Schmidt
(ExecuNve
Chairman,
Google)
Kate
Aronowitz
(Design
Director,
Facebook)
At
Mobile
World
Congress
2010
At
the
Warm
Gun
Design
Conference,
2010
Developers Summit 2013 Action !
13. Developers
Summit
モバイルファースト
M O B I L E
F I R S T
Developers Summit 2013 Action !
14. Developers
Summit
モバイルファースト
M O B I L E
F I R S T
Developers Summit 2013 Action !
15. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
• Mobile
first,
mobile
only
最近元気のあるサービスはモバイルを起点とし
たモバイルオンリーのものが多くなりつつある。
Developers Summit 2013 Action !
16. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
Developers Summit 2013 Action !
17. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
Developers Summit 2013 Action !
18. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
Developers Summit 2013 Action !
19. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
Developers Summit 2013 Action !
20. Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A
Developers Summit 2013 Action !
21. Developers
Summit
モバイルの急成長
E M E R G I N G
M O B I L E
P H O N E S
Developers Summit 2013 Action !
22. Developers
Summit
モバイル向けのデザイン原則
M O B I L E
F I R S T
D E S I G N
P R I N C I P L E S
• 小さな画面内での効果的なデザイン
• 情報の見せ方、整理の仕方
• タッチ/ジェスチャーインタラクション
• デバイスに依存しない画面遷移
• OSに依存した画面遷移
• プラットフォームに依存した機能
Developers Summit 2013 Action !
23. Developers
Summit
“モバイルファースト”
“ M O B I L E
F I R S T ”
• Luke
Wroblewski氏が提唱
• 元Yahoo!
Chief
Design
Architect
Developers Summit 2013 Action !
24. Developers
Summit
MOBILE
FIRST
(Book
A
Part)
“ M O B I L E
F I R S T ”
( B O O K
A
P A R T )
Developers Summit 2013 Action !
25. Developers
Summit
“MOBILE
FIRST”
“ M O B I L E
F I R S T ”
1. Growth(成長性)
2. Constrain(制約)
3. Capability(可能性)
Developers Summit 2013 Action !
26. Developers
Summit
1.
モバイルの成長性
M O B I L E
F I R S T ,
G R O W T H
Developers Summit 2013 Action !
27. Developers
Summit
2.
モバイルの制約
M O B I L E
F I R S T ,
C O N S T R A I N
1. 小さい画面
2. パフォーマンス
3. アクセスする時間と場所
制約の中のデザイン=マイナスのデザイン
• 快適に使えるための工夫(より軽くに)
• いつでも、どこからでも(よりシンプルに)
Developers Summit 2013 Action !
28. Developers
Summit
2.
モバイルの制約
M O B I L E
F I R S T ,
C O N S T R A I N S
Delta
Mobile
app
Developers Summit 2013 Action !
29. Developers
Summit
3.
モバイルの可能性
M O B I L E
F I R S T ,
C A P A B I L I T Y
1. カメラ機能 (In/Out)
2. 音楽機能(再生/録音/接続)
3. GPS/コンパス
4. ジャイロスコープ
5. NFC/FeliCa
6. 3G/LTE
7. Bluetoosh …etc
Developers Summit 2013 Action !
30. Developers
Summit
3.
モバイルの可能性
M O B I L E
F I R S T ,
C A P A B I L I T Y … N E A R
F U T U R E ?
Developers Summit 2013 Action !
31. Developers
Summit
3.
モバイルの可能性
M O B I L E
F I R S T ,
C A P A B I L I T Y … T O D A Y
Developers Summit 2013 Action !
32. Developers
Summit
モバイルファースト
M O B I L E
F I R S T
I S
…
• モバイルで出来る事、出来ない事
• モバイルの特性を活かしたサービス
Developers Summit 2013 Action !
33. Developers
Summit
コンテンツファースト?
A N D
C O N T E N T
F I R S T ?
• モバイルからでもPCからでも同じコンテンツを
• まずはコンテンツありきであるべき
本来は、デバイスに依存しない形で情報提供を、
という考え方。将来にわたって情報はデバイス
フリーであるべき、という概念(の提唱)
Future
Friendly
Developers Summit 2013 Action !
34. Developers
Summit
Future
Friendly
F U T U R E
F R I E N D L Y
Developers Summit 2013 Action !
35. Developers
Summit
モバイルファーストの利点?
A D V A N T A G E
O F
M O B I L E
F I R S T ?
• 閲覧環境(PC/モバイル)を選ばない
• ブラウザ/User
Agentに依存しない
• 情報構造がシンプル
• データが小さく軽い
Developers Summit 2013 Action !
36. Developers
Summit
モバイルファーストの利点?
A D V A N T A G E
O F
M O B I L E
F I R S T ?
• 閲覧環境(PC/モバイル)を選ばない…はず
• ブラウザ/User
Agentに依存しない…はず
• 情報構造がシンプル…なはず
• データが小さく軽い…はず
…
現実はけっこう違ったりする
Developers Summit 2013 Action !
37. Developers
Summit
モバイルの利点、特性を活かす
S T R E N G T H
T H E
M O B I L I T Y
A D V A N C E
Developers Summit 2013 Action !
38. Developers
Summit
モバイルの利点、特性を活かす
E X A M P L E
O F
M O B I L I T Y
A D V A N C E
Developers Summit 2013 Action !
39. Developers
Summit
モバイルを使う人ってどんな人?
W H O
R E A L L Y
N E E D
M O B I L E ?
※公開用に写真をぼかしました
• モバイルな場面…
実際のユーザーを観察する
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
40. Developers
Summit
エスノグラフィー調査
W H A T
I S
E T H N O G R A P H Y
R E S E A R C H ?
• 実際の生活者の現場に赴いて、実際のユー
ザーの本当の姿を観察し、そこからシステム
やプロセスの本当の姿を理解し、問題解決を
行う人類学的な手法
Developers Summit 2013 Action !
41. Developers
Summit
モバイル状況の観察
E T H N O G R A P H Y
R E S E A R C H
※公開用に写真をぼかしました
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
42. Developers
Summit
モバイル状況の観察
E T H N O G R A P H Y
R E S E A R C H
※公開用に写真をぼかしました
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
43. Developers
Summit
デザイン思考?
D E S I G N
T H I N K I N G ?
• まずはプロトタイプを作って、現場で実験と検
証を行い、問題点を発見。そこから具体的な
改善を行う事を繰り返しながらチームで作る
Developers Summit 2013 Action !
44. Developers
Summit
エスノ調査の事例
E T H N O G R A P H Y
&
O B S E R V A T I O N A L
R E S E A R C H
※公開用に写真をぼかしました
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
45. Developers
Summit
エスノ調査の事例
E T H N O G R A P H Y
&
O B S E R V A T I O N A L
R E S E A R C H
※公開用に写真をぼかしました
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
46. Developers
Summit
ユーザーの本当の姿を知る
E T H N O G R A P H Y
&
O B S E R V A T I O N A L
R E S E A R C H
※公開用に写真をぼかしました
• 新しい発見があります。
• 本物(本筋)の発見があります。
※前々職のプロジェクトでAKQAとは関係ありません。
Developers Summit 2013 Action !
47. Developers
Summit
モバイルファーストとは
M O B I L E
F I R S T
I S
• モバイルでしか実現できないを
• モバイルの特性を活かした機能を
Developers Summit 2013 Action !
49. Developers
Summit
書を捨てよ、町へ出よう
M Y
R E C O M M E N D
N E X T
A C T I O N !
Developers Summit 2013 Action !
50. Developers
Summit
書を捨てよ、町へ出よう
M Y
R E C O M M E N D
N E X T
A C T I O N !
• 書物から学ぶ学問なん
か捨てて、幅広く社会
の本当の姿(と現実)を
見よう
寺山修司
Developers Summit 2013 Action !
51. Developers
Summit
デスクを捨てよ、モバイルを使おう
M Y
R E C O M M E N D
N E X T
A C T I O N !
1. 本当のユーザーを知ろう。
2. 実際にモバイル端末を使い倒そう。
hjp://news.livedoor.com/arNcle/detail/6730202/
Developers Summit 2013 Action !
52. Developers
Summit
M Y
R E C O M M E N D
N E X T
A C T I O N !
3. 端末は自分で買おう
Developers Summit 2013 Action !
53. Developers
Summit
デスクを捨てよ、モバイルを使おう
M Y
R E C O M M E N D
N E X T
A C T I O N !
4. モバイル端末を使う日を週4日、最低でも
週3日、設定しよう。
Developers Summit 2013 Action !
54. Developers
Summit
デスクを捨てよ、モバイルを使おう
M Y
R E C O M M E N D
N E X T
A C T I O N !
4. モバイル端末を使う日を週4日、最低でも
週3日、設定しよう。
月
火
水
木
金
土
日
平日+1日以上
週末2日
Developers Summit 2013 Action !
55. Developers
Summit
参考書籍
M Y
R E C O M M E N D
B O O K S
MOBILE
FIRST
Luke
Wroblewski
(A
Book
Apart)
Developers Summit 2013 Action !
56. Developers
Summit
参考書籍
M Y
R E C O M M E N D
B O O K S
The
Mobile
FronNer
Rachel
Hinman
(Rosenfeld
Media)
Developers Summit 2013 Action !
57. Developers
Summit
参考書籍
M Y
R E C O M M E N D
B O O K S
モバイルデザインパ
ターン
Theresa
Neil
(オライリー・ジャパン)
原書:Mobile
Design
Pajern
Library
Developers Summit 2013 Action !
58. Developers
Summit
参考書籍
M Y
R E C O M M E N D
B O O K S
Design
&
Research
Method
Index
〜リサーチデザイン、
新・100の法則
(BNN)
原書:Universal
Methods
of
Design:
100
Ways
to
Research
Complex
Problems,
Develop
InnovaNve
Ideas,
and
Design
EffecNve
SoluNons
Developers Summit 2013 Action !