2014年3月に行われたヒカラボでの発表資料です。

1. トライフォート小俣が考える
UI/UXの考察
~UXの先を考える思考をつける~

2. 自己紹介
株式会社トライフォート CO-Founder/CTO
小俣 泰明
＜経歴＞
日本ヒューレット・パッカードやNTTコミュニケーショ
ンズなどの大手ITベンダーで技術職を担当し、システ
ム運用やネットワーク構築などのノウハウを習得。
その後、2009年にソーシャルゲーム開発において業界
トップクラスであり、東証JASDAQに上場しているCROOZ
株式会社に参画し、同年6月に取締役に就任。
翌年5月同社技術統括担当執行役員に就任。CTOとして
大規模WEBサービスの開発に携わる。
2012年6月に退任、2012年8月に大竹とともにトライ
フォートを設立し現在代表取締役Co-Founder/CTOを務
める。

3. Agenda
1. UI設計、UX設計のその前に
2. 入力処理への考察
3. 出力処理への考察
4. UXとは心理操作
5. まとめ
UI
UX

4. UIとは？
＝ユーザーインターフェース
UI設計・UX設計とは？
＝画面設計
…という風に考えられている？
1. UI設計、UX設計のその前に(1)

5. UI設計・UX設計
＝画面設計？でいいのか。
必ずしもイコールではない。
そもそも画面設計について考えるよりも前に、
デバイスのインターフェースの入力・出力処理について
再度確認をしてみよう。
1. UI設計、UX設計のその前に(2)

6. 2.入力処理への考察(1)
【入力インターフェース処理の種類】
●タッチ
●スワイプ
-画面移動、スライドメニュー
●ピンチイン、ピンチアウト
-写真を見る操作
● GPS
●音声
●カメラ
● Bluetooth
-Bluetoothキーボード
-iBeacon(O2O)
●シェイク
-Lineのid交換
-作業のキャンセルなどの処理
● ６軸センサー
-iPhoneの背景は6軸センサーで微妙に動いている

7. 2.入力処理への考察(2)
Q.コンシューマゲームのコントローラーを
スマートフォンの画面で表現できるのか？
？
スマートフォンにおける理想的な十字キーはなんなのか？

8. 2.入力処理への考察(3)
A.バーチャルカーソルで表現。
コンシューマ版 アプリ版
引用：https://itunes.apple.com/jp/app/id354657332
http://www.capcom.co.jp/sf4/IV/cs.html

9. 3.出力処理への考察(1)
【出力インターフェースの種類】
●画面表示
●サウンド
●バイブレーション
●ライト（フラッシュ）
●WIFI、通信
●Bluetooth
-音声出力
-外部デバイスコントロール
WIFI直接つなぐことによるデバイスコントロール
Spheroデバイスの例
引用：http://www.gosphero.com/

10. 3.出力処理への考察(2)
スマホにおけるUI、UXを検討するには
画面設計だけではなく
人とデバイスとがどのようにつながるか
を認識した上で検討することが重要。
引用：https://itunes.apple.com/jp/app/id354657332
http://www.capcom.co.jp/sf4/IV/cs.html

11. 4.UXとは心理操作(1)
今日伝えたい一番大事なこと
全ての操作は
ユーザーにとって
大きな作業だと認識しよう。
なぜ？
ユーザーは価値を感じると
そのサービスを使ってくれるから。

12. 4.UXとは心理操作(2)
UI・UXによるユーザーへの価値を高める３つの検討方法
■ケーススタディ１
価値を期待させる（出力処理）
■ケーススタディ２
今まで経験をしたことが無い
便利な操作を気づかせる（入力処理）
■ケーススタディ３
ユーザーの状況に合わせたUI、UXであること（出力処理）

13. ケーススタディ1：価値を期待させる（1）
ケーススタディ１
価値を期待させる（出力処理）
入力処理をユーザーに求めるということは、
その行為に対する見返りが必要になる。

14. ケーススタディ1：価値を期待させる（2）
（心理状態）
何が起こるか
わからない
課金コインを購入
ボタンを押す行為に
抵抗ができる。
楽しみにならない
＋
ボタンを押す作業を
強いられる
（作業）
ボタンを押す
ガチャを回す
【例1】ガチャをひくための課金コインを買いました

15. ケーススタディ1：価値を期待させる（3）
画像引用：Flickr
【例２】iPhoneというスマートフォンを買いました
（心理状態）
開ける前から
期待に満ちている
箱をあけることに
非常にポジティブな
印象で開けられる。
（作業）
iPhoneの
箱をあける

16. ケーススタディ1：価値を期待させる（4）
例1と例2の違いは？
→既にパッケージの中身への
期待値情報を持っているため。
※箱を開けた後の心理状況ではなく
「箱を開ける、ガチャをひく」といった
中身が見えない状態からどう感じるかが重要。

17. ケーススタディ1：価値を期待させる（5）
全ての操作が期待に満ちたものであるか。
ガチャを回す（作業）
ボタンを押す
（心理状態）
ボタンを押す時から
期待に満ちている
この心理状態を
作れることが重
要。
【ボタンを押すことの価値を体験させる】
ボタンを押した後の
価値をイメージさせる
ボタンを押すことの
価値を体験させる

18. ケーススタディ2：便利な操作を気づかせる（1）
ケーススタディ2
今まで経験をしたことが無い便利な操作を気づかせる（入力処理）
重要なのは教えるのではなく
ユーザーに気づかせること。

19. ケーススタディ2：便利な操作を気づかせる（2）
【例1】Windows8のUI
チュートリアル的に全ての機能を伝えると自分で発見したわけではないため、
感動が薄れる。
UI、UX操作において、自分だけが気づくことができたように感じる状況にさせることが
ユーザーのこころをつかむ。
左端からスワイプすると
起動したアプリが出てくる。
（初めてのユーザーでは気づ
きづらい）
こんなことできるんだ！
という体験が価値になる。

20. ケーススタディ2：便利な操作を気づかせる（3）
【例2】iPhoneのシェイク
ユーザーが実際に使う使わないを別にして、
こういう発見がUI、UXがにおけるユーザーのグリップになる
iPhoneをシェイクすると
入力したテキストを削除できる
偶然シェイクしたら
消せるんだ！という
体感になる。

21. ケーススタディ3：状況に合わせたUI、UX（1）
ケーススタディ3
ユーザーの状況に合わせたUI、UXであること（出力処理）
ユーザーのニーズ全てを
スマホのUIに入れるのではなく
ニーズの発生タイミングを秒単位で認識して
対応することが重要！

22. ケーススタディ3：状況に合わせたUI、UX（2）
【例1】ニュースを見た時
ユーザーのニーズ例は様々
・FOMAの意味がわからないからその意味を調べたい
→固有名詞はクリックすると辞書検索できる
・AKB板野のファンなのでFacebookやTwitterにシェアしたい
→シェアボタンをつける
・「枝野氏が抗議」が自分のビジネスのネタになるので
その情報をまとめておきたい
→Evernoteへ投稿できる
・「ジャニーズ主演ドラマ」についてもっと深く知りたい
→関連情報のリンクをつける
・特に気になるニュースがない、つまらない
→興味があるニュースカテゴリを
チェックリスト化してフィルターしていく
・他のニュースが見たい
→他のニュースへのリンクをつける
全てスマホのUIに
入れることが重要ではない

23. ケーススタディ3：状況に合わせたUI、UX（3）
ユーザーのニーズは様々で
全部のニーズをUIに入れることは、車を買いに来た人に
バイクを売りつけようとしているようなもの。
スマホ画面は非常に小さいため、ニーズではない機能は
ノイズどころかネガティブに捉えられる。
→それぞれのニーズが
どのタイミングで発生するのか
秒単位で認識して対応することが重要

24. ケーススタディ3：状況に合わせたUI、UX（4）
【例2】ニュースサイトにおける潜在的なニーズを掘り起こす
潜在的なニーズ
・最新のニュースを誰よりも早く見たい
→誰よりも早く見た気持ちになりたい
（例）最新のニュース速報をPUSH通知で
自分だけが受信できる。
・有益なニュースを見たい
→本当に有益がどうかではなく、有益だと思えること
（例）ニュース記事にランク付けをつけて
高いランクと記載する
・知識がたまっていることを視覚的に認識したい
（例）ニュースを読んだ記事数をグラフ化する

25. ケーススタディ3：状況に合わせたUI、UX（5）
UX設計の理想型は・・・
潜在的なニーズまで掘り起こした上で、
秒単位でのユーザーのニーズの変化を把握し、
UI、UX（画面だけでなくすべてのインター
フェース）に落としこむこと。

26. まとめ
iPhoneとXperiaやギャラクシー
どちらも機能の差はほとんど無い。
しかし日本ではiPhoneの方が人気が
高い。
これはユーザーインターフェイスが
好まれている、触り心地がいいから。
参考：カンター・ジャパン「2013 年 9 月から 11 月のスマートフォン販売シェア調査」より
→製品の良さはサービスそのものよりも
強い力を持つことがある。

27. UI.UX設計を突き詰め
サービスを勝ちに導こう！