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.

心地よいUIの温度 - 言葉と気遣いで高めるUI -

204,682 views

Published on

Event : UI温泉 in 綱島温泉 2015.02.07
Speaker : 割石裕太 / wariemon - UI Designer @KAYAC inc. / OH

UI温泉 - UIと湯を愛するイベント -
4番目のスピーカーとして登壇させていただきました。
UI と 温泉 の共通点として「心地よい温度」を見出し、
そこに至るまでのフローを考えた内容となっております。

Published in: Design
  • Be the first to comment

心地よいUIの温度 - 言葉と気遣いで高めるUI -

  1. 1. OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. Speaker No.4 / KAYAC inc. 割石 裕太
  2. 2. 割石 裕太 KAYAC inc. Designer (2012.4 - ) 自己紹介 @KAYAC inc. OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  3. 3. @wariemon Art Direction & Web / App / Blanding / Logo Design OH : http://wariemon.com 自己紹介 @OH (Personal Work) OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  4. 4. つくっているもの Filters - Filter Camera & Platform - Lobi - Chat & Game Community - OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. KAYAC 唯一の サービス の UIデザイナー です
  5. 5. Lobi - Chat & Game Community - http://web.lobi.co/ OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  6. 6. Lobi - Chat & Game Community - http://web.lobi.co/ OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  7. 7. Filters - Filter Camera & Platform - http://filters.kayac.com OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  8. 8. Filters - Filter Camera & Platform - http://filters.kayac.com OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  9. 9. Filters - Filter Camera & Platform - http://filters.kayac.com OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  10. 10. UIと温泉 難しいお題… OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 前段 - UIと温泉
  11. 11. UIと温泉の共通点 前段 - UIと温泉 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  12. 12. 心地よい温度を保つことが、 非常に大事。 前段 - UIと温泉 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  13. 13. 人が心地よいと思えること がゴールなのでは。 前段 - UIと温泉 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  14. 14. …ということで、 ここより本編です! 前段 - UIと温泉 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  15. 15. 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 言葉と気配りでさらに高めるUI
  16. 16. 今回はいわゆる デザインそのものより、 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  17. 17. 言葉や、ちょっとした気遣い に注目した内容です。 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  18. 18. 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 生きているか 全体把握とコントロール 行動提案 人間的要素
  19. 19. 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 生きているか 全体把握とコントロール 行動提案 人間的要素 ユーザーにとって心地よい温度
  20. 20. 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 感情はあるか 全体把握とコントロール 行動提案 人間的要素 ユーザーにとって心地よい温度
  21. 21. みなさんのチームの、 ワーディング 担当はだれですか? 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  22. 22. ぼくはこの領域もUIデザイナーが、 担当するべきだと考えています。 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  23. 23. なぜならワーディングは UI の 正しく意味が伝わっているか を司る重要な要素であるからです。 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  24. 24. なぜならワーディングは UI の 正しく意味が伝わっているか を司る重要な要素であるからです。 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  25. 25. ふとした言葉のひとつに、 気配りが足りないだけで、 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  26. 26. 熱は冷めてしまうものです。 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  27. 27. 今回、Filters の新規開発では 私が遷移を全部書き起こし、 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  28. 28. エラーの把握とワーディングも 担当しました。 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  29. 29. 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 全遷移を書き起こし、文言の把握を行います。
  30. 30. 全体を把握しておくことで、 ユーザーの熱を冷まさせることなく 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  31. 31. 次に行う「行動の提案」も 漏らさず行うことができます! 1. 意味が伝わるか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  32. 32. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 生きているか 全体把握とコントロール 行動提案 人間的要素 ユーザーにとって心地よい温度
  33. 33. ユーザーに伝わる言葉で、 説明できるようになったら 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  34. 34. 話しかけたり、提案をして、 コミュニケーションに持ち込みましょう。 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  35. 35. 内容は具体的であればあるほど、 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  36. 36. ユーザーは悩むことなく判断すること ができます。 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  37. 37. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. ほぼ一緒に見えますが、
  38. 38. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. ここが違います!
  39. 39. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 提案 になったことで、
  40. 40. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 参加してからのアクションが明確に。
  41. 41. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. ユーザーへの行動の提案 機械的(システム的)文言 正しく伝わる言葉
  42. 42. 2. 呼びかけているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. はじめの地点からすると、ずいぶんと 心地よい温度になったのでは!
  43. 43. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 生きているか 全体把握とコントロール 行動提案 人間的要素 ユーザーにとって心地よい温度
  44. 44. 最後は、少し前の2つとは違う アプローチのお話です。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  45. 45. 事例をベースに 細かな遊び心(気遣い)で 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  46. 46. ユーザーに熱を持ったまま、 サービスに参加して頂けたお話です。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  47. 47. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 以前までの Lobi のログイン画面
  48. 48. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 問題はないですが、
  49. 49. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 温度の低いものでした。
  50. 50. そして今回、ログイン画面の 大改修を行いました! 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  51. 51. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  52. 52. デザイン自体が大きく変わったことも ありますが、 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  53. 53. ひとつ、生きているように感じる ギミックをいれてみました。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  54. 54. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 入力画面で間違えると、
  55. 55. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. びっくりします。
  56. 56. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. もちろん正しく入力すると、
  57. 57. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 喜びます。
  58. 58. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. クールなデザイン案より、
  59. 59. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 感情あるキャラクターを表に出し、
  60. 60. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. ログインのフローも一緒に
  61. 61. 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 熱をもって接してくれる。
  62. 62. デザインの改修後、 新規ユーザーの継続率が伸び、 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  63. 63. 新規登録・ログイン の突破率を 上げることにも成功しました。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  64. 64. 入り口から熱をもって迎え入れれば、 そのあともいい温度を持って 楽しんでくれる。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  65. 65. 今回の話のまとめとなる お話でした。 3. 生きているか OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  66. 66. 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. 意味が伝わるか 呼びかけているか 感情はあるか 全体把握とコントロール 行動提案 人間的要素 ♨ ユーザーにとって心地よい温度
  67. 67. 数字を上げる施策も、 サービスの体験を変える施策も、 数多ありますが、 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  68. 68. 熱をもった言葉と細かい気配り、 心地よい温度で楽しんで頂く。 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  69. 69. ひとを気遣う視点をもつことと、 ひとをつなぐサービスの発展は、 共にあると思います。 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  70. 70. それではみなさん、 湯冷めしないように暖かくして、 最後までお楽しみください! 心地よいUIの温度 OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design.
  71. 71. OH is a design project by yuta wariishi.  website design, app UI/UX design, Branding & Logo design. http://wariemon.com / wariemon.oh@gmail.com

×