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

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

on

  • 1,726 views

http://atnd.org/events/42371

http://atnd.org/events/42371

Statistics

Views

Total Views
1,726
Views on SlideShare
1,631
Embed Views
95

Actions

Likes
17
Downloads
4
Comments
0

1 Embed 95

https://twitter.com 95

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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