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.

UIも大事だよ。という話。@Opt Group Tech Day

1,590 views

Published on

Opt Group Tech Dayというオプトグループ内のエンジニアが集まった会で、エンジニアの前で社内限定のLTをした時の資料です。

Published in: Design
  • Be the first to comment

UIも大事だよ。という話。@Opt Group Tech Day

  1. 1. UIも大事だよ。という話。 2017/03/21 Opt Group Tech Day Tetsuya Takeda UIUX Designer + Org Designer, Opt, Inc. (Opt Technologies) © Opt, Inc. All Rights Reserved.
  2. 2. © Opt, Inc. All Rights Reserved. 2 竹田 哲也 UIUX Designer & Project Manager 岐阜県出身 35歳 UI・UXおじさん OPT10年戦士(2004/9∼2014/3)で、出戻り組(2016/9∼) PHPerでした 5歳児と産まれたばかりの双子の父親 (たけてつ)
  3. 3. © Opt, Inc. All Rights Reserved. 3 UIも大事だよ。という話。
  4. 4. © Opt, Inc. All Rights Reserved. 4 モノづくりの4つのゴール ユーザーの 体験 ユーザーの 行動 存続 可能性 モノ • UI • 機能 • etc. • 登録 • 課金 • etc. • 収益 • ユーザー数 • etc. • UX • 感情 参考URL: http://www.slideshare.net/mikihirofujii/goals-of-designing
  5. 5. © Opt, Inc. All Rights Reserved. 5 顧客の価値認知モデル [ デザイン・UI ] ひと目でわかるか? [ 機能・性能 ] 一言で言えるか? [ ストーリー・体験 ] 誰もが語れるか? icon function context 出典:Biz/Zine Day 2016 濱口 秀司 氏 資料抜粋
  6. 6. © Opt, Inc. All Rights Reserved. 6 デザインセンスないよ。
  7. 7. © Opt, Inc. All Rights Reserved. 7 • 情報設計をやってみよう • ガイドラインを読んでみよう • 動くモノでレビューし合おう
  8. 8. © Opt, Inc. All Rights Reserved. 8 • 情報設計をやってみよう • ガイドラインを読んでみよう • 動くモノでレビューし合おう • 情報設計をやってみよう
  9. 9. © Opt, Inc. All Rights Reserved. 9 The Elements of User Experience 情報設計をやってみよう 出典:http://www.jjg.net/elements/pdf/elements.pdf •要素の洗い出し •要素の粒度で分類 •役割で分類 •順位付け
  10. 10. © Opt, Inc. All Rights Reserved. 10 論理的に整理するのは、エンジニアさん得意では! 情報設計をやってみよう
  11. 11. © Opt, Inc. All Rights Reserved. 11 • 情報設計をやってみよう • ガイドラインを読んでみよう • 動くモノでレビューし合おう • ガイドラインを読んでみよう
  12. 12. © Opt, Inc. All Rights Reserved. 12 ガイドラインを読んでみよう Material DesignHuman Interface Guideline
  13. 13. Human Interface Guideline © Opt, Inc. All Rights Reserved. 13 ガイドラインを読んでみよう Material Design 見た目だけでなく、インタラクションやコンポーネント 状況に応じた処理が書かれています。 ぜひ読んでみてください。
  14. 14. © Opt, Inc. All Rights Reserved. 14 ワイヤーフレームは、何をどこに配置するのか。という サービスの設計図。これ作れちゃいます。 もしくは、いきなりイケてる画面作れちゃいます。 ガイドラインを読んでみよう
  15. 15. © Opt, Inc. All Rights Reserved. 15 • 情報設計をやってみよう • ガイドラインを読んでみよう • 動くモノでレビューし合おう• 動くモノでレビューし合おう
  16. 16. © Opt, Inc. All Rights Reserved. 16 動くモノでレビューし合おう より良いモノにするために重要なポイントがレビュー みなさんもコードレビューしますよね。UIも同じ。
  17. 17. © Opt, Inc. All Rights Reserved. 17 動くモノでレビューし合おう • ブレイントラストには権限がなく、制作中の作品について 率直な意見交換がされる • 誰もが平等に発言権を持つ • 目的はただひとつ、助け合い、支え合うことによってより よい映画をつくること 目的は、仲間同士助け合いもっと良い映画をつくる
  18. 18. © Opt, Inc. All Rights Reserved. 18 動くモノでレビューし合おう デザイナー エンジニア UI・プロトタイプ 開発中の画面
  19. 19. © Opt, Inc. All Rights Reserved. 19 動くモノでレビューし合おう デザイナー エンジニア UI・プロトタイプ 開発中の画面 途中でもどんどん見せ合いましょう。 アジャストし続けることがクオリティを上げる近道。
  20. 20. © Opt, Inc. All Rights Reserved. 20 動くモノでレビューし合おう デザイナー エンジニア UI・プロトタイプ 開発中の画面 なぜ、職種を超えてレビューが必要か?
  21. 21. © Opt, Inc. All Rights Reserved. 21 動くモノでレビューし合おう “UIと機能はセット”だから。 Computer User UI 機能
  22. 22. © Opt, Inc. All Rights Reserved. 22 動くモノでレビューし合おう なので、エンジニアとデザイナーで 業務や責任範囲をキッチリ分けられない。 UI 機能 Designer Developer
  23. 23. © Opt, Inc. All Rights Reserved. 23 動くモノでレビューし合おう 重なる部分はお互いでレビューし合うことで フォローし合えるしプロダクトが磨き上げられる。 Designer Developer UI 機能
  24. 24. © Opt, Inc. All Rights Reserved. 24 まとめ
  25. 25. © Opt, Inc. All Rights Reserved. 25 • 情報設計をやってみよう • ガイドラインを読んでみよう • 動くモノでレビューし合おう その上で まとめ

×