2013 © Concent, Inc.

ユーザエクスペリエンス・デザイン・ガイド JTF 2013: July Tech Festa

2013.07.14 坂田 一倫（@sprmari0） 株式会社コンセント

2013 © Concent, Inc.

PAGE: 1

自己紹介

sprmari0 kazumichisakata kazumichi.sakata[at]…

インタビュー記事： 【UX設計の失敗学】今年、「最高のユーザー体験」を作りたいと考えるディベロッパーが知るべき 3つのこと

坂田 一倫（さかた・かずみち） 株式会社コンセント ユーザエクスペリエンスアーキテクト

HCD-Net 認定 人間中心設計専門家／Certified Scrum Product Owner

前職：某インターネットメディア企業にてUXデザイナーとして新規事業の

立ち上げや20サービス以上の大規模サイトリニューアルプロジェクトを担当。

ユーザエクスペリエンス設計業務を担当する人が集うコミュニティ

「ShibuyaUX」主宰、「Lean Startup Machine Tokyo」共同オーガナイザ。

2013 © Concent, Inc.

PAGE: 2

世界で一番売れているカメラは？

2013 © Concent, Inc.

PAGE: 3

2013 © Concent, Inc.

PAGE: 4

カメラを セットする

シャッターを押す

撮影した写真を確認する

？？？

これまでの提供価値

2013 © Concent, Inc.

PAGE: 5

カメラを セットする

シャッターを押す

撮影した写真を確認する

カメラを運ぶ 写真を 加工する

写真を 記録・共有

する

新しい提供価値

2013 © Concent, Inc.

PAGE: 6

© Ursus Wherli

「モノ」から「コト」の デザインへ

2013 © Concent, Inc.

PAGE: 7

「問題発見」から「問題解決」へ

2013 © Concent, Inc.

PAGE: 8

「製品中心」から「顧客中心」へ

2013 © Concent, Inc.

PAGE: 9

ユーザエクスペリエンス（UX）

2013 © Concent, Inc.

PAGE: 10

″ユーザと「会社、会社のサービス、商品」の相互作用の

全ての側面を含む。第一の要件は、混乱や面倒なしで顧客の

的確なニーズを満たす事。第二の要件は、所有する楽しさ、

使用する楽しさを生み出す「簡潔さと優雅さ」である。″

– ドナルド・ノーマン

2013 © Concent, Inc.

PAGE: 11

© Google Glass

メディア、デバイス…の多重化

2013 © Concent, Inc.

PAGE: 12

ハイコンテキストなライフスタイル

2013 © Concent, Inc.

PAGE: 13

NFL Mobile Commercial

2013 © Concent, Inc.

PAGE: 14

コンテンツやサービス

モバイル

アプリ

タブレット

紙

メール

ブログ

SNS

ウェブ サイト

© “Adapting Ourselves to Adaptive Content,” Karen McGrane

様々な利用シーンの想定と設計

2013 © Concent, Inc.

PAGE: 15

© “User Requirements in the 21st Century,” William Hudson

誰が、いつ、どこで、どのように、なぜ？

2013 © Concent, Inc.

PAGE: 16

人間中心設計（HCD）

2013 © Concent, Inc.

PAGE: 17

2010年：ISO 92401-210の制定

UXの用語が定義され、HCDによる設計が達成すべき目標とし

て位置づけられる。

2013 © Concent, Inc.

PAGE: 18

利用と状況の把握と明示 （ユーザの要求を知る）

人間中心設計の 必要性の特定

システムが特定のユーザ及び組織の要求事項を満足

ユーザと組織の要求事項の明示 （ユーザ要求をシステム要求に変換する）

設計による解決策の作成 （デザインや設計案を作り込む）

要求事項に対する設計の評価 （デザインや設計案の妥当性を評価する）

© ISO 9241-210

人間中心設計プロセス

2013 © Concent, Inc.

PAGE: 19

人間中心設計プロセス

2013 © Concent, Inc.

PAGE: 20

© “User Experience Journey Map,” Kazumichi Sakata

シナリオのビジュアライゼーション（可視化）

2013 © Concent, Inc.

PAGE: 21

© “User Experience Journey Map,” Kazumichi Sakata

When（いつ？）

Where（どこで？） How（どのように？）

What（なにが？）

Why（なぜ？）

問題解決の糸口

2013 © Concent, Inc.

PAGE: 22

提供価値の定義

Who(誰) needs What(何を)

because Why(なぜ)

2013 © Concent, Inc.

PAGE: 23

人間中心設計手法の導入

2013 © Concent, Inc.

PAGE: 24

ユーザ調査

2013 © Concent, Inc.

PAGE: 25

ユーザ調査： ユーザの行動や心理を把握する調査

2013 © Concent, Inc.

PAGE: 26

© “Persona,” Jason Travis

ペルソナ

2013 © Concent, Inc.

PAGE: 27

ペルソナ： 調査を基に生成された架空の顧客像

名前と写真

どんな表情をしていますか？名前は？

特徴

他人と区別される対象ペルソナの特徴は？

欲求と不満

何を求めていますか？何を不満と感じますか？

2013 © Concent, Inc.

PAGE: 28

© “Lean ways to test your new business idea,” David Travis

ストーリーボード

2013 © Concent, Inc.

PAGE: 29

ストーリーボード： ペルソナの利用文脈の可視化

時間

いつ、サービスやプロダクトを利用していますか？

場所

どこでサービスやプロダクトを利用していますか？

ステークホルダー

ストーリーの中で誰が関係してきますか？

2013 © Concent, Inc.

PAGE: 30

ユーザビリティテスト

2013 © Concent, Inc.

PAGE: 31

ユーザビリティテスト： 使いやすさを評価するテスト

シナリオの評価

想定したシナリオの妥当性

サイト構造の評価

導線の有効度合い、コンテンツニーズの評価

画面構成の評価

レイアウトやラベル、リンク位置の評価

2013 © Concent, Inc.

PAGE: 32

開発プロセスへの導入

2013 © Concent, Inc.

PAGE: 33

ユーザビリティテスト ユーザビリティテスト

ビジュアル・デザイン、HTML制作

アプリケーション開発 Better

Best

ビジュアル・デザイン、HTML制作

アプリケーション開発

ユーザビリティテスト ユーザビリティテスト

ユーザ定義 利用文脈定義

開発プロセスへの導入： ユーザビリティ向上のための視点を取り入れる

フィード バック

フィード バック

2013 © Concent, Inc.

PAGE: 34

まとめ

2013 © Concent, Inc.

PAGE: 35

ユーザ

ウェブ・ デザイン

エンジニア

PR

営業

マーケティング

部署A

広告

部署C

部署B

プロデューサー

物流

組織・領域横断的なユーザ中心アプローチ

2013 © Concent, Inc.

PAGE: 36

どうやって、つくるか？

なにを、つくるか？

なぜ、つくるか？

誰のために、つくるか？

HCDの思考回路： Design for Meaning, Design for User

2013 © Concent, Inc.

PAGE: 37

提供価値の定義

Who(誰) needs What(何を)

because Why(なぜ)

2013 © Concent, Inc.

PAGE: 38