UX Design Lecture in TUAD 2014

UXデザインワークショップ - 体験のプロトタイピング -
プロダクトデザイン学科　春季ワークショップ
2014年3月14日　脇阪善則

プロダクトデザイン学科　春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング”
ユーザーの体験を可視化する

講義の流れ
ユーザーエクスペリエンス（UX）とそのデザインについて
事例を交えて解説します。
!
UXをデザインするとはどういうことなのか、
事例を交えて考えていきます。

今日のゴール
UXについて理解する
!
UXをデザインするプロセスを通して体験する
!
手を動かす、話をする（伝える）
調査分析プロトタイピング評価
今日の範囲

User Experience（UX）とは？

UXとは、ユーザーの体験そのもののことを指します。
メッセージを送るモノを買うゲームする旅をする

UXとは、ユーザーの体験そのもののことを指します。
メッセージを送るモノを買うゲームする旅をする
コミュニケーション消費行動遊び非日常な体験

旅行のUX
旅といってもいろいろある
一人旅グループ旅行出張ドライブ

旅行のUX
２つのタイプを比べてみると
グループ旅行出張

グループ旅行
友だち数人で旅行する場合
20代前半の社会人女性数人ユーザー
急に週末の予定が空いた
初めて行く旅先
決まってないホテル、プラン
コンテクスト
ホテルの予約
旅行のプランニング
観光、食事、Facebook、LINE
行動
ホテル予約サイト
ブログ、SUS、旅行雑誌
お店、観光地
メディア

グループ旅行
ビジネスマンの出張
コンテクスト
ホテルの予約
行動
ビジネスマン
仕事
得意先での商談
定期的な訪問、ほぼ決まったプラン
ホテルの予約
移動
仕事
お店、観光地
メディア
グルメサイト
ニュースサイト、雑誌

グループ旅行
同じ旅行でもUXの質は大きく異なる
コンテクスト
ホテルの予約
行動
ビジネスマン
仕事
得意先での商談
定期的な訪問、ほぼ決まったプラン
ホテルの予約
移動
仕事
お店、観光地
メディア
グルメサイト
ニュースサイト、雑誌

UXを構成する要素
空港でのUXとUI
UI
（接点）コンテキスト
ユーザー
サービス
行動
UX
!
チェック
イン
ショップ
＆
レストラン
発券

UXのシーン
ユーザー
親子
コンテクスト
リビングでソファにもたれてPC閲覧
行動
自宅のPCを使ってネットで調べる
メディア
PCのWebサイト
サービス
****

UXのシーン
空港でチェックイン
ユーザー
家族
コンテクスト
混雑した空港の国内線カウンター
行動
手荷物を預けてチェックインする
メディア
スマートフォン
サービス
****

UXのシーン
現地にて散策開始
ユーザー
友だちグループ
コンテクスト
初めて来た街、土地勘なし
行動
スマホとガイドブックで目的地調査
メディア
スマートフォン、ガイドブック
サービス
****

UXのシーン
ホテルに到着
ユーザー
親子
コンテクスト
一日外出して疲れて帰ってきた
行動
ホテルにチェックイン
メディア
プリントアウトした予約票
スマートフォン
サービス
****

UXのシーン
郊外の観光地
ユーザー
家族
コンテクスト
天気のいい昼下がり、見知らぬ土地
行動
目当ての観光地に到着
メディア
スマートフォン、ガイドブック
サービス
****

UXのシーン
夜の街
ユーザー
ビジネスマン３人組
コンテクスト
出張先で仕事が終わって一段落
行動
美味しいものを食べに街に出る
メディア
スマートフォン、観光パンフレット
サービス
****

ユーザージャーニー

ミニワークショップ：UXを理解する
デザインを学ぶ環境を支える要素を描き出してみよう
（持ち時間90秒）
!
・タッチポイントや人、技術、ビジネス要素など
・箇条書きでもOK、でも関係図の方がより良い

UXの種類
現在進行形の体験だけがUXではない
現在の体験過去の振り返り未来の予見

UXを評価する尺度
UXハニカム

UXの種類
UXをまとめるとこんな感じ
UX
＝
コンテキスト
×
UI・プロダクト
（タッチポイント）
エモーション
サービス
×
!
チェック
イン
アクティビティユーザー
×

UXの方程式
（ユーザー）が
（ある利用状況）で、
（機能・コンテンツ）を
（アクティビティ）した。
その結果、
（ユーザー）が
（エモーション）になった。
（親子３人）が
（旅先の身知らぬ土地）で、
（スマホアプリ）を
（使って、レストランを探）した。
その結果、
（子供）が
（美味しいご飯に大喜び）した。

UXをデザインするということ

UXデザインとは
ユーザーの体験をデザインする？
何を？どうやって？

UXデザインの対象とは？
UX
＝
コンテキスト
×
エモーション
デザインの対象
×
!
チェック
イン
×

UXデザインの対象とは？
UX
＝
コンテキスト
×
エモーション
サービス
×
!
チェック
イン
×
理解の対象

UXを理解する：プラグマティックペルソナ
ユーザー像を理解する
デモグラフィクス、行動特性、価値観、シナリオ
Webエンジニア大学生

UXを理解する：ジャーニーマップ
ストーリーの
プロット
アクティビティ
コンテクスト
コンテンツ
キャラクターの
気持ち
タッチポイント
サブ
サブ
サブ
サブ
サブ
サブ
喜怒哀楽
感想
喜怒哀楽
感想
喜怒哀楽
感想
喜怒哀楽
感想
喜怒哀楽
感想
喜怒哀楽
感想
デバイス
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
冒険への
きっかけ
はじまりと
試練
冒険への出発冒険
冒険からの
帰還
サブ
サブ
サブ
サブ
サブ
サブ
サブ
サブ
サブ
デバイス
デバイス
デバイス
デバイス
デバイス
利用状況利用状況利用状況利用状況利用状況利用状況

UXを理解する＆デザインする：ジャーニーマップ
ストーリーの
プロット
コンテクスト
コンテンツ
キャラクターの
気持ち
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
旅への
きっかけ
はじまりと
試練
○○へ出発冒険
○○からの
帰還
PC
モバイル
PC
モバイル
PC
モバイルモバイル
平常心ワクワクするすぐ予約したい
なかなか
見つからない
ついに本番余韻を楽しむ
オフィス
通勤時間
オフィス
通勤時間
通勤時間
自宅
自宅屋外屋外
来月の予定を
立てる
友だちと連絡
自分のスケジュー
ル確認
○○を調べる
PCを起動する
サイト訪問
アプリを
起動する
○○を検索
○○をみる
予約する
○○を予約
場所・日程確認
○○する
○○に行く
○○する
○○する
○○終了
○○を付ける
○○を見返す
次の予定を
考える
アプリ起動
デザインアイディアデザインのディテール、利用状況背景となるUXストーリー

UXを理解する
UXバックグラウンドストーリー
○○するデザインアイディアデザインのディテール、利用状況
シーン
利用状況
エモーション
コンテンツ
デザインアイディア!
ワイヤフレーム

UXをデザインする：ストーリーボード

UXをデザインする：ストーリー
［儀式と試練］その日、会社から帰宅すると、彼は早速ノートPCを開いて、ディスカバ
リーを検索して探し出し、訪問しました。
［試練］サイトを立ち上げると、透き通った蒼い海や、以前、雑誌で見たことのある風情
のある城下町、昔懐かしい路面電車の写真などが次々と出てきます。
［試練］祐介はクラシカルな街町並みの中を写真を取りながら散歩するのが好きなので、路
面電車の写真に興味を持ってクリックしてみました。すると、画面にはいろいろな路面電車
の写真に加えて、いい感じの町並みやお店の写真が出てきました。しかも、写真にはコメン
トが付けられており、そこを訪れた旅行者のコメントを見ることができます。
［試練］旅行サイトや検索エンジンで「レトロ」とか「城下町」などキーワードを入力して
も、想像どおりの写真がでてくるばかりで、あまり興味を引く発見はありませんでした。し
かしディスカバリーは違ったのです。写真をクリックする度に新しい発見があり、時間を忘
れるほど写真を見ていました。
心的イメージ
情緒的コンテクスト
記憶コンテクスト
物理的コンテクスト

UXは主観的なもの
デザイナーとユーザーにギャップがなければハッピー
○○○○
○○○○

デザインを評価する
デザイナーが思ったように、ユーザーは使ってくれない。。
○○○○ △×※〜〜

人間中心設計
ユーザー視点でものをつくるための４つのステップ
ユーザー要件
の特定
設計
（プロトタイピング）
設計案の
評価
利用状況の
理解
HCDプロセスを適用すると決めたら…

リーンスタートアップ
無駄を削ぎ落とした製品開発のための仮説検証サイクル
MEASURE
（評価する）
LEARN
（学ぶ）
BUILD
（つくる）

本日のワークショップ

タイムテーブル
10:00 - 11:00　講義「ユーザーの体験をデザインする」
11:00 - 12:00　ユーザー体験の可視化
12:00 - 13:00　昼食
13:00 - 14:00　アイディエーション＆プロトタイピング
14:00 - 15:00　グループ内レビュー＆改善
15:00 - 15:30　プレゼン準備
15:30 - 17:00　プレゼンテーション

今日のテーマ
今回は「旅行」をテーマに、モバイルアプリのアイディアを検討し、ペーパープロトタイピング
の手法を使ってアイディアをかたちにします。ペルソナやシナリオ、ジャーニーマップといった
UXデザインのツールを使うことによって、ユーザー視点で、モバイル端末の特性や、モバイル
ならではの利用状況を考えながら、「旅」が楽しくなる体験をデザインしていきましょう。
「旅行を楽しくする」アプリ

Persona & Story
佐々木さんは大学時代から友達と旅行に行くのが一番の趣味。学生時代には、自由に時間が使えるのは今しかないと思い、夏休みや
春休みに海外・国内含め何度も友人と旅行に行った。今まで行ったのは、海外では、バリ島、ベトナム、香港、ニューヨーク、パリな
ど。国内では、北海道、沖縄、京都、広島、三重、金沢、屋久島など主要なスポットには行っている。大学卒業前には、２週間かけて
ヨーロッパ一周もしたことがある。社会人になってからは回数や期間は減ったが、年に２回は旅行に行く。リスクは取りたくないので、
旅行はパックか、現地にいる友人、もしくは頼りになる友人と一緒に行く。行くメンバーはだいたいいつも一緒で女友達と２、３人で
行く。じぶんがやりたいことを主張するよりは、友人がやりたいということを一緒に楽しむ方が多い。旅行先で写真に写るのは好きで、
ポーズや背景など色々工夫して旅行先ならではの写真を撮ることを楽しんでいる。旅行した後は、写真をFacebookにアップして友達
に共有している。旅行の計画については友人に任せることが多く、それで時々旅行先で喧嘩することもある。恋愛はちょっと苦手。
Context（行動特性） Implication（価値）佐々木有美さん（２9）
•東京都文京区在住
•事務
•品川の商社勤務
•独身・実家暮らし
•趣味は旅行と食べること
•９時５時とはいかないが、比較的時間
に余裕のある生活。
•帰宅は毎日20時くらいだが、期末前は
２２時くらいになることもある。
•Androidユーザー。
•Xperiaを購入したが、操作がちょっと
難しいと感じている。
•年に２回は友人と旅行をする。
•国内、海外も含め旅行が好き。
•旅行先で写真を撮ったり、美味しいも
のを食べたりするのが一番の趣味。
•ダイビングの免許を持っている。
・仕事上、目上の人には基本的に従う。
・チームで仕事するのが好き。
•安定志向。リスクはなるべくとりたく
ない堅実派。
・人に迷惑をかけない範囲で常識を持っ
て楽しみたい。
•同性の友人を大切にしている。
・やりたいことを主張するより他の人が
やりたいことにつき合う方が安心する。
・普段の買い物や食事の場所は、気に
入ったものや信頼できるものを長く使う
方が効率がいいと思っている。
Story

Key Experience
旅先、あるいは帰ってきてからの
行動が楽しくなるようなモバイルアプリ
（コンシェルジュサービスは×）

Design Procedure
ユーザーについて
理解＆共感する
アイディアを
具体的なかたちにする
旅行が楽しくなる
アイディアを考える
ペルソナ
シナリオ
ジャーニーマップ
課題分析
アイディエーション
ワイヤフレーム
ストーリーボード
評価・検証

Designing with Journey Map
ステージ
シナリオ
コンテクスト
デバイス
ワイヤ
フレーム
旅行に行こう
と決める
旅行の計画を
立てる
ホテルや
電車を予約する
旅行に行く
現地で行動する
旅行から帰ってくる
PC（予約）
モバイル（連絡用）
モバイル（旅行中）
友だちと
カフェでおしゃべり
仕事中に自分のスマホで
イベント申し込み
PC（自宅）
モバイル（外出先）
空いた時間に
ネット検索
友だちに
やってもらう
モバイル（SNSに投稿）
2. 課題分析と
アイディエーション
1. ペルソナを分析して
シナリオをつくる
3. 具体的なアイディアを
かたちにする

モバイルUXのデザインTIPS

モバイルのコンテクスト
モバイル＝「いつでも、どこからでも」使える

モバイルのコンテクスト
チャレンジングな状況でも気にしない

モバイルならではの体験
PCとモバイルにおける差異
スクリーンサイズ
利用状況
注意のレベル
ネットワークへのアクセス
大きい
限定的
高い
快適
小さい
ばらばら
断片的
限定的

モバイルならではの体験
既存のメディア（PC）の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam
モバイルならではのユニークな体験

注意散漫・行動が遮られる
誰もに覚えがある「マルチタスク」

コンテクストがトリガになる
PCでは現在地を自分で入力しなければいけない
モバイルでは、現在地の情報を自然と利用することができる
マップのエクスペリエンス

デバイスエコシステム
モバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している
PC中心のエコシステムに変化が起きた

デバイスエコシステム
(c)amazon

モバイルUXのデザインパターン
クラウドとアプリを基本単位としてデザインする

コンテンツを観るデータを操作する日記、メモを共有するニュースを共有する
クラウドにあるデータをモバイル端末で利用する

スマホの画面は狭い＆通信環境が良くない場合がある

UX Design Lecture in TUAD 2014

Recommended

Recommended

More Related Content

Similar to UX Design Lecture in TUAD 2014

Similar to UX Design Lecture in TUAD 2014 (20)

More from Yoshinori Wakizaka

More from Yoshinori Wakizaka (8)

UX Design Lecture in TUAD 2014