Developers Summit 2013【15-E-3】モバイルファースト再考（Rethinking Mobile First）

Developers
Summit

モバイルファースト再考

Rethinking Mobile First concept

15-E-3 佐藤伸哉
#devsumiB AKQA
Group User Experience Director

Developers Summit 2013 Action !

Developers
Summit
自己紹介
P R O F I L E

•  佐藤伸哉 @nobsato

•  エクスペリエンスデザイナー

•  元々はプロダクトデザイン

•  1994からWebデザイン

•  大規模なサイトの情報設計や企業のグローバル戦略

•  近年はAndroidのUI/UX開発やプラットフォーム戦略

•  現在は米イノベーションエージェンシーAKQAに所属


Developers
Summit
自己紹介
P R O F I L E
–
B O O K S ,
E T C

•  IA/UX関係の翻訳本とかも


Developers
Summit
自己紹介
A K Q A
T O K Y O


Developers
Summit


Developers
Summit

モバイルファースト


Developers
Summit
モバイルファーストの時代…
M O B I L E
F I R S T
E R A …

“Mobile
First”

•  モバイル向けのWebサイト

•  スマートフォン対応

•  モバイルアプリ


Developers
Summit
M O B I L E
F I R S T
E R A …

“Mobile
First”

…例えばレスポンシブデザイン





Developers
Summit
M O B I L E
F I R S T
E R A …

“Mobile
First”




WebデザインやWebテクノロジーの中で語らえる事が多いので

上記の話が多いが本来はそういう話ではなかった


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
M O B I L E
F I R S T


Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A

•  Mobile
ﬁrst,
mobile
only

最近元気のあるサービスはモバイルを起点とし
たモバイルオンリーのものが多くなりつつある。


Developers
Summit
モバイルファーストの時代
M O B I L E
F I R S T
E R A


Developers
Summit
モバイルの急成長
E M E R G I N G
M O B I L E
P H O N E S


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
“モバイルファースト”
“ M O B I L E
F I R S T ”

•  Luke
Wroblewski氏が提唱

•  元Yahoo!
Chief
Design

Architect


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
“MOBILE
FIRST”
“ M O B I L E
F I R S T ”

1.  Growth（成長性）

2.  Constrain（制約）

3.  Capability（可能性）


Developers
Summit
1.
モバイルの成長性
M O B I L E
F I R S T ,
G R O W T H


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
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
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
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
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
M O B I L E
F I R S T
I S
…

•  モバイルで出来る事、出来ない事

•  モバイルの特性を活かしたサービス


Developers
Summit
コンテンツファースト？
A N D
C O N T E N T
F I R S T ?

•  モバイルからでもPCからでも同じコンテンツを

•  まずはコンテンツありきであるべき

本来は、デバイスに依存しない形で情報提供を、
という考え方。将来にわたって情報はデバイス
フリーであるべき、という概念（の提唱）
Future
Friendly


Developers
Summit
Future
Friendly
F U T U R E
F R I E N D L Y


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
モバイルファーストの利点?
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
モバイルの利点、特性を活かす
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
モバイルの利点、特性を活かす
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

モバイルを使う人ってどんな人？
W H O
R E A L L Y
N E E D
M O B I L E ?

※公開用に写真をぼかしました

•  モバイルな場面…

実際のユーザーを観察する
※前々職のプロジェクトでAKQAとは関係ありません。

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
モバイル状況の観察
R E S E A R C H



Developers
Summit
デザイン思考？
D E S I G N
T H I N K I N G ?

•  まずはプロトタイプを作って、現場で実験と検
証を行い、問題点を発見。そこから具体的な
改善を行う事を繰り返しながらチームで作る


Developers
Summit
エスノ調査の事例
&
O B S E R V A T I O N A L
R E S E A R C H



Developers
Summit

ユーザーの本当の姿を知る
&
O B S E R V A T I O N A L
R E S E A R C H


•  新しい発見があります。

•  本物（本筋）の発見があります。


Developers
Summit
モバイルファーストとは
M O B I L E
F I R S T
I S

•  モバイルでしか実現できないを

•  モバイルの特性を活かした機能を


Developers
Summit

AcNon!


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
書を捨てよ、町へ出よう
M Y
R E C O M M E N D
N E X T
A C T I O N !

•  書物から学ぶ学問なん
か捨てて、幅広く社会
の本当の姿（と現実）を
見よう

　寺山修司


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

M Y
R E C O M M E N D
N E X T
A C T I O N !

3.  端末は自分で買おう


Developers
Summit
M Y
R E C O M M E N D
N E X T
A C T I O N !

4.  モバイル端末を使う日を週４日、最低でも
週３日、設定しよう。


Developers
Summit
M Y
R E C O M M E N D
N E X T
A C T I O N !

4.  モバイル端末を使う日を週４日、最低でも
週３日、設定しよう。

月
火
水
木
金
土
日

平日+1日以上
週末2日


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
参考書籍
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
参考書籍
M Y
R E C O M M E N D
B O O K S

モバイルデザインパ
ターン

Theresa
Neil

(オライリー・ジャパン)

原書：Mobile
Design
Pajern
Library


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

EﬀecNve
SoluNons


Developers
Summit

Thank
You.


Developers
Summit

Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://twitter.com/nobsato

http://about.me/nobsato
http://slideshare.com/nobsato

Developers Summit 2013【15-E-3】モバイルファースト再考（Rethinking Mobile First）

More Related Content

What's hot (20)

Similar to Developers Summit 2013【15-E-3】モバイルファースト再考（Rethinking Mobile First） (20)

More from Nobuya Sato (19)

Developers Summit 2013【15-E-3】モバイルファースト再考（Rethinking Mobile First）