Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UCHIYAMA SHINTARO
Designer
これまでやってきたことは・・・
かみ
web
web
え
One show Interactive Bronze Pencil
文化庁メディア芸術祭 審査委員会推薦作品
東京インタラクティブアドアワード アド部門 入賞
New York festivals International Advertis...
あぷり
そして…最近やっているのが
•  画 面 が 小 さ い
スマホアプリの特徴
•  操 作 が マ ウ ス や キ ー ボ ー ド で は な く 指
•  持ち歩き、常に利用できる
•  生活が中心にあり、いつでもやめることができる
デザインの分類
広告
パッケージ
プロモーションサイト
ゲームアプリ
ツール系アプリ
ニュース系
アプリ
ツール系アプリ
サービスサイト
厳密には違うと思うけど
大体こんな感じ
UI/UXデザイン
キーワード
サービスや製品とそれを使う人間とをつなぐもの
操作感
UI
システムやサービスを使うことで得られる体験
使ったとき、使ったあとなに得られる満足感
UX
おんなの子に例えてみると
UI
見 た 目
UX
性格
心地よさ
性格も良くて気が利くし、
話していて楽しいななどの
体験
ファッション
自販機に例えてみると
UI
暑い…喉が渇いた
UX
デザインが爽やかで
飲みたくなる!
開けたときのプシュって音ジュースを買おう
さあ飲むぞ
甘い香り
潤った!また飲もう
(飲みやすさ)
(購入のしやすさ)
ある問題を解決するために思考・概念の組み立てを行い、
それを様々な媒体に応じて表現すること
デ ザ イ ン
問題を解決するための設計
UI/UXデザイン
ユ ー ザ ー に ど ん な 体 験 を し て も ら い
ど う 感 じ て も ら う か
そ の た め に ど う す れ ば 心 地 よ く 使 っ て も ら え る か を
設 計 す る
デザイン
要素をルールに合わせて設計していく
デザイン要素
色 カタチ文字
線 質感空間
色相・彩度・明度
フォントの種類
大きさ、間隔
四角、円、三角、
幾何学形など
直線、破線、波線
斜線、二重線など
ホワイトスペース
触覚的テクスチャ
視覚的テクスチャ
デザインの原則
統一 強調バランス
類似・対比 多様性リズム
デザインが統一されているか
フォント、色、形 要素の位置や面積の割合
強調することで
ユーザーの関心を集める
要素を調整することで
統一性がもてる
反復させることで
統一性がもてる
要素に変化をつけ...
基礎をしっかり抑えるのがコツ
メジャー感
細部にこだわってデザインすること
一つ一つは細かくて誰も気付かないような
工夫であったとしても、それが全体と調和して
デザインに詳しくない人でも
「なんとなくいい」と思わせること!
UXデザイン
人の体験を軸に設計
設計対象
①インターフェイス
②コンテンツ
③コンテクスト
インターフェイス
価値観、意味など一旦無視して
画面上にどう提示すればどう感じるか
どう見えるかなどを考える
ただ触っているだけで気持ちいいなと
思わせる感覚の提供
人間の振る舞いを捉える
ユーザーの行為の意味を み取る
仕組みづくりが重要
コンテンツ
ユーザーに取って意味のあるコンテンツかどうか
個々のライフスタイルから適切な利用価値を探る
見る、知る、感じるといった
満足感の提供
コンテンツをモリモリ詰め込むと
ボタンが大量にあったり
テキストの量がおおかったり
親切でおいたオプションなどが逆に邪魔になったり
webブラウザと同じ感覚で1画面にいろいろ詰め込むと
ユーザーに意思決定する場が増えてしまう
ユーザーにとって負担になる
機能がいっぱいあったらそれを使わなければいい
「使わない」という判断がストレスになる
旅行に行くときのスーツケースと同じ
便利だと思って詰め込み過ぎても
逆に不便になる
アプリに何を詰め込むか?
何を詰め込まなくても大丈夫か?
コンテクスト
ユーザーの考えや気持ちの流れ
時間の流れなどの設計
クリックする、タップする
ページが変わる
認知・共感・理解
(見る、知る、感じる)
満足感
(ワクワクする、楽しいなどの感情)
アクションを起こす
(買う、投稿するなど、コンバージョン)
スマホアプリの特徴
・持ち歩き、常に利用できる
・生活が中心にありいつでもやめることができる
スマホアプリのサービスや製品は
ユーザーにとって生活のごく一部でしかない
わざわざ そうさせる感覚ではなく
もともと なにかえをする中で利用される
文脈を生活中心に考える
UXデザイン
ユーザーの行為の意味を み取って
意味のあるコンテンツを
ユーザーの生活を中心に
わかりやすく設計する
UIデザイン
・簡単である(やれそうだと思わせる)
・効率が良い(面倒だと思わせない)
・一貫性がある(学習させる、間違えにくくさせる)
・「できる」ではなく「やれそう」
操作感
メタファ
(比喩、見立てること)
よく用いられるキーワード
タブやフォルダ
アイコン
(虫眼鏡、ゴミ箱、メールなど)
など
なんにでも見立てられる自由さと柔軟さがある
無理やり見立てると誤解を招く可能性もある
時代の流れに影響されやすかったり
アフォーダンス
よく用いられるキーワード
シグニファイア
もしくは
環境に対して知覚的に判断できる
ある行為の可能性
そのものをどう扱えばいいのか
どのような性質があるのかという
視覚的なサイン
押して開けるドアは
押すのに適した場所に
平らな板を付けることで
そのドアは押して開けるものだ
引いて開けるドアは
引くのに適した場所に
持ちやすい取っ手をつけることで
そのドアは引いて開けるものだ
意識しないで自然に行動を起こさせる
ユーザーの行動を考えてデザインする
潜在的に持つ意識を利用する
青は進め、赤は止まれ
青色のテキストで下線が引いてあれば
リンクしている
タブをタップすると切り替わる
など
「当然そうだろうと思う」ユーザの認識を、
デザイン上の理由や
意外性を持たせ印象付けるなどの目的で
裏切るのはよろしくないです
OSのインターフェイスとあわせる
というのもあり
UIデザイン
ユーザーに一番してほしいことを
わかりやすく
意識させずに自然と行えるような
設計をする
まとめ
スマホの特性を知る
デザインの基礎を把握し
細部までこだわって制作する
ユーザーの行為の意味を み取って設計する
詰め込み過ぎない
文脈を生活中心に考える
ユーザーに一番してほしいことを
しやすいように設計する
最後に
遠くで見たり、近くで見たりしよう
柔軟にかんがえよう
パクるのではなくオマージュしよう
誰のために仕事をしているのかもう一回感がえよ♡
シンプルにいきよう
END
ありがとうございました
アプリデザインのお勉強 UI/UXのお話
Upcoming SlideShare
Loading in …5
×

アプリデザインのお勉強 UI/UXのお話

17,928 views

Published on

アプリデザインとは
UI/UXデザインなんじゃないの?
っていうお話です

社内勉強会用

Published in: Design
  • Be the first to comment

アプリデザインのお勉強 UI/UXのお話

  1. 1. UCHIYAMA SHINTARO Designer
  2. 2. これまでやってきたことは・・・
  3. 3. かみ
  4. 4. web
  5. 5. web
  6. 6.
  7. 7. One show Interactive Bronze Pencil 文化庁メディア芸術祭 審査委員会推薦作品 東京インタラクティブアドアワード アド部門 入賞 New York festivals International AdvertisiOne show Interactive Bronze Pencil ng Awards Digital and Interactive Finalists 自分で言うのもなんだが意外とちゃんとしてる
  8. 8. あぷり そして…最近やっているのが
  9. 9. •  画 面 が 小 さ い スマホアプリの特徴 •  操 作 が マ ウ ス や キ ー ボ ー ド で は な く 指 •  持ち歩き、常に利用できる •  生活が中心にあり、いつでもやめることができる
  10. 10. デザインの分類 広告 パッケージ プロモーションサイト ゲームアプリ ツール系アプリ ニュース系 アプリ ツール系アプリ サービスサイト 厳密には違うと思うけど 大体こんな感じ
  11. 11. UI/UXデザイン キーワード
  12. 12. サービスや製品とそれを使う人間とをつなぐもの 操作感 UI
  13. 13. システムやサービスを使うことで得られる体験 使ったとき、使ったあとなに得られる満足感 UX
  14. 14. おんなの子に例えてみると UI 見 た 目 UX 性格 心地よさ 性格も良くて気が利くし、 話していて楽しいななどの 体験 ファッション
  15. 15. 自販機に例えてみると UI 暑い…喉が渇いた UX デザインが爽やかで 飲みたくなる! 開けたときのプシュって音ジュースを買おう さあ飲むぞ 甘い香り 潤った!また飲もう (飲みやすさ) (購入のしやすさ)
  16. 16. ある問題を解決するために思考・概念の組み立てを行い、 それを様々な媒体に応じて表現すること デ ザ イ ン 問題を解決するための設計
  17. 17. UI/UXデザイン ユ ー ザ ー に ど ん な 体 験 を し て も ら い ど う 感 じ て も ら う か そ の た め に ど う す れ ば 心 地 よ く 使 っ て も ら え る か を 設 計 す る
  18. 18. デザイン
  19. 19. 要素をルールに合わせて設計していく
  20. 20. デザイン要素
  21. 21. 色 カタチ文字 線 質感空間 色相・彩度・明度 フォントの種類 大きさ、間隔 四角、円、三角、 幾何学形など 直線、破線、波線 斜線、二重線など ホワイトスペース 触覚的テクスチャ 視覚的テクスチャ
  22. 22. デザインの原則
  23. 23. 統一 強調バランス 類似・対比 多様性リズム デザインが統一されているか フォント、色、形 要素の位置や面積の割合 強調することで ユーザーの関心を集める 要素を調整することで 統一性がもてる 反復させることで 統一性がもてる 要素に変化をつけたり 異なった要素を使用する ことで単調さをなくす
  24. 24. 基礎をしっかり抑えるのがコツ
  25. 25. メジャー感
  26. 26. 細部にこだわってデザインすること 一つ一つは細かくて誰も気付かないような 工夫であったとしても、それが全体と調和して デザインに詳しくない人でも 「なんとなくいい」と思わせること!
  27. 27. UXデザイン
  28. 28. 人の体験を軸に設計
  29. 29. 設計対象 ①インターフェイス ②コンテンツ ③コンテクスト
  30. 30. インターフェイス
  31. 31. 価値観、意味など一旦無視して 画面上にどう提示すればどう感じるか どう見えるかなどを考える ただ触っているだけで気持ちいいなと 思わせる感覚の提供 人間の振る舞いを捉える
  32. 32. ユーザーの行為の意味を み取る 仕組みづくりが重要
  33. 33. コンテンツ
  34. 34. ユーザーに取って意味のあるコンテンツかどうか 個々のライフスタイルから適切な利用価値を探る 見る、知る、感じるといった 満足感の提供
  35. 35. コンテンツをモリモリ詰め込むと ボタンが大量にあったり テキストの量がおおかったり 親切でおいたオプションなどが逆に邪魔になったり
  36. 36. webブラウザと同じ感覚で1画面にいろいろ詰め込むと ユーザーに意思決定する場が増えてしまう ユーザーにとって負担になる
  37. 37. 機能がいっぱいあったらそれを使わなければいい 「使わない」という判断がストレスになる
  38. 38. 旅行に行くときのスーツケースと同じ 便利だと思って詰め込み過ぎても 逆に不便になる
  39. 39. アプリに何を詰め込むか? 何を詰め込まなくても大丈夫か?
  40. 40. コンテクスト
  41. 41. ユーザーの考えや気持ちの流れ 時間の流れなどの設計
  42. 42. クリックする、タップする ページが変わる 認知・共感・理解 (見る、知る、感じる) 満足感 (ワクワクする、楽しいなどの感情) アクションを起こす (買う、投稿するなど、コンバージョン)
  43. 43. スマホアプリの特徴 ・持ち歩き、常に利用できる ・生活が中心にありいつでもやめることができる スマホアプリのサービスや製品は ユーザーにとって生活のごく一部でしかない
  44. 44. わざわざ そうさせる感覚ではなく もともと なにかえをする中で利用される 文脈を生活中心に考える
  45. 45. UXデザイン ユーザーの行為の意味を み取って 意味のあるコンテンツを ユーザーの生活を中心に わかりやすく設計する
  46. 46. UIデザイン
  47. 47. ・簡単である(やれそうだと思わせる) ・効率が良い(面倒だと思わせない) ・一貫性がある(学習させる、間違えにくくさせる) ・「できる」ではなく「やれそう」 操作感
  48. 48. メタファ (比喩、見立てること) よく用いられるキーワード
  49. 49. タブやフォルダ アイコン (虫眼鏡、ゴミ箱、メールなど) など
  50. 50. なんにでも見立てられる自由さと柔軟さがある 無理やり見立てると誤解を招く可能性もある 時代の流れに影響されやすかったり
  51. 51. アフォーダンス よく用いられるキーワード シグニファイア もしくは
  52. 52. 環境に対して知覚的に判断できる ある行為の可能性 そのものをどう扱えばいいのか どのような性質があるのかという 視覚的なサイン
  53. 53. 押して開けるドアは 押すのに適した場所に 平らな板を付けることで そのドアは押して開けるものだ 引いて開けるドアは 引くのに適した場所に 持ちやすい取っ手をつけることで そのドアは引いて開けるものだ
  54. 54. 意識しないで自然に行動を起こさせる ユーザーの行動を考えてデザインする
  55. 55. 潜在的に持つ意識を利用する 青は進め、赤は止まれ 青色のテキストで下線が引いてあれば リンクしている タブをタップすると切り替わる など
  56. 56. 「当然そうだろうと思う」ユーザの認識を、 デザイン上の理由や 意外性を持たせ印象付けるなどの目的で 裏切るのはよろしくないです
  57. 57. OSのインターフェイスとあわせる というのもあり
  58. 58. UIデザイン ユーザーに一番してほしいことを わかりやすく 意識させずに自然と行えるような 設計をする
  59. 59. まとめ
  60. 60. スマホの特性を知る デザインの基礎を把握し 細部までこだわって制作する ユーザーの行為の意味を み取って設計する 詰め込み過ぎない 文脈を生活中心に考える ユーザーに一番してほしいことを しやすいように設計する
  61. 61. 最後に
  62. 62. 遠くで見たり、近くで見たりしよう 柔軟にかんがえよう パクるのではなくオマージュしよう 誰のために仕事をしているのかもう一回感がえよ♡ シンプルにいきよう
  63. 63. END ありがとうございました

×