1.
仮説で進めるUXデザイン
Hypothesis-based Design within UX Design
坂本貴史
UX Sapporo x CSS Nite #ux_sapporo
by Stuart Rankin
2014.9.27

2.
IAとUX
UXデザインのキーファクター
ケーススタディ
カスタマージャーニーマップ

3.
グラフィックデザイナー出身
ネットイヤーグループ参画
HCD-Net 評議員
OpenUM プロジェクト発足
寄稿・講演多数
著書『IAシンキング』ほか
坂本貴史
@bookslope

4.
具現化
表層
骨格
構造
要件
戦略
ビジュアルデザイン
ナビゲーション
デザイン
インターフェース
デザイン
情報デザイン
インタラクション
デザイン
機能仕様
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの目的

5.
by Sgkh

6.
情報は少ないほどきちんと処理される
読むことと理解することは同じではない
一度に覚えられるのは4つだけ
目標に近づくほど「ヤル気」が出る
データより物語のほうが説得力がある

7.
IA thinking to make the world a better place
IA思考を通じて、世界をより良くする
World IA Day 2014
The Information Architecture Institute

8.
koboを開封
YouTube

9.
いい製品でも、いい体験とは限らない

10.
What are key success factors?
サービスデザインタイムラインデザインパターン

11.
サービスデザイン
プロダクト単体だけではなく、プロダクトを利用してもらうための
仕掛けや仕組みを考える

12.
プロダクトデザインサービスデザイン
広告商品
ウェブサイト
CMS
サービスブループリント
カスタマージャーニーマップ
ステークホルダーマップ

13.
サービスデザインアクティビティデザインインタラクションデザイン
サービス自体の価値定義サービスを実現のための
シナリオ定義
インターフェースの検討
戦略策定UXジャーニーマッププロトタイピング

14.
Starbucks Experience Map

15.
ニーズや目的対応サービス
心地良く過ごしたいアロマの香り
どこでも仕事がしたい
支払いを手早くしたい
Wi-Fi 環境
クレジットカード支払い

16.
タイムライン
時間軸を見極めることで、利用者との接点を俯瞰する

17.
87.2% 4.0%
外出先や移動中での利用
D2C, マルチデバイス利用動向調査, 2013/05

18.
81.7%
8.5%
情報をじっくり調べる時
D2C, マルチデバイス利用動向調査, 2013/05

19.
iPhoneの利用時間帯
Pocket Trend, 2011
早朝通勤
帰宅時就寝
自宅

20.
© UX INSPIRATION!
http://uxxinspiration.com/2014/02/ux-timeline/

21.
First Time User Experiences
http://firsttimeux.tumblr.com/

22.
デザインパターン
さまざまなデザインパターンを知ることで表現の幅が広がります

23.
画面の小ささ利用環境の違い
PCとは異なる、2つの前提

24.
モバイルデザインのヒント
必要十分な表現に留める
ちら見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じ事ができる
時間軸を使って情報を整理する

25.
ジェスチャによる操作
タップドラッグ
ボタンを押す動作やアイテ
ムの選択などで頻繁に用い
られます
画面および要素内を垂直方
向や水平方向にスクロール
する際に用いられます
フリック/スワイプ
複数の画面や要素をまたが
る場合のページ送りなどに
用いられます

26.
はじめに操作方法がわからないため、マニュアルや説
明を読む必要がある。
メニューが常時表示されないため、記憶だけを頼りに
する必要がある。
動作の違いで結果が異なる場合、フィードバックが得ら
れにくい(動かす速さの違いなど)。
コンテンツに集中しているため、画面上のアラートが見
落とされがちになる。

27.
モバイルにおけるデザインパターン
デバイスエコシステムIAパターン
デバイス単位（PCとタブレットと
モバイルなど）の組み合わせにより、
利用順序や使い方を定義します
コンテンツ単位（画面やファイル）
の組み合わせにより、画面フローや
コンテンツの表示順序を定義します
UIパターン
コンポーネント単位の組み合わせ
により、表示スタイルや表示方法（振
る舞い）などを定義します

28.
First Time User Experiences
http://firsttimeux.tumblr.com/

29.
UX archive
http://uxarchive.com/

30.
ユーザビリティテストで問題点を抽出し修正すること (治療)
に依存しすぎるのではなく、
設計/開発の段階でユーザビリティ上の問題を
あらかじめ潰しておくこと (予防) が大事
Usability testing myths
Rolf Molich

31.
Case Study
ペルソナプロトタイピング

32.
ペルソナ開発
インタビューを経て精緻化したペルソナとシナリオ

33.
プロトタイピング
シナリオに沿った動きをプロトタイピング

34.
Axure: Interactive Wireframe Software & Mockup Tool
http://www.axure.com/

35.
Justinmind: Interactive wireframes for web and mobile
http://www.justinmind.com/

36.
POP - Prototyping on Paper | Mobile App Prototyping Made Easy
https://popapp.in/

37.
Axure: Interactive Wireframe Software & Mockup Tool
http://www.axure.com/

38.
Flinto ‒ iPhone, iPad and Android Prototyping
https://www.flinto.com/

39.
Prott - Rapid prototyping tool. Now gets an app.
https://prottapp.com/

40.
Placeit: Free Screenshot App Marketing Tool & Templates
https://placeit.net/

41.
コンセプトが大事、というと抽象的すぎるけれど、
「ユーザーにどのようなストーリーを体験してほしいか」と
言えば想像がしやすいですね。
IAシンキング
Takashi Sakamoto

42.
Customer Journey Mapping
アプローチフォーマット

43.
アプローチ
定性データと定量データによる視点の違い

44.
定量
カスタマージャーニー
分析

45.
Webサイト分析カスタマージャーニー分析
Webサイト
セッション単位
流入フロー・サイト構造
顧客接点全体
ユーザー単位
ユーザー行動プロセス・LTV

46.
定性
UXマップ

47.
AS IS TO BE
現状把握
課題にフォーカス
組織横断の課題把握
企画（ビジョン）
ソリューション
クロスチャンネルの提案

48.
要求事項を整理するためのツール
ユーザー行動の可視化
顧客接点の俯瞰
関係者と共有
調査などの準備が必要
課題がフォーカスできない
文書を作ることが目的

49.
フォーマット
ケーススタディにみるフォーマットの違い

50.
ケーススタディ
ユーザーフローとシステムフロー
オンラインとオフライン
アクティビティシナリオ

51.
ステージ発見登録利用（提供） 対応
感情曲線
患者
医者
フロー

52.
ステージ利用前利用開始時初回利用時継続利用時
アクション
コンテンツ機
能
顧客の課題
ビジネスの課
題
改善点

53.
朝（午前中） 昼（日中） 晩（夕方～深夜）
ステージ
ストーリー
感情曲線
デバイス環境
要求事項の整理

54.
ワークショップ
3ステップの横軸（利用前・中・後）
行動と感情（思考・心情）
課題とソリューション

55.
参加前
アクション
感情
感情曲線
参加中参加後

56.
利用前
アクション
感情
感情曲線
利用中利用後

57.
ジャーニーマップに、網羅性は重要ではない。
3つを抽出することで、新たな課題を見いだすことができる。
クロスチャンネルタッチポイントマルチスクリーン
Hypothesis-based Design within UX Design
Takashi Sakamoto

58.
What this person do you?
ミニワークショップ

59.
What this person do you?
GoPro

60.
演習
行動の順番を、横軸に整理してください
動画を見たうえで、ユーザーの行動ステップを横軸（ステージ）に整理してください。
あらかじめ4列用意しているため、行動を4つに分けて名称をつけてください。
行動と感情を書いてください
ステージごとの行動（～をする）を行動欄に記入し、そのとき「この人が思うであろ
う」気持ちや心情・思考について感情欄に記入してください。
課題を見つけ、解決策を書いてください
行動欄および感情欄から、ここは解決すべき課題だと感じた箇所に印をつけて、その解決策
を最下部の解決欄に記入してください。
STEP 1
STEP 2
STEP 3
5 min
5 min
5 min

61.
Thinking…
ミニワークショップ
5 min

62.
WORKSHEET UX Sapporo x CSS Nite 2014.09.27
ステージ
行動
感情
感情
曲線
解決案

63.
WORKSHEET UX Sapporo x CSS Nite 2014.09.27
ステージ
行動
感情
感情
曲線
解決案
来店商品を探す会計退店
・商品棚に行き、目的の
商品を探す
・商品を持ち、レジに向
かう
・コンビニに入る
・商品を渡し、財布を開
ける
・小銭を取り出し、お金
を渡し、商品を受取る
・商品を持って、店の外
に出る
・喉が乾いたので、コン
・ドリンクは奥のほうに
・小銭出すのが面倒… ・搬出する人が邪魔で出
ビニで水でも買おうあったはず…
にくい…
・よく売れるドリンク類
は入り口付近に陳列する
・近くのコンビニの場所
を知らせてくれる
・スイカなどの電子マネー
での支払いができる
・搬入・搬出口を一般客
とは別にする

64.
カスタマージャーニーマップを作ることは、ユーザー行動を基点
にしたシナリオを俯瞰することです。
そのため、自分の担当領域を大きく越えたところの課題を
発見することにもつながります。
Hypothesis-based Design within UX Design
Takashi Sakamoto

65.
IAとUX
UXデザインのキーファクター
ケーススタディ
カスタマージャーニーマップ

66.
カスタマージャーニーマップを使うことで、
顧客がどのようにサービスを利用するか仮説立て、
チャネル横断・組織横断の課題を解決する取り組み
Hypothesis-based Design within UX Design
Takashi Sakamoto

67.
by Stuart Rankin
ありがとうございました
Thank you!
Hypothesis-based Design within UX Design
Takashi Sakamoto
@bookslope
bookslope@gmail.com