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.

UX / UIデザインって何?

70,595 views

Published on

ソフトウェアのUX / UIデザイン。
それぞれの役割について触れた資料です。

Published in: Design
  • Be the first to comment

UX / UIデザインって何?

  1. 1. UX / UIデザインって何? JustSystems UXデザイングループ / TAGUCHI
  2. 2. UXとUI。 セットでよく耳にするようになったワードです。
  3. 3. 最近ではUIデザインが 何を指しているのか明確になりました。 アイコンやバナーだったり、画面レイアウトだったり、画面遷移だったり。
  4. 4. でもUXデザインが指している内容は 曖昧な事が多くて困っている人も多いのでは?
  5. 5. 言ったら何でもUX(ユーザー体験)ですからね。 ・ティッシュで鼻をかんだ → すっきりした ・素敵なレストランで美味しいご飯を食べた → 楽しい時間を過ごせた ・遊園地で遊んだ → 好きなキャラクターや乗り物に囲まれて幸せだった 業界やモノの数だけUXデザインはあるということかと。
  6. 6. ジャストシステムはソフトウェア業界の会社です。 じゃあソフトウェアのUXって?
  7. 7. ひとまず、ソフトウェア業界においては 主に3つだけ理解しておくと良いと思います。 User Interface(UI) Interaction User Experience(UX) + Design
  8. 8. まずはそれぞれのワードについて簡単に。
  9. 9. 天才ケンケンパ 出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses ○△□ によるケンケンパです。 ○△□にうまく乗ることができると、音が出て、映像によって映し出された床は、 美しくなります。 同じ形や色など、関連性のある○△□に連続して飛び乗ると、さらに美しくなります。 例えば、□同士だと、□のエフェクトが溢れ、赤色同士だと、赤色のエフェクトが溢れます。 子どもたちは、おもいっきり身体を動かしながら、遊ぶことができます。そして、より上級者は、 遊びながら瞬時に、空間を抽象化し関連性を見つけ出す訓練になります。
  10. 10. User Interface(UI) Design
  11. 11. ・画面内の要素やパーツはどんなか ・それらのレイアウトや遷移はどうしたらいいか 出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
  12. 12. Interaction Design
  13. 13. ・操作(着地)した結果、どんな反応を返すか ・その反応は理解を助けるか ・心地よいか 出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
  14. 14. User Experience(UX) Design
  15. 15. UI / Interaction を介してどんな体験をさせるか 夢の世界にいるみたい! 楽しい! 面白そう! 私もやってみたいなぁ! 出典:チームラボ http://www.team-lab.com/hopscotchforgeniuses
  16. 16. つまりUXって?
  17. 17. = UXのためのUIとInteraction
  18. 18. 楽しい、嬉しい、感動、悲しい、切ない、良かった! ユーザーにとって価値あること
  19. 19. では、今度は実例で見てみましょう。
  20. 20. ATOK Pad ・iOS App。 ・ATOKという高精度な日本語変換がウリで  サクサクとメモがかけるApp。
  21. 21. ATOK Padを構成している最低限の要素 超賢い変換システムとキーボード メモ帳 +
  22. 22. User Experience(UX) Design ・サクサク思い通りにアイデアを残せて気持ちが良い! ・メモを同期して色んな場所やデバイスで活かせて嬉しい! こんな体験を実現するUIとInteractionを考えていく。 めちゃくちゃざっくり言うと…
  23. 23. User Interface(UI) Design 集中できるようにシンプルなメモ帳 iOSに違和感がないキーボード 操作を促すアイコン など
  24. 24. Interaction Design スライドして変換候補全画面表示 長押しして拡張機能のガイド表示 iPhoneを振って共有や同期
  25. 25. ざっくりと要点だけ絞ると案外単純ですよね。 (もちろん厳密に言えばもっと違う解釈があったりしますが)
  26. 26. まとめ
  27. 27. ソフトウェアのUX / UIデザイン Appやサービスを通じて、 どんな体験(UX)をユーザーに提供できるかを考える (もちろんリリース後も継続的に!) それを実現するためのUIとInteraction
  28. 28. というわけで
  29. 29. わたしたちと一緒に 面白い・新しい体験価値を考えてみませんか? エントリーはコチラから!
  30. 30. こちらのスライドもどうぞ! 訴求ファースト。キービジュアル。 UXデザイナー1年生の1年間
 商品力強化ワークショップ

×