なんもわからん人のためのUI_UX

エンジニアがUI,UXについて調べてみました。

Transcript

1. なんもわからん人のための 講座 byなべくら
2. 自己紹介 なべくら フロントエンドエンジニア 趣味：イラスト、旅行、ボルダリング
3. 今回
4. 「UI/UXについて話して」と言わ れて、まず思ったこと…
5. →私も、よくわからん
6. 終
7. 終 とは流石にできないので…笑 何故わからんのか調べてみた。
8. そもそも私のUI/UXに対する勘違い 絵画やイラストといった視覚表現が好き →延長線上にあるデザインも割と好き →最近よく聞くUI/UXも多分面白いんでしょ…
9. そもそも私のUI/UXに対する勘違い 絵画やイラストといった視覚表現が好き →延長線上にあるデザインも割と好き →最近よく聞くUI/UXも多分面白いんでしょ… →…は？？意味がわからんのだが…？
10. そもそも私のUI/UXに対する勘違い 絵画やイラストといった視覚表現が好き →延長線上にあるデザインも割と好き →最近よく聞くUI/UXも多分面白いんでしょ… →…は？？意味がわからんのだが…？ そもそもの「デザイン」の定義が異なっていた！！
11. 「デザイン」を捉え直す
12. 「デザイン」を捉え直す 古いデザインの考え方
13. 「デザイン」を捉え直す 古いデザインの考え方 主役はモノ
14. 「デザイン」を捉え直す 古いデザインの考え方 主役はモノ 色は◦◦ お洒落な 装飾 すっきりと したフォン ト 見た目や 雰囲気
15. 「デザイン」を捉え直す 古いデザインの考え方 主役はモノ 新しいデザインの考え方 色は◦◦ お洒落な 装飾 すっきりと したフォン ト 見た目や 雰囲気
16. 「デザイン」を捉え直す 古いデザインの考え方 主役はモノ 新しいデザインの考え方 主役はユーザー 色は◦◦ お洒落な 装飾 すっきりと したフォン ト 見た目や 雰囲気
17. 「デザイン」を捉え直す 古いデザインの考え方 主役はモノ 新しいデザインの考え方 主役はユーザー 色は◦◦ お洒落な 装飾 すっきりと したフォン ト 見た目や 雰囲気 ユーザー の思考や 行動 どんな感 情にさせ る？ どんな疑 問を持 つ？ どんな行 動をと る？
18. 「デザイン」を捉え直す UIやUXの考え方もこちらの新しい「デザ イン」（＝デザイン思考）からきている ↓ 古い「デザイン」に囚われていた私は理 解に時間がかかった！！ 新しいデザインの考え方 主役はユーザー ユーザー の思考や 行動 どんな感 情にさせ る？ どんな疑 問を持 つ？ どんな行 動をと る？
19. つまりUI/UXを考えるとは…
20. 主役はモノ 主役はユーザー
21. ひたすらユーザーについて調べ、考えていくこと！！！ 主役はモノ 主役はユーザー この前提がずれると理解が難しくなる …
22. なるほど
23. 新しいデザインについてはなんとなくわかった…
24. じゃあUIとUXってそれぞれ何なの？
25. じゃあUIとUXってそれぞれ何なの？ それにUIとUXの関係性は？
26. よくある疑問 UI≒UX？
27. よくある疑問 UI≒UX？ UIとUXはセット？
28. よくある疑問 UI≒UX？ UIとUXはセット？ →違う！
29. そもそもの言葉の定義
30. UX＝
31. UX＝ユーザーエクスペリエンス
32. UX＝ユーザーエクスペリエンス エクスペリエンス＝体験、経験 つまり…
33. UX＝人が物やサービスに触れて 得られる体験や経験、感情全て 商品（サービス）を知ってから商品（サービス）を忘れるまで。広い。
34. 対して…
35. UI＝
36. UI＝ユーザーインターフェイス
37. UI＝ユーザーインターフェイス インターフェイス＝境界面、接点 つまり…
38. UI＝人が商品やサービスに関わ るにあたって、目に入る物、操作 する物全て UI＝使い勝手　画像、フォント、メニューやボタン、操作する端末の外枠まで全てを含む
39. UIとUXの関係性 UX
40. UIとUXの関係性 UX UI
41. UIとUXの関係性 UXの範囲はとても広く、UXの 一部をUIが担っている UX UI
42. UIとUXの関係性 UXの範囲はとても広く、UXの 一部をUIが担っている UI≒UX？ UIとUXはセット？ UX UI
43. UIとUXの関係性（具体例） サービスの例 自分が好きなYOUTUBERがオリジナルグッズを作ったと言っていた。どうやらオリジナ ルグッズ販売サイトで売られているようだ。知らないサイトだったが、リンクから見にいっ てみる。思ったより商品がたくさんあるんだな。ほしかったTシャツは気に入った色を2種 類選んだ。もう１種類のデザインは悩んだが、決められなかったのでお気に入り機能に 入れておいた。よくみるとサイト右上にボタンがあり、何かわからなかったので押してみ ると商品のランダム表示だった。面白い柄のTシャツを見つけてしまい、そちらも購入す ることにした。購入までの流れはスムーズで商品もすぐに届いた。Tシャツは友達にも 好評で自分でも気に入っている。サイトからのメールでクーポンが届いたので、迷って いた残りのTシャツも買っちゃおうかな…。
44. UIとUXの関係性（具体例） サービスの例 自分が好きなYOUTUBERがオリジナルグッズを作ったと言っていた。どうやらオリジナ ルグッズ販売サイトで売られているようだ。知らないサイトだったが、リンクから見にいっ てみる。思ったより商品がたくさんあるんだな。ほしかったTシャツは気に入った色を2種 類選んだ。もう１種類のデザインは悩んだが、決められなかったのでお気に入り機能に 入れておいた。よくみるとサイト右上にボタンがあり、何かわからなかったので押してみ ると商品のランダム表示だった。面白い柄のTシャツを見つけてしまい、そちらも購入す ることにした。購入までの流れはスムーズで商品もすぐに届いた。Tシャツは友達にも 好評で自分でも気に入っている。サイトからのメールでクーポンが届いたので、迷って いた残りのTシャツも買っちゃおうかな…。
45. UI/UXについてわかってきたぞ…
46. UI/UXについてわかってきたぞ… ここで注意点
47. 人によってUI/UXの定義は異なる UI/UX(特にUX)という言葉はとても漠然としている。 相手によって何をUI/UXと定義して使っているか異なる可能性がある →相手と認識をあわせることがとても大事！！ ややこしいので、あえてUI/UXという言葉をあえて使わないというのも手 また、本によってもUI,UX,デザインの意味合いは違ってくるので読む際には注意が必要。
48. まとめ
49. まとめ ・新しいデザインの考え方では大事なのは兎にも角にもユーザー ・UI/UXもその考えに基づき、ユーザーを中心として考える ・UX＝人が物やサービスに触れて得られる体験や経験、感情すべて ・UI＝人が商品やサービスに関わるにあたって、目に入る物、操作する物すべて ・UIはUXの一部 ・UI/UXの言葉は曖昧なので使い際には注意する
50. なんとなくわかったところで、 WEBサービスのUIUXを改善していこう！
51. …？
52. ユーザーを考えてWEBサービスの 改善するといっても、具体的に何を していいか。わからない…
53. ユーザーを考えてWEBサービスの 改善するといっても、具体的に何を していいか。わからない… UIUX改善によく使われる 便利なツールを使って考えていこう
54. 現状を知ろう サービス改善は「どのような価値を誰に対して提供するためのサービス改善であるか」 を明確にする必要がある →現状（何が価値で何が問題となるか）を正しく把握する必要がある
55. 現状を知ろう サービス改善は「どのような価値を誰に対して提供するためのサービス改善であるか」 を明確にする必要がある →現状（何が価値で何が問題となるか）を正しく把握する必要がある →ペルソナやカスタマージャーニーマップ、ストーリーボードを使う
56. 現状を知ろう サービス改善は「どのような価値を誰に対して提供するためのサービス改善であるか」 を明確にする必要がある →現状（何が価値で何が問題となるか）を正しく把握する必要がある →ペルソナやカスタマージャーニーマップ、ストーリーボードを使う →必要な物が見えてくる！！
57. ユーザー像を設定する ペルソナ法…ペルソナ（架空の人物像）を設定して、そのペルソナの行動を具体的にス トーリー化することで感情や欲求を見直していく方法。名前、性別といった基本情報やそ のペルソナが言い出しそうな言葉などを添える。
58. ユーザー像を設定する ペルソナ法…ペルソナ（架空の人物像）を設定して、そのペルソナの行動を具体的にス トーリー化することで感情や欲求を見直していく方法。名前、性別といった基本情報やそ のペルソナが言い出しそうな言葉などを添える。 例）LTCのペルソナ 名前：松永 拓郎 年齢：28才 性別：男性 職業：webエンジニア 特徴：一人暮らし、夜型、基本は外食だったが最近はよく Uber Eatsを使う。最近コロ ナ太りが気になる。 コメント：仲良かった同期が転職しちゃって、自分もそろそろしたいなーとは思ってる んですけど…。なんとなく居心地もいいし、踏ん切りがつかなくて。 非公開
59. 行動を可視化する カスタマージャーニーマップ…よりユーザーの行動を明確にする。タッチポイント、顧客 の行動、思考や感情を書いていく。様々な書き方がある。 非公開
60. 行動を可視化する ストーリーボード…漫画のような絵コンテ。利用シーンやユーザーの感情を洗い出す。 非公開
61. 行動を可視化する ストーリーボード…漫画のような絵コンテ。利用シーンやユーザーの感情を洗い出す。 →これらのツールを使うことで必要な改善が可視化される！ 非公開
62. UI改善
63. webサイトのUIを考える 先ほどあげた手法から出てきた問題点。例えば…
64. webサイトのUIを考える 先ほどあげた手法から出てきた問題点。例えば… 「相談会の情報が欲しいときにどこにあるのかわからない」 「登録しようと思ったが住所入力に手まどり、めんどくさくなってやめた」
65. webサイトのUIを考える 先ほどあげた手法から出てきた問題点。例えば… 「相談会の情報が欲しいときにどこにあるのかわからない」 「登録しようと思ったが住所入力に手まどり、めんどくさくなってやめた」 →これらをUI改善で問題解決していく
66. フォームUIを考える 例）「登録しようと思ったが住所入力に手まどり、めんどくさくなってやめた」 →使いやすいフォームに作り替えていく。
67. フォームUIを考える 例）「登録しようと思ったが住所入力に手まどり、めんどくさくなってやめた」 →使いやすいフォームに作り替えていく。 フォームは操作が多い箇所なので、ユーザーがストレスなく短時間で入力できるように デザインする必要がある。 参考）User Inyerface 使いづらいフォームががどれだけ人をイライラさせるか 教えてくれるジョークサイト
68. オウンドで使われているUIパターン例（フォーム） ・入力の手間を少なくする…初期値をユーザーが入れるであろう選択肢にしておく、候補 を用意する等。
69. オウンドで使われているUIパターン例（フォーム） ・エラーを事前回避する…プレースホルダーを利用する。入力エラーは入力した直後に だす。エラーの場所を目立たせる
70. オウンドで使われているUIパターン例（フォーム） ・ステップナビゲーションをつける…タスクに対して、今何をしているか、次に何をする か、自分の達成具合がどのくらいなのかを知ることができる。
71. 最後に UI/UXはデザイナーだけが考えれば良い物ではなく、デ ザイナー、エンジニア、マーケターのチーム全員が考え て初めて良いものができる。 →エンジニアでも情報をキャッチアップしていこう
72. 参考になるサイト等 ・UXMILK…国内サイト。イベントが開かれていたり。 ・UXTIMES…国内サイト。ちょっと学問寄りのイメージ。 ・UX Collective…海外記事。面白い。ここで書かれている物が他のブログで翻訳されて いたり。 ・NOTEのデザイン記事まとめ…UIUX以外も多い。読みやすくて好き。
73. ご清聴ありがとうございました