UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015

© Sociomedia, Inc. 1



Google


Product Service

GE

Sizzler


Function Experience

AppleApple

© Sociomedia, Inc.

A History of UX

6

© Sociomedia, Inc.

1430: Leonardo da Vinci’s “kitchen nightmare”A History of UX

• ディナーパーティ準備を支援

• 料理を運ぶベルトコンベヤー

• 巨大なオーブン

• スプリンクラーシステム

• 食べられる彫刻

7

http://boxesandarrows.com/leonardos-kitchen-nightmare/

© Sociomedia, Inc.

1911: Taylorism and the Industrial RevolutionA History of UX

• フレデリック・テイラーが、時間と作

業の研究および産業効率向上を図るた

めの方法を著した “Principles of

Scientific Management（科学的管理法

の原理）” を出版。

8

https://www.sociomedia.co.jp/6370

© Sociomedia, Inc.

1936: Frigidaire's UsabilityA History of UX

• Palm Beach Post 紙が新型

Frigidaire 冷蔵庫の広告を掲載。

ユーザビリティをその特徴の一つ

として強調した。

9

imageshack.comhttps://www.sociomedia.co.jp/6370

© Sociomedia, Inc.

1947: Bell Labs' User Preference DepartmentA History of UX

• ベル研究所のジョン・カーリ

ンが新しく創設されたユー

ザー・プリファレンス部（後に

「ヒューマン・ファクター部」

と名称変更）の責任者に任命

される。ここで彼は、現在も

なお使用されている現代の数字

式ダイヤルシステムとキーパッ

ドを完成するのに一役買った。

10

nytimes.com Courtesy of Alcatel-Lucent USA

https://www.sociomedia.co.jp/6370

© Sociomedia, Inc.

1955: Dreyfuss’ Designing for PeopleA History of UX

• インダストリアルデザイナー

のヘンリードレイファスが、

"Designing for People" を書

いた。ユーザーにとっての安

全や快適さこそがデザイナー

にとっての成功である、とし

た。

11

http://blog.invisionapp.com/a-brief-history-of-user-experience/

© Sociomedia, Inc.

1966: Disney and the role of joyA History of UX

• 後にディズニーワールドとな

るプロジェクトの初期構想が

発表される。最新のテクノロ

ジーで人々に楽しさを与える

というコンセプトを打ち出し

た。

12


disneydose.com

© Sociomedia, Inc.

1973: PARC and Personal ComputerA History of UX

• XEROX の PARC で Alto が作られ

た。GUI、オブジェクト指向プロ

グラミングなど、現在のパーソナ

ルコンピュータのもととなるコン

セプトが具現化された。

13

ucsc.edu

© Sociomedia, Inc.

1984: Apple Released MacintoshA History of UX

• Apple が "The computer for

the rest of us" のコンセプト

で開発された Macintosh を

発売した。

14

wikipedia.org

© Sociomedia, Inc.

1989-1991: First WWWA History of UX

• ティム・バーナーズ・リー

によって WWW が作られ

た。ネットワークベースで

ハイパーテキストを自由に

扱えるようになった。

15

cern.ch

© Sociomedia, Inc.

1995: Don Norman, the first user experience professionalA History of UX

• 認知科学者のドン・ノーマンが

Apple に入り、"User Experience

Architect" の肩書きを得た。

• 1998年の著書 "The Invisible

Computer" の中で "User

Experience" という言葉を使っ

た。

16

nngroup.com


© Sociomedia, Inc.

1999: People started GooglingA History of UX

• Google がシンプルなUIと優秀な検索能力で評判になる。

17

blogoscoped.com

© Sociomedia, Inc.

2004: Web was updated to 2.0A History of UX

• ティム・オライリーによっ

て Web 2.0 の概念が提唱さ

れる。ウェブをプラット

フォームとして扱う技術や

サービスが発達した。

18

wikipedia.org

© Sociomedia, Inc.

2007: iPhone was unveiledA History of UX

• Apple が iPhone を発表。ヒッ

ト商品となり、パーソナルコン

ピュータのフォームファクター

を変えた。

19

Apple

© Sociomedia, Inc.

2012: UPA to UXPAA History of UX

• Usability Professionals

Association（UPA）が名称を

User Experience Professionals

Association（UxPA）に変更。

20

UXPA


User Experience利用者経験

© Sociomedia, Inc.

The Elements of User Experience - Jesse James Garrett, 2003UX Definition

22

『ウェブ戦略としての「ユーザーエクスペリエンス」』（2005, 毎日コミュニケーションズ）

© Sociomedia, Inc.

User Experience Honeycomb - Peter Morville, 2004 UX Definition

23

"User Experience Design" Semantic Studios

© Sociomedia, Inc.

User Experience White Paper - 2011UX Definition

24

『UX白書』（hcdvalue）

© Sociomedia, Inc.

Nielsen Norman GroupUX Definition

• "企業やサービスや製品とのエンドユーザーのインタラクションのすべて

の側面のこと。典型的なUXにまず必要なことは、顧客のニーズについて

誇張なしに的確に適合させることである。次に、所有や保有をしたくな

るような製品を作るための単純さや簡潔さが必要である。真のUXは、

単に顧客が欲しいというモノを与えたり、チェックリストで検証できる

ような特徴を提供したりすることではなく、それ以上のことである。企

業が高品質のUXを達成するためには、エンジニアリングやマーケティン

グ、グラフィックデザイン、工業デザイン、インターフェースデザイン

などの多様な取り組みを連続的に結合しておくことが必要である。"

25

『人間中心設計の基礎』（近代科学社）

© Sociomedia, Inc.

UPA/UXPAUX Definition

• "ユーザーの全体的な知覚の構成要素

となる製品やサービスや企業とユーザー

とのインタラクションのあらゆる側面

のこと。UXデザインは、レイアウト

や視覚デザイン、テキスト、ブランド、

音響、インタラクションといった要素

を含むインターフェースのあらゆる構

成要素に関係している。"

26


UPA

© Sociomedia, Inc.

ISO 9241-210UX Definition

• "製品、システム、またはサービスの、利用または予期的な利

用の結果である、人の知覚と反応"

27

© Sociomedia, Inc.

様々な定義からうかがえるポイントUX Definition

• 主観性

• 消費者とユーザーを対象とする（つまり製品ライフサイクル

のすべてを包含する長期的レンジのものである）

• 品質特性と感性特性の関与

28


• テクノロジーの活用

© Sociomedia, Inc.

The Sound of UX

29

© Sociomedia, Inc.

併記問題The Sound of UX

30

UI/UX

© Sociomedia, Inc.


31

PC/AT TCP/IP UI/UX

© Sociomedia, Inc.


32

UIUX

© Sociomedia, Inc.


33

HTTP WCAG UIUX

© Sociomedia, Inc.


34

UX/UX

© Sociomedia, Inc.


35

UXUX

© Sociomedia, Inc.

UIの操作性の観点The Sound of UX

• UXとは、UIのこと

• UIと同義。

•それまで良いUIというものを意識的に作ろうと

したことがなかった現場においては、UIをデザ

インするという発想自体がかなり新しい。

•使用例

•「UXのリニューアル」（RFP）

•「UXの全面見直し」（RFP）

•「うちのシステムにもUXを入れないと」

36

© Sociomedia, Inc.


• UXとは、ユーザビリティを考慮した

画面設計のこと

•システムの画面を使い勝手を考慮

して設計すること。

•クライアントからUXを要求された

Sier が使う。

•使用例

•「UX納品：○月○日」（RFP）

•「UXを適用する」（RFP）

37

ワンツーパンチスウェー

ヒートアクション回し蹴り

アクションをひとつ選んでください。

実行

アクションをひとつ選んでください。

スウェー

ワンツーパンチ

回し蹴り

ヒートアクション

© Sociomedia, Inc.


• UXとは、気持ちいい操作感こと

•スクロールのスムーズさとかタッチ入力

の精度をもってUXが優れているなどとい

う。

•トランジション効果やビジュアルフィード

バックなどの小粋なアニメーション。

•使用例

•「このナビゲーションのUXは新しい」

•「最近のタッチパネルはUXがいい」

38

© Sociomedia, Inc.

デザインプロセスの観点The Sound of UX

• UXとは、UCD プロセスのこと

• 観察インタビュー、プロトタイピン

グ、ユーザビリティテストなど、要

するに UCD とか HCD と呼ばれてき

たプロセス。それらを知らなかった

人がUXと言っている。

• 使用例

• 「うちの開発工程にもUXを取り

入れないと」

• 「UXを行うこと」（RFP）

39

http://www.usability.gov/how-to-and-tools/resources/ucd-map.html

© Sociomedia, Inc.

デザインプロセスの観点The Sound of UX

• UXとは、アジャイルにデザインすること

• 主に小規模システムの開発プロセスとして普及したアジャイルのコンセプ

トに共感した（憧れた）デザインチームが、モバイルアプリなどで実践し

はじめている。

• 使用例

• 「アジャイルUX」

• 「デザインスプリント」

40

TRY

CATCH

1TRY

CATCH

2

TRY

CATCH

3

TRY

CATCH

4

© Sociomedia, Inc.

マーケティングの観点The Sound of UX

• UXとは、サービス企画のこと

• ユーザーモデルとかサービスモデルと

か課金モデルとかプロモーション方針

とかを最上流で定義すること。

• 使用例

• 「UIは画面のことで、UXはもっとサー

ビス全体のこと」

• 「うちらもいつかUXやりたいよね」

41

© Sociomedia, Inc.


• UXとは、クロスチャネル／ロングター

ムのサービス設計のこと

•複数の媒体や製品を通じて価値提供

するためのサービスモデリング。

•タッチポイントを時間軸でマッピン

グするのが主な作業。

•使用例

•「UXストーリーボード」

•「UXジャーニーマップ」

42

Adaptive Path

© Sociomedia, Inc.


• UXとは、モノよりコトのこと

• 経験マーケティングや感性デザインといった視点でサービスを検討する。

• モノよりもコトの方が高尚であると考えている。

• 使用例

• 「モノよりコト」

43

© Sociomedia, Inc.


• UXとは、ユーザーがはまる仕組みのこと

• オンボーディング、ソーシャル連携、足あと、既読、

ガチャ、レコメンデーション、つりタイトルなどな

ど。

• ユーザーに行動変化を促すノウハウは Persuasive

Technology と呼ばれていたが、オンラインサービス

の技術と競争が過熱し、広告宣伝活動に変化した。

• すでに運用中のサービスに後付けすることができる

のがこのUX。

• 使用例

• 「うちのサービスにはUXが足りない」

• 「UXが古くなってきた」

44

Angry Birds

© Sociomedia, Inc.


• UXとは、とにかくマーケットインでデザインすること

• 顧客のレビューや行動特性をインプットにして製

品改良を重ね、短期間にビジネス評価を上げる活

動。

• A/B テストや行動経済学を好む。サービスモデル

全体よりも部分最適化。

• 経営層に対して説得力のあるUX。

• 使用例

• 「リーンUX」

• 「カスタマー・エクスペリエンス」

45

https://medium.com/@awojnowski/how-i-hacked-app-store-ratings-for-a-consistently-perfect-5-stars-3de17d40ca1f

© Sociomedia, Inc.

組織スローガンの観点The Sound of UX

• UXとは、デザインを重視する組織活動のこと

•大手メーカーやサービス事業者などの多くが、

組織横断的な方針として、もっとデザイン（操

作性、見栄え、楽しさなど）を重視していこ

うという取り組みを活発化させている。

•使用例

• 「デザイン思考でUXに取り組みます」

•「エクスペリエンスセンター」

•「デザイン統括本部」

•「開発1部UX課」

46

© Sociomedia, Inc.

利用者体験UX

47

X-test

X-map X-method

X-bility

X-researchX-bility

X-bility

X-design

X-analysis

X-design

X-bility

UX?

© Sociomedia, Inc.

利用者体験UX

48

Artifact

UXDesign

Human

Internet

UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015