• Like
  • Save
UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる!フロントエンド勉強会)
Upcoming SlideShare
Loading in...5
×

UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる!フロントエンド勉強会)

  • 1,185 views
Uploaded on

http://atnd.org/events/42371

http://atnd.org/events/42371

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,185
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
17

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