ノンデザイナーが知っておくべき、 UXデザインの基本と プロトタイピングツール 2020/09/08 NCDC株式会社

プレゼンター紹介 2 代表取締役/ビジネスアーキテクト 早津 俊秀 和歌山大学経済学部 非常勤講師 元グロービス経営大学院 客員准教授 日本電信電話にてエンジニア、新規ビジネスプ ロデュースを経験後、HP，BEA、オラクル等の 外資系IT企業にてITコンサルタント、製薬ベン チャーでのIT部門を統括。ベンチャー支援等の 後 NCDCを創業。 ◉執筆 SOA サービス指向アーキテクチャ（翔泳社） ビジネスはSOAで変革する（IDGジャパン） スマートデバイス×業務システム導入ガイド（秀和システ ム） UXデザイナー 福田 貴博 Webデザイン会社に就職し、コンシューマー向 けサービスを中心にUIデザインを担当する。 その後、リードUX/UIデザイナーとして、業界 トップクラスのシェアをもつウェブサービス会 社に参画、デザインコンセプトからUIデザイン に至るまで、同時にチームビルディングやプロ ジェクト管理までを担当する。 使用するユーザーに寄り添ったデザインを提供 したいと考えている。

NCDCのご紹介

私たちにできること① l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。 l スモールスタートでの検証から、本開発・継続的な改善までサポートします。 4 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の⾼いプロジェクト ではMVP（Minimum Viable Product）を⽤いた検証を⾏ うなど、⽬的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを⽤意してユーザの 評価を確認します。 ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします。 l AI / IoT / AR l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善

私たちにできること② l 社内に最適な組織がない場合の組織づくりや⼈材育成から、⾼度な技術をもったエンジニ アによる技術移管まで、幅広くお客様をサポートします。 5 ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善 企業のDXやデジタルビジネスの創出に必要なこうしたプロセスを多⾯的にサポート DX戦略⽴案 ⼈材育成 技術移管 リファレンス実装 DX組織構築⽀援 アジャイル導⼊⽀援 ⼿法や技術の選定 ブランディング

Business 事業領域の推進 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 6 NCDCのサービス体系

そもそもUXとは？その本質的な理解

プロダクト＆サービスの進化 https://www.itmedia.co.jp/news/articles/1910/29/news060.html https://www.powerwatch.jp/2020/04/27 https://diamond.jp/articles/-/180183?page=8 https://wired.jp/2019/09/08/wired-guide-to-the-iphone/ 基本機能 の充実 大きさ、軽さ、処理スピード等性能の進化 拡張機能の進化 価格の競争 気配り、心配り の競争 User Experience 8

プロダクト＆サービスの進化 l 機能・性能・価格競争で差異が出せない l 機能・性能・価格である程度のユーザーニーズを満たした ユーザーはUXを求める（心地よい体験、満足感） 9

これからのプロダクトやサービス l UXを企画・設計・実現しないとユーザーに選ばれない時代に l UXを企画・設計・実現していくことを「UXデザイン」と呼ぶ 10 性能や機能を設計・実現していたように、 UXをデザインしてプロダクトやサービスを作らないと 競争優位に立てなくなってきた

UXデザインの唯一かつ最も重要なこと 11 性能の進化 拡張機能の進化 価格の競争 ユーザーニーズから、 実現方法や原価などをロジカルに考 えてモノとして実現する必要がある 心地よさ、気持ちよさ、満足感 ユーザーの感情を想像しながら実現 する必要がある。実際に体験してみ ないとわからないことがある

UXデザインの基本

新規サービスのビジネスモデル l 新規サービスのビジネスモデルを検討する際、UXデザインは外せ なくなってきた 13 ビジネスモデル 儲かるか？ 事業者視点 ビジネスモデル・キャンバス UXデザイン 使うか？買うか？ ユーザー視点 カスタマージャーニーマップ

NCDCの方法論にみる新規サービス立案のプロセス l 新規サービスのビジネスモデルを使用者視点で検討する場合のUX デザインモジュール 14 1 User Value Module PEST分析 ３C分析 ビジネス モデル キャンバ ズ作成 ジャー ニーマッ プ作成 インサイ ト分析 従来のビジネスモデル立案の流れ UXデザインの視点を入れて 検証する

UXデザインの一般的な理解・範囲 l 本日は何らかのサービスに関するUXデザインをテーマにします 15 UX UI Operation UI System

今日説明していくUXデザインプロセス l 新規サービスに必要な機能やUIを使用者視点で検討する場合のUX デザインモジュール 16 2 Service Design Module エレベー ターピッ チ作成 ジャー ニーマッ プ作成 解決策 一覧作成 UXプロト タイプ ＆ ユーザー テスト ペルソナ 定義 インサイ ト分析 A B C D E F

ペルソナ その後の分析工程でペルソナだったらどう考えるのか？ どう行動するのか？を想像するために、使用者の典型的 なユーザー像をペルソナとして定義する。 l ペルソナの数は決まりはないが、3〜5ペルソナ程度が妥当。 l 1ペルソナに対して、ジャーニーマップが作成されるため、 ペルソナが多いとジャーニーマップも多くなる。 l 名前や写真に有名人のものをそのまま使わない。 （その人のイメージに思考が引っ張られてしまうため） l あえて「ターゲット」ユーザーといった表現は使わない。 ターゲットと言う表現は事業者視点での単語であるため。 l 項目には思考やライフスタイルなども含めて良い。 l 生活習慣 l 健康意識 l 情報源 l 金銭的価値 等 l 関係者のだれもが同じような人物像としてイメージができる ような項目と内容を定義する。 Persona ⽬的 l ペルソナの種類・数を決める。 l 各ペルソナの属性（項目）を決める l 各属性について、内容を決める。 ⼿順 l 名前、年齢、性別は必須。その他の項目はプロジェ クトに応じて必要なものを適切に定義。 l 直感的にイメージしやすい人物の写真やイラストを 添えてもよい。 フォーマット ポイントや注意点 A B C D E F 17

ペルソナ サンプル Persona Sample 親子向けのサービス検討のペルソナ • ⼭⽥亜希⼦（35歳、主婦） ⾥奈（6歳、幼稚園児） • ピアノから離れて20年以上 • ⼦供にピアノを習わせたいと思ってい て、⾃分も久々に⾏ってみようと興味 を持っている • ⼦供にも教えてあげたい • ⼦供はピアノには興味は持っていない。 外で遊ぶのが好き IT企業向け社内サービス検討のペルソナ • ⼩林雅⼈（42歳） • 東京都在住通勤45分 • ⾦融事業部所属 • インフラ関連のエンジニア • プロジェクトをいくつもかけ持っている • 勤務時間は⻑い傾向がある • プロジェクト内での会議が多い • 現在は在宅勤務対象者になっている • 妻も会社員 • ⼦供2⼈（⼩学2年⽣の⻑⼥、幼稚園に通 う5歳の⻑男） OL向けサービス検討のためのペルソナ • ⽒名：佐藤志保 • 年齢：35歳 • ⾝⻑：155センチ • 職業：⼤⼿製薬メーカーの広報主任 • 年収：800万円 • 未婚で⼀⼈暮らし付き合って1年の彼⽒アリ • 性格：テキパキさっぱりした性格、無駄な時間などは作らず常に活動的 • 趣味：ショッピング、グルメ巡り、旅⾏、⾃分磨き、アロマネイル • 好きなブランド：アーバンクローゼット系 • スマホ/携帯： iPhone を所有 • 化粧品へのこだわり：セットで購⼊して払いするコンサルを希望 • どんなアプリを使っている： Instagram ,LINE、 • ITリテラシーネット：ショッピングなども⾏い、スマホも⾃由に使いこなす • ⽣活スタイル：平⽇は22時より早く寝ることはほとんどない。 ⼟⽇は趣味は⾃分磨きがデート。年1回ぐらいは海外旅⾏ 18

目的 l ペルソナの行動を想像・定義し、その行動の際の考えて いるであろうことや思っているであろうことを抽出し、 ペルソナの感情・心理状態を可視化する。 l ペルソナ毎にストーリーを抽出する l ストーリー毎にペルソナの行動を列挙する l ペルソナの行動を列挙した後、各行動時にペルソナが考 えるうる可能性のある気持ちをできるだけ多く列挙する 手順 フォーマット l ペルソナ毎のストーリー l ストーリー毎のDo（行動）とThink（気持ち） カスタマージャーニーマップ Customer Journey Map ポイントや注意点 l ストーリーを抽出する際、該当となる行動の前と後の ストーリも抽出しておく。（予期的UX、エピソード 的UX） l ストーリーは日や時間経過といった流れで考えること もできるが、イベント毎に考えるほうが一般的である。 l ストーリーは検討中のサービスや該当するサービスが ない状態（現状）で考える。 l 何らかの理由で現状のストーリーが描けない場合は該 当のサービス等を仮で定義して、それを使用している 前提で考えても良いが、現状ではないことを関係者が 認識しておくこと。 l ペルソナになったつもりで想像を膨らませ、ジャー ニーマップを作る。 l Thinkはプラスの思考だけでなく、マイナスの思考な ども漏れないように幅広く検討する A B C D E F 19

カスタマージャーニーマップ サンプル Customer Journey Map Sample CMで知 る 週末の 情報番組 で特番を ⾒た ウェブで 調べる FBで あった 知り合い を⾒る コンビニ でー使え そうだっ たが スルー 家でアプ リを開い てみる コンビニ で使って みる 使い終 わって職 場に戻る FBに アップ する Think なんだろ う？ どのサー ビスがい いのかな Suicaで ⼗分 うわっ、 すげーな どんなか な 登録は簡 単だ レジ並ん でたから やめとこ あそこで 使えるん だ ⼀瞬⼿間 取った 便利だな みんなに 使っても らいたい ダウン ロード してみる ユーザー 登録して みる 得なのか な？ どのサー ビスがい いかな？ すごい得 だー ⼊⼒項⽬ 多いな そういえ ばとレジ で気づい たけど遅 かった 明⽇は 使ってみ よう 簡単だっ た 得だな みんなの 反応が知 りたい 怪しいの ではない か？ 現⾦で⼗ 分 とりあえ ずダウン ロードだ けしてみ るか DO 最初にDOでストーリーを構成する行 動を時系列に並べていく 各行動において、ペルソナが考えそう なことを思いつくすべてを挙げてみる 20

目的 l カスタマージャーニーマップからペルソナの本音とは何 か？行動や思考に影響を与える感情は何か？を導き出す。 l カスタマージャーニーマップを俯瞰しながら、「結局こ のストーリでペルソナが感じている本音とは何なの か？」「要は一言でいうとペルソナが感じていることは 何なのか？」を考えて、記載する 手順 フォーマット l カスタマージャーニーマップの縦軸のThinkの下に 「Insight」を追加 インサイト分析 Insight ポイントや注意点 l ストーリ毎にインサイトは一つである必要はない。 l インサイト＝ペルソナの本音 と考えると導きやすい。 l 「要はこのストーリでペルソナが本音で思っているこ とはことは何なのか？」を何度も声に出して問いかけ て深く考えることを意識すること。 A B C D E F 21

インサイト分析 サンプル Insight Analysis Sample CMで知 る 週末の 情報番組 で特番を ⾒た ウェブで 調べる FBであっ た 知り合い を⾒る コンビニ でー使え そうだっ たが スルー 家でアプ リを開い てみる コンビニ で使って みる 使い終 わって職 場に戻る FBにアッ プ する Think なんだろ う？ どのサー ビスがい いのかな Suicaで ⼗分 うわっ、 すげーな どんな かな 登録は簡 単だ レジ並ん でたから やめとこ あそこで 使えるん だ ⼀瞬⼿間 取った 便利だな みんなに 使っても らいたい ダウン ロード してみる ユーザー 登録して みる 得なのか な？ どのサー ビスがい いかな？ すごい 得だー ⼊⼒項⽬ 多いな そういえ ばとレジ で気づい たけど遅 かった 明⽇は 使ってみ よう 簡単だっ た 得だな みんなの 反応が知 りたい 怪しいの ではない か？ 現⾦で ⼗分 とりあえ ずダウン ロードだ けしてみ るか DO Insight 得か、便利か？ 怪しくないか？ 使えるか、使ってみるか、 使わないか 簡単か？ 便利か？ 結局このペルソナにとっての 本音は何なのか？ 22

目的 l カスタマージャーニーマップとインサイト分析からから ペルソナの本音や思考に答えることのできる解決案を抽 出する。 l カスタマージャーニーマップThink部分とInsight部分を熟 読して、ペルソナに好影響を与えることができそうな解 決策を列挙する。 手順 フォーマット l カスタマージャーニーマップに考えうる解決案を記述する l 一通り挙げた後、スプレッドシートに解決案を天気して、評 価軸を定義して、解決策の優先順位を検討する l 評価軸としては「実現した時の効果の大きさ」「実現の容易 性」などは必須であるが、それ以外でも必要な評価軸を考え て追加する 解決策一覧 Solution Analysis ポイントや注意点 l 解決案をリストアップする時点では実現性は考えずに 本質的な解決案をリストアップすることを意識する。 l 検討中のアプリケーションやシステムがあったとして もその解決範囲に閉じてはいけない。 l 実現性の評価はスプレッドシートなどで、解決案のア イデア出しと切り分けて実施する。 A B C D E F 23

解決策一覧 サンプル 解決策 効果・⽬的 実現容易性 1 どんな⼈に得になるのかわかるようにする ユーザー登録しやすくなる 容易 2 信⽤されるような情報提供する ユーザー登録しやすくなる 容易 3 使⽤⽅法が直感的にわかるような表⽰にする ユーザー登録しやすくなる 容易 4 わからない場合にきくことができるようにする ユーザー登録しやすくなる 容易 5 続けている内容が視覚的にわかる ユーザー登録しやすくなる 容易 6 時間になると起こしてくれる ユーザー登録しやすくなる 容易 7 今⽇はアプリだけでいいよ 代替⾏動のために 普通 8 ボットか何かが、励ましたり、⽢えてくる 新しい楽しみ・モチベーションアップ 普通 9 内蔵曲をBGMとして再⽣する 新しい楽しみ・モチベーションアップ 容易 10 課題曲仲間の演奏が聞ける 新しい楽しみ・モチベーションアップ 普通 11 テレビやCMで流れているこの曲は「楽曲」があるよ通知 新しい楽しみ・モチベーションアップ 普通 12 何かが連動していて、曲名と楽譜がでてすぐ楽譜購⼊など 新しい楽しみ・モチベーションアップ 普通 13 弾きたい曲を探す、楽譜が⼿に⼊る機能 難 シートの整理してから、実現性 等を評価 Solution Idea Sample 24

目的 l ここまで進んできた仮説を検証するために、実際にユー ザーの体験を実現できそうかを検証するためのプロトタ イプを作成する。 l カスタマージャーニーマップと解決策から、実際にユーザーテスト による検証が必要と考えられる部分を決める l 該当部分のプロトタイプを作る l 画面で表現できる部分であえば、検証に必要な部分のワイヤーフ レームを作成する l 画面が必要ではない何かを行動する部分であれば、ロールプレイを 行うために必要なものを用意する 手順 フォーマット l 画面であればワイヤーフレーム作成ツールを利用する。 l 行動の検証でロールプレイであれば、その場にあるも ので代替する。 UXプロトタイプ＆ユーザーテスト UX Prototype & User Test ポイントや注意点 l 何を検証したいのか？、その検証項目と評価基準を最 初に定義する。 l 定義された検証項目をテストするために必要なプロト タイプは何なのか？を決める。 l プロトタイプ作成→ユーザーテストを何度も繰り返し て良い l 何度も繰り返すことを前提に必要以上にプロトタイプ 作成に精密性を求めて時間を掛ける必要はない。定義 された検証ができれば良い。 l ユーザーの評価をそのまま真に受ける必要はない。 ユーザー評価結果はあくまで参考情報である。 l プロトタイプが必要なく、机上検証やインタビュー、 アンケートでも検証できる場合もある。 A B C D E F 25

プロトタイプについて

プロトタイプはなぜ大切か？ プロトタイプとは l UIやUXを確認するために、画面デザインを組み合わせて作成した プロダクトのモックアップのこと l 静止した画面だけでは使い心地の検証が難しかったり、考慮漏れ をすることが度々ある。 プロトタイピングツールを使用して 簡単な検証を行えるようにすることが目的 27

ツールにはどのような種類があるのか？ l 代表的なプロトタイピングツール Sketch Adobe XD Figma inVision 使用環境 MacOS Windows MacOS ブラウザ上 ブラウザ上 デザインの 機能 ◎ ○ ○ × 画面遷移機能 （プロトタイプ機能） ○ ○ ○ ◎ 同時作業の 有無 × × ○ × 価格 $99/年 無償 無償 (pro版は$15/月) 無償 (3プロジェクト以 上$25/月) 28

デモをお見せします フローは以下の４ステップで行います。 1. Sketchでの画面作成 2. Invisionに作成した画面をアップ 3. Invisionで書き出された画面をつなぐ 4. プロトタイプの確認とシェア 29 デザイン Sketchで作成 プロトタイプ Invisionで作成 弊社の作業フローの例

UXデザインプロセス l ペルソナ定義からユーザーテストまで、UXデザインの幹となるプロセス をご紹介しました。 l UXデザインのプロセスは事業企画者や要件定義をする人、つまりノンデ ザイナーが中心に進める工程です。 30 2 Service Design Module エレベー ターピッ チ作成 ジャー ニーマッ プ作成 解決策 一覧作成 UXプロト タイプ ＆ ユーザー テスト ペルソナ 定義 インサイ ト分析 A B C D E F

本日のまとめ 31 このような抽象度が高く、わかりにくいコトを実現するた めに、UXデザインという考え方やそのための方法論、実際 に体験してみるツールがある。 性能の進化 拡張機能の進化 価格の競争 ユーザーニーズから、 実現方法や原価などをロジカルに考 えてモノとして実現する必要がある 心地よさ、気持ちよさ、満足感 ユーザーの感情を想像しながら実現 する必要がある。実際に体験してみ ないとわからないことがある

NCDC公式ホームページの「コラム」もご活用ください 32

お問い合わせは l info@ncdc.co.jpまで 33

No content