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. © Opt, Inc. All Rights Reserved. 2
竹田 哲也
UIUX Designer & Project Manager
岐阜県出身 35歳
UI・UXおじさん
OPT10年戦士(2004/9∼2014/3)で、出戻り組(2016/9∼)
PHPerでした
5歳児と産まれたばかりの双子の父親
（たけてつ）

3. © Opt, Inc. All Rights Reserved. 3
UIも大事だよ。という話。

4. © Opt, Inc. All Rights Reserved. 4
モノづくりの4つのゴール
ユーザーの
体験
ユーザーの
行動
存続
可能性
モノ
• UI
• 機能
• etc.
• 登録
• 課金
• etc.
• 収益
• ユーザー数
• etc.
• UX
• 感情
参考URL: http://www.slideshare.net/mikihirofujii/goals-of-designing

5. © Opt, Inc. All Rights Reserved. 5
顧客の価値認知モデル
[ デザイン・UI ] ひと目でわかるか？
[ 機能・性能 ] 一言で言えるか？
[ ストーリー・体験 ] 誰もが語れるか？
icon
function
context
出典：Biz/Zine Day 2016 濱口 秀司 氏 資料抜粋

6. © Opt, Inc. All Rights Reserved. 6
デザインセンスないよ。

7. © Opt, Inc. All Rights Reserved. 7
• 情報設計をやってみよう
• ガイドラインを読んでみよう
• 動くモノでレビューし合おう

8. © Opt, Inc. All Rights Reserved. 8
• 情報設計をやってみよう
• ガイドラインを読んでみよう
• 動くモノでレビューし合おう
• 情報設計をやってみよう

9. © Opt, Inc. All Rights Reserved. 9
The Elements of User Experience
情報設計をやってみよう
出典：http://www.jjg.net/elements/pdf/elements.pdf
•要素の洗い出し
•要素の粒度で分類
•役割で分類
•順位付け

10. © Opt, Inc. All Rights Reserved. 10
論理的に整理するのは、エンジニアさん得意では！
情報設計をやってみよう

11. © Opt, Inc. All Rights Reserved. 11
• 情報設計をやってみよう
• ガイドラインを読んでみよう
• 動くモノでレビューし合おう
• ガイドラインを読んでみよう

12. © Opt, Inc. All Rights Reserved. 12
ガイドラインを読んでみよう
Material DesignHuman Interface Guideline

13. Human Interface Guideline
© Opt, Inc. All Rights Reserved. 13
ガイドラインを読んでみよう
Material Design
見た目だけでなく、インタラクションやコンポーネント
状況に応じた処理が書かれています。
ぜひ読んでみてください。

14. © Opt, Inc. All Rights Reserved. 14
ワイヤーフレームは、何をどこに配置するのか。という
サービスの設計図。これ作れちゃいます。
もしくは、いきなりイケてる画面作れちゃいます。
ガイドラインを読んでみよう

15. © Opt, Inc. All Rights Reserved. 15
• 情報設計をやってみよう
• ガイドラインを読んでみよう
• 動くモノでレビューし合おう• 動くモノでレビューし合おう

16. © Opt, Inc. All Rights Reserved. 16
動くモノでレビューし合おう
より良いモノにするために重要なポイントがレビュー
みなさんもコードレビューしますよね。UIも同じ。

17. © Opt, Inc. All Rights Reserved. 17
動くモノでレビューし合おう
• ブレイントラストには権限がなく、制作中の作品について
率直な意見交換がされる
• 誰もが平等に発言権を持つ
• 目的はただひとつ、助け合い、支え合うことによってより
よい映画をつくること
目的は、仲間同士助け合いもっと良い映画をつくる

18. © Opt, Inc. All Rights Reserved. 18
動くモノでレビューし合おう
デザイナー エンジニア
UI・プロトタイプ 開発中の画面

19. © Opt, Inc. All Rights Reserved. 19
動くモノでレビューし合おう
デザイナー エンジニア
UI・プロトタイプ 開発中の画面
途中でもどんどん見せ合いましょう。
アジャストし続けることがクオリティを上げる近道。

20. © Opt, Inc. All Rights Reserved. 20
動くモノでレビューし合おう
デザイナー エンジニア
UI・プロトタイプ 開発中の画面
なぜ、職種を超えてレビューが必要か？

21. © Opt, Inc. All Rights Reserved. 21
動くモノでレビューし合おう
“UIと機能はセット”だから。
Computer User
UI
機能

22. © Opt, Inc. All Rights Reserved. 22
動くモノでレビューし合おう
なので、エンジニアとデザイナーで
業務や責任範囲をキッチリ分けられない。
UI 機能
Designer Developer

23. © Opt, Inc. All Rights Reserved. 23
動くモノでレビューし合おう
重なる部分はお互いでレビューし合うことで
フォローし合えるしプロダクトが磨き上げられる。
Designer Developer
UI 機能

24. © Opt, Inc. All Rights Reserved. 24
まとめ

25. © Opt, Inc. All Rights Reserved. 25
• 情報設計をやってみよう
• ガイドラインを読んでみよう
• 動くモノでレビューし合おう
その上で
まとめ