非デザイナーのためのUI / UXデザイン

新潟県の医療課題解決コミュニティ『 にいがたヘルスケアアカデミー』で発表させていただいた時の登壇資料です。

【登壇者】
・加藤智之（https://twitter.com/tomo_k09）

【イベントレポート】
https://note.com/yojo_engineering/n/ne09206b08dc2

【コーポレートサイト】
https://yojo.co.jp/

【採用情報】
https://herp.careers/v1/yojo

Transcript

1. 非デザイナーのためのUI / UXデザイン
2. 本講義のゴール ・UI / UXの概要について理解できる ・非デザイナーがどのようにUI / UXを作っていくべきかを理解できる
3. 自己紹介 名前：加藤 智之 職業：薬剤師・エンジニア 趣味：読書、散歩 家族：妻（12月に女の子が生まれます）
4. 薬剤師エンジニアとしてYOJOでやってきたこと LINE botを作ったり、、、
5. 薬剤師エンジニアとしてYOJOでやってきたこと 薬剤師のリモートワーク体制を構築するプロ ジェクトを担当！
6. 薬剤師エンジニアとしてYOJOでやってきたこと ユーザー&薬剤師のUI / UXを 今までたくさん考えてきました！
7. タイムテーブル 1. UI / UXの概要 2. カスタマージャーニーマップとは 3. カスタマージャーニーマップを作ってみよう 4. イケてるUI・UXを作る上で大事なこと 5min 5min 60min 10min
8. タイムテーブル 1. UI / UXの概要 2. カスタマージャーニーマップとは 3. カスタマージャーニーマップを作ってみよう 4. イケてるUI・UXを作る上で大事なこと 5min 5min 60min 10min
9. UI / UXとは UI（User Interface） ユーザーとプロダクトをつなぐ接点 UX（User Experience） サービスを通して得られる体験 ビジュアル・操作性 UXを向上させる要素のひとつ ユーザーが体験すること 「良いサービスだな」と ユーザーに思ってもらうための設計・考え方
10. UI / UXの例 • UX（User Experience） あとどれくらいで体質チェックが終わるか 表示することによりUXが良くなる • UI（User Interface） あとどれくらいで体質チェックが終わるかを どのように表現するのかが UI
11. デザインとは 一般的なデザインのイメージ 実際のデザイン
12. なぜビジネスにおいてデザインが重要なのか モノ・サービスが増え、 機能で差別化することが 難しくなった SNSの発達により ユーザーとサービスの距離が 急激に近くなった 一昔前のビジネスと現代のビジネスは大きく変わったから
13. ビジネスにおけるデザインの役割 快適なユーザー体験を設計し、愛されるプロダクトを作ること
14. UI / UXをどのように作っていくか UX UI ①：UXをUIに落とし込む ②：より良いUIにするために UXを再考する
15. タイムテーブル 1. UI / UXの概要 2. カスタマージャーニーマップとは 3. カスタマージャーニーマップを作ってみよう 4. イケてるUI・UXを作る上で大事なこと 5min 5min 60min 10min
16. UXを考えてみよう！ UXを考えるには カスタマージャーニーマップを 作るのがおすすめだよ！
17. カスタマージャーニーマップとは 顧客のサービス接点・体験・感情を時系列に並べて視覚化したもの
18. 簡易版 カスタマージャーニーマップ サービスを知る 使い始める 使ってから なぜそうした？ どこで知った？ 知ってから 何をした？ TVのCM クチコミ どういう番組があるのか な お金払う価値あるの？ スマホ 愛の不時着をみた 韓流ドラマをずっとみてる
19. YOJO漢方事業のCJM
20. ワーク①：カスタマージャーニーマップを作ってみよう！ <作り方の流れ> 認知、情報収集、サービス利用、継続利用の各フェーズで 1：どこにユーザーとの接点があるかまとめよう！ 2：顧客心理が各フェーズでどのように変わるか考えてみよう！ 3：顧客が各フェーズでどのように行動するか洗い出そう！
21. カスタマージャーニーマップを作る際に意識すること 1：ペルソナを明確にしよう！ 2：家族・友達・同僚など身近な人だったらどう行動するか想像しよう！ 3：ユーザーのネガティブな感情も書き出そう！（色をつけておいてください）
22. ブレークアウトルームをお願いします！ 時間：20分 発表：5分
23. なぜユーザーが離れていくのか考えてみよう • ユーザーが離れていく理由はたくさんある 例 ・料金が高い ・他にもっと良いサービスがあった ・飲み忘れてどんどん薬が溜まってしまう ・返信スピードが遅い カスタマージャーニーマップの各フェーズで どんな離脱理由があるか考えてみよう
24. ブレークアウトルームをお願いします！ 時間：10分
25. ワーク３：離脱を防ぐ施策を考えよう ・解決したいこと ⇨返信スピードが遅い ・離脱が起こる原因 ⇨薬剤師が足りていない ・その原因を解消する施策 ⇨ 薬剤師を採用する
26. ワーク３：離脱を防ぐ施策を考えよう 時間：10分 発表：3分
27. 作ったUXをUIに落とし込む UI / UX ユーザー ヒアリング プロトタイプが必要 分析 整理 分析結果を反映
28. 古い結果説明
29. 改善した結果説明
30. ユーザーヒアリングはインサイトの宝庫
31. ユーザーのことを鵜呑みにしすぎないこと あんな機能が あればいいのに...!! おっしゃ、作ったるで 使ってみたけど、 やっぱいらんかったわ
32. ユーザーの課題をどうやって解決するか ユーザーはああ言っているけど、 他にイケてる解決策はないだろうか
33. お疲れさまでした！！ これで自分も 立派なデザイナーだぜ！！
34. と思ったそこのあなた！ それは勘違いだよ〜
35. UI / UXはデザイナーと一緒に作ることをおすすめします UI / UXデザインは専門性の高い仕事だから なぜなら・・・
36. 素人ができるほどデザインは甘くない 医者じゃないのに、診察をできると思いますか？ エンジニアじゃないのに、データベースの設計をできると思いますか？ 非デザイナーがイケてるデザインを作るのは難しいです。
37. デザイナーさんのすごさが分かる事例 ど素人が作った激やばデザイン デザイナーが作ったイケてるデザイン
38. デザイナーとドメインエキスパートが一緒に作ることが大事
39. デザイナーさんと働き始めのコミュニケーション方法 <絶対に伝えたい3つのこと> １：デザイナーさんに自分は何の専門家なのかを伝えること ２：解決したい明確に課題を伝えること ３：お客さんと受注者のような関係にはならないように気をつけること
40. YOJOの場合 私は薬剤師でエンジニアだよ イケてるサプリメントの サービスを作りたいんだ！ LINE上でどんな体験を作れば良いか 一 緒に考えてほしい！ 何の専門家？ 解決したいことは？ お客さんと受注者の関係に なっていない？
41. デザインの種類 • UXデザイン • UIデザイン • グラフィックデザイン • ファッションデザイン • インテリアデザイン • プロダクトデザイン
42. デザイナーの得意と自分たちが作りたいものがマッチしている か意識しよう 自分たちが作りたいもの デザイナーが得意なこと
43. 自分たちに必要なデザイナーを考えてみてください わたしは女性向けサービスの グラフィックデザインに強いよ 僕は医療・福祉系のサービスの UXデザインがすごく得意だよ！
44. デザイナーさんの探し方 • リファラル • SNS • 自分の好きなプロダクトのデザイナーに声がけ • Yentaなどのビジネスマッチングアプリ(https://page.yenta-app.com/jp)
45. UI / UXに関する基礎知識は学ぶ価値があるよ • 基礎知識があるとUXの言語化がうまくなるよ • デザイナーさんとの共通言語を持つことが大事（デザイナーさんが何をやっている のかを知ろう）
46. UI / UXについて深掘る必要はない • UI/UXについて深く理解するよりは、いろんなサービスを触ってどんなUI/UXがある のかを知ることが大事。 • デザイナーさんと議論する上での引き出しを増やすイメージ
47. おすすめ書籍 UX • UXデザインをはじめる本 • UXデザインの法則 • 世界のエリートはなぜ美意識を鍛えるのか • ついやってしまう体験の作り方 UI • オブジェクト指向UIデザイン • 簡単だけど、すごくよくなる77のルール