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.

ユーザインターフェース10分講座

1,119 views

Published on

高校生向けアイデアソン・ハッカソンにて。
プロトタイピングの流れと方法。既存のアプリをスケッチしてみよう。

Published in: Education
  • Be the first to comment

ユーザインターフェース10分講座

  1. 1. 本題の前に
  2. 2. みんなはどっちのタイプ? Aさん Bさん プログラミング ★★★★★ ★☆☆☆☆ デザイン ☆☆☆☆☆ ★☆☆☆☆ 撮影 + 発信 ☆☆☆☆☆ ★☆☆☆☆ プレゼンテーション ☆☆☆☆☆ ★☆☆☆☆ ディレクション ☆☆☆☆☆ ★☆☆☆☆
  3. 3. こうなると楽しいよ Aさん Bさん プログラミング ★★★★★ ★☆☆☆☆ デザイン ★☆☆☆☆ ★★★★★ 撮影 + 発信 ★☆☆☆☆ ★☆☆☆☆ プレゼンテーション ★☆☆☆☆ ★☆☆☆☆ ディレクション ★☆☆☆☆ ★☆☆☆☆
  4. 4. ⃝⃝⃝⃝だけでは、作れない プログラミングだけでは作れない デザインだけでももちろん作れない 一番良いのは、全部できて、何かに特化していること お互いの分野を知らないと、協力できない(話せない)
  5. 5. ができるまで 考える デザイン プログラミング 宣伝 もっと良くする 「アプリ」
  6. 6. 考える デザイン プログラミング 宣伝 もっと良くする ができるまで「アプリ」
  7. 7. 「アプリ」ができるまで 考える: なにが欲しい? 使ってみたい? 何が作れる? デザイン: 画面のデザイン(UI) 利用シーンのデザイン(UX) プログラミング: フロントエンド: iOS、Android、Web バックエンド: PaaS, BaaS, Node.js, Ruby on Rails, PHP プロモーション: 「それが何か」わかりやすく伝える もっと良くする: 作ったら終わりじゃない
  8. 8. 結構いろいろ大変
  9. 9. そこで、プロトタイピング
  10. 10. プロトタイピング 絵を描くようにアプリをつくることは「まだ」できない 画面や動きのデザインだけ作って「手触り」を試す 良いものを最短コースで
  11. 11. 例えば、 こんなの 作りたい
  12. 12. Sketch
  13. 13. marvel Sketchでデザイン 手描きでもOK 動きをつける
  14. 14. 自分の スマートフォンで 試せる
  15. 15. ほかにも色々・増えている
  16. 16. 部品(デザイン)は、 いろいろと 公開されている
  17. 17. ならべていくだけでも 結構作れる
  18. 18. ならべていくだけでも 結構作れる だからこそ、何が 実現可能か知る必要あり
  19. 19. じゃあ、みんなもやってみよう
  20. 20. いきなりは、難しいので
  21. 21. を題材に
  22. 22. Chats People
  23. 23. Chats Start Let’s start chatting! People Chats Search More
  24. 24. 描いてみて、気がついた部分が あったと思います
  25. 25. 無意識に 使っているものほど大切
  26. 26. ツトム UIデザイン プレゼンテーション 担当 この辺で分かんないことは この人に聞こう。 cognitom

×