O slideshow foi denunciado.
UXデザインワークショップ - 体験のプロトタイピング -
プロダクトデザイン学科 春季ワークショップ
2014年3月14日 脇阪	 善則
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
ユーザーの体験を可視化する
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
講義の流れ
ユーザーエクスペリエンス(UX)とそのデザインについて	 
事例を交えて解説します。	 
!
UXをデザインするとはどうい...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
今日のゴール
UXについて理解する	 
!
UXをデザインするプロセスを通して体験する	 
!
手を動かす、話をする(伝える)
調査 ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
User	 Experience(UX)とは?
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
User	 Experience(UX)とは?
UXとは、ユーザーの体験そのもののことを指します。
メッセージを送る モノを買う ゲー...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
User	 Experience(UX)とは?
UXとは、ユーザーの体験そのもののことを指します。
メッセージを送る モノを買う ゲー...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
旅行のUX
旅といってもいろいろある
一人旅 グループ旅行 出張 ドライブ
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
旅行のUX
2つのタイプを比べてみると
グループ旅行 出張
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
グループ旅行
友だち数人で旅行する場合
グループ旅行 出張
20代前半の社会人女性数人ユーザー
急に週末の予定が空いた
初めて行く旅先...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
グループ旅行
ビジネスマンの出張
20代前半の社会人女性数人ユーザー
急に週末の予定が空いた
初めて行く旅先
決まってないホテル、プラ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
グループ旅行
同じ旅行でもUXの質は大きく異なる
グループ旅行 出張
20代前半の社会人女性数人ユーザー
急に週末の予定が空いた
初め...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを構成する要素
空港でのUXとUI
UI	 
(接点)コンテキスト
ユーザー
サービス
行動
UX
!
チェック
イン
ショップ
...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
旅行のプランニング
ユーザー	 
親子
コンテクスト	 
リビングでソファにもたれてPC閲覧
行動	 
自宅のPCを使っ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
空港でチェックイン
ユーザー	 
家族
コンテクスト	 
混雑した空港の国内線カウンター
行動	 
手荷物を預けてチェッ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
現地にて散策開始
ユーザー	 
友だちグループ
コンテクスト	 
初めて来た街、土地勘なし
行動	 
スマホとガイドブッ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
ホテルに到着
ユーザー	 
親子
コンテクスト	 
一日外出して疲れて帰ってきた
行動	 
ホテルにチェックイン
メディ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
郊外の観光地
ユーザー	 
家族
コンテクスト	 
天気のいい昼下がり、見知らぬ土地
行動	 
目当ての観光地に到着
メ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXのシーン
夜の街
ユーザー	 
ビジネスマン3人組
コンテクスト	 
出張先で仕事が終わって一段落
行動	 
美味しいものを食べに...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
ユーザージャーニー
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
ユーザージャーニー
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
ミニワークショップ:UXを理解する
デザインを学ぶ環境を支える要素を描き出してみよう	 
(持ち時間90秒)	 
!
・タッチポイント...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXの種類
現在進行形の体験だけがUXではない
現在の体験過去の振り返り 未来の予見
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを評価する尺度
UXハニカム
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXの種類
UXをまとめるとこんな感じ
UX
=
コンテキスト
×
UI・プロダクト	 
(タッチポイント)
エモーション
サービス
...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXの方程式
(ユーザー)が
(ある利用状況)で、
(機能・コンテンツ)を
(アクティビティ)した。
その結果、
(ユーザー)が
(エ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXをデザインするということ
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXデザインとは
ユーザーの体験をデザインする?	 
何を?どうやって?
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXデザインとは
UXデザインの対象とは?
UX
=
コンテキスト
×
UI・プロダクト	 
(タッチポイント)
エモーション
デザイ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXデザインとは
UXデザインの対象とは?
UX
=
コンテキスト
×
UI・プロダクト	 
(タッチポイント)
エモーション
サービ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを理解する:プラグマティックペルソナ
ユーザー像を理解する	 
デモグラフィクス、行動特性、価値観、シナリオ
Webエンジニア 大...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを理解する:ジャーニーマップ
ストーリーの
プロット
アクティビティ
コンテクスト
コンテンツ
キャラクターの
気持ち
タッチポイ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを理解する&デザインする:ジャーニーマップ
ストーリーの
プロット
アクティビティ
コンテクスト
コンテンツ
キャラクターの
気持...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXを理解する
UXバックグラウンドストーリー
○○するデザインアイディア デザインのディテール、利用状況
アクティビティ
シーン
利...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXをデザインする:ストーリーボード
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXをデザインする:ストーリー
[儀式と試練]その日、会社から帰宅すると、彼は早速ノートPCを開いて、ディスカバ
リーを検索して探し出...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
UXは主観的なもの
デザイナーとユーザーにギャップがなければハッピー
○○○○
○○○○
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
デザインを評価する
デザイナーが思ったように、ユーザーは使ってくれない。。
○○○○ △×※〜〜
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
人間中心設計
ユーザー視点でものをつくるための4つのステップ
ユーザー要件
の特定
設計
(プロトタイピング)
設計案の
評価
利用状...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
リーンスタートアップ
無駄を削ぎ落とした製品開発のための仮説検証サイクル
MEASURE
(評価する)
LEARN
(学ぶ)
BUIL...
Build Prototypes !!
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
本日のワークショップ
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
タイムテーブル
10:00	 -	 11:00 講義「ユーザーの体験をデザインする」	 
11:00	 -	 12:00 ユーザー体験...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
今日のテーマ
今回は「旅行」をテーマに、モバイルアプリのアイディアを検討し、ペーパープロトタイピング
の手法を使ってアイディアをかたち...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
Persona	 &	 Story
 佐々木さんは大学時代から友達と旅行に行くのが一番の趣味。学生時代には、自由に時間が使えるのは今し...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
Key	 Experience
旅先、あるいは帰ってきてからの	 
行動が楽しくなるようなモバイルアプリ	 
(コンシェルジュサービス...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
Design	 Procedure
ユーザーについて
理解&共感する
アイディアを
具体的なかたちにする
旅行が楽しくなる
アイディア...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
Designing	 with	 Journey	 Map
ステージ
シナリオ
コンテクスト
デバイス
ワイヤ
フレーム
旅行に行こう...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルUXのデザインTIPS
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルのコンテクスト
モバイル=「いつでも、どこからでも」使える
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルのコンテクスト
チャレンジングな状況でも気にしない
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルならではの体験
PCとモバイルにおける差異
スクリーンサイズ	 
利用状況	 
注意のレベル	 
ネットワークへのアクセス
大...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルならではの体験
既存のメディア(PC)の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam
モバイルな...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
注意散漫・行動が遮られる
誰もに覚えがある「マルチタスク」
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
コンテクストがトリガになる
PCでは現在地を自分で入力しなければいけない	 
モバイルでは、現在地の情報を自然と利用することができる
...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
デバイスエコシステム
モバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している
PC中心のエコシステムに変化が...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
デバイスエコシステム
(c)amazon
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルUXのデザインパターン
クラウドとアプリを基本単位としてデザインする
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルUXのデザインパターン
コンテンツを観る データを操作する 日記、メモを共有する ニュースを共有する
クラウドにあるデータをモ...
プロダクトデザイン学科 春季ワークショップ	 ”UXデザインワークショップ	 -	 体験のプロトタイピング”
モバイルUXのデザインパターン
スマホの画面は狭い&通信環境が良くない場合がある
Próximos SlideShares
Carregando em…5
×

UX Design Lecture in TUAD 2014

739 visualizações

Publicada em

2014年3月に東北芸術工科大学で講義をした時のレジュメ
この後、プロトタイピングのワークショップ

Publicada em: Design
  • Seja o primeiro a comentar

UX Design Lecture in TUAD 2014

  1. 1. UXデザインワークショップ - 体験のプロトタイピング - プロダクトデザイン学科 春季ワークショップ 2014年3月14日 脇阪 善則
  2. 2. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” ユーザーの体験を可視化する
  3. 3. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 講義の流れ ユーザーエクスペリエンス(UX)とそのデザインについて 事例を交えて解説します。 ! UXをデザインするとはどういうことなのか、 事例を交えて考えていきます。
  4. 4. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 今日のゴール UXについて理解する ! UXをデザインするプロセスを通して体験する ! 手を動かす、話をする(伝える) 調査 分析 プロトタイピング 評価 今日の範囲
  5. 5. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” User Experience(UX)とは?
  6. 6. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” User Experience(UX)とは? UXとは、ユーザーの体験そのもののことを指します。 メッセージを送る モノを買う ゲームする 旅をする
  7. 7. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” User Experience(UX)とは? UXとは、ユーザーの体験そのもののことを指します。 メッセージを送る モノを買う ゲームする 旅をする コミュニケーション 消費行動 遊び 非日常な体験
  8. 8. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 旅行のUX 旅といってもいろいろある 一人旅 グループ旅行 出張 ドライブ
  9. 9. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 旅行のUX 2つのタイプを比べてみると グループ旅行 出張
  10. 10. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” グループ旅行 友だち数人で旅行する場合 グループ旅行 出張 20代前半の社会人女性数人ユーザー 急に週末の予定が空いた 初めて行く旅先 決まってないホテル、プラン コンテクスト ホテルの予約 旅行のプランニング 観光、食事、Facebook、LINE 行動 ホテル予約サイト ブログ、SUS、旅行雑誌 お店、観光地 メディア
  11. 11. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” グループ旅行 ビジネスマンの出張 20代前半の社会人女性数人ユーザー 急に週末の予定が空いた 初めて行く旅先 決まってないホテル、プラン コンテクスト ホテルの予約 旅行のプランニング 観光、食事、Facebook、LINE 行動 グループ旅行 出張 ビジネスマン 仕事 得意先での商談 定期的な訪問、ほぼ決まったプラン ホテルの予約 移動 仕事 ホテル予約サイト ブログ、SUS、旅行雑誌 お店、観光地 メディア ホテル予約サイト グルメサイト ニュースサイト、雑誌
  12. 12. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” グループ旅行 同じ旅行でもUXの質は大きく異なる グループ旅行 出張 20代前半の社会人女性数人ユーザー 急に週末の予定が空いた 初めて行く旅先 決まってないホテル、プラン コンテクスト ホテルの予約 旅行のプランニング 観光、食事、Facebook、LINE 行動 ビジネスマン 仕事 得意先での商談 定期的な訪問、ほぼ決まったプラン ホテルの予約 移動 仕事 ホテル予約サイト ブログ、SUS、旅行雑誌 お店、観光地 メディア ホテル予約サイト グルメサイト ニュースサイト、雑誌
  13. 13. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを構成する要素 空港でのUXとUI UI (接点)コンテキスト ユーザー サービス 行動 UX ! チェック イン ショップ & レストラン 発券
  14. 14. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン 旅行のプランニング ユーザー 親子 コンテクスト リビングでソファにもたれてPC閲覧 行動 自宅のPCを使ってネットで調べる メディア PCのWebサイト サービス ****
  15. 15. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン 空港でチェックイン ユーザー 家族 コンテクスト 混雑した空港の国内線カウンター 行動 手荷物を預けてチェックインする メディア スマートフォン サービス ****
  16. 16. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン 現地にて散策開始 ユーザー 友だちグループ コンテクスト 初めて来た街、土地勘なし 行動 スマホとガイドブックで目的地調査 メディア スマートフォン、ガイドブック サービス ****
  17. 17. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン ホテルに到着 ユーザー 親子 コンテクスト 一日外出して疲れて帰ってきた 行動 ホテルにチェックイン メディア プリントアウトした予約票 スマートフォン サービス ****
  18. 18. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン 郊外の観光地 ユーザー 家族 コンテクスト 天気のいい昼下がり、見知らぬ土地 行動 目当ての観光地に到着 メディア スマートフォン、ガイドブック サービス ****
  19. 19. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXのシーン 夜の街 ユーザー ビジネスマン3人組 コンテクスト 出張先で仕事が終わって一段落 行動 美味しいものを食べに街に出る メディア スマートフォン、観光パンフレット サービス ****
  20. 20. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” ユーザージャーニー
  21. 21. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” ユーザージャーニー
  22. 22. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” ミニワークショップ:UXを理解する デザインを学ぶ環境を支える要素を描き出してみよう (持ち時間90秒) ! ・タッチポイントや人、技術、ビジネス要素など ・箇条書きでもOK、でも関係図の方がより良い
  23. 23. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXの種類 現在進行形の体験だけがUXではない 現在の体験過去の振り返り 未来の予見
  24. 24. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを評価する尺度 UXハニカム
  25. 25. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXの種類 UXをまとめるとこんな感じ UX = コンテキスト × UI・プロダクト (タッチポイント) エモーション サービス × ! チェック イン アクティビティユーザー ×
  26. 26. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXの方程式 (ユーザー)が (ある利用状況)で、 (機能・コンテンツ)を (アクティビティ)した。 その結果、 (ユーザー)が (エモーション)になった。 (親子3人)が (旅先の身知らぬ土地)で、 (スマホアプリ)を (使って、レストランを探)した。 その結果、 (子供)が (美味しいご飯に大喜び)した。
  27. 27. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXをデザインするということ
  28. 28. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXデザインとは ユーザーの体験をデザインする? 何を?どうやって?
  29. 29. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXデザインとは UXデザインの対象とは? UX = コンテキスト × UI・プロダクト (タッチポイント) エモーション デザインの対象 × ! チェック イン アクティビティユーザー ×
  30. 30. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXデザインとは UXデザインの対象とは? UX = コンテキスト × UI・プロダクト (タッチポイント) エモーション サービス × ! チェック イン アクティビティユーザー × 理解の対象
  31. 31. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを理解する:プラグマティックペルソナ ユーザー像を理解する デモグラフィクス、行動特性、価値観、シナリオ Webエンジニア 大学生
  32. 32. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを理解する:ジャーニーマップ ストーリーの プロット アクティビティ コンテクスト コンテンツ キャラクターの 気持ち タッチポイント アクティビティ サブ アクティビティ アクティビティ サブ アクティビティ アクティビティ サブ アクティビティ アクティビティ サブ アクティビティ アクティビティ サブ アクティビティ アクティビティ サブ アクティビティ 喜怒哀楽 感想 喜怒哀楽 感想 喜怒哀楽 感想 喜怒哀楽 感想 喜怒哀楽 感想 喜怒哀楽 感想 デバイス タッチポイント コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ 冒険への きっかけ はじまりと 試練 冒険への出発 冒険 冒険からの 帰還 サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ サブ アクティビティ デバイス タッチポイント デバイス タッチポイント デバイス タッチポイント デバイス タッチポイント デバイス タッチポイント 利用状況 利用状況 利用状況 利用状況 利用状況 利用状況
  33. 33. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを理解する&デザインする:ジャーニーマップ ストーリーの プロット アクティビティ コンテクスト コンテンツ キャラクターの 気持ち タッチポイント コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ 旅への きっかけ はじまりと 試練 ○○へ出発 冒険 ○○からの 帰還 PC モバイル PC モバイル PC モバイル モバイル 平常心 ワクワクする すぐ予約したい なかなか 見つからない ついに本番 余韻を楽しむ オフィス 通勤時間 オフィス 通勤時間 通勤時間 自宅 自宅 屋外 屋外 来月の予定を 立てる 友だちと連絡 自分のスケジュー ル確認 ○○を調べる PCを起動する サイト訪問 アプリを 起動する ○○を検索 ○○をみる 予約する ○○を予約 場所・日程確認 ○○する ○○に行く ○○する ○○する ○○終了 ○○を付ける ○○を見返す 次の予定を 考える アプリ起動 デザインアイディア デザインのディテール、利用状況背景となるUXストーリー
  34. 34. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXを理解する UXバックグラウンドストーリー ○○するデザインアイディア デザインのディテール、利用状況 アクティビティ シーン 利用状況 エモーション コンテンツ デザインアイディア! ワイヤフレーム
  35. 35. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXをデザインする:ストーリーボード
  36. 36. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXをデザインする:ストーリー [儀式と試練]その日、会社から帰宅すると、彼は早速ノートPCを開いて、ディスカバ リーを検索して探し出し、訪問しました。 [試練] サイトを立ち上げると、透き通った蒼い海や、以前、雑誌で見たことのある風情 のある城下町、昔懐かしい路面電車の写真などが次々と出てきます。 [試練]祐介はクラシカルな街町並みの中を写真を取りながら散歩するのが好きなので、路 面電車の写真に興味を持ってクリックしてみました。すると、画面にはいろいろな路面電車 の写真に加えて、いい感じの町並みやお店の写真が出てきました。しかも、写真にはコメン トが付けられており、そこを訪れた旅行者のコメントを見ることができます。 [試練]旅行サイトや検索エンジンで「レトロ」とか「城下町」などキーワードを入力して も、想像どおりの写真がでてくるばかりで、あまり興味を引く発見はありませんでした。し かしディスカバリーは違ったのです。写真をクリックする度に新しい発見があり、時間を忘 れるほど写真を見ていました。 心的イメージ 情緒的コンテクスト 記憶コンテクスト 物理的コンテクスト
  37. 37. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” UXは主観的なもの デザイナーとユーザーにギャップがなければハッピー ○○○○ ○○○○
  38. 38. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” デザインを評価する デザイナーが思ったように、ユーザーは使ってくれない。。 ○○○○ △×※〜〜
  39. 39. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 人間中心設計 ユーザー視点でものをつくるための4つのステップ ユーザー要件 の特定 設計 (プロトタイピング) 設計案の 評価 利用状況の 理解 HCDプロセスを適用すると決めたら…
  40. 40. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” リーンスタートアップ 無駄を削ぎ落とした製品開発のための仮説検証サイクル MEASURE (評価する) LEARN (学ぶ) BUILD (つくる)
  41. 41. Build Prototypes !!
  42. 42. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 本日のワークショップ
  43. 43. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” タイムテーブル 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 プレゼンテーション
  44. 44. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 今日のテーマ 今回は「旅行」をテーマに、モバイルアプリのアイディアを検討し、ペーパープロトタイピング の手法を使ってアイディアをかたちにします。ペルソナやシナリオ、ジャーニーマップといった UXデザインのツールを使うことによって、ユーザー視点で、モバイル端末の特性や、モバイル ならではの利用状況を考えながら、「旅」が楽しくなる体験をデザインしていきましょう。 「旅行を楽しくする」アプリ
  45. 45. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” Persona & Story  佐々木さんは大学時代から友達と旅行に行くのが一番の趣味。学生時代には、自由に時間が使えるのは今しかないと思い、夏休みや 春休みに海外・国内含め何度も友人と旅行に行った。今まで行ったのは、海外では、バリ島、ベトナム、香港、ニューヨーク、パリな ど。国内では、北海道、沖縄、京都、広島、三重、金沢、屋久島など主要なスポットには行っている。大学卒業前には、2週間かけて ヨーロッパ一周もしたことがある。社会人になってからは回数や期間は減ったが、年に2回は旅行に行く。リスクは取りたくないので、 旅行はパックか、現地にいる友人、もしくは頼りになる友人と一緒に行く。行くメンバーはだいたいいつも一緒で女友達と2、3人で 行く。じぶんがやりたいことを主張するよりは、友人がやりたいということを一緒に楽しむ方が多い。旅行先で写真に写るのは好きで、 ポーズや背景など色々工夫して旅行先ならではの写真を撮ることを楽しんでいる。旅行した後は、写真をFacebookにアップして友達 に共有している。旅行の計画については友人に任せることが多く、それで時々旅行先で喧嘩することもある。 恋愛はちょっと苦手。 Context(行動特性) Implication(価値)佐々木有美さん(29) •東京都文京区在住 •事務 •品川の商社勤務 •独身・実家暮らし •趣味は旅行と食べること •9時5時とはいかないが、比較的時間 に余裕のある生活。 •帰宅は毎日20時くらいだが、期末前は 22時くらいになることもある。 •Androidユーザー。 •Xperiaを購入したが、操作がちょっと 難しいと感じている。 •年に2回は友人と旅行をする。 •国内、海外も含め旅行が好き。 •旅行先で写真を撮ったり、美味しいも のを食べたりするのが一番の趣味。 •ダイビングの免許を持っている。 ・仕事上、目上の人には基本的に従う。 ・チームで仕事するのが好き。 •安定志向。リスクはなるべくとりたく ない堅実派。 ・人に迷惑をかけない範囲で常識を持っ て楽しみたい。 •同性の友人を大切にしている。 ・やりたいことを主張するより他の人が やりたいことにつき合う方が安心する。 ・普段の買い物や食事の場所は、気に 入ったものや信頼できるものを長く使う 方が効率がいいと思っている。 Story
  46. 46. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” Key Experience 旅先、あるいは帰ってきてからの 行動が楽しくなるようなモバイルアプリ (コンシェルジュサービスは×)
  47. 47. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” Design Procedure ユーザーについて 理解&共感する アイディアを 具体的なかたちにする 旅行が楽しくなる アイディアを考える ペルソナ シナリオ ジャーニーマップ 課題分析 アイディエーション ワイヤフレーム ストーリーボード 評価・検証
  48. 48. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” Designing with Journey Map ステージ シナリオ コンテクスト デバイス ワイヤ フレーム 旅行に行こう と決める 旅行の計画を 立てる ホテルや 電車を予約する 旅行に行く 現地で行動する 旅行から帰ってくる PC(予約) モバイル(連絡用) モバイル(旅行中) 友だちと カフェでおしゃべり 仕事中に自分のスマホで イベント申し込み PC(自宅) モバイル(外出先) 空いた時間に ネット検索 友だちに やってもらう モバイル(SNSに投稿) 2. 課題分析と アイディエーション 1. ペルソナを分析して シナリオをつくる 3. 具体的なアイディアを かたちにする
  49. 49. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルUXのデザインTIPS
  50. 50. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルのコンテクスト モバイル=「いつでも、どこからでも」使える
  51. 51. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルのコンテクスト チャレンジングな状況でも気にしない
  52. 52. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルならではの体験 PCとモバイルにおける差異 スクリーンサイズ 利用状況 注意のレベル ネットワークへのアクセス 大きい 限定的 高い 快適 小さい ばらばら 断片的 限定的
  53. 53. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルならではの体験 既存のメディア(PC)の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam モバイルならではのユニークな体験
  54. 54. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” 注意散漫・行動が遮られる 誰もに覚えがある「マルチタスク」
  55. 55. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” コンテクストがトリガになる PCでは現在地を自分で入力しなければいけない モバイルでは、現在地の情報を自然と利用することができる マップのエクスペリエンス
  56. 56. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” デバイスエコシステム モバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している PC中心のエコシステムに変化が起きた
  57. 57. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” デバイスエコシステム (c)amazon
  58. 58. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルUXのデザインパターン クラウドとアプリを基本単位としてデザインする
  59. 59. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルUXのデザインパターン コンテンツを観る データを操作する 日記、メモを共有する ニュースを共有する クラウドにあるデータをモバイル端末で利用する
  60. 60. プロダクトデザイン学科 春季ワークショップ ”UXデザインワークショップ - 体験のプロトタイピング” モバイルUXのデザインパターン スマホの画面は狭い&通信環境が良くない場合がある

×