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

Summit Developers

Developers Summit 2013 Action !

モバイルファースト再考 Rethinking Mobile First concept

佐藤伸哉 AKQA

Group User Experience Director

15-E-3 #devsumiB

Summit Developers


自己紹介

•  佐藤伸哉 @nobsato •  エクスペリエンスデザイナー

•  元々はプロダクトデザイン •  1994からWebデザイン •  大規模なサイトの情報設計や企業のグローバル戦略 •  近年はAndroidのUI/UX開発やプラットフォーム戦略 •  現在は米イノベーションエージェンシーAKQAに所属

P R O F I L E

Summit Developers


自己紹介

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

P R O F I L E – B O O K S , E T C

Summit Developers


自己紹介

A K Q A T O K Y O

Summit Developers


Summit Developers


Summit Developers


Summit Developers


モバイルファースト

Summit Developers


モバイルファーストの時代…

“Mobile First”

•  モバイル向けのWebサイト •  スマートフォン対応 •  モバイルアプリ

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

Summit Developers



“Mobile First”



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

Summit Developers



“Mobile First”



WebデザインやWebテクノロジーの中で語らえる事が多いので上記の話が多いが本来はそういう話ではなかった

Summit Developers



•  モバイル端末を起点にしたサービス戦略 •  モバイルを第一に考えて開発することでより

良いサービスが作れる（という理念）

M O B I L E F I R S T

Eric Schmidt (ExecuNve Chairman, Google) At Mobile World Congress 2010

Kate Aronowitz (Design Director, Facebook) At the Warm Gun Design Conference, 2010

Summit Developers




Summit Developers




Summit Developers


モバイルファーストの時代

•  Mobile first, mobile only

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

M O B I L E F I R S T E R A

Summit Developers




Summit Developers




Summit Developers




Summit Developers




Summit Developers




Summit Developers


モバイルの急成長

E M E R G I N G M O B I L E P H O N E S

Summit Developers


モバイル向けのデザイン原則

•  小さな画面内での効果的なデザイン •  情報の見せ方、整理の仕方 •  タッチ/ジェスチャーインタラクション •  デバイスに依存しない画面遷移 •  OSに依存した画面遷移 •  プラットフォームに依存した機能

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

Summit Developers


“モバイルファースト”

•  Luke Wroblewski氏が提唱 •  元Yahoo! Chief Design Architect

“ M O B I L E F I R S T ”

Summit Developers


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 )

Summit Developers


“MOBILE FIRST”

1.  Growth（成長性） 2.  Constrain（制約） 3.  Capability（可能性）

“ M O B I L E F I R S T ”

Summit Developers


1. モバイルの成長性

M O B I L E F I R S T , G R O W T H

Summit Developers


2. モバイルの制約

1.  小さい画面 2.  パフォーマンス 3.  アクセスする時間と場所

制約の中のデザイン＝マイナスのデザイン •  快適に使えるための工夫（より軽くに） •  いつでも、どこからでも（よりシンプルに）

M O B I L E F I R S T , C O N S T R A I N

Summit Developers


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

Summit Developers


3. モバイルの可能性

1.  カメラ機能 (In/Out) 2.  音楽機能（再生/録音/接続） 3.  GPS/コンパス 4.  ジャイロスコープ 5.  NFC/FeliCa 6.  3G/LTE 7.  Bluetoosh　　…etc

M O B I L E F I R S T , C A P A B I L I T Y

Summit Developers



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 ?

Summit Developers



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

Summit Developers



•  モバイルで出来る事、出来ない事 •  モバイルの特性を活かしたサービス

M O B I L E F I R S T I S …

Summit Developers


コンテンツファースト？

•  モバイルからでもPCからでも同じコンテンツを •  まずはコンテンツありきであるべき

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

A N D C O N T E N T F I R S T ?

Summit Developers


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

Summit Developers


モバイルファーストの利点?

•  閲覧環境（PC/モバイル）を選ばない •  ブラウザ/User Agentに依存しない •  情報構造がシンプル

•  データが小さく軽い

A D V A N T A G E O F M O B I L E F I R S T ?

Summit Developers


モバイルファーストの利点?

•  閲覧環境（PC/モバイル）を選ばない…はず •  ブラウザ/User Agentに依存しない…はず

•  情報構造がシンプル…なはず

•  データが小さく軽い…はず

A D V A N T A G E O F M O B I L E F I R S T ?

… 現実はけっこう違ったりする

Summit Developers


モバイルの利点、特性を活かす

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

Summit Developers


モバイルの利点、特性を活かす

E X A M P L E O F M O B I L I T Y A D V A N C E

Summit Developers


モバイルを使う人ってどんな人？

•  モバイルな場面…

W H O R E A L L Y N E E D M O B I L E ?

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

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

Summit Developers


エスノグラフィー調査

•  実際の生活者の現場に赴いて、実際のユーザーの本当の姿を観察し、そこからシステムやプロセスの本当の姿を理解し、問題解決を行う人類学的な手法

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 ?

Summit Developers


モバイル状況の観察

E T H N O G R A P H Y R E S E A R C H

※前々職のプロジェクトでAKQAとは関係ありません。


Summit Developers


モバイル状況の観察

E T H N O G R A P H Y R E S E A R C H



Summit Developers


デザイン思考？

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

D E S I G N T H I N K I N G ?

Summit Developers


エスノ調査の事例

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



Summit Developers


エスノ調査の事例




Summit Developers


ユーザーの本当の姿を知る

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




Summit Developers


モバイルファーストとは

•  モバイルでしか実現できないを •  モバイルの特性を活かした機能を

M O B I L E F I R S T I S

Summit Developers


AcNon!

Summit Developers


書を捨てよ、町へ出よう

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

Summit Developers


書を捨てよ、町へ出よう

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

　寺山修司


Summit Developers


デスクを捨てよ、モバイルを使おう

1.  本当のユーザーを知ろう。 2.  実際にモバイル端末を使い倒そう。


hjp://news.livedoor.com/arNcle/detail/6730202/

Summit Developers


3.  端末は自分で買おう


Summit Developers



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


Summit Developers



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


月火水木金土日

週末2日平日+1日以上

Summit Developers


参考書籍

MOBILE FIRST Luke Wroblewski (A Book Apart)

M Y R E C O M M E N D B O O K S

Summit Developers


参考書籍

The Mobile FronNer Rachel Hinman (Rosenfeld Media)


Summit Developers


参考書籍

モバイルデザインパターン Theresa Neil (オライリー・ジャパン) 原書：Mobile Design Pajern Library


Summit Developers


参考書籍

Design & Research Method Index 〜リサーチデザイン、新・100の法則 (BNN) 原書：Universal Methods of Design: 100 Ways to Research Complex Problems, Develop InnovaNve Ideas, and Design EffecNve SoluNons


Summit Developers


Thank You.

Summit Developers


Nobuya Sato Experience Designer [email protected] http://twitter.com/nobsato http://about.me/nobsato http://slideshare.com/nobsato

Technology

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