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