Your SlideShare is downloading. ×
20130722 gumiStudy#15 UXとUXのためのデザインのはなし
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

20130722 gumiStudy#15 UXとUXのためのデザインのはなし

337
views

Published on

http://gu3.co.jp/news/archives/2076 …

http://gu3.co.jp/news/archives/2076
http://connpass.com/event/2721/


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
337
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UXとUXのためのデザインのはなし プロダクト&サービスグループ 佐々木 将之
  • 2. 2ndFACTORYCO.,Ltd. 2 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 3. 2ndFACTORYCO.,Ltd. 3 自己紹介
  • 4. 2ndFACTORYCO.,Ltd. 4 自己紹介 2007年より、通信システム系受託 システム企業に入社。自社製品開 発部署にて、ホームネットワーク 系メディアプレイヤー関連のミド ルウェア開発業務に従事。2012年 11月に株式会社セカンドファクト リー入社。 エンジニアとしてExTOUCH、 ExTOUCH Biz、QOOpaなどのプ ロダクト・サービス開発に従事。 佐々木 将之 エクスペリエンスアーキテクト プロダクト&サービスグループ
  • 5. 2ndFACTORYCO.,Ltd. 5 株式会社セカンドファクトリー
  • 6. 2ndFACTORYCO.,Ltd. 6 セカンドファクトリーを 知ってる人、挙手お願いいたします 先生、怒らないから
  • 7. 2ndFACTORYCO.,Ltd. 7 セカンドファクトリーの提供できること UX&CLOUD Professional Services Comfortable experience for everyone everywhere Device CLOUD Consulting(Engagement) Solution & Services Design & Development
  • 8. 2ndFACTORYCO.,Ltd. 8 バランスのよい開発
  • 9. 2ndFACTORYCO.,Ltd. 9 セカンドファクトリーのチームモデル
  • 10. 2ndFACTORYCO.,Ltd. 10 セカンドファクトリーのチームモデル エクスペリエンス ストラテジスト エクスペリエンス マネージャー エクスペリエンス アーキテクト
  • 11. 2ndFACTORYCO.,Ltd. 11 自己紹介 2007年より、通信システム系受託 システム企業に入社。自社製品開 発部署にて、ホームネットワーク 系メディアプレイヤー関連のミド ルウェア開発業務に従事。2012年 11月に株式会社セカンドファクト リー入社。 エンジニアとしてExTOUCH、 ExTOUCH Biz、QOOpaなどの自 社プロダクト・サービス開発に従 事。 佐々木 将之 エクスペリエンスアーキテクト プロダクト&サービスグループ
  • 12. 2ndFACTORYCO.,Ltd. 12 裏の自己紹介 「開発の楽しさを発見しよう。広 げよう。」「開発の現場を前進さ せよう」をコンセプトとした 【DevLOVE】の裏方に2010年10 月よりジョイン。2010年度産業技 術大学院大学履修証明プログラム 人間中心デザイン履修証明取得。 2011年3月より「現場で使える人 間中心デザインの実践」をコンセ プトとした【hcdvalue】の立ち上 げより参加。 ちゃちゃき 勉強会イベント・ワークショップの企画・運営 DevLOVE & hcdvalue chachaki
  • 13. 2ndFACTORYCO.,Ltd. 13 社外勉強会コミュニティ hcdvalue DevLOVE 開発の楽しさを発見しよう。広げよう。 開発の現場を前進させよう。 現場で使える人間中心設計(HCD)の実践
  • 14. 2ndFACTORYCO.,Ltd. 14 HDIfesのご紹介 hcdvalueDevLOVE IGDAJapan
  • 15. 2ndFACTORYCO.,Ltd. 15 注意! これから話すことは 「エンジニア」視点から見たUXやデザインのお話です。 「デザイナー」視点とは異なる面があります。
  • 16. 2ndFACTORYCO.,Ltd. 16 私のモチベーション エンジニアリング (創り出す方法、生み出す方法、プラスの方向) と デザイン (見分ける方法、見極める方法、マイナスの方向) を 繋げていきたい
  • 17. 2ndFACTORYCO.,Ltd. 17 陰陽みたいなイメージです
  • 18. 2ndFACTORYCO.,Ltd. 18 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 19. 2ndFACTORYCO.,Ltd. 19 UXのはなし
  • 20. 2ndFACTORYCO.,Ltd. 20 UX?
  • 21. 2ndFACTORYCO.,Ltd. 21 ISO9241-210における定義  製品やシステム、サービスの利用、および/もしくは予 想された使い方によってもたらされる人々の知覚と反応 1. 使用前、使用中、使用後に起こる、ユーザの感情、新年、嗜好、近く、生理学的・心理学 的な反応、態度、達成感のすべてを含む。 2. ブランドイメージ、見た目、機能、システムのパフォーマンス、インタラクティブシステ ムのインタラクティブな振る舞いと支援機能、事前の経験から生じたユーザの内的および 身体的状態、態度、スキルとパーソナリティ、利用状況の結果である。 3. ユーザの個人的目標という観点から考えた時には、通常はユーザーエクスペリエンスに付 随する知覚的・感情的な側面をユーザービリティは含むことができる。ユーザービリティ の基準を用いてユーザーエクスペリエンスの諸側面を評価することができる。
  • 22. 2ndFACTORYCO.,Ltd. 22 ISO9241-210における定義  製品やシステム、サービスの利用、および/もしくは予 想された使い方によってもたらされる人々の知覚と反応 1. 使用前、使用中、使用後に起こる、ユーザの感情、新年、嗜好、近く、生理学的・心理学 的な反応、態度、達成感のすべてを含む。 2. ブランドイメージ、見た目、機能、システムのパフォーマンス、インタラクティブシステ ムのインタラクティブな振る舞いと支援機能、事前の経験から生じたユーザの内的および 身体的状態、態度、スキルとパーソナリティ、利用状況の結果である。 3. ユーザの個人的目標という観点から考えた時には、通常はユーザーエクスペリエンスに付 随する知覚的・感情的な側面をユーザービリティは含むことができる。ユーザービリティ の基準を用いてユーザーエクスペリエンスの諸側面を評価することができる。
  • 23. 2ndFACTORYCO.,Ltd. 23 ヒトとモノ・サービスの関係 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービス
  • 24. 2ndFACTORYCO.,Ltd. 24 ヒトとモノ・サービスの関係 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービス 人工物 UX
  • 25. 2ndFACTORYCO.,Ltd. 25 ヒトとモノ・サービスの関係 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX フロントエンド バックエンド
  • 26. 2ndFACTORYCO.,Ltd. 26 ヒトとモノ・サービスの関係 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX インタラクション Ix インタフェース UI
  • 27. 2ndFACTORYCO.,Ltd. 27 ヒトとモノ・サービスの関係 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX 利用状況が異なれば 同じUIでもUXは 異なります
  • 28. 2ndFACTORYCO.,Ltd. 28 ここまでのまとめ  UXはヒトの内面の話です – UXとUIは関連はするが別物です – 字面が似ているだけです  UX「のための」デザインです(Design for UX) – UX「を」デザインするのではないです(Design UX) – 私達開発者がデザインする対象は「人工物」です  利用状況の把握が大事です – 全く同じUIでも、利用状況が異なれば全く違うものになります
  • 29. 2ndFACTORYCO.,Ltd. 29 ここまで 大丈夫です?抽象的すぎます?
  • 30. 2ndFACTORYCO.,Ltd. 30 UX白書について  UX白書とは? UXの薄い本 ドイツのDagstuhlで専門家(研究 者・実務家)30名が「UXの概念」に ついて共通認識を形成すべく、 2010年9月に実施したセミナーにて 議論された内容をまとめた宣言文。 2011年2月英語版web公開。 2011年12月日本語版web公開。 http://www.allaboutux.org/uxwhitepaper http://site.hcdvalue.org/docs
  • 31. 2ndFACTORYCO.,Ltd. 31 UX白書における定義(期間的概念) 予期的 UX 利用前 一時的 UX 利用中 エピソード 的UX 利用後 累積的 UX 利用時間 全体 体験を 想像する 体験する ある体験を 内省する 回想する iPhoneに触れる前、 CMなど iPhoneを 使ってる間 iPhoneを思い返す iPhoneが 無くてはならない ものになる
  • 32. 2ndFACTORYCO.,Ltd. 32 UXのはなしのまとめ  UXは製品・サービスに「触れている間」だけではない – 製品・サービスに触れる前 – 製品・サービスに触れた後、思い返す時 – それによって「意味」が形成される
  • 33. 2ndFACTORYCO.,Ltd. 33 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 34. 2ndFACTORYCO.,Ltd. 34 UXDのはなし
  • 35. 2ndFACTORYCO.,Ltd. 35 UXDの話 では、製品・サービスに対する反応は、 全部「UX」なのではないか? ⇒はい。私はそう思います。 ⇒大事なのは「UX」ではなく「UXD(Design for UX)」 の視点だと思っています。
  • 36. 2ndFACTORYCO.,Ltd. 36 UXDの話  デザイン – 意匠(装飾) – 設計(こちらの意味で使っています!)  UXのために「設計」する  UXのために「計画」する ⇒UXを「再生産可能」なものにする
  • 37. 2ndFACTORYCO.,Ltd. 37 産業革命以降の話 使い手 作り手 1:1 産業革命 以前 使い手 作り手 N:1 産業革命 以後 「一点もの」 使い手にfixしたものづくり 大量生産・大量消費 コスト競争 高機能化
  • 38. 2ndFACTORYCO.,Ltd. 38 あるUXを共通の認識に あるUX 開発者 デザイナ 運用担当 ユーザー サポート マーケタ
  • 39. 2ndFACTORYCO.,Ltd. 39 ん?? 急に話変えました?
  • 40. 2ndFACTORYCO.,Ltd. 40 UXDのレイヤー構造 ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン
  • 41. 2ndFACTORYCO.,Ltd. 41 UXDのレイヤー構造 ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン UXのための 人工物のデザイン
  • 42. 2ndFACTORYCO.,Ltd. 42 UXDのレイヤー構造 ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン UXのための 人工物のデザイン UXを提供するための 仕組みのデザイン
  • 43. 2ndFACTORYCO.,Ltd. 43 UXDのレイヤー構造 ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン UXのための 人工物のデザイン UXを提供するための 仕組みのデザイン UXを提供する仕組み の仕組みのデザイン
  • 44. 2ndFACTORYCO.,Ltd. 44 「仕組み」をつくる
  • 45. 2ndFACTORYCO.,Ltd. 45 あるUXを軸に組織をつくる あるUX 開発者 デザイナ 運用担当 ユーザー サポート マーケタ
  • 46. 2ndFACTORYCO.,Ltd. 46 ここまでのまとめ  開発者にとって、大事なのはUXそのものよりUXD  再生産可能な体験を提供するための話をしましょう  どのレイヤの話をしたいのか – UXを考えたUIのデザイン – ユーザーシナリオのデザイン – ユーザーシナリオを考えられる組織のデザイン
  • 47. 2ndFACTORYCO.,Ltd. 47 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 48. 2ndFACTORYCO.,Ltd. 48 HCDのはなし
  • 49. 2ndFACTORYCO.,Ltd. 49 どう作る?  UXDが大事なのはなんとなく分かった。  じゃあ、どうやってつくるの?
  • 50. 2ndFACTORYCO.,Ltd. 50 ここのレイヤの話をします ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン UXを提供するための 仕組みのデザイン
  • 51. 2ndFACTORYCO.,Ltd. 51 こうやったらいいのでは? ユーザーやその周辺のことを 分析する ユーザーのための製品・サービ スを企画する・作ってみる ユーザーが体験できているか 評価する ユーザーやその周辺のことを 調べる
  • 52. 2ndFACTORYCO.,Ltd. 52 こうやったらいいのでは? 分析する 作ってみる 評価する 調べてみる よしやろう! いい製品だ!
  • 53. 2ndFACTORYCO.,Ltd. 53 ISO9241-210のHCDプロセス ユーザーの 要求事項の 明示 ユーザーの 要求を満たす 解決策の作成 要求事項に 対する 設計の評価 利用状況の 把握と明示 人間中心設計 プロセスの計画 システムが ユーザーの要求 事項を満たす
  • 54. 2ndFACTORYCO.,Ltd. 54 調査・分析の対象 ユーザーの 要求事項の 明示 ユーザーの 要求を満たす 解決策の作成 要求事項に 対する 設計の評価 利用状況の 把握と明示 人間中心設計 プロセスの計画 システムが ユーザーの要求 事項を満たす
  • 55. 2ndFACTORYCO.,Ltd. 55 調査・分析の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX
  • 56. 2ndFACTORYCO.,Ltd. 56 調査・分析の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX • インタビュー • アンケート • 参与観察 • ペルソナ・シナ リオ法や構造化 シナリオ法 • KJ法やカード ソート • KA法
  • 57. 2ndFACTORYCO.,Ltd. 57 解決策作成の対象 ユーザーの 要求事項の 明示 ユーザーの 要求を満たす 解決策の作成 要求事項に 対する 設計の評価 利用状況の 把握と明示 人間中心設計 プロセスの計画 システムが ユーザーの要求 事項を満たす
  • 58. 2ndFACTORYCO.,Ltd. 58 解決策作成の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX
  • 59. 2ndFACTORYCO.,Ltd. 59 解決策作成の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX • ペーパープロト タイピング • モックアップ • アクティングア ウト
  • 60. 2ndFACTORYCO.,Ltd. 60 評価の対象 ユーザーの 要求事項の 明示 ユーザーの 要求を満たす 解決策の作成 要求事項に 対する 設計の評価 利用状況の 把握と明示 人間中心設計 プロセスの計画 システムが ユーザーの要求 事項を満たす
  • 61. 2ndFACTORYCO.,Ltd. 61 評価の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX
  • 62. 2ndFACTORYCO.,Ltd. 62 評価の対象 コンテキスト(利用状況) ヒト 画面 (デバイス) システム Web サービスUX • ユーザーテスト • インタビュー
  • 63. 2ndFACTORYCO.,Ltd. 63 ここまでのまとめ  UXD(シナリオのデザイン)の一例としてのHCDプロセ スをご紹介しました  調査→分析→試行→評価のプロセスは単なるPDCAです し、手法・技法もおおよそ揃ってきました。約10年の積 み上げがありますので、使わない手はないかなぁと思い ます。
  • 64. 2ndFACTORYCO.,Ltd. 64 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 65. 2ndFACTORYCO.,Ltd. 65 QOOPa
  • 66. 2ndFACTORYCO.,Ltd. 66 QOOPa  クラウドアプリケーション – 常に最新アプリケーションを提供 – 必要期間にご利用可能(SaaS)  スマートフォンを利用 – 高価なハンディ不要  BYOD・ソーシャル – SNSを活用して広告可能
  • 67. 2ndFACTORYCO.,Ltd. 67 QOOPa ハンディ端末 お客様の スマートフォン オーダーシステム クラウドアプリケーション Wifi や 3G で利用可能 常に最新のアプリケーションをご提供! お客様のスマホでも! キッチン端末
  • 68. 2ndFACTORYCO.,Ltd. 68 タスクボードの導入
  • 69. 2ndFACTORYCO.,Ltd. 69 これはUXD?  UIデザインと開発の協業  スマートフォンを中心としたシナリオデザイン  そこに至るためのチームのタスク・意識の共有
  • 70. 2ndFACTORYCO.,Ltd. 70 UXDのレイヤー構造 ユーザーを共通認識とした 組織のデザイン ユーザーのシナリオのデザイン ユーザーのことを考えた UI・グラフィックのデザイン UXのための 人工物のデザイン UXを提供するための 仕組みのデザイン UXを提供する仕組み の仕組みのデザイン
  • 71. 2ndFACTORYCO.,Ltd. 71 デザインとエンジニアリング Development Engineering Design
  • 72. 2ndFACTORYCO.,Ltd. 72 プロセス 開発プロセス エンジニアリング プロセス デザイン プロセス 1 2 7 8 3 4 5 6 調査 分析 解決策 評価 要件定義 設計 実装 テスト
  • 73. 2ndFACTORYCO.,Ltd. 73 Incremental と Iterative Design? Engineering?
  • 74. 2ndFACTORYCO.,Ltd. 74 本日お話しすること UXのはなし UXDのはなし HCDのはなし 弊社事例のご紹介 質疑応答など
  • 75. 2ndFACTORYCO.,Ltd. 75 私のモチベーション エンジニアリング (創り出す方法、生み出す方法、プラスの方向) と デザイン (見分ける方法、見極める方法、マイナスの方向) を 繋げていきたい
  • 76. 2ndFACTORYCO.,Ltd. 76 まとめ(1/4)  UXはヒトの内面の話です – UXとUIは関連はするが別物です – 字面が似ているだけです  UX「のための」デザインです(Design for UX) – UX「を」デザインするのではないです(Design UX) – 私達開発者がデザインする対象は「人工物」です  利用状況の把握が大事です – 全く同じUIでも、利用状況が異なれば全く違うものになります
  • 77. 2ndFACTORYCO.,Ltd. 77 まとめ(2/4)  UXは製品・サービスに「触れている間」だけではない – 製品・サービスに触れる前 – 製品・サービスに触れた後、思い返す時 – それによって「意味」が形成される
  • 78. 2ndFACTORYCO.,Ltd. 78 まとめ(3/4)  開発者にとって、大事なのはUXそのものよりUXD  再生産可能な体験を提供するための話をしましょう  どのレイヤの話をしたいのか – UXを考えたUIのデザイン – ユーザーシナリオのデザイン – ユーザーシナリオを考えられる組織のデザイン
  • 79. 2ndFACTORYCO.,Ltd. 79 まとめ(4/4)  UXD(シナリオのデザイン)の一例としてのHCDプロセ スをご紹介しました  調査→分析→試行→評価のプロセスは単なるPDCAです し、手法・技法もおおよそ揃ってきました。約10年の積 み上げがありますので、使わない手はないかなぁと思い ます。
  • 80. We are designing future experience.