Itプロジェクトにおけるuxデザインの実践的適用方法

ITプロジェクトにおける
UXデザインの実践的適⽤用⽅方法
2015年年3⽉月17⽇日
NCデザイン＆コンサルティング株式会社
NCデザイン＆コンサルティング株式会社

Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
今⽇日の内容
n  UXデザインの概要
n  ITプロセスにおけるUXデザイン適⽤用の課題
n  IT × UX プロジェクトの実践解
n  UXデザイン適⽤用におけるチップ
2

前提
n  市販されている本で得られる知識識はあまり詳しく説明しません。
•  もっと詳しい情報がほしい⽅方のためにはリンクを載せます
n  現場で感じる課題やそこからの悩みについて話します
•  そして、NCDCが実践している解法を説明します
n  NCDCの独⾃自の⾒見見⽅方や理理解が多く含まれております。
•  業界やプロジェクトの性格によっては適切切に変形して適⽤用する必要があります
3

UXデザイン：What? 　
n  ユーザーエクスペリエンスデザインは、ユーザーエクスペリエン
ス（User Experience）についてのエクスペリエンスデザインで
ある。デジタル機器/システムに対するユーザーの⾒見見⽅方に影響を
与えるようなアーキテクチャーやインタラクションモデルの⽣生成
に関する⼿手法である。「製品ととユーザーのインタラクションの
あらゆる⾯面、すなわちどのように気づかれ、学ばれ、使われるの
か」をその適⽤用範囲とする

　　 From : http://ja.wikipedia.org/wiki/ユーザーエクスペリエンスデザイン
5
読んでもわからないので、
まあ、⾶飛ばしましょう。

UXデザイン：What? 　
n  NCDCの解釈
•  サービスやシステムに接するユーザーがやりたいことをより簡単に、効率率率的に
できるように気遣うこと
•  あるいは、ユーザーがこちらの意図した⾏行行動を取るように誘導すること
n  UXデザインで⼤大事なこと
•  同調と共感（ユーザーの視点になること）
•  ユーザーにおける価値を確認すること（勝⼿手に決めつけてはダメ！）
•  ビジネスモデル（UXデザインの真の⽬目的）
6

UXデザインの対象
n  ウェブサービス
n  アプリ
n  広告（商品、ブランド、企業）
n  パッケージ
n  配達にかかる時間
n  接する⼈人
•  外⾒見見、態度度、年年齢、性別など
7
都合により画像は⾮非公開

UXデザイン：Why?
n  時代ですよ！
•  ものが満ち溢れる時代
新しい機能、より強⼒力力な機能、機能の多さでは選ばれなくなった
•  この時代における優位性を確保する要件が、「使⽤用者経験」
こんなことができる！
⇒もっとすごいことができる！
⇒より⾊色んなことができる
⇒もっと便便利利！もっと綺麗麗！
⇒これを使うあなたがかっこいい（オシャレ）ですよ！
n  視点は「もの」から「⼈人」に
8

UXデザイン：Why?
9
「UXデザインがビジネスの成
敗の（重要な）要因」
お⾦金金になるなら、みんなが興味を持ってくれる

Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 10
⽕火付け役の⼈人と製品：ジョブズとiPhone
（都合により画像は非公開）

もうやめましょう！
n  新しい端末や製品が出た時に、スペックだけで評価すること
•  時代遅れです
•  もっと⼤大事なのはユーザーに提供する経験価値であり、勝負はそこでつきます
11

UXデザインのプロセス
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた：How?
n  以下のプロセスを⾏行行います。
12
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
結果分析

コンテキスト分析
n  コンテキストとは
•  該当製品やサービスを使うユーザーを囲む環境
n  広義のコンテキスト（マーケットセグメンテーション）
•  製品やサービスがおかれている環境
•  対象ユーザー（既存＆潜在）
•  競合製品やサービス
n  狭義のコンテキスト
•  ユーザーの環境
•  ユーザー層
13
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

ペルソナ定義
n  該当製品やサービスを使うユーザーの特性を具体的に定義したも
の
n  よりユーザーの視点で思考するために必要
n  今後の全ての作業における基礎となる重要な要素
14
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析
都合により画像は⾮非公開都合により画像は⾮非公開

ユーザーストーリ作成
n  ユーザーの⾏行行動を具体的に定義し、理理解することが⽬目的
•  その⾏行行動の⽬目的、頻度度、重要度度、かかる時間と結果の評価基準を確認する
•  その⾏行行動が⾏行行われる場所、条件、必要要素、制約要素などを確認する
•  複数のペルソナがある場合は、各ペルソナのユーザーストリーを作成する
15
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

メンタルモデル作成
n  ユーザーの⾏行行動の原因とユーザーの認識識を確認して、UXデザインの⽅方
向性を定める
•  ユーザーの⾏行行動だけで判断するのではなく、ユーザーの⼼心理理を把握することで本当の
ニーズを発⾒見見する
•  イノベーションのきっかけを⾒見見つける場所はここ！
16
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

機能⼀一覧とデータ⼀一覧の作成
n  作成したユーザーストリーを元に、必要なデータと機能の⼀一覧を作成す
る
•  ユーザーストリーを実現できる機能とデータを⼀一覧する
•  ユーザーストリーと機能・データをマッピングする
•  既存の製品・サービスの機能・データを意識識せずに作成する
17
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

プロトタイプの作成
n  ユーザーテストを⾏行行うための必要最⼩小限のプロトタイプを作成
•  UIスケッチ、画⾯面のフローを検討する
•  ペーパープロトタイピング、プロトタイピング⽤用ツールの使⽤用
•  ⼿手軽に複数の試作を試し、改善を⾏行行う
•  ユーザーテスト⽤用のプロトタイプを作成する
18
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

ユーザーテスト実施と改善
n  UXデザインの仮説の検証
•  ⽬目的とした価値を有効にユーザーに提供できているかを確認する
•  ペルソナに近いユーザーを招き、役割劇、発話⽅方などで⾏行行う（必要に応じて録画・録
⾳音を⾏行行う。専⾨門機関に依頼する⽅方法もある）
•  課題を⾒見見つけ、分析を⾏行行い、対応策を考える
19
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
実施
結果分析

理理を知る
必要な機能と
仮説の検証と
UXデザインのやりかた
n  以上が全てのプロセスです。
20
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析

イテレーション#1
理理を知る
必要な機能と
仮説の検証と
n  しかし、⼤大事なのは反復復！（UXデザイナーは神様ではない）
21
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析

理理を知る
必要な機能と
仮説の検証と
n  全てを反復復する必要はない。必要なタスクだけ繰り返す！
22
コンテキスト
分析
ペルソナ定義
作成
修正
機能⼀一覧
修正
データ⼀一覧
修正
プロトタイプ
修正
実施
結果分析
※上図は⼀一例例です。

理理を知る
必要な機能と
仮説の検証と
n  改善を繰り返しつつ、⽬目的としたUXに近づけていく。
23
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
修正
実施
結果分析
※上図は⼀一例例です。

UXデザインプロセスで⼤大事なこと
n  アナログな道具と仲良良くなりましょう！
•  ポストイット、ペン、紙、ホワイトボード
•  早く、安く、多くが鍵
•  格好いい資料料の作成は最後だけで⼗十分
n  ユーザーを中⼼心においた現場主義
•  ⾔言葉葉に頼ると騙される
n  謙虚な姿勢を貫く
•  ユーザーは（たまに、不不親切切な）先⽣生、UXデザイナーは学⽣生
•  学び続ける姿勢（最初から完璧なものは無理理！）
24

ITプロセスにおけるUXデザイン適⽤用の課題

UXデザインの細分化
n  最近UXデザインが注⽬目されながら複数の⽀支流流に分化
•  伝統的なUXデザイン：先述したプロセスを参照
•  Agile UX Design : Agile Process X UX Design
•  Lean UXデザイン：Lean Startup X UX Design
n  各⼿手法はUXデザインの⻑⾧長所を⽣生かしつつ、各コンテキストで必要
な⽅方法論論を提供している
n  しかし、B2B/B2Eソリューションの開発及び既存SIプロジェクト
の特性を考慮したUX⽅方法論論はまだ定まってない
26

と⾔言うのは、嘘。本当はある
n  NCDCのUX Driven Development Process
•  しかし、Agile開発をベースにしており、ウォーターフォール⽅方式のプロセスに
適⽤用するには調整が必要
27
初期リサーチ継続リサーチ
スコープ
確定
コンテキスト／顧客
ストーリーボード
UIプロト
タイプ
優先順位定義
Rele
ase
Interaction Design & User Test
基本設計／技術調査
System /App Development & Test
要件分析
Visual
Design

ウォータフォールプロセス
n  多くの場合、デザインは実装の⼀一部として考慮されるが、ものに
よっては考慮すらされないこともある。
n  デザイン＝UIデザイン＝飾り
28
要件定義基本設計詳細設計実装テスト
リリース
パターン②
ものは実装できた。
デザイナーにちょこっと飾って
もらおう。
パターン①
要件定義が終わったので実装
する画⾯面を作ってもらおう。
⼀一発勝負

コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
UXデザインプロセス vs ウォータフォールプロセス
29
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
リリース
反復復型
⼀一発勝負

コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
UXデザインプロセス vs ウォータフォールプロセス
30
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
リリース
反復復型
⼀一発勝負
反復復はどうする？
このプロセスをど
こに挿⼊入するの？
既存タスクは
どうする？もうや
める？追加する？
もっと負荷が増え
るのでは？

UXデザイン × ITプロセス

UXデザイン × ウォータフォールプロセス
n  ITプロセスの要件定義及び基本設計フェーズの⼀一部をUXデ
ザインのタスクでリプレースできる
32
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析

課題：ウォーターフォールには反復復はないけど？
n  UXデザインプロセスは反復復が前提。
•  ⼀一回で最善の解を出すのは難しい
n  しかし、反復復による変更更の反映はコストが⾼高い
33
反復復はどうするか？
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析

UXデザインを考慮したプロセス定義、その①
n  要件定義と基本設計の⼀一部フェーズに必要な期間をより⻑⾧長く設定して、反復復を⾏行行う
•  このコストは設計及び実装フェーズでの⼿手戻りを防⽌止する効果でまかなえる
n  上記フェーズの⼈人（リソース）を増やすよりは期間を⻑⾧長くした⽅方が有効
•  プロジェクトの開始時期をもう少し早くすることは有効
34
要件定義
詳細設計実装テスト
基本設計
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
エンジニアの⼯工数は減り、そ
の分UXデザイナーの
⼯工数が追加される

UXデザインを考慮したプロセス定義、その②
n  ⼆二つのプロセスを並⾏行行する
•  詳細設計のフェーズまで仕様の変更更を可能とする
•  仕様の変更更に柔軟に対応できる開発体制が必要
n  UXデザインチームと開発チームの密な連携が必要
•  変更更の影響が⼤大きい部分とそうでない部分への認識識を共有し、作業の優先順位と変更更の可能性を検討す
る
35
要件定義詳細設計
実装テスト
基本設計
コンテキスト
分析
ペルソナ定義
作成
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
実施
結果分析
エンジニアの⼯工数はあまり減
らない。UXデザイナーの⼯工数
が追加される

ウォーターフォール⽅方式のプロジェクトにおけるUXデ
ザイン適⽤用のベストプラクティス
n  UXデザインはワークショップ⽅方式が有効
•  デザインチームは事前準備をしっかりし、参加者の時間を無駄にしない
•  ワークショップには必ず実ユーザーを参加させる（IT部⾨門の担当者で代わりにしない）
n  実装チームは、
•  ワークショップに参加し、仕様の背景を理理解しつつ、仕様変更更による影響範囲を他の参加者に理理
解させる
•  UXデザインでは気付かない実装上の要件・制約を早期に指摘する
n  UXデザインチームは、
•  ITプロセスを理理解し、適時に必要な資料料を、適切切なフォーマットで提⽰示する
•  プロジェクト管理理チームにUXデザイナーが参加する
36

ウォーターフォール⽅方式のプロジェクトにおけるUXデ
ザイン適⽤用のベストプラクティス
n  成果物と役割分担の定義を明確にする
•  UXデザインの成果物とITプロセスの成果物を⽐比較し、必要な項⽬目を追加したり、⽤用語
を合わせる作業を⾏行行う
•  ITプロセスに必要な資料料がUXデザインで想定されていない場合、その必要性の判断と
役割分担を明確に定義する
n  プロセスの進⾏行行に伴い役割が変わる
•  前半はUXデザイナーが実務を⾏行行い、ITエンジニアがオブザーバーとなる
仕様の漏漏れはないか、必要な情報は揃えられているか？　制約を無視していないか等
•  後半はITエンジニアが実務を⾏行行い、UXデザイナーがオブザーバーとなる
意図した通りの実装になっているか？　実装の都合によって使⽤用性が犠牲になっていないか等
37

UXデザイン × アジャイルプロセス
n  タスクの⼀一部としてデザインを受け⼊入れ、常に次のイテレーション向けのデザインを
⾏行行う
n  各リリースにユーザーテストができるコードを追加し、常いユーザーテストができて
いる状態にする
n  各イテレーションから得られた情報に基づき、次回のデザイン作業に反映しつつ、既
存機能の改善を⾏行行う
38
デザイン
実装
デザイン
基盤作成
プラニング
実装
デザイン
実装
デザイン
イテレーションイテレーションイテレーションイテレーション
リリースリリースリリース

Leanスタートアップ × UXデザインプロセス
n  仮説の定義から始め、その検証に必要なKPIの策定する
n  仮説とKPIの検証ができるユーザーテスト⼿手法を考える
n  上記ユーザーテストが実⾏行行できるMVPに必要なデザインを⾏行行う
•  MVPのためのデザインと実装は最⼩小限のものに抑える
n  MVPから得られた情報を分析・学習し、次回の反復復を⾏行行う
39
仮説作成 KPI策定
Lean UXデザイン
検証
学習
実装
反復

アジャイル及びLean⽅方式のプロジェクトにおけるUX
デザイン適⽤用のベストプラクティス
n  ⼩小さい規模のチームを維持する
•  円滑滑なコミュニケーションが鍵
n  各イテレーションで必要なデザインや実装の⽬目的と範囲を明確にする
•  デザインの⽬目的と範囲は毎回異異なる
•  ⽬目的に沿った⼿手段を選ぶ（ペーパープロトタイプ、プロトタイピングツール、ヴィ
ジュアルモックアップ、実装など）⇒かっこつけない
n  円滑滑な進⾏行行のため、ドメインを超える知識識の交流流が必須
•  デザイナーは実装を、エンジニアはデザインを学習する
•  ⼀一つ以上の専⾨門領領域を持つジェネラルリストになることが望ましい（現実的には難し
いが、努⼒力力するしかない）
40

UXデザインにおけるあれやこれや

UXデザイナーは必ず必要か？
n  UXデザインは論論理理的な思考と⼈人に
対する理理解があれば誰でもできる
•  美的センスが必要な部分はごく⼀一部
•  また、その部分は専⾨門家（ヴィジュアルデ
ザイナー）に任せればいい
•  ⼈人に対する理理解・配慮が⼤大事
n  UIデザインも学習できる
•  作る必要はない。評価できればいい
•  参考：http://www.slideshare.net/ksc1213/ui-‐‑‒45852142
n  最初はUXデザイナーと⼀一緒に経験
し、次回からは独⾃自で⾏行行う
42
論理的思考が必要な部分
美的センスやツールのスキルが必要な部分

UXデザインの評価基準は？
n  よく引⽤用されるのは右の図
•  プロジェクトの性格に合わせて各要素の優
先順位を決める
必ず獲得するもの、なくてもいいものなど
•  必要に応じて各要素をより細分化する
使いやすいの定義、信頼できるの定義など
•  各業界に適した表現に変えて使⽤用する
n  プロジェクトの性格に基づいて新し
い評価基準を定義する
•  B2B/B2E/B2Cの⽤用途によって評価軸は異異
なる
43

UXデザインはどこまでやるか？
n  対象製品・サービスの性質に
よってどれくらいの使⽤用者経
験を提供すべきかを検討する
•  過度度な投資は避ける
•  UXデザインの効果の７割は１回⽬目
のプロジェクトで達成できる
反復復に対するROIを適時判断する
対象製品とサービスの種類によって継続
な投資の必要性を判断する
44

UXデザインって、B2C向けじゃないか？
n  UXデザインをヴィジュアルデザインから分離離して考えるとUXデ
ザインはB2Bのシステムでも⼗十分適⽤用できる
•  アメリカでは企業システムのUXに対する感⼼心が⾼高まりつつある
•  例例1 ：http://enterpriseux.net
•  例例2 ：http://www.hugeinc.com/ideas/report/ux-‐‑‒in-‐‑‒the-‐‑‒enterprise
n  他の⼤大⼿手ベンダーもCX(Customer eXperience)という⽤用語で
「広義のUXデザイン」に⼒力力を⼊入れている
•  オラクル：http://www.oracle.com/jp/solutions/customer-‐‑‒experience/overview/index.html
•  IBM：http://www.research.ibm.com/articles/customer-‐‑‒experience-‐‑‒lab.shtml
45

UXデザインって、結果的にUIデザインじゃないか？
n  以下の２枚の絵は同じ評価を受けるべきか？
n  ピカソの絵は度度重なるデッサン練習の結果。⼦子供の習作とは異異なる
n  UXデザインの成果物もUIデザインになる。しかしエンジニアが作った画⾯面に単
純に配⾊色とボタンをつけたものとは異異なる
46
VS

UXデザインって、投資価値があるか？
n  UXデザインのROI算出⽅方法
•  KPIを適切切に定義する（ところが、KPIの定義は簡単だが、ROIの計算は難しい）
•  悪いUXによる機会損失やコストを⾒見見積もる
•  UXデザイン及び既存製品・サービスの改修に必要なコストを⾒見見積もる
•  上記を計算して投資の妥当性を判断する
•  可⽤用費⽤用を時間に換算してUXデザインのプロジェクトを開始
•  予測した効果と実際の結果、費⽤用を測定し⽐比較する
n  KPIは対象によって異異なる
•  B2C:集客率率率、ページビュー、コンバージョンレート、再訪問数、売上、サポート数等
•  B2B:タスクにかかる時間、タスクの成功率率率、ユーザーの満⾜足度度、効率率率性、エラー発⽣生率率率、ト
レーニング費⽤用、開発費⽤用等
47

UXデザインのROI計算例例
48

プロトタイピングツールの利利⽤用
49
Balsamiq:ワイヤーフレームを利用したプロトタイプ作成及びユーザーテストツール

プロトタイピングツールの利利⽤用
50
Balsamiq
Keynotopia：
ヴィジュアルを含めたユー
ザーテストツール

今、⼀一番の課題！
51
n  UXデザインのUXデザインが
なっていない！！
•  UXデザインをITプロセスに導⼊入する
ための⽅方法が提⽰示されていない
•  ITプロセスを理理解しているUXデザイ
ナーがほとんどいない
•  UXデザイナーは⽕火星⼈人、ITエンジニ
アは⽊木星⼈人⇒⾔言葉葉が通じない
・・・

最後に
52
n  UXデザインは、つまり、おもてなし
n  何かを選ぶということは、他を捨てるということ
•  みんながハッピーになることは天国でしかできない
•  何を選んで、何を捨てるかを考えるのがUXデザインでもある
•  飾りではなく本当の価値にフォーカスする
n  100点は難しいが、70点は狙える！
•  プロセスも、成果物も７０点を越えないのがほとんど
•  しかし、それは⼗十分価値がある！
•  ⼀一旦、始めましょう！

エンジニアに優しいUI/UXデザイン
n  抽象的センスではなくロジックで組み⽴立立てるデザイン
n  明⽇日からの現場で使える実践的デザイン
n  定性的でなく、定量量的に評価できるデザイン
n  ITプロセスに適合したデザインプロセスの提⽰示
54
IT
Technology

&

Project
Management

UI/UX
Design

with

Logical
Thinking
NCDC’s

UI/UX
Design

Itプロジェクトにおけるuxデザインの実践的適用方法

Itプロジェクトにおけるuxデザインの実践的適用方法

Itプロジェクトにおけるuxデザインの実践的適用方法

More Related Content

What's hot

Viewers also liked

Similar to Itプロジェクトにおけるuxデザインの実践的適用方法

Itプロジェクトにおけるuxデザインの実践的適用方法