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

  • 4,631 views
Uploaded on

デブサミ2013(Developers Summit 2013)Action! 2日目のデザインセッション「モバイル再考」の発表資料(2013年2月15日)

デブサミ2013(Developers Summit 2013)Action! 2日目のデザインセッション「モバイル再考」の発表資料(2013年2月15日)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,631
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
75
Comments
0
Likes
37

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DevelopersSummit モバイルファースト再考 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 !
  • 5. DevelopersSummit Developers Summit 2013 Action !
  • 6. DevelopersSummit Developers Summit 2013 Action !
  • 7. DevelopersSummit Developers Summit 2013 Action !
  • 8. DevelopersSummit モバイルファースト 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 !
  • 48. DevelopersSummit AcNon! 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 SummitM 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 !
  • 59. DevelopersSummit Thank  You. Developers Summit 2013 Action !
  • 60. Developers SummitNobuya SatoExperience Designernobsato@secret-lab.jphttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slideshare.com/nobsato Developers Summit 2013 Action !