No border, スマホ UI! 〜これからのモバイルアプリデザイン〜

3,165 views
3,119 views

Published on

2013年5月17日 エルパーク仙台にて
Fandroid EAST JAPANでの講演資料

Published in: Design

No border, スマホ UI! 〜これからのモバイルアプリデザイン〜

  1. 1. No Border, スマホUI!2013.5.17 Fandroid EAST JAPAN株式会社ツクロア 秋葉ちひろ (@tommmmy)
  2. 2. 秋葉 ちひろ@tommmmyデザイナー/アートディレクター「気持ちいい」をデザインする会社
  3. 3. 秋葉 ちひろ• 2013年4月 株式会社ツクロア 取締役• ∼2月 バイドゥにてSimejiの開発• デザイン全般• HTML/CSS/JS、Android XMLレイアウト@tommmmyデザイナー/アートディレクター
  4. 4. Simeji カンペ・リモートスタ★ミ
  5. 5. 秋葉ちひろのAndroidアプリデザイン入門 - MdN Design Interactivehttp://www.mdn.co.jp/di/articles/2887/Firefox OSアプリ開発ガイド5月末発売!(予定)Web連載書籍Web Designing6月19日発売!雑誌寄稿
  6. 6. デザイナーズハックhttp://designers-hack.net/コミュニティ
  7. 7. • 趣味はモノづくり
  8. 8. No Border, スマホUI!iPhoneAndroidWindowsPhoneFirefoxOSUbuntuTouchTizen
  9. 9. iPhoneAndroidWindowsPhone
  10. 10. FirefoxOSUbuntuTouchTizen
  11. 11. ガイドライン
  12. 12. ガイドライン ?<
  13. 13. 今日のセッションhttp://www.amazon.co.jp/dp/4621086553
  14. 14. 今日のセッションhttp://www.amazon.co.jp/dp/4621086553#MobileFrontier#MobileFrontier
  15. 15. •モバイル端末のアプリ開発のこれからに対する心構え(インターフェース)•プロトタイプについて考える•【ワークショップ】ペーパープロトタイピング今日のセッション
  16. 16. •インターフェースデザインモバイル端末のアプリ開発のこれからに対する心構え前半戦#MobileFrontier
  17. 17. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインが必要か?なぜインターフェースデザイン#MobileFrontier
  18. 18. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  19. 19. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  20. 20. モバイル端末のアプリ開発のこれからに対する心構えキーボードとマウスで操作できるインターフェースインターフェースデザイン#MobileFrontier
  21. 21. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン
  22. 22. モバイル端末のアプリ開発のこれからに対する心構えフォルダ ファイルインターフェースデザイン
  23. 23. モバイル端末のアプリ開発のこれからに対する心構え実際にある体験を模倣するインターフェースデザイン
  24. 24. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  25. 25. モバイル端末のアプリ開発のこれからに対する心構えGUIGraphic User Interfaceインターフェースデザイン#MobileFrontier
  26. 26. モバイル端末のアプリ開発のこれからに対する心構え道具としてツールをえらぶインターフェースデザイン
  27. 27. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  28. 28. モバイル端末のアプリ開発のこれからに対する心構えiPhoneの登場2007年6月29日インターフェースデザイン#MobileFrontier
  29. 29. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインタッチインターフェース#MobileFrontier
  30. 30. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインclear Mailbox
  31. 31. clear Mailboxモバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインNUINatural User Interface#MobileFrontier
  32. 32. Mailbox
  33. 33. Mailbox
  34. 34. EyeEm
  35. 35. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインPAPER
  36. 36. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインPAPER
  37. 37. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインPAPER
  38. 38. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインPAPER
  39. 39. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインタッチデバイスの特性を最大限に生かしたインターフェースiPad
  40. 40. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインボタン?
  41. 41. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン直感的で自然な操作1GUI NUI#MobileFrontier
  42. 42. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン直感的で自然な操作1タップして使うのはもう古い!?
  43. 43. ICE BREAKモバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインGUIからNUIへ1https://www.leapmotion.com/
  44. 44. モバイル端末のアプリ開発のこれからに対する心構え実際にある体験を模倣するインターフェースデザイン
  45. 45. メタファーmetaphor
  46. 46. 今年はフラットデザインが流行る!わたしはかなり慎重…モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  47. 47. フラットなのか?なぜコンテンツ重視モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  48. 48. •コンテンツファースト•無駄な装飾はいらない•コンテンツ自体がUIになりうるモバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン#MobileFrontier
  49. 49. http://weekly.ascii.jp/elem/000/000/121/121099/
  50. 50. zawatt
  51. 51. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•デザインが楽になるやろう!•工数が減るやろう!考えられる懸念点fontinfographiceditorialgoldenratiosilverratioマジかんべんして><
  52. 52. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•デザインは、グルーピングと、インタラクションを予測させるものコンテンツファーストのデザインフラットだろうがメタファーがあろうが関係ない
  53. 53. Pecot
  54. 54. miil
  55. 55. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•モレスキン好きな人/文具好きな人•車好きな人/ファッション好きな人•大学生/新卒社員趣向が関する場合、ターゲットによってデザインが決まるどんな人に使ってほしい?なんでもかんでもフラットにしないで><
  56. 56. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインコンテンツファーストターゲットファースト2#MobileFrontier
  57. 57. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインいつどこでスマホ使ってる?#MobileFrontier
  58. 58. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•通勤中、電車の中や歩いているとき•朝や夜、ベッドの中で•お風呂の中でジップロックで•リビングのソファでテレビを見ながら•キッチンでごはんを作りながら#MobileFrontier
  59. 59. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインユースケース・コンテキストを考えなさい!コンテキストは予測不能#MobileFrontier
  60. 60. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインアプリに没入させるように作りなさい!注意散漫なときに使う#MobileFrontier
  61. 61. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインDesign Develop User•部屋の中•机の上•いすに座って•集中して•外で•歩きながら•他の人と話しながら•リラックスして#MobileFrontier
  62. 62. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインICE BREAKtommmmyめっちゃできたー!2013.4.25tommmmyめっちゃできたー!2013.4.25tommmmytommmmyめっちゃできたー!2013.4.25tommmmyめっちゃできたー!2013.4.25tommmmy#MobileFrontier
  63. 63. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン体験とシームレスに#MobileFrontier
  64. 64. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•外環境に自動的に合う•人と機械の距離を縮めるこれからのデザインセンサーなども含めたハードの知識も必要になってくる#MobileFrontier
  65. 65. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン体験とシームレスに使える3#MobileFrontier
  66. 66. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインSync(同期)#MobileFrontier
  67. 67. Any.DO
  68. 68. Any.DO
  69. 69. Wunderlist
  70. 70. Wunderlist
  71. 71. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザインマルチデバイスでSyncして使える4#MobileFrontier
  72. 72. モバイル端末のアプリ開発のこれからに対する心構えインターフェースデザイン•直感的で自然な操作•コンテンツファーストターゲットファースト•体験とシームレスに使える•マルチデバイスでSyncして使える#MobileFrontier
  73. 73. No Border, プロトタイプ!後半戦プロトタイプについて考える
  74. 74. プロトタイプについて考えるプロトタイプ、作ってますか?なにで#MobileFrontier
  75. 75. •ワイヤーフレーム•モックアップ(静止画)•プロトタイプ(動くもの)プロトタイプについて考える#MobileFrontier
  76. 76. •インスクリーン•インブラウザ•ペーパープロトタイピングプロトタイプについて考える静止画HTML+CSS+JavaScript、Flash録画しておいて、あとで客観的に分析#MobileFrontier
  77. 77. プロトタイプについて考える#MobileFrontier
  78. 78. 動くプロトタイプ!プロトタイプについて考える#MobileFrontier
  79. 79. プロトタイプについて考えるペーパープロトタイピング録画#MobileFrontier
  80. 80. タイムカードお題プロトタイプについて考える出勤したときの打刻
  81. 81. •自己紹介(5min)•アイデア出し(10min)•制作(15min)プロトタイプについて考える20:00∼20:0520:05∼20:1520:15∼20:30
  82. 82. プロトタイプについて考える
  83. 83. プロトタイプについて考える
  84. 84. •自己紹介(5min)•アイデア出し(10min)•制作(15min)プロトタイプについて考える20:00∼20:0520:05∼20:1520:15∼20:30タイムカード出勤したときの打刻お題
  85. 85. No border, スマホUI!人と機械のつながりまとめ時代の流れとともに変わります#MobileFrontier
  86. 86. ガイドライン ?<
  87. 87. •人の動きを邪魔しない自然な動き•人と機械との関係性•使って気持ちいいと思えること•もはやボタン操作ではない時代•UIUIというが、机の上だけではほんとうは片付かないNo border, スマホUI!#MobileFrontier
  88. 88. No Border!•デザインインターフェース•人と機械•デザイナーとエンジニア•ユーザーと開発者
  89. 89. No border, スマホUI!ありがとうございました@tommmmy

×