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

by PharmaX（旧YOJO Technologies）開発チーム

Slide 1

Slide 1 text

Slide 2

Slide 2 text

本講義のゴール・UI / UXの概要について理解できる・非デザイナーがどのようにUI / UXを作っていくべきかを理解できる

Slide 3

Slide 3 text

自己紹介名前：加藤智之職業：薬剤師・エンジニア趣味：読書、散歩家族：妻（12月に女の子が生まれます）

Slide 4

Slide 4 text

薬剤師エンジニアとしてYOJOでやってきたこと LINE botを作ったり、、、

Slide 5

Slide 5 text

薬剤師エンジニアとしてYOJOでやってきたこと薬剤師のリモートワーク体制を構築するプロジェクトを担当！

Slide 6

Slide 6 text

薬剤師エンジニアとしてYOJOでやってきたことユーザー&薬剤師のUI / UXを今までたくさん考えてきました！

Slide 7

Slide 7 text

タイムテーブル 1. UI / UXの概要 2. カスタマージャーニーマップとは 3. カスタマージャーニーマップを作ってみよう 4. イケてるUI・UXを作る上で大事なこと 5min 5min 60min 10min

Slide 8

Slide 8 text

Slide 9

Slide 9 text

UI / UXとは UI（User Interface）ユーザーとプロダクトをつなぐ接点 UX（User Experience）サービスを通して得られる体験ビジュアル・操作性 UXを向上させる要素のひとつユーザーが体験すること「良いサービスだな」とユーザーに思ってもらうための設計・考え方

Slide 10

Slide 10 text

UI / UXの例 ● UX（User Experience）あとどれくらいで体質チェックが終わるか表示することによりUXが良くなる ● UI（User Interface）あとどれくらいで体質チェックが終わるかをどのように表現するのかが UI

Slide 11

Slide 11 text

デザインとは一般的なデザインのイメージ実際のデザイン

Slide 12

Slide 12 text

なぜビジネスにおいてデザインが重要なのかモノ・サービスが増え、機能で差別化することが難しくなった SNSの発達によりユーザーとサービスの距離が急激に近くなった一昔前のビジネスと現代のビジネスは大きく変わったから

Slide 13

Slide 13 text

ビジネスにおけるデザインの役割快適なユーザー体験を設計し、愛されるプロダクトを作ること

Slide 14

Slide 14 text

UI / UXをどのように作っていくか UX UI ①：UXをUIに落とし込む ②：より良いUIにするために UXを再考する

Slide 15

Slide 15 text

Slide 16

Slide 16 text

UXを考えてみよう！ UXを考えるにはカスタマージャーニーマップを作るのがおすすめだよ！

Slide 17

Slide 17 text

カスタマージャーニーマップとは顧客のサービス接点・体験・感情を時系列に並べて視覚化したもの

Slide 18

Slide 18 text

簡易版カスタマージャーニーマップサービスを知る使い始める使ってからなぜそうした？どこで知った？知ってから何をした？ TVのCM クチコミどういう番組があるのかなお金払う価値あるの？スマホ愛の不時着をみた韓流ドラマをずっとみてる

Slide 19

Slide 19 text

YOJO漢方事業のCJM

Slide 20

Slide 20 text

ワーク①：カスタマージャーニーマップを作ってみよう！ <作り方の流れ> 認知、情報収集、サービス利用、継続利用の各フェーズで 1：どこにユーザーとの接点があるかまとめよう！ 2：顧客心理が各フェーズでどのように変わるか考えてみよう！ 3：顧客が各フェーズでどのように行動するか洗い出そう！

Slide 21

Slide 21 text

カスタマージャーニーマップを作る際に意識すること 1：ペルソナを明確にしよう！ 2：家族・友達・同僚など身近な人だったらどう行動するか想像しよう！ 3：ユーザーのネガティブな感情も書き出そう！（色をつけておいてください）

Slide 22

Slide 22 text

ブレークアウトルームをお願いします！時間：20分発表：5分

Slide 23

Slide 23 text

なぜユーザーが離れていくのか考えてみよう ● ユーザーが離れていく理由はたくさんある例・料金が高い・他にもっと良いサービスがあった・飲み忘れてどんどん薬が溜まってしまう・返信スピードが遅いカスタマージャーニーマップの各フェーズでどんな離脱理由があるか考えてみよう

Slide 24

Slide 24 text

ブレークアウトルームをお願いします！時間：10分

Slide 25

Slide 25 text

ワーク３：離脱を防ぐ施策を考えよう・解決したいこと ⇨返信スピードが遅い・離脱が起こる原因 ⇨薬剤師が足りていない・その原因を解消する施策 ⇨ 薬剤師を採用する

Slide 26

Slide 26 text

ワーク３：離脱を防ぐ施策を考えよう時間：10分発表：3分

Slide 27

Slide 27 text

作ったUXをUIに落とし込む UI / UX ユーザーヒアリングプロトタイプが必要分析整理分析結果を反映

Slide 28

Slide 28 text

古い結果説明

Slide 29

Slide 29 text

改善した結果説明

Slide 30

Slide 30 text

ユーザーヒアリングはインサイトの宝庫

Slide 31

Slide 31 text

ユーザーのことを鵜呑みにしすぎないことあんな機能があればいいのに...!! おっしゃ、作ったるで使ってみたけど、やっぱいらんかったわ

Slide 32

Slide 32 text

ユーザーの課題をどうやって解決するかユーザーはああ言っているけど、他にイケてる解決策はないだろうか

Slide 33

Slide 33 text

お疲れさまでした！！これで自分も立派なデザイナーだぜ！！

Slide 34

Slide 34 text

と思ったそこのあなた！それは勘違いだよ〜

Slide 35

Slide 35 text

UI / UXはデザイナーと一緒に作ることをおすすめします UI / UXデザインは専門性の高い仕事だからなぜなら・・・

Slide 36

Slide 36 text

素人ができるほどデザインは甘くない医者じゃないのに、診察をできると思いますか？エンジニアじゃないのに、データベースの設計をできると思いますか？非デザイナーがイケてるデザインを作るのは難しいです。

Slide 37

Slide 37 text

デザイナーさんのすごさが分かる事例ど素人が作った激やばデザインデザイナーが作ったイケてるデザイン

Slide 38

Slide 38 text

デザイナーとドメインエキスパートが一緒に作ることが大事

Slide 39

Slide 39 text

デザイナーさんと働き始めのコミュニケーション方法 <絶対に伝えたい3つのこと> １：デザイナーさんに自分は何の専門家なのかを伝えること２：解決したい明確に課題を伝えること３：お客さんと受注者のような関係にはならないように気をつけること

Slide 40

Slide 40 text

YOJOの場合私は薬剤師でエンジニアだよイケてるサプリメントのサービスを作りたいんだ！ LINE上でどんな体験を作れば良いか一緒に考えてほしい！何の専門家？解決したいことは？お客さんと受注者の関係になっていない？

Slide 41

Slide 41 text

デザインの種類 ● UXデザイン ● UIデザイン ● グラフィックデザイン ● ファッションデザイン ● インテリアデザイン ● プロダクトデザイン

Slide 42

Slide 42 text

デザイナーの得意と自分たちが作りたいものがマッチしているか意識しよう自分たちが作りたいものデザイナーが得意なこと

Slide 43

Slide 43 text

自分たちに必要なデザイナーを考えてみてくださいわたしは女性向けサービスのグラフィックデザインに強いよ僕は医療・福祉系のサービスの UXデザインがすごく得意だよ！

Slide 44

Slide 44 text

デザイナーさんの探し方 ● リファラル ● SNS ● 自分の好きなプロダクトのデザイナーに声がけ ● Yentaなどのビジネスマッチングアプリ(https://page.yenta-app.com/jp)

Slide 45

Slide 45 text

UI / UXに関する基礎知識は学ぶ価値があるよ ● 基礎知識があるとUXの言語化がうまくなるよ ● デザイナーさんとの共通言語を持つことが大事（デザイナーさんが何をやっているのかを知ろう）

Slide 46

Slide 46 text

UI / UXについて深掘る必要はない ● UI/UXについて深く理解するよりは、いろんなサービスを触ってどんなUI/UXがあるのかを知ることが大事。 ● デザイナーさんと議論する上での引き出しを増やすイメージ

Slide 47

Slide 47 text

おすすめ書籍 UX ● UXデザインをはじめる本 ● UXデザインの法則 ● 世界のエリートはなぜ美意識を鍛えるのか ● ついやってしまう体験の作り方 UI ● オブジェクト指向UIデザイン ● 簡単だけど、すごくよくなる77のルール