AITC 2011 年 度 第 6 回 ユーザーエクスペリエンス 技 術 部 会 & ネットデバイスアプリケーション 部 会 招 待 セミナー: ミツエーリンクス 金 山 豊 浩 UXデザイン 入 門 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2012 年 6 月 21 日 株 式 会 社 ミツエーリンクス 第 七 本 部 (UX)
アジェンダ 0. 自 己 紹 介 & 会 社 紹 介 1. UXとは? 2. UXデザイン プロセス 3. UXデザイン メソッド a. コンテクスチュアル インクワイアリ b. ペルソナ c. ストーリーボード d. スケッチ 4. Q&A, ディスカッション Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2
0. 自 己 紹 介 & 会 社 紹 介 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 3
金 山 豊 浩 (かなやま とよひろ)について 88 01 09 職 歴 : SE EC UX 志 : UXで 日 本 と 世 界 を 繋 ぐ 現 職 : UX Evangelist Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 4
UX コミュニティ 活 動 UPA member( 01-) Usability Professionals Association UPA Japan Secretary UXPA Asia Regional Director( 予 ) User Experience Professionals Association Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 5
Mitsue-Links : Communication Design Company
UXalliance: グローバル 調 査 における 世 界 的 なUX 企 業 の 国 際 ネットワーク ミツエーリンクスは UXallianceパートナー ( 各 国 1 社 のみ)
1. UXとは? Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 8
1. UXとは? ユーザー 体 験 User U X Experience Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 9
1. UXとは? (UXの 具 体 例 ) 製 品 サービスを 使 った 時 の 体 験 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 10
1. UXとは? (UXの 構 成 要 素 ) 役 に 立 つ useful 使 いやすい usable 好 ましい desirable 価 値 がある valuable 探 しやすい findable バリアフリー である accessible 信 頼 できる credible Peter Moville 氏 が 提 唱 するUXのハニカム 構 造 出 典 :http://semanticstudios.com/publications/semantics/000029.php Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 11
時 間 1. UXとは? (UXの 構 成 要 素 ) ソフトウェアインターフェースとしてのWeb (タスク 中 心 の 要 素 定 義 ) 表 層 具 体 的 Webが 内 包 する 基 本 的 な2 重 性 ビジュアルデザイン 制 作 完 了 ハイパーテキスト システムとしてのWeb ( 情 報 中 心 の 要 素 定 義 ) 骨 格 インターフェース デザイン 情 報 デザイン ナビゲーション デザイン 構 造 インタラクション デザイン 情 報 アーキテクチャ 要 件 機 能 仕 様 コンテンツ 要 件 戦 略 抽 象 的 ユーザーの 需 要 サイトの 目 的 コンセフ ト 定 義 Jesse James Garrett 氏 が 提 唱 するUXの 要 素 (5 階 層 モデル) 出 典 :http://www.jjg.net/elements/translations/elements_jp.pdf より 抜 粋 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 12
1. UXとは? (ウェブサイトの 構 成 要 素 ) ロゴ&グローバルナビ 表 層 骨 格 構 造 要 件 戦 略 サイト 提 供 者 の 狙 い メニュー プロジェクト SNS コンテンツ お 知 らせ 利 用 者 のニーズ AITCサイト Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 13
1. UXとは? ( 機 能 性 能 重 視 から) ユーザー 軽 い 小 さい 提 供 速 い! 機 能 豊 富 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 14
1. UXとは? (ユーザー 体 験 重 視 へ) ユーザー 目 的 使 う 場 面 体 験 快 適 楽 しい! 手 順 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 15
2. UXデザイン プロセス Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 16
和 書 UXデザイン 入 門 ( 日 本 人 向 けに 執 筆 ) 出 版 : 2012 年 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 17
UXデザインの 考 え 方 (ユーザー 要 件 反 映 ) ビジネス 要 件 ( 戦 略 企 画 ) 経 営 者 企 画 部 門 IT 部 門 アーキテクト プログラマー UX デザイン 製 品 サービス 技 術 要 件 ( 機 能 仕 様 ) ユーザー 要 件 (ユーザーニーズ) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 18
UXデザインの 考 え 方 ( 繰 返 しプロセス) ユーザーとニーズを 知 る 良 い 解 決 案 解 決 案 を 考 える 解 決 案 を 試 す (プロトタイプ) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 19
SDLC と UX デザイン 企 画 要 件 UX デザイン 保 守 設 計 UI 設 計 出 荷 実 装 テスト UI デザイン Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 20
UX デザイン プロセス ビジュアル デザイン ユーザー要件 ストーリーボード スケッチ ユーザビリティ テスト デザイン調査 インタラクション デザイン UX デザイン ペルソナ ワイヤーフレーム プロトタイプ 実装 開発 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 21
3. UXデザイン メソッド Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 22
3-a. コンテクスチュアル インクワイアリ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 23
デザイン 調 査 とは? UXデザインの 第 一 段 階 はユーザーを 理 解 すること デザイン 調 査 で 明 らかにすること ユーザーのゴール モチベーション ユーザーの 振 る 舞 いパターン Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 24
ユーザーを 理 解 するための 手 法 ユーザーインタビュー フォーカスグループ フィールドワーク(エスノグラフィ) アンケート カードソート ユーザビリティテスト コンテクスチュアル インクワイアリ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 25
コンテクスチュアル インクワイアリ ユーザーのコンテキスト( 文 脈 )のなかに 入 り 込 んで 質 問 を 行 っていく 調 査 法 師 匠 と 弟 子 モデル (Hugh Beyer, Karen Holtzblatt) ユーザーについての 質 的 データをもっとも 効 率 よ く 効 果 的 に 収 集 できる (Alan Cooper, et al.) Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 26
ユーザーを 観 察 する 1. コンテクスチュアル インクワイアリの 様 子 を 観 察 してください 2. どのような 行 動 モチベーション ニーズの 特 徴 があるかを 注 意 しながら 観 察 してください Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 27
デザイン 調 査 のアウトプット 発 話 行 動 記 録 インタビューメモ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 28
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 29
3-b. ペルソナ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 30
ペルソナ シナリオの 作 り 方 架 空 のECサイト 梵 天 モール を 例 にご 説 明 します インタビューメモ タイプ 行 動 変 数 の 抽 出 とマッピング ペルソナ/シナリオ 作 成 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 31
タイプ 行 動 変 数 の 抽 出 とマッピング 性 別 男 性 D B A C 女 性 梵 天 モールの 利 用 頻 度 低 い B A C D 高 い デジカメについてのリテラシー 低 い A D C B 高 い 商 品 スペック 機 能 の 決 定 度 合 低 い A D C B 高 い メーカーへのこだわり 弱 い A D B C 強 い 機 能 へのこだわり 弱 い A D C B 強 い デザインへのこだわり 弱 い B D C A 強 い 商 品 ページの 閲 覧 時 間 短 い A D C B 長 い 機 能 スペックの 閲 覧 有 無 あり B C A D なし 閲 覧 した 商 品 数 少 ない A D B C 多 い Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 32
ペルソナ1 デジカメについて 詳 しくなく 価 格 デザイン 以 外 の 選 定 基 準 がない 鈴 木 優 子 (26) 女 性 タイプ デジカメの 機 能 についてはあまり 詳 しくなく どのような 機 能 が 付 いているもの を 買 おうかは 特 に 決 まっていない デジカメの 選 定 基 準 は 主 に 価 格 とデザイン(カラーバリエーション) 機 能 はで きるだけ 優 れたものが 良 いが 特 別 なこだわりがあるわけではない メーカーはある 程 度 どこでも 良 い 行 動 シナリオ 優 子 は 家 電 を 買 うときは インターネットショッピングモール 梵 天 モール を 利 用 することが 多 い 梵 天 モールを 利 用 する 理 由 は なによりも 価 格 が 安 いこと すでに 梵 天 モールの 会 員 になっており どの 商 品 も3%オフで 購 入 することができるため 他 のショッピングモールを 使 うことはほと んどない 優 子 はいま デジカメの 購 入 を 考 えており いつものように 梵 天 モールで 商 品 を 検 討 することにした 優 子 は デジタルカメラについてはあまり 詳 しくないため とりあえずの 選 定 基 準 は 価 格 の 安 さとデザイン もちろん その 中 で 機 能 もできるだけ 優 れているものが 良 い デザインは できればピンク 色 のかわいいものが 良 いと 思 っている まずどのような 機 種 があるのかを 知 りたいため 商 品 一 覧 ページから 予 算 に 収 まるものについて ひとつひとつの 商 品 情 報 を 表 示 していく いまは 金 銭 的 に 余 裕 がなく 価 格 を 気 にしながら 選 ばなければならないが 梵 天 モールは 価 格 がバラバラに 表 示 されるので 探 すのが 大 変 だと 思 っている もし ボーナスが 出 た 後 で 金 銭 的 に 余 裕 があるときは 気 に 入 ったデザインのものから 順 に 見 ていきたいと 思 っている 商 品 情 報 ページでは 色 のバリエーションや 商 品 の 特 長 を 簡 単 にチェックして 良 さそうであれば 候 補 として 覚 えておいて 気 に 入 らなければすぐに 他 の 機 種 を 見 に 行 く ひとつの 商 品 情 報 ページの 閲 覧 にはそれほど 時 間 をかけずに 30 種 類 くらいの 商 品 について 順 番 に 見 ていき 最 終 的 にいくつ か 見 たなかで 最 も 良 さそうな 機 種 を 選 ぶ ゴール 価 格 デザイン 機 能 を 一 覧 でぱっと 見 て 希 望 の 条 件 を 満 たすものを 選 びたい Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 33
3-c. ストーリーボード Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 34
ストーリーボードとは(1/2) ペルソナがゴールを 達 成 するための 一 連 の ストーリーを 絵 コンテとして 表 したもの ストーリーボード 名 : デジカメの 購 入 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 35
ストーリーボードとは(2/2) ビジネス 要 件 & 技 術 要 件 --------------- --------------- ペルソナ シナリオ --------- --------- --------- ペルソナの 体 験 をストーリーとして 記 述 し 絵 コンテとして 描 き 表 す ペルソナ 視 点 での 体 験 の 記 述 ストーリーボード 脳 内 モデル ユーザーの 視 点 を 反 映 している 実 装 モデル 技 術 を 反 映 している Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 36
ストーリーボードを 作 成 する 意 義 と 利 点 どのようなユーザー 体 験 を 提 供 しようとしているのかを 認 識 / 明 示 できる デザイン 目 標 の 記 述 システムは 手 段 ペルソナのゴールと 脳 内 モデルを 反 映 ビジネス 要 件 からのストーリーではない デザイン 上 注 力 すべきストーリーを 認 識 / 明 示 ( 優 先 順 位 付 け) システムが 提 供 すべき 情 報 や 機 能 を 導 出 する 助 けとなる 情 報 と 機 能 の 検 討 は 次 のスケッチでやります! Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 37
ストーリーボードの 作 り 方 1. ペルソナがゴールを 達 成 するための 最 良 のスト ーリーをペルソナごとに 考 案 2. 考 案 したストーリーを ストーリーボードとして 描 き 起 こす ストーリー 名 : デジカメの 購 入 ペルソナ: 鈴 木 優 子 デジカメを 買 いたいと 指 示 価 格 デザイン 機 能 を パッ と 一 覧 希 望 の 条 件 を 満 たすものを 簡 単 に 比 較 購 入 製 品 を 選 択 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 38
ストーリーボードの 作 り 方 ( 補 足 ) 通 常 1つのシステムに 対 し 複 数 のストーリーが 書 ける 例 : 購 入 購 入 キャンセル など デザイン 上 注 力 すべきストーリーのみ 作 成 コマの 割 り 方 について ペルソナにとっての 行 動 期 待 関 心 の 一 区 切 りごとにコマを 設 ける システム 要 件 や 想 定 される 画 面 遷 移 の 側 面 から は 考 えない Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 39
ストーリーボードの 描 き 方 (コマの 構 成 / 書 式 ) 4. 優 子 は 価 格 デザイン 機 能 を パッ と 一 覧 し 希 望 の 条 件 を 簡 単 に 指 示 する デザインとか 値 段 がすっごく 見 やす い! ピンク で 手 ぶれ 補 正 付 き のものも 簡 単 に 探 せるのね! ペルソナの 行 動 / 振 る 舞 いを ペルソナを 主 語 として 書 く デザイナが 意 図 する ペルソナの 体 験 をペ ルソナの 言 葉 で 書 く もしくは ペルソナ の 期 待 希 望 を 書 く ペルソナの 感 情 を 表 す 絵 を 入 れる 画 面 内 容 については 次 のス ケッチで 描 くため ここでは 描 きません Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 40
3-d. スケッチ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 41
スケッチ [Alan Cooper] Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 42
スケッチはプロトタイプではない [Bill Buxton] スケッチの 目 的 はアイデアの 創 出 具 体 化 で 探 究 のステージ プロトタイプの 目 的 はユーザーな どから 評 価 を 得 る 検 証 改 善 のステージ スケッチ 喚 起 示 唆 探 究 質 問 提 案 刺 激 仮 の 漠 然 プロトタイプ 説 教 説 明 洗 練 回 答 テスト 解 決 具 体 的 描 写 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 43
3. Q&A, ディスカッション Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 44
参 考 資 料 川 西 裕 幸 栗 山 進 潮 田 浩 UXデザイン 入 門, ISBN 978-4-8222-9610-0 Larry Constantine 使 いやすいソフトウェア, ISBN 4-320-09746 Alan Cooper About Face 3 インタラクションデザインの 極 意, ISBN 4-04-867245-0 Dan Saffer インタラクションデザインの 教 科 書, ISBN 4-8399-2238-2 Peter Merholz Subject to Change, ISBN 4-87311-385-2 Kim Goodwin Designing for the Digital Age, ISBN 0-470-22910 Anderson Effective UI, ISBN 0-596-15478-3 Russ Unger UX Design, ISBN 0-321-60737-6 Bill Buxton Sketching User Experience, ISBN 0-12-374037-3 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 45
UX 関 連 コミュニティ HCD-Net ( 人 間 中 心 設 計 推 進 機 構 ) http://www.hcdnet.org/ UXPA (User Experience Professionals Association) http://www.upassoc.org/ IAI (Information Architecture Institute) http://iainstitute.org/ IxD (Interaction Design Association) http://www.ixda.org/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 46
国 際 的 なUXイベント APCHI 2012 [2012 年 8 月 28~31 日 @ 松 江 ] (Asia Pacific Conference on Computer Human Interaction) http://apchi2012.org/ UX Masterclass in Moscow [2012 年 9 月 21 日 ] http://www.uxmasterclass.com/ World Usability Day 2012 [2012 年 11 月 8 日 ] http://www.worldusabilityday.org/ 世 界 各 国 で 同 時 開 催 日 本 でも 開 催 予 定 Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 47
ご 清 聴 ありがとうございました E-mail: kanayama-toyohiro@mitsue.co.jp Website: http://www.mitsue.co.jp/english/ 163-1115 東 京 都 新 宿 区 西 新 宿 6 丁 目 22 番 1 号 新 宿 スクエアタワー15 階 会 社 案 内 :http://www.mitsue.co.jp/ Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 48