Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,792 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. DevelopersSummit モバイルファースト再考 Rethinking Mobile First concept 15-E-3 佐藤伸哉#devsumiB AKQA Group User Experience Director Developers Summit 2013 Action !
  2. 2. Developers Summit 自己紹介 P R O F I L E •  佐藤伸哉 @nobsato   •  エクスペリエンスデザイナー   •  元々はプロダクトデザイン   •  1994からWebデザイン   •  大規模なサイトの情報設計や企業のグローバル戦略   •  近年はAndroidのUI/UX開発やプラットフォーム戦略   •  現在は米イノベーションエージェンシーAKQAに所属   Developers Summit 2013 Action !
  3. 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. 4. Developers Summit 自己紹介 A K Q A   T O K Y O Developers Summit 2013 Action !
  5. 5. DevelopersSummit Developers Summit 2013 Action !
  6. 6. DevelopersSummit Developers Summit 2013 Action !
  7. 7. DevelopersSummit Developers Summit 2013 Action !
  8. 8. DevelopersSummit モバイルファースト Developers Summit 2013 Action !
  9. 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. 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. 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. 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. 13. Developers Summit モバイルファースト M O B I L E   F I R S T Developers Summit 2013 Action !
  14. 14. Developers Summit モバイルファースト M O B I L E   F I R S T Developers Summit 2013 Action !
  15. 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. 16. Developers Summit モバイルファーストの時代 M O B I L E   F I R S T   E R A Developers Summit 2013 Action !
  17. 17. Developers Summit モバイルファーストの時代 M O B I L E   F I R S T   E R A Developers Summit 2013 Action !
  18. 18. Developers Summit モバイルファーストの時代 M O B I L E   F I R S T   E R A Developers Summit 2013 Action !
  19. 19. Developers Summit モバイルファーストの時代 M O B I L E   F I R S T   E R A Developers Summit 2013 Action !
  20. 20. Developers Summit モバイルファーストの時代 M O B I L E   F I R S T   E R A Developers Summit 2013 Action !
  21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Developers Summit モバイルファースト M O B I L E   F I R S T   I S   … •  モバイルで出来る事、出来ない事   •  モバイルの特性を活かしたサービス Developers Summit 2013 Action !
  33. 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. 34. Developers Summit Future  Friendly F U T U R E   F R I E N D L Y Developers Summit 2013 Action !
  35. 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. 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. 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. 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. 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. 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. 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. 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. 43. Developers Summit デザイン思考? D E S I G N   T H I N K I N G ? •  まずはプロトタイプを作って、現場で実験と検 証を行い、問題点を発見。そこから具体的な 改善を行う事を繰り返しながらチームで作る Developers Summit 2013 Action !
  44. 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. 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. 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. 47. Developers Summit モバイルファーストとは M O B I L E   F I R S T   I S •  モバイルでしか実現できないを   •  モバイルの特性を活かした機能を Developers Summit 2013 Action !
  48. 48. DevelopersSummit AcNon! Developers Summit 2013 Action !
  49. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 59. DevelopersSummit Thank  You. Developers Summit 2013 Action !
  60. 60. Developers SummitNobuya SatoExperience Designernobsato@secret-lab.jphttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slideshare.com/nobsato Developers Summit 2013 Action !

×