Your SlideShare is downloading. ×
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,864
views

Published on

2013年5月17日 エルパーク仙台にて …

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

Published in: Design

0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

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

×