[UX]はやめようというお話をしました。

1. 「UX」は投げ捨てろ！
蜜葉 優

2. • H.N. :蜜葉 優 [@mitsuba yu]
• UX Designer / Interaction Developer
• M+ 2p thin/lightがすき
• Microsoft MVP for
Windows Platform Development
• 最近はWPFとUnityのお仕事
• Keynoteの表紙はいつも自分で撮影
• http://c-mitsuba.hatenablog.com
profile

3. • 高校
• 文科省ICTスクールで3D
• 大学
• 株式会社ソフトディバイスでWeb開発とデザイン
• 株式会社フェンリルでストアアプリ開発
• IIJでなんかネットワーク
• フリーランスでデザインと開発
• XAML,Unity,Processing,Metasequoia,Ai,Ps etc..
profile

4. • 書籍
• Windows 8 UI/UXデザイン入門
• iOSフラットデザインの作法
• 嗜好
• カメラ、ビリヤード、スノーボード、釣り
• ウイスキー、ワイン
profile

5. agenda
• UXって？
• [UX]をやめる理由
• UXのいろいろな定義と解釈
• 蜜葉的UX
• 使いやすいUIって？
• coloris
• まとめ

6. 今日はおんな
じことを何度
もいいます。

7. なんか感じ取って
脱[UX]してもらえ
ればうれしいです

8. UXって？

9. 人々がシステムを利用する中で
得られる経験

10. と、ざっくりなら言えますが、きちんと
理解、説明するとなると難しいのがUX

11. 「アプリのUXをデザインしました。」
「サービスのUXが向上しました。」
「使いやすいUXに変更しました。」
「UXを検証してレイアウトしました。」

12. 「アプリの
「サービスの
「使
「UX
わけがわからないよ！！！！

13. などなど、
こんなふうに「UX」なんてものに頼っていると、
よいアプリ、よいデザインなんて実現しません。
[UX]

14. でもUXってなんか
いま大事で必要な
ものらしい。

15. では、なにをどうして
どう考えればいいのか。
そんな蜜葉的プロセスと
デザイン思考をご紹介します。

16. 一番
言いたい
ことは

17. ?そのUXってなんなん

18. 「アプリのUXをデザインしました。」
「サービスのUXが向上しました。」
「使いやすいUXに変更しました。」
「UXを検証してレイアウトしました。」

19. 「UX」は投げ捨てろ！
蜜葉 優

20. UXは投げ捨てろ！
=
[UX]なんて言葉に頼らずに、
意図しているデザインを説明
できるようになろう

21. UXの甘い罠
• [UX]っていう言葉が流行ってる
• [UX]っていうとなんかかっこいい
• とりあえずデザインとかユーザーの話をする
なら[UX]![UX]!って言っておけばいい。

22. UXの甘い罠
• [UX]っていう言葉が流行ってる
• [UX]っていうとなんかかっこいい
• とりあえずデザインとかユーザーの話をする
なら[UX]![UX]!って言っておけばいい。
だいたいあってる

23. UXの甘い罠
• [UX]っていう言葉が流行ってる
=> 一昔前の[クラウド]
• [UX]っていうとなんかかっこいい
=> 響きがかっこいい?
• とりあえずデザインとかユーザーの話をする
なら[UX]![UX]!って言っておけばいい。
=> あってる！

24. UXの甘い罠
• とりあえずデザインとかユーザーの話をする
なら[UX]![UX]!って言っておけばいい。
=> あってる！ => から困る！

25. 例えば
• 「プログラミングのvarっていつ使うの？」
「え、いっつもつかうよね？」
「でもvar使うと型がわかんないよね？」
「型？なんの話してんの？」

26. 例えば
• 「プログラミングのvarっていつ使うの？」
「え、いっつもつかうよね？」
「でもvar使うと型がわかんないよね？」
「型？なんの話してんの？」
• 「え、C#よね？」
「あれ、JSじゃないの？」

27. プログラミング言語
AAABAPABCABCLActionScriptActiveBasicAdaAdvanced Boolean
ExpressionLanguageAgenaAHDLALGOLAliceashAPLAppleScriptasAtomAutoItAWKBBB
ashBASICBCPLBefungeBF-BASIC'nBioeraBLISSBluespecBooBrainCrashBrainfuck
CC#C++C@CALCamlCantataCAP-
XCASLCecilCFScriptCgChapelChefCHILLClipperClojureCLUCo-array Fortran
COBOLCoffeeScriptColdFusionCommon LispComponent PascalConcurrent
CleanConcurrent PrologConstraint Handling RulesCPLcshCurlCurry
CωDDartDelphiDylanECMAScriptEiffelElixirEnterprise Generation Language
ErlangEscapadeEsterelEuclidEuphoriaF#FactorFalse
FantomFeriteFiclFlavorsFlowDesignerForth
FORTRANFortressGLSLGoGroovyGuarded Horn ClausesHAL/S
Hardware Join JavaHaskellHaxeHDCamlHLASMHLSLHMLHOLON
HSPHQ9+HQ9F+HydraHyperTalkIconIDIDLInformInScriptINTERCAL

28. 言語いっぱい

29. 同じようにUXを
構成する要素も
いっぱいあります。

30. 一体なんの
話してんの？

31. 実例
http://crowdworks.jp/
public/jobs/190430

37. 画面デザインの改善
こそがUXの改善だ！
（キリッ

38. 画面デザインは
UXなのか

39. 画面デザイン
• UIレイアウト
• プラットフォームにあわせて？
• 人にあわせて？
• スタイル
• プラットフォームにあわせて？
• フラットデザイン？
• 主婦向けに手帳っぽく？

40. 何を求められてるか
わからない
全部！っていうと、
正直「は？」ってなる

41. ふわっとUX

42. ?そのUXってなんなん

43. UXは何で
できているの?

44. • 1つの定義で全てのUXを言い表せない
• UXは、現象、研究分野、実践の３つに分けられる
• 現象：UXとは、UXの状況と他の因果関係
• 研究：UXの手法や評価関数の開発
• 実践：UXを可能にするデザイン
• 個人的にはUXと時間軸に重きを置いてる印象
• それを使う前、使っている時、やめた時、もう一
度始めた時、全体として、それぞれの体験に着目
UX白書

45. UXの要素
=>
UX is not UI
UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are
whole jobs, some whole careers; others are tactical roles we all move in and out of.
What so many UX designers would like you to remember is that UX is not just UI design.
Field research
Face to face interviewing
Creation of user tests
Gathering and organizing statistics
Creating personas
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copywriting
Presenting and speaking
Working tightly with programmers
Brainstorm coordination
Design culture evangelism
Field research
Face to face interviewing
Creation of user tests
Gathering and organizing statistics
Creating personas
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copywriting
Presenting and speaking
Working tightly with programmers
Brainstorm coordination
Design culture evangelism
HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN
“UX is the intangible design of a strategy that brings us to a solution.”
Get your print or web copy of this poster at www.uxisnotui.com
helloerik.com/ux-is-not-uiAn offshoot of @Erik_UX
elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert

46. この要素がなぜ
UXと呼ばれているか。
アプリを作る上で
それぞれがどういう
影響を持つのか
言えるようになろう。
UX IS NOTUX IS NOT
What does UX actually mean? The various UX roles that a p
whole jobs, some whole careers; others are tactical r
What so many UX designers would like you to remem
Field research
Face to face interviewing
Creation of user tests
Gathering and organizing statistics
Creating personas
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copywriting
Presenting and speaking
Working tightly with programmers
Brainstorm coordination
Design culture evangelism
Field r
Face t
Creatio
Gather
Creatin
Produc
Featur
Requir
Graph
Interac
Inform
Usabil
Protot
Interfa
Interfa
Visual
Taxono
Termin
Copyw
Presen
Workin
Brains
Design
HOW UX WANTS TO BE SEEN HOW U
“UX is the intangible design of a strategy that
Get your print or web copy of this poster at w
helloerik.com/ux-is-not-uiAn offshoot of
elisabethhubert.com/2012/12/interaction-design-beyInspired by

47. なぜ、C#で作るのか。
なぜ、メイリオを使うのか。
なぜ、トランジションを使うのか。
設計(デザイン)が話せるようにする

48. 言えないことを言えるようにする
と、いろいろなものが明確になる。
例えば
・仕様、UIデザイン、デザイン・ス
タイル、システムの目的、対象、、

49. 仕様、UIデザイン、デザイン・スタイル、
システムの目的、対象、、
システムやサービスを作る上で全部大事。
別に[UX]が大事なわけじゃない。
[UX]は大事なものを明確にする手法でし
かない。

50. 全部話せるようになるのは、とって
も大変。
なので、UXの要素の中から自分の
立場に関係のあるものだけをピック
アップしよう。

51. まとめると…

52. UXとは
• その人にはその人のいうUXがある。（立場
• なのでUXの話をするときは、[UX]という言葉
を使わない。
• [UX]がUXの何を指して、何を目指して、どう
使っているか明確にする。（システム
• UXを大事なものをハッキリさせる手法とする
• すると、あいまいな話になりにくい。

53. 蜜葉のUX

54. 蜜葉の考えるUX
• アプリを作る前にどんなことを考えてるか
• アプリとユーザを育てるサイクル
• デベロッパーとして考えるデザイン
• インタラクションと仕掛け
• coloris

55. アプリの育て方

56. 例えば、Windowsの右下

57. Windows 7と8

58. UIでのUXサイクル
• 最初に多くの機能を作るようなことはしない！
• 機能は小さく、UIは視覚的にわかりやすくする。
• ボタンはボタンらしくとか。
• 形状や位置などUIがユーザーに一般化され
(≒慣れ)れば、今までのUIを抽象化して、
シンプルにする。
• それができたら新しい機能に着手する。

59. 蜜葉の考えるUX
• サービスやシステムが使われる環境よりも
アプリとしてのデザインやインタフェースを
重要視
• どっちかっていうと現実世界より、画面の中
より。UIより。
• アプリに特化したデザインが好き

60. 蜜葉の考えるUX
• 画面の中で、ユーザーをどうするか、ユーザーに
どうしてほしいか、インタラクションを考える
• 目的のインタラクションを自然に行わせる
インタフェース(レイアウト、トランジション)を
考える

61. • 自分がなにかしたときに
• 相手がどう振る舞うか
• 相手になにかさせるには
• 自分はどう振る舞うべきか
Interaction

62. example

63. 好きにしていいよ

64. なにをするか、分からない
なにに興味を持つか、分からない

65. そのソファ座っといて

66. まぁ、
ソファに座る

67. テーブルの上が

68. たぶん、
ちょっと読んでみる

69. • 自分がなにかしたときに
• 相手がどう振る舞うか
• 相手になにかさせるには
• 自分はどう振る舞うべきか
Interaction

70. • 自分が「ソファに座って」と指示すれば
• 相手は指示したとおりに「ソファに座る」
• 相手に「本を読ませる」には
• 自分は「相手が本に注目する」ようにテーブル
に置く
Interaction

71. • 自分が「ソファに座って」と指示すれば
• 相手は指示したとおりに「ソファに座る」
• 自分からアクションを行う（能動的）
• 意図した結果がきちんと返ってくる
• 人に強制された挙動、人工的
• バーバルコミュニケーション
Interaction

72. • 相手に「本を読ませる」には
• 自分は「相手が本に注目する」ように置く
• 相手にアクションをおこさせる（受動的）
• 意図した結果が返ってくるとは限らない
• 人の自然な挙動、作為的
• ノンバーバルコミュニケーション
Interaction

73. • ユーザーがなにかした時に、UIがどう振る舞うか
• UIがなにかした時に、ユーザーがどう思ったりどう
操作するか
Interaction

74. • ユーザーがなにかした時に、UIがどう振る舞うか
• その振る舞いは、ユーザーが意図したものか
• UIがなにかした時に、ユーザーがどう思ったりど
う操作するか
• そのユーザーの操作は、UIが意図した操作なのか
UI：Interaction

75. • ユーザーがなにかした時に、UIがどう振る舞うか
• その振る舞いは、ユーザーが意図したものなのか
• ユーザーが意図した操作を、UIから連想させる
ためには、どういうUIにして、どう操作させれ
ばよいか
UI：Interaction

76. • UIがなにかした時に、ユーザーがどう思ったりど
う操作するか
• そのユーザーの操作は、UIが意図した操作なのか
• UIが意図した操作を、ユーザーに体験させるた
めには、どういうUIにして、どう操作させるべ
きか
UI：Interaction

77. • ユーザーが意図した操作を、UIから連想させるためには、
「どういうUIにして、どう操作させればよいか」
• UIが意図した操作を、ユーザーに体験させるためには、
「どういうUIにして、どう操作させるべきか」
UI：Interaction

78. 使いにくいUI =
ユーザーが意図した操作
≠
UIが意図した操作

79. 使いやすいUI その1 =
ユーザーが意図した操作
が
UIが意図した操作

80. 使いやすいUI その2 =
UIが意図した操作
が
ユーザーが意図した操作

81. • ユーザーが意図した操作 が UIが意図した操作
• ユーザーがあれこれ操作すると想定して、UIを作る
• しかも、想定漏れなしに
• UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に
使いやすいUI

82. • ユーザーが意図した操作 が UIが意図した操作
• ユーザーがあれこれ操作すると想定して、UIを作る
• しかも、想定漏れなしに
• 複雑になればなるほど、いろいろな操作をする可能性が
増えて大変。けど便利。
• エクセルつくりましょう！ってかんじ。
使いやすいUI

83. • UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に
• シンプルにすればするほど、思った通り実現できる。
でもできることはすくない。
• つぶやくだけのウィジェットつくりましょう！
ってかんじ
使いやすいUI

84. どっちがアプリ向き？

85. • UIが意図した操作 が ユーザーが意図した操作
• ユーザーにこの操作だけをさせるように、UIを作る
• しかも、自然に
• シンプルにすればするほど、思った通り実現できる。
でもできることはすくない。
• つぶやくだけのウィジェットつくりましょう！
ってかんじ
使いやすいUI

86. • ユーザーの経験とか体験をもとにして、ユーザーが
こう操作するはずだっていうUIを作る
• だから自然に操作できるし、想定外の操作をする
可能性が減る
• UIよりのUX
• もちろん、UXってこれだけではないんやけども。
• 詳しくはUI is not UXで
今回のUserExperience

88. • Store Appsの色を
いい感じに
• しかも３タップで
• MVP Showcaseで
１位もらいました！
coloris

89. demo

90. 1 xaml 3 Layout 2 State

94. 3
Layout

95. 2 State

97. Meaning of State

98. first
impression

99. back
and forth

100. goal

101. Meaning of
Layout and Transition

102. • 画面のどまんなかに大き
く１コントロールだけ
• 色相環でまとまりよく
• Metroの場合、四角形は
つつける経験則
• タップしない限りなにも
起きない。
• タップさせるレイアウト
Layout

103. example

104. • 全面にボタンを１つだけ
配置
• 押せば画面が点くし、押
せば戻れるし、困ったら
押せばいいボタン
• というか押す以外に解決
策がない
• 指の位置にもよく馴染む
iPhone

105. • 扇状に色相環が広がる
アニメーションを付加
• 初めてアプリを起動した
人の目を、この色相環
コントロールに注目させ
る役割
Transition

106. example

107. • ワンポイントで注目させ
て、その先に何かあるこ
とを伝える
Batch

108. • アニメーションのグラフ
を作成できるライブラリ
• やっぱりページをスクロー
ルするとグラフに注目す
る
• http://
www.chartjs.org/
Chart.js

109. • Store Appsの文化圏は右
側の情報が新しい
• 選択した色をキーにに画
面右側に新しい情報が表
示するレイアウト
Layout

110. example

111. • Store Appsだったり、横
スクロールWebページは
左が古く、右が次の情報
のレイアウトが多い。
• 横書きの本なんかも、右
が次のページだったりす
る。
Book

112. • 過去の情報となった色相
環を左に追いやる
• 同時に右から新しいパネ
ルがスライドして表示さ
れる
• 押しのけて、操作対象が
変わって次のステップに
進んだことを伝える役割
Transition

113. • 右にあったリストを選択
すると、さらに右に新し
いコントロールが表れ
る。
• すでに目的のものが見え
ている様にレイアウトし
て、終わりが近い＝手軽
さを演出
Layout

114. example

115. • 終わりが見えると安心す
る。終わりが見えないと
頑張れない。
• デスマーチとか…
endless

116. • GridView標準のトラン
ジション。
• データが切り替わったこ
とさえ分かればいい。
Transition

117. example

118. • 赤が本題で、紫が例え、
みたいに、コンテンツが
変わったことさえ分かれ
ばいい。
example

119. まとめ

120. • UXとかDesignとかって定義が曖昧。
• つい[UX]って言ってしまうところを、具体的説
明するように心がける
• UXの一体なにが大事って言えるように。
• それ言えるように、いろんな人がしてる言葉の定
義を見つけて、咀嚼して、
自分のものにしていく
まとめ

121. • UIとかLayoutとかTransitionとか、なんで
そうしたのか理由付けをしよう。
• なんとなく「ふわっ」とか「しゅぱっ」と
か言われたら、なんで「ふわしゅぱっ」な
のか聞いてみよう。
まとめ

122. • 理由付けのために、いろんなアプリを触ったり、
ハードウェアのインタフェースを見なおしたり、
日常の所作とか、風景とかを振り返って見直そ
う。
• 目に見えるものすべてがインタフェースで、そこ
にはなにかしらのレスポンスがあるはず
• 「なんとなく動いた」プログラムと「なんとなく
デザインした」画面は同じ
まとめ

123. • Interaction,Animation,UserInterface,HCI,
LayoutDesign,UserExperience,Prototypin
g,Visualization,InformationArchitecture,
Typography,InfoGraphics,仕掛学,視線誘
導,認知心理学
keyword

124. • インタフェースデザインの心理学
• インタフェースデザインの実践教室
• Seductive INTERACTION DESIGN
• THE VISUAL MISCELLANEUM
• VISUALIZE THIS
• ANDROID DESIGN PATTERNS
• Mobile Design Pattern Gallery
• 同人誌やイラストの美しいデザイン100
book
• IAシンキング
• タイポグラフィ 03
• 白井博士のゲームデザイン
• Windows 8 UI/UXデザイン入門
• iOS フラットデザインの作法
• カルチュラルコンピューティング
• 人工知能学会誌 Vol.28 No.4 2013/7

125. book