SlideShare ist ein Scribd-Unternehmen logo
1 von 55
Downloaden Sie, um offline zu lesen
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
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
前提
n  市販されている本で得られる知識識はあまり詳しく説明しません。
•  もっと詳しい情報がほしい⽅方のためにはリンクを載せます
n  現場で感じる課題やそこからの悩みについて話します
•  そして、NCDCが実践している解法を説明します
n  NCDCの独⾃自の⾒見見⽅方や理理解が多く含まれております。
•  業界やプロジェクトの性格によっては適切切に変形して適⽤用する必要があります
3
UXデザインの概要
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン:What?  
n  ユーザーエクスペリエンスデザインは、ユーザーエクスペリエン
ス(User   Experience)についてのエクスペリエンスデザインで
ある。デジタル機器/システムに対するユーザーの⾒見見⽅方に影響を
与えるようなアーキテクチャーやインタラクションモデルの⽣生成
に関する⼿手法である。「製品ととユーザーのインタラクションの
あらゆる⾯面、すなわちどのように気づかれ、学ばれ、使われるの
か」をその適⽤用範囲とする
            
      From  :  http://ja.wikipedia.org/wiki/ユーザーエクスペリエンスデザイン
5
読んでもわからないので、
まあ、⾶飛ばしましょう。
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン:What?  
n  NCDCの解釈
•  サービスやシステムに接するユーザーがやりたいことをより簡単に、効率率率的に
できるように気遣うこと
•  あるいは、ユーザーがこちらの意図した⾏行行動を取るように誘導すること
n  UXデザインで⼤大事なこと
•  同調と共感(ユーザーの視点になること)
•  ユーザーにおける価値を確認すること(勝⼿手に決めつけてはダメ!)
•  ビジネスモデル(UXデザインの真の⽬目的)
6
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインの対象
n  ウェブサービス
n  アプリ
n  広告(商品、ブランド、企業)
n  パッケージ
n  配達にかかる時間
n  接する⼈人
•  外⾒見見、態度度、年年齢、性別など
7
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン:Why?
n  時代ですよ!
•  ものが満ち溢れる時代
新しい機能、より強⼒力力な機能、機能の多さでは選ばれなくなった
•  この時代における優位性を確保する要件が、「使⽤用者経験」
こんなことができる!
⇒もっとすごいことができる!
⇒より⾊色んなことができる
⇒もっと便便利利!もっと綺麗麗!
⇒これを使うあなたがかっこいい(オシャレ)ですよ!
n  視点は「もの」から「⼈人」に
8
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン:Why?
9
「UXデザインがビジネスの成
敗の(重要な)要因」
お⾦金金になるなら、みんなが興味を持ってくれる
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 10
⽕火付け役の⼈人と製品:ジョブズとiPhone
(都合により画像は非公開)
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
もうやめましょう!
n  新しい端末や製品が出た時に、スペックだけで評価すること
•  時代遅れです
•  もっと⼤大事なのはユーザーに提供する経験価値であり、勝負はそこでつきます
11
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインのプロセス
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する 試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた:How?
n  以下のプロセスを⾏行行います。
12
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
コンテキスト分析
n  コンテキストとは
•  該当製品やサービスを使うユーザーを囲む環境
n  広義のコンテキスト(マーケットセグメンテーション)
•  製品やサービスがおかれている環境
•  対象ユーザー(既存&潜在)
•  競合製品やサービス
n  狭義のコンテキスト
•  ユーザーの環境
•  ユーザー層
13
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ペルソナ定義
n  該当製品やサービスを使うユーザーの特性を具体的に定義したも
の
n  よりユーザーの視点で思考するために必要
n  今後の全ての作業における基礎となる重要な要素
14
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開 都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ユーザーストーリ作成
n  ユーザーの⾏行行動を具体的に定義し、理理解することが⽬目的
•  その⾏行行動の⽬目的、頻度度、重要度度、かかる時間と結果の評価基準を確認する
•  その⾏行行動が⾏行行われる場所、条件、必要要素、制約要素などを確認する
•  複数のペルソナがある場合は、各ペルソナのユーザーストリーを作成する
15
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
メンタルモデル作成
n  ユーザーの⾏行行動の原因とユーザーの認識識を確認して、UXデザインの⽅方
向性を定める
•  ユーザーの⾏行行動だけで判断するのではなく、ユーザーの⼼心理理を把握することで本当の
ニーズを発⾒見見する
•  イノベーションのきっかけを⾒見見つける場所はここ!
16
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
機能⼀一覧とデータ⼀一覧の作成
n  作成したユーザーストリーを元に、必要なデータと機能の⼀一覧を作成す
る
•  ユーザーストリーを実現できる機能とデータを⼀一覧する
•  ユーザーストリーと機能・データをマッピングする
•  既存の製品・サービスの機能・データを意識識せずに作成する
17
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
プロトタイプの作成
n  ユーザーテストを⾏行行うための必要最⼩小限のプロトタイプを作成
•  UIスケッチ、画⾯面のフローを検討する
•  ペーパープロトタイピング、プロトタイピング⽤用ツールの使⽤用
•  ⼿手軽に複数の試作を試し、改善を⾏行行う
•  ユーザーテスト⽤用のプロトタイプを作成する
18
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ユーザーテスト実施と改善
n  UXデザインの仮説の検証
•  ⽬目的とした価値を有効にユーザーに提供できているかを確認する
•  ペルソナに近いユーザーを招き、役割劇、発話⽅方などで⾏行行う(必要に応じて録画・録
⾳音を⾏行行う。専⾨門機関に依頼する⽅方法もある)
•  課題を⾒見見つけ、分析を⾏行行い、対応策を考える
19
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データモデル
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインのプロセス
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する 試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた
n  以上が全てのプロセスです。
20
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
イテレーション#1
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する 試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた
n  しかし、⼤大事なのは反復復!(UXデザイナーは神様ではない)
21
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
イテレーション#2
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する 試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた
n  全てを反復復する必要はない。必要なタスクだけ繰り返す!
22
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
修正
機能⼀一覧
修正
データ⼀一覧
修正
プロトタイプ
修正
ユーザーテスト
実施
ユーザーテスト
結果分析
※上図は⼀一例例です。
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
イテレーション#3
ユーザーを知る
ユーザーの⾏行行動と⼼心
理理を知る
必要な機能と
データを定義する 試作を作る
仮説の検証と
改善⽅方針を探る
UXデザインのやりかた
n  改善を繰り返しつつ、⽬目的としたUXに近づけていく。
23
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
修正
ユーザーテスト
実施
ユーザーテスト
結果分析
※上図は⼀一例例です。
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインプロセスで⼤大事なこと
n  アナログな道具と仲良良くなりましょう!
•  ポストイット、ペン、紙、ホワイトボード
•  早く、安く、多くが鍵
•  格好いい資料料の作成は最後だけで⼗十分
n  ユーザーを中⼼心においた現場主義
•  ⾔言葉葉に頼ると騙される
n  謙虚な姿勢を貫く
•  ユーザーは(たまに、不不親切切な)先⽣生、UXデザイナーは学⽣生
•  学び続ける姿勢(最初から完璧なものは無理理!)
24
ITプロセスにおけるUXデザイン適⽤用の課題
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
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
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
と⾔言うのは、嘘。本当はある
n  NCDCのUX  Driven  Development  Process
•  しかし、Agile開発をベースにしており、ウォーターフォール⽅方式のプロセスに
適⽤用するには調整が必要
27
初期リサーチ 継続リサーチ
スコープ
確定
コンテキスト/顧客
ストーリーボード
UIプロト
タイプ
優先順位定義
Rele
ase
Interaction Design & User Test
基本設計/技術調査
System /App Development & Test
要件分析
Visual
Design
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ウォータフォールプロセス
ウォータフォールプロセス
n  多くの場合、デザインは実装の⼀一部として考慮されるが、ものに
よっては考慮すらされないこともある。
n  デザイン=UIデザイン=飾り
28
要件定義 基本設計 詳細設計 実装 テスト
リリース
パターン②
ものは実装できた。
デザイナーにちょこっと飾って
もらおう。
パターン①
要件定義が終わったので実装
する画⾯面を作ってもらおう。
⼀一発勝負
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ウォータフォールプロセス
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
UXデザインプロセス  vs  ウォータフォールプロセス
29
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
要件定義 基本設計 詳細設計 実装 テスト
リリース
反復復型
⼀一発勝負
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ウォータフォールプロセス
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
UXデザインプロセス  vs  ウォータフォールプロセス
30
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
要件定義 基本設計 詳細設計 実装 テスト
リリース
反復復型
⼀一発勝負
反復復はどうする?
このプロセスをど
こに挿⼊入するの?
既存タスクは
どうする?もうや
める?追加する?
もっと負荷が増え
るのでは?
UXデザイン  ×  ITプロセス
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン  ×  ウォータフォールプロセス
n  ITプロセスの要件定義及び基本設計フェーズの⼀一部をUXデ
ザインのタスクでリプレースできる
32
要件定義 基本設計 詳細設計 実装 テスト
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
課題:ウォーターフォールには反復復はないけど?
n  UXデザインプロセスは反復復が前提。
•  ⼀一回で最善の解を出すのは難しい
n  しかし、反復復による変更更の反映はコストが⾼高い
33
反復復はどうするか?
要件定義 基本設計 詳細設計 実装 テスト
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインを考慮したプロセス定義、その①
n  要件定義と基本設計の⼀一部フェーズに必要な期間をより⻑⾧長く設定して、反復復を⾏行行う
•  このコストは設計及び実装フェーズでの⼿手戻りを防⽌止する効果でまかなえる
n  上記フェーズの⼈人(リソース)を増やすよりは期間を⻑⾧長くした⽅方が有効
•  プロジェクトの開始時期をもう少し早くすることは有効
34
要件定義
詳細設計 実装 テスト
基本設計
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
エンジニアの⼯工数は減り、そ
の分UXデザイナーの
⼯工数が追加される
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインを考慮したプロセス定義、その②
n  ⼆二つのプロセスを並⾏行行する
•  詳細設計のフェーズまで仕様の変更更を可能とする
•  仕様の変更更に柔軟に対応できる開発体制が必要
n  UXデザインチームと開発チームの密な連携が必要
•  変更更の影響が⼤大きい部分とそうでない部分への認識識を共有し、作業の優先順位と変更更の可能性を検討す
る
35
要件定義 詳細設計
実装 テスト
基本設計
UXデザインのプロセス
コンテキスト
分析
ペルソナ定義
ユーザーストーリ
作成
メンタルモデル
作成
機能⼀一覧
作成
データ⼀一覧
作成
プロトタイプ
作成
ユーザーテスト
実施
ユーザーテスト
結果分析
エンジニアの⼯工数はあまり減
らない。UXデザイナーの⼯工数
が追加される
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ウォーターフォール⽅方式のプロジェクトにおけるUXデ
ザイン適⽤用のベストプラクティス
n  UXデザインはワークショップ⽅方式が有効
•  デザインチームは事前準備をしっかりし、参加者の時間を無駄にしない
•  ワークショップには必ず実ユーザーを参加させる(IT部⾨門の担当者で代わりにしない)
n  実装チームは、
•  ワークショップに参加し、仕様の背景を理理解しつつ、仕様変更更による影響範囲を他の参加者に理理
解させる
•  UXデザインでは気付かない実装上の要件・制約を早期に指摘する
n  UXデザインチームは、
•  ITプロセスを理理解し、適時に必要な資料料を、適切切なフォーマットで提⽰示する
•  プロジェクト管理理チームにUXデザイナーが参加する
36
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
ウォーターフォール⽅方式のプロジェクトにおけるUXデ
ザイン適⽤用のベストプラクティス
n  成果物と役割分担の定義を明確にする
•  UXデザインの成果物とITプロセスの成果物を⽐比較し、必要な項⽬目を追加したり、⽤用語
を合わせる作業を⾏行行う
•  ITプロセスに必要な資料料がUXデザインで想定されていない場合、その必要性の判断と
役割分担を明確に定義する
n  プロセスの進⾏行行に伴い役割が変わる
•  前半はUXデザイナーが実務を⾏行行い、ITエンジニアがオブザーバーとなる
仕様の漏漏れはないか、必要な情報は揃えられているか?  制約を無視していないか等
•  後半はITエンジニアが実務を⾏行行い、UXデザイナーがオブザーバーとなる
意図した通りの実装になっているか?  実装の都合によって使⽤用性が犠牲になっていないか等
37
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイン  ×  アジャイルプロセス
n  タスクの⼀一部としてデザインを受け⼊入れ、常に次のイテレーション向けのデザインを
⾏行行う
n  各リリースにユーザーテストができるコードを追加し、常いユーザーテストができて
いる状態にする
n  各イテレーションから得られた情報に基づき、次回のデザイン作業に反映しつつ、既
存機能の改善を⾏行行う
38
デザイン
実装
デザイン
基盤作成
プラニング
実装
デザイン
実装
デザイン
イテレーション イテレーション イテレーション イテレーション
リリース リリース リリース
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
Leanスタートアップ  ×  UXデザインプロセス
n  仮説の定義から始め、その検証に必要なKPIの策定する
n  仮説とKPIの検証ができるユーザーテスト⼿手法を考える
n  上記ユーザーテストが実⾏行行できるMVPに必要なデザインを⾏行行う
•  MVPのためのデザインと実装は最⼩小限のものに抑える
n  MVPから得られた情報を分析・学習し、次回の反復復を⾏行行う
39
仮説作成 KPI策定
Lean UXデザイン
検証
学習
実装
反復
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
アジャイル及びLean⽅方式のプロジェクトにおけるUX
デザイン適⽤用のベストプラクティス
n  ⼩小さい規模のチームを維持する
•  円滑滑なコミュニケーションが鍵
n  各イテレーションで必要なデザインや実装の⽬目的と範囲を明確にする
•  デザインの⽬目的と範囲は毎回異異なる
•  ⽬目的に沿った⼿手段を選ぶ(ペーパープロトタイプ、プロトタイピングツール、ヴィ
ジュアルモックアップ、実装など)⇒かっこつけない
n  円滑滑な進⾏行行のため、ドメインを超える知識識の交流流が必須
•  デザイナーは実装を、エンジニアはデザインを学習する
•  ⼀一つ以上の専⾨門領領域を持つジェネラルリストになることが望ましい(現実的には難し
いが、努⼒力力するしかない)
40
UXデザインにおけるあれやこれや
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザイナーは必ず必要か?
n  UXデザインは論論理理的な思考と⼈人に
対する理理解があれば誰でもできる
•  美的センスが必要な部分はごく⼀一部
•  また、その部分は専⾨門家(ヴィジュアルデ
ザイナー)に任せればいい
•  ⼈人に対する理理解・配慮が⼤大事
n  UIデザインも学習できる
•  作る必要はない。評価できればいい
•  参考:http://www.slideshare.net/ksc1213/ui-‐‑‒45852142
n  最初はUXデザイナーと⼀一緒に経験
し、次回からは独⾃自で⾏行行う
42
論理的思考が必要な部分	
美的センスやツールのスキルが必要な部分
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインの評価基準は?
n  よく引⽤用されるのは右の図
•  プロジェクトの性格に合わせて各要素の優
先順位を決める
必ず獲得するもの、なくてもいいものなど
•  必要に応じて各要素をより細分化する
使いやすいの定義、信頼できるの定義など
•  各業界に適した表現に変えて使⽤用する
n  プロジェクトの性格に基づいて新し
い評価基準を定義する
•  B2B/B2E/B2Cの⽤用途によって評価軸は異異
なる
43
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインはどこまでやるか?
n  対象製品・サービスの性質に
よってどれくらいの使⽤用者経
験を提供すべきかを検討する
•  過度度な投資は避ける
•  UXデザインの効果の7割は1回⽬目
のプロジェクトで達成できる
反復復に対するROIを適時判断する
対象製品とサービスの種類によって継続
な投資の必要性を判断する
44
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
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
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインって、結果的にUIデザインじゃないか?
n  以下の2枚の絵は同じ評価を受けるべきか?
n  ピカソの絵は度度重なるデッサン練習の結果。⼦子供の習作とは異異なる
n  UXデザインの成果物もUIデザインになる。しかしエンジニアが作った画⾯面に単
純に配⾊色とボタンをつけたものとは異異なる
46
VS	
 都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインって、投資価値があるか?
n  UXデザインのROI算出⽅方法
•  KPIを適切切に定義する(ところが、KPIの定義は簡単だが、ROIの計算は難しい)
•  悪いUXによる機会損失やコストを⾒見見積もる
•  UXデザイン及び既存製品・サービスの改修に必要なコストを⾒見見積もる
•  上記を計算して投資の妥当性を判断する
•  可⽤用費⽤用を時間に換算してUXデザインのプロジェクトを開始
•  予測した効果と実際の結果、費⽤用を測定し⽐比較する
n  KPIは対象によって異異なる
•  B2C:集客率率率、ページビュー、コンバージョンレート、再訪問数、売上、サポート数等
•  B2B:タスクにかかる時間、タスクの成功率率率、ユーザーの満⾜足度度、効率率率性、エラー発⽣生率率率、ト
レーニング費⽤用、開発費⽤用等
47
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
UXデザインのROI計算例例
48
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
プロトタイピングツールの利利⽤用
49
Balsamiq:ワイヤーフレームを利用したプロトタイプ作成及びユーザーテストツール	
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
プロトタイピングツールの利利⽤用
50
Balsamiq	
Keynotopia:
ヴィジュアルを含めたユー
ザーテストツール    
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
今、⼀一番の課題!
51
n  UXデザインのUXデザインが
なっていない!!
•  UXデザインをITプロセスに導⼊入する
ための⽅方法が提⽰示されていない
•  ITプロセスを理理解しているUXデザイ
ナーがほとんどいない
•  UXデザイナーは⽕火星⼈人、ITエンジニ
アは⽊木星⼈人⇒⾔言葉葉が通じない
・・・	
都合により画像は⾮非公開
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
最後に
52
n  UXデザインは、つまり、おもてなし
n  何かを選ぶということは、他を捨てるということ
•  みんながハッピーになることは天国でしかできない
•  何を選んで、何を捨てるかを考えるのがUXデザインでもある
•  飾りではなく本当の価値にフォーカスする
n  100点は難しいが、70点は狙える!
•  プロセスも、成果物も70点を越えないのがほとんど
•  しかし、それは⼗十分価値がある!
•  ⼀一旦、始めましょう!
まとめ
Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved.
エンジニアに優しい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デザインの実践的適用方法

Más contenido relacionado

Was ist angesagt?

UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルUIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルTaiki Kawakami
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美schoowebcampus
 
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)Kazumichi (Mario) Sakata
 
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたかPoがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか英明 伊藤
 
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方Takahiro Ishiyama
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインSaori Baba
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?Masaya Ando
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
UXデザイナーとしてコミュニティーの中で働くということ
UXデザイナーとしてコミュニティーの中で働くということUXデザイナーとしてコミュニティーの中で働くということ
UXデザイナーとしてコミュニティーの中で働くということEri Nishihara
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストMiwa Kuramitsu
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)Jiji Kim
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味Tatsuya_Yokoyama
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_brandingWizDesign
 
デザイン提案の参考資料
デザイン提案の参考資料デザイン提案の参考資料
デザイン提案の参考資料Tsutomu Sogitani
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みRecruit Lifestyle Co., Ltd.
 
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)Jiji Kim
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割Kenichi Suzuki
 

Was ist angesagt? (20)

UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルUIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
 
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)
 
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたかPoがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか
 
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
UXデザイナーとしてコミュニティーの中で働くということ
UXデザイナーとしてコミュニティーの中で働くということUXデザイナーとしてコミュニティーの中で働くということ
UXデザイナーとしてコミュニティーの中で働くということ
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
 
Wiz_branding
Wiz_brandingWiz_branding
Wiz_branding
 
デザイン提案の参考資料
デザイン提案の参考資料デザイン提案の参考資料
デザイン提案の参考資料
 
リクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組みリクルートライフスタイルにおけるUX領域の取り組み
リクルートライフスタイルにおけるUX領域の取り組み
 
0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)0から始めるUXデザイン(UXデザインを知る)
0から始めるUXデザイン(UXデザインを知る)
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
 

Andere mochten auch

スマートデバイスSIの落とし穴と適した開発手法とは?
スマートデバイスSIの落とし穴と適した開発手法とは?スマートデバイスSIの落とし穴と適した開発手法とは?
スマートデバイスSIの落とし穴と適した開発手法とは?Takuya Kitamura
 
モデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudyモデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudyZenji Kanzaki
 
恰好よいwebデザインの作り方
恰好よいwebデザインの作り方恰好よいwebデザインの作り方
恰好よいwebデザインの作り方井上 誠
 
UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発Takuya Kitamura
 
コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考Yuudai Tachibana
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインTakeshiro Kani
 
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextSummary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextRoy Kim
 
もっとコラボ! を図解してみた
もっとコラボ! を図解してみたもっとコラボ! を図解してみた
もっとコラボ! を図解してみたTakako Horiuchi
 
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフローTakako Horiuchi
 
Stop Investing in Big Ideas - Ross Chaldecott
Stop Investing in Big Ideas - Ross ChaldecottStop Investing in Big Ideas - Ross Chaldecott
Stop Investing in Big Ideas - Ross ChaldecottAtlassian
 
UXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpUXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpKazuki Yamashita
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Roy Kim
 
インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2井上 誠
 
Githubのブランチ運用戦略
Githubのブランチ運用戦略Githubのブランチ運用戦略
Githubのブランチ運用戦略Roy Kim
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイントRoy Kim
 
Relationship driven requirement analysis
Relationship driven requirement analysisRelationship driven requirement analysis
Relationship driven requirement analysisKent Ishizawa
 
UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)Naoki Hashimoto
 
Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~INI株式会社
 
James kalbach alignment diagrams euro ia 2010
James kalbach alignment diagrams euro ia 2010James kalbach alignment diagrams euro ia 2010
James kalbach alignment diagrams euro ia 2010Jim Kalbach
 
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)Naoki Hashimoto
 

Andere mochten auch (20)

スマートデバイスSIの落とし穴と適した開発手法とは?
スマートデバイスSIの落とし穴と適した開発手法とは?スマートデバイスSIの落とし穴と適した開発手法とは?
スマートデバイスSIの落とし穴と適した開発手法とは?
 
モデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudyモデルベース要件定義 at BPStudy
モデルベース要件定義 at BPStudy
 
恰好よいwebデザインの作り方
恰好よいwebデザインの作り方恰好よいwebデザインの作り方
恰好よいwebデザインの作り方
 
UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発UXデザイン✕アジャイル✕受託開発
UXデザイン✕アジャイル✕受託開発
 
コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考コンテンツを意識したデザイン思考
コンテンツを意識したデザイン思考
 
モバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザインモバイルファーストで考える最新トレンドと アダプティブデザイン
モバイルファーストで考える最新トレンドと アダプティブデザイン
 
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextSummary of Digital Information from Understanding Context
Summary of Digital Information from Understanding Context
 
もっとコラボ! を図解してみた
もっとコラボ! を図解してみたもっとコラボ! を図解してみた
もっとコラボ! を図解してみた
 
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー
 
Stop Investing in Big Ideas - Ross Chaldecott
Stop Investing in Big Ideas - Ross ChaldecottStop Investing in Big Ideas - Ross Chaldecott
Stop Investing in Big Ideas - Ross Chaldecott
 
UXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpUXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUp
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
 
インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2
 
Githubのブランチ運用戦略
Githubのブランチ運用戦略Githubのブランチ運用戦略
Githubのブランチ運用戦略
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
 
Relationship driven requirement analysis
Relationship driven requirement analysisRelationship driven requirement analysis
Relationship driven requirement analysis
 
UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)UXマップ(退職者の送別会幹事)
UXマップ(退職者の送別会幹事)
 
Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~Webディレクター~強みを活かすディレクション術~
Webディレクター~強みを活かすディレクション術~
 
James kalbach alignment diagrams euro ia 2010
James kalbach alignment diagrams euro ia 2010James kalbach alignment diagrams euro ia 2010
James kalbach alignment diagrams euro ia 2010
 
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)
 

Ähnlich wie Itプロジェクトにおけるuxデザインの実践的適用方法

いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一schoowebcampus
 
Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User ExperienceRoy Kim
 
First step of UX Monitoring 〜UXモニタリングこと始め〜
First step of UX Monitoring 〜UXモニタリングこと始め〜First step of UX Monitoring 〜UXモニタリングこと始め〜
First step of UX Monitoring 〜UXモニタリングこと始め〜Taro Yoshioka
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」Fixel Inc.
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923Hub DotnetDeveloper
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西Yoshiki Hayama
 
SDGC2018報告「ネットビジネスとサービスデザイン」
SDGC2018報告「ネットビジネスとサービスデザイン」SDGC2018報告「ネットビジネスとサービスデザイン」
SDGC2018報告「ネットビジネスとサービスデザイン」Nozomu Tannaka
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018Yoshiki Hayama
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadShinsuke Miyaki
 
DeNAでのサービスの作り方
DeNAでのサービスの作り方DeNAでのサービスの作り方
DeNAでのサービスの作り方Naoki Masuda
 
『UXデザインの法則』を読む―デザイン心理学コトハジメ
『UXデザインの法則』を読む―デザイン心理学コトハジメ『UXデザインの法則』を読む―デザイン心理学コトハジメ
『UXデザインの法則』を読む―デザイン心理学コトハジメNozomu Tannaka
 
Ux for lean startups
Ux for lean startupsUx for lean startups
Ux for lean startupsRoy Kim
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」naoki ando
 
CCC Design Session
CCC Design SessionCCC Design Session
CCC Design SessionMako Mizuno
 
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.120160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1it-innovation
 

Ähnlich wie Itプロジェクトにおけるuxデザインの実践的適用方法 (20)

UXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schooUXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schoo
 
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
 
Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User Experience
 
First step of UX Monitoring 〜UXモニタリングこと始め〜
First step of UX Monitoring 〜UXモニタリングこと始め〜First step of UX Monitoring 〜UXモニタリングこと始め〜
First step of UX Monitoring 〜UXモニタリングこと始め〜
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
 
Bridge UXからUIへ
Bridge UXからUIへBridge UXからUIへ
Bridge UXからUIへ
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
ux_team_of_one
ux_team_of_oneux_team_of_one
ux_team_of_one
 
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
 
SDGC2018報告「ネットビジネスとサービスデザイン」
SDGC2018報告「ネットビジネスとサービスデザイン」SDGC2018報告「ネットビジネスとサービスデザイン」
SDGC2018報告「ネットビジネスとサービスデザイン」
 
SDGC2018 redux Tannaka
SDGC2018 redux TannakaSDGC2018 redux Tannaka
SDGC2018 redux Tannaka
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
 
DeNAでのサービスの作り方
DeNAでのサービスの作り方DeNAでのサービスの作り方
DeNAでのサービスの作り方
 
『UXデザインの法則』を読む―デザイン心理学コトハジメ
『UXデザインの法則』を読む―デザイン心理学コトハジメ『UXデザインの法則』を読む―デザイン心理学コトハジメ
『UXデザインの法則』を読む―デザイン心理学コトハジメ
 
Ux for lean startups
Ux for lean startupsUx for lean startups
Ux for lean startups
 
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
 
CCC Design Session
CCC Design SessionCCC Design Session
CCC Design Session
 
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.120160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1
20160710_PMI日本フォーラム2016_講演資料_ITI小久保v1.1
 

Itプロジェクトにおけるuxデザインの実践的適用方法

  • 2. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 今⽇日の内容 n  UXデザインの概要 n  ITプロセスにおけるUXデザイン適⽤用の課題 n  IT  ×  UX  プロジェクトの実践解 n  UXデザイン適⽤用におけるチップ 2
  • 3. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 前提 n  市販されている本で得られる知識識はあまり詳しく説明しません。 •  もっと詳しい情報がほしい⽅方のためにはリンクを載せます n  現場で感じる課題やそこからの悩みについて話します •  そして、NCDCが実践している解法を説明します n  NCDCの独⾃自の⾒見見⽅方や理理解が多く含まれております。 •  業界やプロジェクトの性格によっては適切切に変形して適⽤用する必要があります 3
  • 5. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン:What?   n  ユーザーエクスペリエンスデザインは、ユーザーエクスペリエン ス(User   Experience)についてのエクスペリエンスデザインで ある。デジタル機器/システムに対するユーザーの⾒見見⽅方に影響を 与えるようなアーキテクチャーやインタラクションモデルの⽣生成 に関する⼿手法である。「製品ととユーザーのインタラクションの あらゆる⾯面、すなわちどのように気づかれ、学ばれ、使われるの か」をその適⽤用範囲とする                   From  :  http://ja.wikipedia.org/wiki/ユーザーエクスペリエンスデザイン 5 読んでもわからないので、 まあ、⾶飛ばしましょう。
  • 6. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン:What?   n  NCDCの解釈 •  サービスやシステムに接するユーザーがやりたいことをより簡単に、効率率率的に できるように気遣うこと •  あるいは、ユーザーがこちらの意図した⾏行行動を取るように誘導すること n  UXデザインで⼤大事なこと •  同調と共感(ユーザーの視点になること) •  ユーザーにおける価値を確認すること(勝⼿手に決めつけてはダメ!) •  ビジネスモデル(UXデザインの真の⽬目的) 6
  • 7. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインの対象 n  ウェブサービス n  アプリ n  広告(商品、ブランド、企業) n  パッケージ n  配達にかかる時間 n  接する⼈人 •  外⾒見見、態度度、年年齢、性別など 7 都合により画像は⾮非公開
  • 8. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン:Why? n  時代ですよ! •  ものが満ち溢れる時代 新しい機能、より強⼒力力な機能、機能の多さでは選ばれなくなった •  この時代における優位性を確保する要件が、「使⽤用者経験」 こんなことができる! ⇒もっとすごいことができる! ⇒より⾊色んなことができる ⇒もっと便便利利!もっと綺麗麗! ⇒これを使うあなたがかっこいい(オシャレ)ですよ! n  視点は「もの」から「⼈人」に 8
  • 9. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン:Why? 9 「UXデザインがビジネスの成 敗の(重要な)要因」 お⾦金金になるなら、みんなが興味を持ってくれる
  • 10. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 10 ⽕火付け役の⼈人と製品:ジョブズとiPhone (都合により画像は非公開)
  • 11. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. もうやめましょう! n  新しい端末や製品が出た時に、スペックだけで評価すること •  時代遅れです •  もっと⼤大事なのはユーザーに提供する経験価値であり、勝負はそこでつきます 11
  • 12. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインのプロセス ユーザーを知る ユーザーの⾏行行動と⼼心 理理を知る 必要な機能と データを定義する 試作を作る 仮説の検証と 改善⽅方針を探る UXデザインのやりかた:How? n  以下のプロセスを⾏行行います。 12 コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 13. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. コンテキスト分析 n  コンテキストとは •  該当製品やサービスを使うユーザーを囲む環境 n  広義のコンテキスト(マーケットセグメンテーション) •  製品やサービスがおかれている環境 •  対象ユーザー(既存&潜在) •  競合製品やサービス n  狭義のコンテキスト •  ユーザーの環境 •  ユーザー層 13 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 14. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ペルソナ定義 n  該当製品やサービスを使うユーザーの特性を具体的に定義したも の n  よりユーザーの視点で思考するために必要 n  今後の全ての作業における基礎となる重要な要素 14 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開 都合により画像は⾮非公開
  • 15. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ユーザーストーリ作成 n  ユーザーの⾏行行動を具体的に定義し、理理解することが⽬目的 •  その⾏行行動の⽬目的、頻度度、重要度度、かかる時間と結果の評価基準を確認する •  その⾏行行動が⾏行行われる場所、条件、必要要素、制約要素などを確認する •  複数のペルソナがある場合は、各ペルソナのユーザーストリーを作成する 15 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開
  • 16. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. メンタルモデル作成 n  ユーザーの⾏行行動の原因とユーザーの認識識を確認して、UXデザインの⽅方 向性を定める •  ユーザーの⾏行行動だけで判断するのではなく、ユーザーの⼼心理理を把握することで本当の ニーズを発⾒見見する •  イノベーションのきっかけを⾒見見つける場所はここ! 16 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開
  • 17. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 機能⼀一覧とデータ⼀一覧の作成 n  作成したユーザーストリーを元に、必要なデータと機能の⼀一覧を作成す る •  ユーザーストリーを実現できる機能とデータを⼀一覧する •  ユーザーストリーと機能・データをマッピングする •  既存の製品・サービスの機能・データを意識識せずに作成する 17 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開
  • 18. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. プロトタイプの作成 n  ユーザーテストを⾏行行うための必要最⼩小限のプロトタイプを作成 •  UIスケッチ、画⾯面のフローを検討する •  ペーパープロトタイピング、プロトタイピング⽤用ツールの使⽤用 •  ⼿手軽に複数の試作を試し、改善を⾏行行う •  ユーザーテスト⽤用のプロトタイプを作成する 18 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開
  • 19. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ユーザーテスト実施と改善 n  UXデザインの仮説の検証 •  ⽬目的とした価値を有効にユーザーに提供できているかを確認する •  ペルソナに近いユーザーを招き、役割劇、発話⽅方などで⾏行行う(必要に応じて録画・録 ⾳音を⾏行行う。専⾨門機関に依頼する⽅方法もある) •  課題を⾒見見つけ、分析を⾏行行い、対応策を考える 19 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データモデル 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 都合により画像は⾮非公開
  • 20. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインのプロセス ユーザーを知る ユーザーの⾏行行動と⼼心 理理を知る 必要な機能と データを定義する 試作を作る 仮説の検証と 改善⽅方針を探る UXデザインのやりかた n  以上が全てのプロセスです。 20 コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 21. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. イテレーション#1 ユーザーを知る ユーザーの⾏行行動と⼼心 理理を知る 必要な機能と データを定義する 試作を作る 仮説の検証と 改善⽅方針を探る UXデザインのやりかた n  しかし、⼤大事なのは反復復!(UXデザイナーは神様ではない) 21 コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 22. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. イテレーション#2 ユーザーを知る ユーザーの⾏行行動と⼼心 理理を知る 必要な機能と データを定義する 試作を作る 仮説の検証と 改善⽅方針を探る UXデザインのやりかた n  全てを反復復する必要はない。必要なタスクだけ繰り返す! 22 コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 修正 機能⼀一覧 修正 データ⼀一覧 修正 プロトタイプ 修正 ユーザーテスト 実施 ユーザーテスト 結果分析 ※上図は⼀一例例です。
  • 23. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. イテレーション#3 ユーザーを知る ユーザーの⾏行行動と⼼心 理理を知る 必要な機能と データを定義する 試作を作る 仮説の検証と 改善⽅方針を探る UXデザインのやりかた n  改善を繰り返しつつ、⽬目的としたUXに近づけていく。 23 コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 修正 ユーザーテスト 実施 ユーザーテスト 結果分析 ※上図は⼀一例例です。
  • 24. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインプロセスで⼤大事なこと n  アナログな道具と仲良良くなりましょう! •  ポストイット、ペン、紙、ホワイトボード •  早く、安く、多くが鍵 •  格好いい資料料の作成は最後だけで⼗十分 n  ユーザーを中⼼心においた現場主義 •  ⾔言葉葉に頼ると騙される n  謙虚な姿勢を貫く •  ユーザーは(たまに、不不親切切な)先⽣生、UXデザイナーは学⽣生 •  学び続ける姿勢(最初から完璧なものは無理理!) 24
  • 26. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 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
  • 27. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. と⾔言うのは、嘘。本当はある n  NCDCのUX  Driven  Development  Process •  しかし、Agile開発をベースにしており、ウォーターフォール⽅方式のプロセスに 適⽤用するには調整が必要 27 初期リサーチ 継続リサーチ スコープ 確定 コンテキスト/顧客 ストーリーボード UIプロト タイプ 優先順位定義 Rele ase Interaction Design & User Test 基本設計/技術調査 System /App Development & Test 要件分析 Visual Design
  • 28. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ウォータフォールプロセス ウォータフォールプロセス n  多くの場合、デザインは実装の⼀一部として考慮されるが、ものに よっては考慮すらされないこともある。 n  デザイン=UIデザイン=飾り 28 要件定義 基本設計 詳細設計 実装 テスト リリース パターン② ものは実装できた。 デザイナーにちょこっと飾って もらおう。 パターン① 要件定義が終わったので実装 する画⾯面を作ってもらおう。 ⼀一発勝負
  • 29. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ウォータフォールプロセス UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 UXデザインプロセス  vs  ウォータフォールプロセス 29 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 要件定義 基本設計 詳細設計 実装 テスト リリース 反復復型 ⼀一発勝負
  • 30. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ウォータフォールプロセス UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 UXデザインプロセス  vs  ウォータフォールプロセス 30 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 要件定義 基本設計 詳細設計 実装 テスト リリース 反復復型 ⼀一発勝負 反復復はどうする? このプロセスをど こに挿⼊入するの? 既存タスクは どうする?もうや める?追加する? もっと負荷が増え るのでは?
  • 32. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン  ×  ウォータフォールプロセス n  ITプロセスの要件定義及び基本設計フェーズの⼀一部をUXデ ザインのタスクでリプレースできる 32 要件定義 基本設計 詳細設計 実装 テスト UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 33. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 課題:ウォーターフォールには反復復はないけど? n  UXデザインプロセスは反復復が前提。 •  ⼀一回で最善の解を出すのは難しい n  しかし、反復復による変更更の反映はコストが⾼高い 33 反復復はどうするか? 要件定義 基本設計 詳細設計 実装 テスト UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析
  • 34. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインを考慮したプロセス定義、その① n  要件定義と基本設計の⼀一部フェーズに必要な期間をより⻑⾧長く設定して、反復復を⾏行行う •  このコストは設計及び実装フェーズでの⼿手戻りを防⽌止する効果でまかなえる n  上記フェーズの⼈人(リソース)を増やすよりは期間を⻑⾧長くした⽅方が有効 •  プロジェクトの開始時期をもう少し早くすることは有効 34 要件定義 詳細設計 実装 テスト 基本設計 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 エンジニアの⼯工数は減り、そ の分UXデザイナーの ⼯工数が追加される
  • 35. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインを考慮したプロセス定義、その② n  ⼆二つのプロセスを並⾏行行する •  詳細設計のフェーズまで仕様の変更更を可能とする •  仕様の変更更に柔軟に対応できる開発体制が必要 n  UXデザインチームと開発チームの密な連携が必要 •  変更更の影響が⼤大きい部分とそうでない部分への認識識を共有し、作業の優先順位と変更更の可能性を検討す る 35 要件定義 詳細設計 実装 テスト 基本設計 UXデザインのプロセス コンテキスト 分析 ペルソナ定義 ユーザーストーリ 作成 メンタルモデル 作成 機能⼀一覧 作成 データ⼀一覧 作成 プロトタイプ 作成 ユーザーテスト 実施 ユーザーテスト 結果分析 エンジニアの⼯工数はあまり減 らない。UXデザイナーの⼯工数 が追加される
  • 36. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ウォーターフォール⽅方式のプロジェクトにおけるUXデ ザイン適⽤用のベストプラクティス n  UXデザインはワークショップ⽅方式が有効 •  デザインチームは事前準備をしっかりし、参加者の時間を無駄にしない •  ワークショップには必ず実ユーザーを参加させる(IT部⾨門の担当者で代わりにしない) n  実装チームは、 •  ワークショップに参加し、仕様の背景を理理解しつつ、仕様変更更による影響範囲を他の参加者に理理 解させる •  UXデザインでは気付かない実装上の要件・制約を早期に指摘する n  UXデザインチームは、 •  ITプロセスを理理解し、適時に必要な資料料を、適切切なフォーマットで提⽰示する •  プロジェクト管理理チームにUXデザイナーが参加する 36
  • 37. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. ウォーターフォール⽅方式のプロジェクトにおけるUXデ ザイン適⽤用のベストプラクティス n  成果物と役割分担の定義を明確にする •  UXデザインの成果物とITプロセスの成果物を⽐比較し、必要な項⽬目を追加したり、⽤用語 を合わせる作業を⾏行行う •  ITプロセスに必要な資料料がUXデザインで想定されていない場合、その必要性の判断と 役割分担を明確に定義する n  プロセスの進⾏行行に伴い役割が変わる •  前半はUXデザイナーが実務を⾏行行い、ITエンジニアがオブザーバーとなる 仕様の漏漏れはないか、必要な情報は揃えられているか?  制約を無視していないか等 •  後半はITエンジニアが実務を⾏行行い、UXデザイナーがオブザーバーとなる 意図した通りの実装になっているか?  実装の都合によって使⽤用性が犠牲になっていないか等 37
  • 38. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイン  ×  アジャイルプロセス n  タスクの⼀一部としてデザインを受け⼊入れ、常に次のイテレーション向けのデザインを ⾏行行う n  各リリースにユーザーテストができるコードを追加し、常いユーザーテストができて いる状態にする n  各イテレーションから得られた情報に基づき、次回のデザイン作業に反映しつつ、既 存機能の改善を⾏行行う 38 デザイン 実装 デザイン 基盤作成 プラニング 実装 デザイン 実装 デザイン イテレーション イテレーション イテレーション イテレーション リリース リリース リリース
  • 39. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. Leanスタートアップ  ×  UXデザインプロセス n  仮説の定義から始め、その検証に必要なKPIの策定する n  仮説とKPIの検証ができるユーザーテスト⼿手法を考える n  上記ユーザーテストが実⾏行行できるMVPに必要なデザインを⾏行行う •  MVPのためのデザインと実装は最⼩小限のものに抑える n  MVPから得られた情報を分析・学習し、次回の反復復を⾏行行う 39 仮説作成 KPI策定 Lean UXデザイン 検証 学習 実装 反復
  • 40. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. アジャイル及びLean⽅方式のプロジェクトにおけるUX デザイン適⽤用のベストプラクティス n  ⼩小さい規模のチームを維持する •  円滑滑なコミュニケーションが鍵 n  各イテレーションで必要なデザインや実装の⽬目的と範囲を明確にする •  デザインの⽬目的と範囲は毎回異異なる •  ⽬目的に沿った⼿手段を選ぶ(ペーパープロトタイプ、プロトタイピングツール、ヴィ ジュアルモックアップ、実装など)⇒かっこつけない n  円滑滑な進⾏行行のため、ドメインを超える知識識の交流流が必須 •  デザイナーは実装を、エンジニアはデザインを学習する •  ⼀一つ以上の専⾨門領領域を持つジェネラルリストになることが望ましい(現実的には難し いが、努⼒力力するしかない) 40
  • 42. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザイナーは必ず必要か? n  UXデザインは論論理理的な思考と⼈人に 対する理理解があれば誰でもできる •  美的センスが必要な部分はごく⼀一部 •  また、その部分は専⾨門家(ヴィジュアルデ ザイナー)に任せればいい •  ⼈人に対する理理解・配慮が⼤大事 n  UIデザインも学習できる •  作る必要はない。評価できればいい •  参考:http://www.slideshare.net/ksc1213/ui-‐‑‒45852142 n  最初はUXデザイナーと⼀一緒に経験 し、次回からは独⾃自で⾏行行う 42 論理的思考が必要な部分 美的センスやツールのスキルが必要な部分
  • 43. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインの評価基準は? n  よく引⽤用されるのは右の図 •  プロジェクトの性格に合わせて各要素の優 先順位を決める 必ず獲得するもの、なくてもいいものなど •  必要に応じて各要素をより細分化する 使いやすいの定義、信頼できるの定義など •  各業界に適した表現に変えて使⽤用する n  プロジェクトの性格に基づいて新し い評価基準を定義する •  B2B/B2E/B2Cの⽤用途によって評価軸は異異 なる 43
  • 44. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインはどこまでやるか? n  対象製品・サービスの性質に よってどれくらいの使⽤用者経 験を提供すべきかを検討する •  過度度な投資は避ける •  UXデザインの効果の7割は1回⽬目 のプロジェクトで達成できる 反復復に対するROIを適時判断する 対象製品とサービスの種類によって継続 な投資の必要性を判断する 44
  • 45. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 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
  • 46. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインって、結果的にUIデザインじゃないか? n  以下の2枚の絵は同じ評価を受けるべきか? n  ピカソの絵は度度重なるデッサン練習の結果。⼦子供の習作とは異異なる n  UXデザインの成果物もUIデザインになる。しかしエンジニアが作った画⾯面に単 純に配⾊色とボタンをつけたものとは異異なる 46 VS 都合により画像は⾮非公開
  • 47. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインって、投資価値があるか? n  UXデザインのROI算出⽅方法 •  KPIを適切切に定義する(ところが、KPIの定義は簡単だが、ROIの計算は難しい) •  悪いUXによる機会損失やコストを⾒見見積もる •  UXデザイン及び既存製品・サービスの改修に必要なコストを⾒見見積もる •  上記を計算して投資の妥当性を判断する •  可⽤用費⽤用を時間に換算してUXデザインのプロジェクトを開始 •  予測した効果と実際の結果、費⽤用を測定し⽐比較する n  KPIは対象によって異異なる •  B2C:集客率率率、ページビュー、コンバージョンレート、再訪問数、売上、サポート数等 •  B2B:タスクにかかる時間、タスクの成功率率率、ユーザーの満⾜足度度、効率率率性、エラー発⽣生率率率、ト レーニング費⽤用、開発費⽤用等 47
  • 48. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインのROI計算例例 48
  • 49. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. プロトタイピングツールの利利⽤用 49 Balsamiq:ワイヤーフレームを利用したプロトタイプ作成及びユーザーテストツール 都合により画像は⾮非公開
  • 50. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. プロトタイピングツールの利利⽤用 50 Balsamiq Keynotopia: ヴィジュアルを含めたユー ザーテストツール    
  • 51. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 今、⼀一番の課題! 51 n  UXデザインのUXデザインが なっていない!! •  UXデザインをITプロセスに導⼊入する ための⽅方法が提⽰示されていない •  ITプロセスを理理解しているUXデザイ ナーがほとんどいない •  UXデザイナーは⽕火星⼈人、ITエンジニ アは⽊木星⼈人⇒⾔言葉葉が通じない ・・・ 都合により画像は⾮非公開
  • 52. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. 最後に 52 n  UXデザインは、つまり、おもてなし n  何かを選ぶということは、他を捨てるということ •  みんながハッピーになることは天国でしかできない •  何を選んで、何を捨てるかを考えるのがUXデザインでもある •  飾りではなく本当の価値にフォーカスする n  100点は難しいが、70点は狙える! •  プロセスも、成果物も70点を越えないのがほとんど •  しかし、それは⼗十分価値がある! •  ⼀一旦、始めましょう!
  • 54. Copyright ©2015, NC Design & Consulting Co., Ltd. All rights reserved. エンジニアに優しいUI/UXデザイン n  抽象的センスではなくロジックで組み⽴立立てるデザイン n  明⽇日からの現場で使える実践的デザイン n  定性的でなく、定量量的に評価できるデザイン n  ITプロセスに適合したデザインプロセスの提⽰示 54 IT  Technology   &   Project  Management   UI/UX  Design   with   Logical  Thinking NCDC’s   UI/UX  Design