アプリデザインとは UI/UXデザインなんじゃないの？ っていうお話です 社内勉強会用

2. UCHIYAMA SHINTARO
Designer

3. これまでやってきたことは・・・

4. かみ

5. web

6. web

7. え

8. One show Interactive Bronze Pencil
文化庁メディア芸術祭 審査委員会推薦作品
東京インタラクティブアドアワード アド部門 入賞
New York festivals International AdvertisiOne show
Interactive Bronze Pencil
ng Awards Digital and Interactive Finalists
自分で言うのもなんだが意外とちゃんとしてる

9. あぷり
そして…最近やっているのが

10. • 画 面 が 小 さ い
スマホアプリの特徴
• 操 作 が マ ウ ス や キ ー ボ ー ド で は な く 指
• 持ち歩き、常に利用できる
• 生活が中心にあり、いつでもやめることができる

11. デザインの分類
広告
パッケージ
プロモーションサイト
ゲームアプリ
ツール系アプリ
ニュース系
アプリ
ツール系アプリ
サービスサイト
厳密には違うと思うけど
大体こんな感じ

12. UI/UXデザイン
キーワード

13. サービスや製品とそれを使う人間とをつなぐもの
操作感
UI

14. システムやサービスを使うことで得られる体験
使ったとき、使ったあとなに得られる満足感
UX

15. おんなの子に例えてみると
UI
見 た 目
UX
性格
心地よさ
性格も良くて気が利くし、
話していて楽しいななどの
体験
ファッション

16. 自販機に例えてみると
UI
暑い…喉が渇いた
UX
デザインが爽やかで
飲みたくなる！
開けたときのプシュって音ジュースを買おう
さあ飲むぞ
甘い香り
潤った！また飲もう
（飲みやすさ）
（購入のしやすさ）

17. ある問題を解決するために思考・概念の組み立てを行い、
それを様々な媒体に応じて表現すること
デ ザ イ ン
問題を解決するための設計

18. UI/UXデザイン
ユ ー ザ ー に ど ん な 体 験 を し て も ら い
ど う 感 じ て も ら う か
そ の た め に ど う す れ ば 心 地 よ く 使 っ て も ら え る か を
設 計 す る

19. デザイン

20. 要素をルールに合わせて設計していく

21. デザイン要素

22. 色 カタチ文字
線 質感空間
色相・彩度・明度
フォントの種類
大きさ、間隔
四角、円、三角、
幾何学形など
直線、破線、波線
斜線、二重線など
ホワイトスペース
触覚的テクスチャ
視覚的テクスチャ

23. デザインの原則

24. 統一 強調バランス
類似・対比 多様性リズム
デザインが統一されているか
フォント、色、形 要素の位置や面積の割合
強調することで
ユーザーの関心を集める
要素を調整することで
統一性がもてる
反復させることで
統一性がもてる
要素に変化をつけたり
異なった要素を使用する
ことで単調さをなくす

25. 基礎をしっかり抑えるのがコツ

26. メジャー感

27. 細部にこだわってデザインすること
一つ一つは細かくて誰も気付かないような
工夫であったとしても、それが全体と調和して
デザインに詳しくない人でも
「なんとなくいい」と思わせること！

28. UXデザイン

29. 人の体験を軸に設計

30. 設計対象
①インターフェイス
②コンテンツ
③コンテクスト

31. インターフェイス

32. 価値観、意味など一旦無視して
画面上にどう提示すればどう感じるか
どう見えるかなどを考える
ただ触っているだけで気持ちいいなと
思わせる感覚の提供
人間の振る舞いを捉える

33. ユーザーの行為の意味を み取る
仕組みづくりが重要

34. コンテンツ

35. ユーザーに取って意味のあるコンテンツかどうか
個々のライフスタイルから適切な利用価値を探る
見る、知る、感じるといった
満足感の提供

36. コンテンツをモリモリ詰め込むと
ボタンが大量にあったり
テキストの量がおおかったり
親切でおいたオプションなどが逆に邪魔になったり

37. webブラウザと同じ感覚で１画面にいろいろ詰め込むと
ユーザーに意思決定する場が増えてしまう
ユーザーにとって負担になる

38. 機能がいっぱいあったらそれを使わなければいい
「使わない」という判断がストレスになる

39. 旅行に行くときのスーツケースと同じ
便利だと思って詰め込み過ぎても
逆に不便になる

40. アプリに何を詰め込むか？
何を詰め込まなくても大丈夫か？

41. コンテクスト

42. ユーザーの考えや気持ちの流れ
時間の流れなどの設計

43. クリックする、タップする
ページが変わる
認知・共感・理解
（見る、知る、感じる）
満足感
（ワクワクする、楽しいなどの感情）
アクションを起こす
（買う、投稿するなど、コンバージョン）

44. スマホアプリの特徴
・持ち歩き、常に利用できる
・生活が中心にありいつでもやめることができる
スマホアプリのサービスや製品は
ユーザーにとって生活のごく一部でしかない

45. わざわざ そうさせる感覚ではなく
もともと なにかえをする中で利用される
文脈を生活中心に考える

46. UXデザイン
ユーザーの行為の意味を み取って
意味のあるコンテンツを
ユーザーの生活を中心に
わかりやすく設計する

47. UIデザイン

48. ・簡単である（やれそうだと思わせる）
・効率が良い（面倒だと思わせない）
・一貫性がある（学習させる、間違えにくくさせる）
・「できる」ではなく「やれそう」
操作感

49. メタファ
（比喩、見立てること）
よく用いられるキーワード

50. タブやフォルダ
アイコン
（虫眼鏡、ゴミ箱、メールなど）
など

51. なんにでも見立てられる自由さと柔軟さがある
無理やり見立てると誤解を招く可能性もある
時代の流れに影響されやすかったり

52. アフォーダンス
よく用いられるキーワード
シグニファイア
もしくは

53. 環境に対して知覚的に判断できる
ある行為の可能性
そのものをどう扱えばいいのか
どのような性質があるのかという
視覚的なサイン

54. 押して開けるドアは
押すのに適した場所に
平らな板を付けることで
そのドアは押して開けるものだ
引いて開けるドアは
引くのに適した場所に
持ちやすい取っ手をつけることで
そのドアは引いて開けるものだ

55. 意識しないで自然に行動を起こさせる
ユーザーの行動を考えてデザインする

56. 潜在的に持つ意識を利用する
青は進め、赤は止まれ
青色のテキストで下線が引いてあれば
リンクしている
タブをタップすると切り替わる
など

57. 「当然そうだろうと思う」ユーザの認識を、
デザイン上の理由や
意外性を持たせ印象付けるなどの目的で
裏切るのはよろしくないです

58. OSのインターフェイスとあわせる
というのもあり

59. UIデザイン
ユーザーに一番してほしいことを
わかりやすく
意識させずに自然と行えるような
設計をする

60. まとめ

61. スマホの特性を知る
デザインの基礎を把握し
細部までこだわって制作する
ユーザーの行為の意味を み取って設計する
詰め込み過ぎない
文脈を生活中心に考える
ユーザーに一番してほしいことを
しやすいように設計する

62. 最後に

63. 遠くで見たり、近くで見たりしよう
柔軟にかんがえよう
パクるのではなくオマージュしよう
誰のために仕事をしているのかもう一回感がえよ♡
シンプルにいきよう

64. END
ありがとうございました