大規模災害発生時における行動を
UXデザインプロセスで読み解く

2013年8月30日
株式会社 ディーディーエス
システム部
原 孝治

ＵＸデザインプロセス

ビジネス
ターゲット
ユーザーの体験をデザイン
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

2

ＵＸデザインプロセス

UXデザインって何？

UIデザインと何が違うの？

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

3

ＵＸデザインプロセス

ユーザーモデリング
ストーリーボードスケッチ
プロトタイプCopyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

4

ユーザーモデリング 行動変数の抽出

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

5ユーザーモデリング ペルソナ

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

6

ユーザーモデリング ペルソナ
名前：電脳 太郎
性別：男性
年齢：40歳
職業：IT企業のプロジェクトマネージャー
家族：妻38歳(リカ)/長男小3(翔)/長女小1(凛)潜在ニーズ ：子どもとのコミュニケーション
遠距離通勤：1.5時間（電車）その他•持ち家•電車、駅と自宅・会社は徒歩10分•混雑を避けたいが、遅刻はしたくない•時間に余裕をもちたい•情報を能動的に取得する•スマホアプリを使いこなす•通勤時間を有効活用したい（電車の中は自由）•天気が気になる（雨を避けたい）
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

7

ＵＸデザインプロセス

ユーザーモデリング
ストーリーボードスケッチ
プロトタイプCopyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

8

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

9

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

10

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

11

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

12

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

13

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

14

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

15

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

16

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

17

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

18

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

19ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

20

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

21

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

22

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

23

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

24

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

25

ストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

26

ストーリーボード

UXデザインって何？

UIデザインと何が違うの？
これをデザインします！
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

27

機能抽出
利用者の視点に立って、ユーザーがどんな情報を欲しているのか、ユーザーのどんな機能を欲しているのか
シーン
情報機能
状況（生きて）
自分の場所（家族など特定の人の）安否状況（家族など特定の人の）場所
待ち合わせ場所
待ち合わせ場所までの経路/移動手段
待ち合わせ場所までの時間
快適性/安全性（人の流れ、被災状況）
途中に食料/飲料/休憩/タクシー乗車できる場所
待ち合わせ場 目的地までの方向
その方向に特定の範囲にあるチェックポイント所まで

地震直後（家族など特定の人の）安否状況（家族など特定の人の）場所

外苑到着

どの方向に待ち合わせする人がいるか

タクシー乗車 タクシーが乗れる（通っている/待っている）場所
小学校/
自宅到着

安否状況登録（PushとPusll）
安否確認機能・特定の人の安否状況が変わったら、Pushで通知
待ち合わせ場所までの経路探索
・安全な場所/経路が分かる
・非難場所が分かる
待ち合わせ場所を設定し、その場所を共有することができる
ナビゲーション機能・おおまかな方向・ランドマークや必要なモノ（飲食物やトイレ）などのチェックポイント（歩くス
ピード×時間の範囲にある）の場所/方角
ずっとディスプレイを見なくてもナビゲーションされる
ストレス状態での使い勝手
バッテリー節約を節約する仕組み
GPSを切る、３G受信切る、ディスプレイ切る、通話しない(Cメールを返すなど、機内モードにする）
安否確認機能・特定の人の安否状況が変わったら、Pushで通知
・特定の人への安否状況の問い合わせ・どれくらいの時間で目的地に到着するか（自動安否通知機能は未定、リカさん視点が必要）
赤い糸モード（ヒトに逢うための近接モード）
・ヒトの方向（他のヒトが）タクシーに乗れた場所を検索機能

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

ストーリーボードの表現方法

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

29一般的なストーリーボード
震度5の地震。かなり揺れます。

揺れる～取り敢えず机の下に隠れよう一般的なストーリーボード

ストーリー（文章）順番に読み進める必要がある
ストーリーボード
一コマでは状況を把握しにくい
Modal
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

31

マンガ表現によるストーリーボード

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

32

マンガ表現によるストーリーボード
会社にいる
男性
スーツを着ている→勤務中

主人公の性別、年齢、職業、場面の状態を推定できる一つの場面だけ取り出しても、状況が把握できる
Modeless
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

33

マンガ表現によるストーリーボード

文脈の表現のため、背景などはコマごとに必要コストがかかる

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

34

マンガ表現によるストーリーボード

コストCopyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

35

マンガ表現によるストーリーボード

文脈の表現のため、背景などはコマごとに必要コストがかかるマンガ作成のアプリケーション（コミＰｏ！）を使用
一般的なストーリーボードとのコスト差を軽減

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

36

マンガ表現によるストーリーボード

せっかくペルソナを作っても、ストーリーの段階でユースケース図のように棒人間化してしまいがちですが、マンガにすると血が通います。

ストーリーボードでは、画面設計をしないのが重要ですが、マンガで利用シーンを考えると、ユーザーが経験することを表現しているのが明確になりました。
「UXをデザインする」という説明しにくいことを、過不足なく表現できるのではないかと思います。
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

37

マンガ表現によるストーリーボード

日本で開発された「マンガシーケンサー」という技術を使ってUXデザインプロセス自体を改善した事例
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

38

ＵＸデザインプロセス

ユーザーモデリング
ストーリーボードスケッチ
プロトタイプCopyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

39

ありがとうございました

Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

40