実は、誰だってＵＸデザインは出来るんです！ もくじ 1. UXの定義～ユーザビリティUIとの相関性～ 2. UXデザインの思考プロセス 3. IAって何者？ 4. だったら試してみればいいだろ！

1. UXデザインの為のIA(情報アーキテクチャ)
2014/8/22 インターリンク株式会社 社内セミナー
折井優貴夫、蛭田益光講師：UXデザイナー

2. 1. UXの定義～ユーザビリティ UIとの相関性～
2. UXデザインの思考プロセス
3. IAって何者？
4. だったら試してみればいいだろ！
もくじ

3. UXの定義～ユーザビリティ UIとの相関性～
Chapter 1

4. よくこんな議論を耳にします
UIデザインやユーザビリティを追求していけば、
利用者にとって価値のあるサイト(サービス)になる。
UIデザインやユーザビリティの追及だけでは、
利用者にとっての価値は得られない。
VS
＝UXはUIの結果説
＝UXとUIは別次元説

5. よくこんな議論を耳にします
UIデザインやユーザビリティを追求していけば、
利用者にとって価値のあるサイト(サービス)になる。
UIデザインやユーザビリティの追及だけでは、
利用者にとっての価値は得られない。
VS
＝UXはUIの結果説
＝UXとUIは別次元説

6. ここで突然の演習
120cm
子どもにとって最も使いやすい
自販機を描いてみてください。

7. 解答例
120cm 140cm
↑「子ども」にとってベストなＵＩ
「UXはUIの結果説」が正しければ、この子は良いUXを得られるはず。

8. ちなみに、関取が使ったら？
どすこい・・・
ターゲットユーザーのミスマッチ 当然の結果ですね。
ＵＸ
100

9. ではもし、炭酸飲料が嫌いな子どもだったら？
炭酸
嫌いだよ
ユーザーニーズのミスマッチのため、この子の満足は得られませんでした。
ＵＸ

10. つまり
炭酸
嫌いだよ
ユーザーニーズのミスマッチのため、この子の満足は得られませんでした。
ＵＸ
良いUIはユーザビリティを向上しますが
必ずしも良いUXを生むとは限りません。
「誰か」にとっての
使い勝手
「誰か」にとっての
価値

11. 先ほどの議論の個人的見解は
UIデザインやユーザビリティを追求していけば、
利用者にとって価値のあるサイト(サービス)になる。
UIデザインやユーザビリティの追及だけでは、
利用者にとっての価値は得られない。
VS
＝UXはUIの結果説
＝UXとUIは別次元説
○

12. UIとユーザビリティと
あと何が必要なの？
利用者にとっての価値(UX)を高めるためには

13. UXデザインの思考プロセス
Chapter 2

14. わかりやすく図にしてみた。

15. わかりやすく図にしてみた。

16. わかりやすく図にしてみた。
誰の為か？の考慮
(=ユーザーニーズの決定)
その人にとって
必要な情報は？
(=ユーザーニーズとのマッチング)
それらすべての結果
どういうカタチか
見た目をキレイに

17. すべては顧客満足のために。これが一番大事だよね
全部ひっくるめて
UXD(User Experience Design)
ここで言う「ユーザー」は、
単なるターゲットの属性ではなく、
特定個人レベル(ペルソナ)である方が効果的です。

18. さっきの例に当てはめると
UX
IA
UI(設計)
VD
すっごくわかりやすいね!!!
UXD
＝
＝誰の為の使いやすさか
＝具体的な形や配置は
＝適切な色やフォントは
＝購入を通じた一連の体験IA
ユーザー
UX
UI
VD
商品の選定基準
商品の分類方法
商品の並べ方
ユ ー ザ
ビリティ
思考の
順序
結果
=この順序で考えたデザイン
炭酸を陳列するかは
この２軸で決まります

19. IA(情報設計)という
概念が必要です
利用者にとっての価値(UX)を高めるためには

20. IAって何者？
Chapter 3
インフォメーションアーキテクト（＝人）
インフォメーションアーキテクチャ（＝技術）

21. かの有名なUXの5階層図。知らない人は覚えてね
上流工程
下流工程

22. ざっくり言語化するとこんなかんじ
上流工程
下流工程
どうやって
伝えるか
誰に
何を

23. ざっくり言語化するとこんなかんじ
上流工程
下流工程
どうやって
伝えるか
誰に
何を
ココで言う「何をどうやって」を担当するのが
(インフォメーションアーキテクト＝情報設計者)

24. IAは、ディレクターやデザイナーが兼任していたりします。
ＩＡはこのへん

25. IAが具体的に何をするのか、トイレで例えてみましょう
ユーザーニーズを解決したいという想い（ユーザビリティの考慮）は、全ての元でありＵＸＤの基盤。

26. どうやって
伝えるか
誰に
何を
ユーザーの気持ちを考える事から、全ては始まる。
上流工程
下流工程
UXDはここから始まる→

27. もう一度おさらいです
UX
IA
UI(設計)
VD
UXD
＝
＝誰の為の使いやすさか
＝具体的な形や配置は
＝適切な色やフォントは
＝購入を通じた一連の体験
ユーザー
UX
商品の選定基準
商品の分類方法
商品の並べ方
ユ ー ザ
ビリティ
思考の
順序
結果
=この順序で考えたデザイン
炭酸を陳列するかは
この２軸で決まります
誰の為に→何を→どうやって→提供しようかな＝UXデザインの思考プロセス
IA
UI
VD

28. 良いUXを作り出す為には、どういうIA(情報設計)が必要か？
1. ユーザーにとって価値のあるコンテンツの選定
2. ユーザーが最も使いやすい情報の分類
3. ユーザーニーズを明快に解決する導線設計
しかしこれらは所詮、机上の空論に過ぎません

29. じゃあ、どうすれば？

30. だったら試してみればいいだろ！
Chapter 4
ユーザーテストはIAの基本
机上の空論だけでサイトの設計をするのは、
とてもリスキー。必ず自分以外のユーザーに
テストを行い、その結果を設計に反映する事
で、設計の精度が格段に向上します。

31. 演習 『 オ リ ジ ナ ル マ ー ト 』 を つ く ろ う ！
セミナーにご参加いただいた方
のみに配布しております。

32. だったら試してみればいいだろ！
ユーザーテストはIAの基本
机上の空論だけでサイトの設計をするのは、
とてもリスキー。必ず自分以外のユーザーに
テストを行い、その結果を設計に反映する事
で、設計の精度が格段に向上します。
会議室では、良いサイト設計は生まれない。
コレが超大事なんです！
ユーザーが確保できなかったら
初見の人を捕まえて使って貰えばＯＫ

33. UXの為のIAは、身近なところにもあります。
この時点のユーザーニーズ
ざっくりと目的の線が
左右どっちにあるか
わかればＯＫ
この時点のユーザーニーズ
上下線どっち側に
目的地の駅があるか
判断できればＯＫ
この時点のユーザーニーズ
乗車すべき電車は
急行なのか鈍行なのか
それが何時に来るか知りたい
スムーズに電車に乗れた！その結果

34. UXの為のIAは、身近なところにもあります。
この時点のユーザーニーズ
ざっくりと目的の線が
左右どっちにあるか
わかればＯＫ
この時点のユーザーニーズ
上下線どっち側に
目的地の駅があるか
判断できればＯＫ
この時点のユーザーニーズ
乗車すべき電車は
急行なのか鈍行なのか
それが何時に来るか知りたい
スムーズに電車に乗れた！その結果
視野を広く持って、利用者の気持ちを考えれば
誰だってＵＸデザインは出来ます！

35. ご参加ありがとうございました。
UI設計・UX最適化・デザインのご依頼、ご相談は、下記アドレスまでご連絡下さい。
uxd@interlink.ne.jp
http://www.interlink.ne.jp/#ux
WEB制作・システム開発・アプリ開発
インターリンク株式会社
WEBサイト