プリの操作から醸し出されるつかいごこち-UX（ユーザ- エクスペリエンス）を生み出す手法を,具体的な事例を通して紹介します。 Android むけ日本語入力アプリケーション 「Simeji」 の UX を 1.アプリの世界観づくり 2.インタラクション 3.グラフィックデザインの 3 つの視点に分けて、制作者の立場から解説するセッションです。1 では世界観を作る意義を、2 では動きのデザインを作る理論の紹介や考え方の例を、3 ではグラフィックデザインの基礎的なセオリーや外観の整え方の基本、UX に与える効果についてお話しする予定です。

1. (c) adamrocker / rin yano 2010
#android3
ここちよいAndroid
おもいやりのUIデザイン
adamrocker / 矢野りん

2. (c) adamrocker / rin yano 2010
#android3
自己紹介
• ソフトウエアの研究中
• Android向け日本語IMEのSimejiを開発中
• Sandboxに「ハラタケ目：BTk」出展中
• KDDI Mobile（US）のHTC HeroにSimejiが
プリインストールされています
• 最近Sony EricssonのXperia X10のPOBox
と、Simejiの一部「マッシュルーム」が合体
して「POBox Plug-in」に

3. (c) adamrocker / rin yano 2010
#android3
自己紹介
• ソフトウエアのビジュアルデザイン担当
• ブリリアントサービスの「ウキウキView」/
GClue「Blocco」/ 「オクトバ」アプリの
デザインまわりを担当
• 10月9日と11月13日にWebまわりのビジュ
アルデザインのテクニックを磨くイベント
「CSS Nite LP11 / LP12」をやります
• 物販アプリ「DropCart」Developer
SandBoxのデ部ブースでみてね！

4. (c) adamrocker / rin yano 2010
#android3
アジェンダ
• UX(User eXperience)とは？
• SimejiにおけるUXの考え方
• SimejiのUXにおけるグラフィックデザイン面の工夫

5. (c) adamrocker / rin yano 2010
UX(User eXperience)とは？

6. (c) adamrocker / rin yano 2010
#android3
UXとは？
ユーザーがある製品やシステムを使ったときに得られる
経験や満足など全体を指す用語。
(Wikipedia)

7. (c) adamrocker / rin yano 2010
#android3
UXとは？
製品やサービスの使用・消費・所有などを通じて、人間
が認知する（有意義な）体験のこと。製品やサービスを
利用する過程（の品質）を重視し、ユーザーが真にやり
たいこと（本人が意識していない場合もある）を「楽し
く」「面白く」「心地よく」行える点を、機能や結果、
あるいは使いやすさとは別の“提供価値” として考えるコ
ンセプト。
(@IT)

8. (c) adamrocker / rin yano 2010
#android3
UXとは？
ユーザへの
“おもいやり”

9. (c) adamrocker / rin yano 2010
#android3
おもいやり？
•気持ち良くさせる？楽しませる？
‣ ターゲットユーザが決まっているなら可能かも…
‣ 毎日見ても、触っても飽きませんか？
‣ どういうシーンでも鬱陶しくありませんか？

10. (c) adamrocker / rin yano 2010
#android3
おもいやり？
“気持ち良くさせる”
というよりか
“不快ではない”
ようにすること

11. (c) adamrocker / rin yano 2010
#android3
おもいやり？
不快ではない＝違和感がない

12. (c) adamrocker / rin yano 2010
#android3
おもいやり？
静的・動的な視覚情報に対して
「違和感のない」体験を提供する
‣ アニメーションを利用したインタラクション
‣ グラフィックによる世界観

13. (c) adamrocker / rin yano 2010
SimejiにおけるUXの考え方

14. (c) adamrocker / rin yano 2010
#android3
SimejiにおけるUX
ユーザの脳への
“おもいやり”

15. (c) adamrocker / rin yano 2010
#android3
認識する
テスト
- 設定を変更する -

16. (c) adamrocker / rin yano 2010
#android3
認識する

17. (c) adamrocker / rin yano 2010
#android3
何が変わったのかを認識するには時間が必要
脳への負担
認識する

18. (c) adamrocker / rin yano 2010
#android3
認識する
テスト
- 設定を変更する -
(ただしDialogなし)

19. (c) adamrocker / rin yano 2010
#android3
認識する

20. (c) adamrocker / rin yano 2010
#android3
認識する
どうやら比較対象が近いと
簡単に認識できるらしい

21. (c) adamrocker / rin yano 2010
#android3
認識する
Dialogがおじゃま？でも必要！

22. (c) adamrocker / rin yano 2010
#android3
Simejiの解決策
Demo

23. (c) adamrocker / rin yano 2010
#android3
おもいやり１
脳の処理負担を軽減するため
変化は操作に対して
時間・距離的に 近くする

24. (c) adamrocker / rin yano 2010
#android3
モバイルにおける課題
•ディスプレイが狭い
‣ 親指での操作が基本
‣ 右手操作なら右側が見えなくなる
手が邪魔

25. (c) adamrocker / rin yano 2010
#android3
とある解決策

26. (c) adamrocker / rin yano 2010
#android3
Simejiの解決策
❖ 4次元の活用
Time

27. (c) adamrocker / rin yano 2010
#android3
Simejiの解決策
❖ 4次元の活用
Time
認識には時間が必要
ユーザが認識するための
“ゆとり”

28. (c) adamrocker / rin yano 2010
#android3
フリックの例
Demo

29. (c) adamrocker / rin yano 2010
#android3
おもいやり２
脳が処理する
余裕を与える

30. (c) adamrocker / rin yano 2010
#android3
UXの方法
‣ マンマシンインターフェース
‣ ヒューマンファクター
‣ 情報アーキテクチャ
‣ インタラクションデザイン
‣ ユーザインターフェースデザイン
‣ ユーザビリティ
‣ グラフィックデザイン
(Wikipedia)
‣ マンマシンインターフェース
‣ ヒューマンファクター
‣ 情報アーキテクチャ
‣ インタラクションデザイン
‣ ユーザインターフェースデザイン
‣ ユーザビリティ
‣ グラフィックデザイン

31. (c) adamrocker / rin yano 2010
#android3
インタラクション？
２つ以上の存在が互いに影響を及ぼし合うこと
Android(タッチディスプレイ)では
ヒトがタッチすることでアプリが動く
❖UX視点を加える
ヒトがタッチすることでアプリが
違和感なく動く

32. (c) adamrocker / rin yano 2010
#android3
SimejiのSkinでは
❖ 動作の言語化
“Skinをインストール”

33. (c) adamrocker / rin yano 2010
#android3
インストールの表現
Demo

34. (c) adamrocker / rin yano 2010
#android3
おもいやり３
自然な動作表現

35. (c) adamrocker / rin yano 2010
#android3
Simejiのおもいやり
1.変化は時間・距離的に近く
2.脳が処理する余裕
3.自然な動作表現
どうやって？

36. (c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール１
•躍度(やくど)
‣ 生物に不快感を与える評価値
j = Δa/Δt
j:躍度, a:加速度, t:時間
jが大きいと不快感が増す
加速度の変化(Δa)を小さくする

37. (c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール２
•フィッツの法則
‣ 対象物を特定する予測時間
T = a + blog2(1 + D/W)
T:時間, D:対象物までの距離, W:対象物の幅
距離(D)を小さく、モノ(W)を大きくする

38. (c) adamrocker / rin yano 2010
#android3
おもいやりの思考ツール３,4
•ヒックの法則
‣ 沢山あると選べない
T = a + blog2(1 + n)
•テスラーの複雑性保存の法則
‣ 複雑な処理の総量は普遍
‣ 複雑な処理はあっち(アプリ)が負担するか
こっち(ヒト)が負担するか

39. (c) adamrocker / rin yano 2010
SimejiのUXにおける
グラフィックデザイン面の工夫

40. (c) adamrocker / rin yano 2010
#android3
アプリにとって
グラフィックデザインは
•設計のあとの仕上げ
•作り手にとっては最後の仕事
•使い手にとっては最初の判断材料

41. (c) adamrocker / rin yano 2010
#android3

42. (c) adamrocker / rin yano 2010
#android3
アプリにとって
グラフィックデザインのねらいは
•情報の理解を助ける
•好きになってもらう
このふたつの
マリアージュが世界観になる
（たぶん）

43. (c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい？

44. (c) adamrocker / rin yano 2010
#gdd2010jp
わかりやすい？

45. (c) adamrocker / rin yano 2010
#android3
わかりやすい？

46. (c) adamrocker / rin yano 2010
#android3
わかりやすい？

47. (c) adamrocker / rin yano 2010
#android3
好き？

48. (c) adamrocker / rin yano 2010
#android3
好き？

49. (c) adamrocker / rin yano 2010
#android3
好き？

50. (c) adamrocker / rin yano 2010
#android3
• 情報の理解を助ける
• 情報を整理して受け取りやすく
• 好きになってもらう
• 清潔感を出す
アプリにとって
グラフィックデザインのねらいは
このふたつの条件さえ
満たしていればOKだ！

51. (c) adamrocker / rin yano 2010
#android3
SimejiのUXにおける
グラフィックデザイン面の工夫
•デザインの方針
•ロゴのデザイン
•Simejiサーバー（スキンアップロード
ページ）のレイアウト

52. (c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラット
スタイルを単純にしてスキンを目立たせたい
•シンプル
アイコンのもつ意味をストレートに伝えたい
•ラブリー
毎日使う物だから、愛着を持って欲しい

53. (c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“Less is more.”

54. (c) adamrocker / rin yano 2010
#android3
フラット／シンプル

55. (c) adamrocker / rin yano 2010
#android3
Simejiスキン

56. (c) adamrocker / rin yano 2010
#android3
主役はスキン。UIの見栄えは単純に

57. (c) adamrocker / rin yano 2010
#android3
フラット／ラブリー

58. (c) adamrocker / rin yano 2010
#android3
フラット／シンプル／ラブリー

59. (c) adamrocker / rin yano 2010
#android3
フラット／シンプル／ラブリー

60. (c) adamrocker / rin yano 2010
#android3
ちなみに幅48ピクセルでもよめます

61. (c) adamrocker / rin yano 2010
#android3

62. (c) adamrocker / rin yano 2010
Simejiに使った
グラフィックデザイン理論

63. (c) adamrocker / rin yano 2010
#android3
くらしに役立つデザイン理論
•そろえる
•コントラストに気をつける

64. (c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
ふとっちょは短めに

65. (c) adamrocker / rin yano 2010
#android3
そろえる/ボリューム感をそろえる
幅のあるかたちは細めに

66. (c) adamrocker / rin yano 2010
#gdd2010jp
円のおおきさが目安
もともと丸いデザインは目安よりひとまわり小さく
GOOD
NOT SO GOOD

67. (c) adamrocker / rin yano 2010
#android3
Mies van der Rohe
“God is in the detail.”

68. (c) adamrocker / rin yano 2010
#android3
情報デザイン？

69. (c) adamrocker / rin yano 2010
#android3
ローコントラスト
ハイコントラスト

70. (c) adamrocker / rin yano 2010
#android3
大／小 サイズのコントラスト

71. (c) adamrocker / rin yano 2010
#android3
Simejiデザインの方針
•フラット
•シンプル
•ラブリー
この３つが世界観を作っている
（と、信じている）

72. (c) adamrocker / rin yano 2010
まとめ

73. (c) adamrocker / rin yano 2010
#android3
まとめ
SimejiのUX＝おもいやり
‣ 不快にならないインタラクション
‣ 整理・整頓による清潔感

74. (c) adamrocker / rin yano 2010
#android3
Louis Henry Sllivan
“Form follows function.”

75. (c) adamrocker / rin yano 2010
#android3
throw life
http://www.adamrocker.com/
TwitterID:adamrocker
e-mail:adamrocker@gmail.com
adamrocker
ものづくりにっぽん
http://yanorin.blogspot.com/
TwitterID:yanorin
e-mail:rinyano@gmail.com
Rin Yano
#andronjo