2016-05-20（金）開催 【MT東京-24】ウェブディレクション入門編　人間中心設計（HCD）と、SEOとWeb解析・アクセシビリティなど

1. ディレクターとして取り組む
HCD業務の実際
株式会社サイバーエージェント 水野寛

2. 2
水野 寛
株式会社サイバーエージェント Ameba統括本部
Amebaピググループ PCピグスタジオ
ディレクター / UXアーキテクト
HCD-net 認定人間中心設計専門家

3. 3
新規構築メイン
2006. Web制作会社で受託案件
スクラム x HCD実践
2012. コミュニティアプリ立ち上げ
プロデューサ x データ分析
2013. 広告メディア 立ち上げ/運用
HCD実践 x データ分析
2015. アメーバピグ

4. 4
自分そっくりのアバター
仮想空間のコミュニケーション

5. サービス7年目
5
ピグアイランド ピグカフェ

6. HCD推進の体制
6
事業責任者
アメーバ
ピグ
ピグ
ライフ
ピグ
ワールド
ピグ
ブレイブ
新規
サービス
KPI設計/レポート
アクセス解析
アンケート解析
HCD専門家
(水野)
HXD導入設計
インタビュー
ユーザテスト
企画支援 / UX設計
勉強会

7. お話すること
7
1. HCD（人間中心設計）とは
2. ディレクタースキルの要点
3. ディレクタースキルを活かしてHCDを回す

8. 8
1. HCD（人間中心設計）とは
2. ディレクタースキルの要点
3. ディレクタースキルを活かしてHCDを回す

9. ユーザー中心で
サービスをつくるための
包括的な取り組み
9

10. HCD（人間中心設計）プロセス
10
プロセスの計画
利用状況
の把握
ユーザー
要求の明
示
解決策の
作成
設計の
評価
要求を満たす
● インタビュー
● 定量分析
● カスタマージャーニ
ーマップ
● 体験シナリオ
● ペーパープロトタ
イプ
● ユーザーテスト
※ HCD = UXD

11. 11
ユーザーの観察に基づく

12. 仮説の精度が高まる
12
ユーザー
としての自分
実際の
ユーザー
仮説 見逃しているかも
押さえるべき本当の範囲

13. 事業ゴールとニーズの一致が期待できる
13
事業視点
使ってもらいたい
機能
価値観や状況
機能を使う
必然性
ユーザー視点
ビジネスの狙い
一致しているか
※ ユーザ中心だけでもダメ

14. 14
プロセスは誰が回す？

15. 成功させるポイント
15
プロセスの計画
利用状況
の把握
ユーザー
要求の明
示
解決策の
作成
設計の
評価
継続的に取り組む
チームを巻き込む
提言より一緒に具体化
部分適用より全体適用

16. 16
ディレクターが回すのが良さそう！
包括的なリーダーシップと、開発プロセスの熟知

17. 17
1. HCD（人間中心設計）とは
2. ディレクタースキルの要点
3. ディレクタースキルを活かしてHCDを回す

18. Webディレクターとは
18ELITENETWORK｜Webディレクターとは？
http://www.elite-network.co.jp/x/dictionary/web/webdirector.html（2016.5.13）
現場監督
制作現場の監督者として、制作工程全体を見渡し、制作スタッフ
に指示しながら制作物の納期や品質をコントロールする役割。
設計者
クライアントとの打ち合わせでは、サイトの要件を取りまとめ、
サイトデザインの全体像作成や、クライアントへの企画提案を行
う。

19. プロデューサーとの違い
19
What How
何をつくるか どう実現するか
提案営業
戦略立案
KPI設計/管理
予算/人員管理
PRJ統括責任
企画立案
要件定義
サイト設計
進行管理
成果物チェック
プロデューサ ディレクター
（曖昧になりやすい）

20. 20
ひとことでいうと、

21. 21
ひとことでいうと、
期待を実現につなげる人。
（強いコミットメント）

22. 期待を実現につなげる
プロダクトオーナーは、戦略をWebサービスという形で成果にしたい。
ディレクターは、それをつなぐ人。
22
オーナー ユーザーディレクター
期待 実現
つなぐ戦略

23. クライアントがもつ「期待」
23
最後まで完成させたい
実現させたい内容がある
ユーザーに受け入れられたい
成果物の質には万全を期したい
狙い
受容性
確実さ
完遂
期待
戦略
オーナー

24. 「期待」をつなぐ4つのスキルセット
24
期待 つなぐスキル
① 要求定義
② 情報設計
③ 品質管理
④ プロジェクト管理最後まで完成させたい
実現させたい内容がある
ユーザーに受け入れられたい
成果物の質には万全を期したい
狙い
受容性
確実さ
完遂

25. ① 要求定義
様々な粒度や精度の要望を正しく咀嚼し、解決可能な課題に変換すること。
25
事業の意図
制約
表現したい
コンテンツ
ユーザーの
定義
自明なこと
暗黙的なこと
ふわっとしていること
間違えていること
見えてないこと
要求の精度を上げる

26. ② 情報設計
利用者が理解しやすい、サービスの構造と表現を設計すること。
26
サイト構造
ナビゲーション ラベル
画面構成
魅力ある構想を描く

27. IA
③ 品質管理
制作物の良し悪しを判断し、要求に見合う成果物を完成させること。
27
マイナス → ゼロ
● レギュレーション
● テストケース
ゼロ → プラス
● 新規性
● おどろき
成果物の評価
求められる水準 = ゼロ
達成基準を超える

28. QC
④ プロジェクト管理
無形なプロセスを可視化し、調整しながら完遂まで導くこと。
28
スケジュール・進行管理
要件・スコープ管理
課題・リスク管理
コミュニケーション
プロセスの
計画
制約と実現のバランスをとる

29. スキルはプロジェクトの成果に直結
29
ユーザー
期待 実現
狙い 受容性
確実さ 完遂
戦略
品質の積み上げ
要求の精度を上げる
魅力ある構想を描く
達成基準を超える
要求定義
情報設計
品質管理
プロセスの効率
制約と実現のバランスをとるPRJ管理
オーナー ディレクター
目的を
果たす

30. スキルはまんべんなく必要
30
情報
設計
要求
定義
品質
管理
PRJ
管理

31. スキルはまんべんなく必要
31
炎上パターン
情報
設計
要求
定義
品質
管理
PRJ
管理

32. スキルはまんべんなく必要
32
魅力無いパターン
情報
設計
要求
定義
品質
管理
PRJ
管理

33. スキルはまんべんなく必要
33
情報
設計
要求
定義
品質
管理
PRJ
管理

34. 34
当事者力
● 自分ごと化
● 線引きしない
構想力
● 表現の引き出し
● 好奇心
大事なスタンス
情報
設計
要求
定義
品質
管理
PRJ
管理

35. 35
1. HCD（人間中心設計）とは
2. ディレクタースキルの要点
3. ディレクタースキルを活かしてHCDを回す

36. 36
ディレクターのスキルでドライブさせる

37. HCD プロセス
37ISO9241-210
プロセスの計画
利用状況
の把握
ユーザー
要求の明
示
解決策の
作成
設計の
評価

38. HCD プロセス
38
リサーチ
体験構築繰り返し検証
計画と推進 プロセスの計画
利用状況
の把握
ユーザー
要求の明
示
解決策の
作成
設計の
評価

39. スキルセットをHCDに活かす
39
情報
設計
要求
定義
品質
管理
PRJ
管理

40. スキルセットをHCDに活かす
40
情報
設計
要求
定義
品質
管理
PRJ
管理
計画と推進
リサーチ
繰り返し検証体験構築

41. 41

42. ピグライフのイベント改修
42
低いARPPU、イベント参加率が課題。

43. 1.計画と推進
43
情報
設計
要求
定義
品質
管理
PRJ
管理
計画と推進

44. 1.計画と推進
44
設計 デザイン 開発戦略
アンケート
インタビュー
価値マップ
ペルソナ
コンセプト
ツリー
CJM (現状）
体験シナリオ
ビジュアルプロト
(テスト）
CJM (理想）
リサーチ 体験構築 繰り返し検証
ペーパープロト
開発期間10ヶ月。デザインPhaseまでを適用の対象とした。
ペーパープロト
（テスト）

45. 1. 計画と推進
45
プロジェクト管理
● ファシリテーション
● チーミング
● 制作スケジュールへの適用
● 制約を踏まえたスコープ決め
HCD応用ポイント
メンバーを巻き込みながら、意思決定に寄与していく。
スケジュール・進行管理
要件・スコープ管理
課題・リスク管理
コミュニケーション
プロセス
の計画

46. 2. リサーチ
46
アンケート
インタビュ
ー
価値マップ
ペルソナ
コンセプト
ツリー
情報
設計
要求
定義
品質
管理
PRJ
管理
リサーチ

47. 47
リサーチ：
インタビューからユーザの実態を把握。

48. 2. リサーチ
48
要求定義
● 事業戦略のヒアリング
● インタビュー
● 課題の整理/言語化
● ビジョンとゴール策定
HCD応用ポイント
ユーザの価値観を捉え、事業機会が明らかに。
事業の意
図制約
表現したい
コンテンツ
ユーザーの
定義

49. 3. 体験構築
49
情報
設計
要求
定義
品質
管理
PRJ
管理
体験構築
CJM (現状）
体験シナリオ
CJM (理想）
ペーパープロ
ト

50. 50
理想体験を描く：
モチベーションの変曲を把握し、良い体験に変換
as-is（現状）
to-be（理想）

51. 3. 体験構築
51
モチベーション
具体的な感情と思考
サービス内での行動
抽出された課題
カスタマージャーニーマップ（as-is）

52. 3. 体験構築
52
情報設計
● ユーザー行動と共感
● サービス構造のイメージ
● インタラクションアイデア
● UIスケッチ
HCD応用ポイント
ユーザー行動を描き、作るものを発想する。
サイト構造
ナビゲーション ラベル
画面構成

53. 4. 繰り返し検証
53
ビジュアルプ
ロト(テスト）
ペーパープロ
ト
情報
設計
要求
定義
品質
管理
PRJ
管理
繰り返し検証

54. 54
繰り返し検証
紙ベースでテストを反復し、UIをブラッシュアップ

55. 4. 繰り返し検証
55
忠実度に応じて、評価する観点は異なる。
紙ベースでも、十分にユーザー体験の検証が可能。
ペーパープロトタイ
プ
ビジュアルプロトタイプ モックアップ
骨格、構造、構成、ラベル、
文章、インタラクション
＋視覚デザイン、世界観の印
象
＋リッチインタラクション、
アニメーション

56. 4. 繰り返し検証
56
品質管理
● ユーザー体験が水準
● テスト設計
● ユーザビリティ原則
● 素早く手軽に実践
● 観察からの発想
HCD応用ポイント
「動き」の客観的な検証で、早く失敗を獲得する。
マイナス → ゼロ
● レギュレーショ
ン
● テストケース
ゼロ → プラス
● 新規性
● おどろき
成果物の評価
求められる水準 = ゼロ

57. 57
結果

58. 収益への寄与
58
イベント参加率：4%UP!
ARPPU ：10%UP!
売上：15%UP!
良い体験を生み出し、事業成果に貢献できた。

59. 現場メンバーから見たHCD
59
● 企画の根幹を詰める機会となり、チーム全体がその企画に対し同
じ認識を持ち開発を進めることができた。（プロデューサ）
● 実際にプレイする感覚で遷移を確認することができたので、構成
案だけでは見えてこなかった抜け漏れや、もっとこうしたほうが
分かりやすくなりそうという発見があった。（UIデザイナー）
● 短期集中でアイデアを出し合えたので、仕様決めのスピード感が
あった。（エンジニア）
● 各ステークホルダが事前にペーパープロトタイプを利用すること
で仕様の理解が高まってから開発に取り掛かることができた。
（エンジニア）

60. 60
まとめ

61. まとめ
● HCDは、ユーザー中心でサービスをつくるための
包括的取り組み
● 要求定義、情報設計、品質管理、プロジェクト管理
● ディレクタースキルの延長としてHCDを考えると、
実践しやすい
61

62. 62
情報
設計
要求
定義
品質
管理
PRJ
管理

63. 63
情報
設計
要求
定義
品質
管理
PRJ
管理
計画と推進
リサーチ
繰り返し検証体験構築

64. 64
ご清聴ありがとうございました！