More Related Content
Similar to マンガ駆動開発 第2版 (20)
マンガ駆動開発 第2版
- 1. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1
- 2. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2015年2月19日
先端IT活用推進コンソーシアム
UX技術部会 サブリーダー
株式会社 ディーディーエス 原 孝治
マンガ駆動開発
- 3. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
自己紹介
原 孝治
株式会社ディーディーエス システム部 所属
AITC UX技術部会サブリーダー
AITC 運営委員
https://www.facebook.com/harakoji.net
- 4. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
アジェンダ
マンガ駆動開発の「マンガ」について
マンガとは
メリット
マンガ駆動開発プロセスについて
キャラづくり
シナリオづくり
モノづくり
4
- 5. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識し
ながら
プロダクトを開発する
ための、新しい開発プ
ロセスだよ。
5
- 6. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発の3つのステップ
9つのフェーズ
6
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラ
づくり
シナリオ
づくり
モノ
づくり
- 7. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ
7
- 8. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
8
- 9. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 9
マンガの例
- 10. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 10
- 11. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 11
- 12. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 12
- 13. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 13
- 14. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 14
- 15. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 15
- 16. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 16
- 17. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 17
- 18. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガが表現するもの
マンガ駆動開発に
おけるマンガは、
こういう要素を表
現しているんだ
18
- 19. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
背景・利用シーン
19
- 20. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ユーザー
20
- 21. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
感情・考え
21
- 22. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
デバイス
22
- 23. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 23
マンガ駆動開発のマンガ
背景 利用シーン
考えデバイス ユーザー感情
- 24. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ストーリーボードとの比較
マンガ駆動開発の
マンガと、一般的
なストーリーボー
ドを比較してみよ
う。
24
- 25. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
揺れる~
取り敢えず机の下に隠れよう
震度5の地震。かなり揺れます。
一般的なストーリーボード
- 26. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ
26
- 27. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
比較
27
- 28. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガで表現されているもの
• 会社にいる
• 勤務中
• 地震が発生した
• ユーザーは男性
• スーツを着ている
28
- 29. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガの特徴
• 主人公の性別、年齢、職業、
場面の状態を推定できる
• 一つの場面だけ取り出して
も、状況が把握できる
29
- 30. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
• 文脈の表現のため、背景な
どはコマごとに必要
• 作成に、手間(コスト)が
かかる
30
デメリット
- 31. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
コスト
31
コスト
- 32. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
• 文脈の表現のため、背景な
どはコマごとに必要
• 作成に、手間(コスト)が
かかる
→マンガ作成ツールを使用す
る
32
デメリット
- 33. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
コミPo!(詳細は後ほど)
33
- 34. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガを使用すると
• 利用シーンがわかる
• 感情表現ができる
• ユーザーを想像できる
• 絵を描くのは時間がかかるということで
あれば、マンガ作成ツールが便利
• 画面を表示しないことで、抽象度の高い
要求を表現できる
• 画面を表示しないことで、センサーなど
の、NUIの利用を表現できる
34
- 35. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
UXコンシャスな人向けの説明
35
• デザインしたUXを可視化し、
参照できる状態にすることで、
UXを重視した開発が可能。
• ストーリーボードをマンガに
すると、メリットが沢山ある。
• マンガ作成ツールを使えば、
作成コストは普通のストー
リーボードとほとんど変わら
ない。
- 36. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらに一歩進めて
マンガを使えば、
UXをキーにして、
開発をすることがで
きるんじゃない?
36
- 37. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発
MangaDrivenDevelopment
37
- 38. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
すばらしいUX実現のために
要求設計から実装
までのプロセスを
開発手法としてま
とめよう!
38
- 39. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 39
- 40. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 40
- 41. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発の3つのステップ
9つのフェーズ
41
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラ
づくり
シナリオ
づくり
モノ
づくり
- 42. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発と他のプロセスの比較
マンガ駆動開発 他のデザインプロセス
取材 ペルソナ
エンパシーマップ
カスタマージャーニーマップ
ロケハン
ユーザーモデリング
ステークホルダ
ビジネスモデルキャンバス
分析
キャラ
プロット
課題、アイデアのグルーピング
シナリオ
ストーリーボード
のびたの一日
出てくるドラえもんの道具
ネーム
機能を抽出する
マンガ
寸劇 アクティングアウト(寸劇)
アジャイル開発プロセス
ウォーターフォール
要求定義
要件定義
実装 開発への適用(実装)
評価
42
キャラ
づくり
シナリオ
づくり
モノ
づくり
- 43. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
キャラ
づくり
43
- 44. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
取材
44
- 45. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
1-1 取材
まず、キャラクター(ペルソ
ナ)を作成する準備をします。
まず取材から始めましょう。
・エスノグラフィ
・ロケーションハンティング
45
- 46. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
分析
46
- 47. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
1-2 分析
次は、キャラクターの考
えていることを分析し、
可視化していきます。
・エンパシーマップ
・カスタマージャーニーマップ
・問題提起
47
- 48. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
エンパシーマップ
48
- 49. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
エンパシーマップ
49
- 50. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
カスタマージャーニーマップ
50
- 51. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
問題定義
51
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いと
イライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
- 52. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
キャラ
52
- 53. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
1-3 キャラ
これまでに作成した情報を元に、
キャラクターを作っていきます。
ユーザーモデリング、ペルソナ
といわれる手法です。
・ユーザーモデリング
53
- 54. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ユーザーモデリング ペルソナ
54
名前 :電脳 太郎
性別 :男性
年齢 :40歳
職業 :IT企業のプロジェクトマネージャー
家族 :妻38歳(リカ)/長男小3(翔)/長女小1(凛)
潜在ニーズ :子どもとのコミュニケーション
遠距離通勤:1.5時間(電車)
その他
•持ち家
•電車、駅と自宅・会社は徒歩10分
•混雑を避けたいが、遅刻はしたくない
•時間に余裕をもちたい
•情報を能動的に取得する
•スマホアプリを使いこなす
•通勤時間を有効活用したい(電車の中は自由)
•天気が気になる(雨を避けたい)
- 55. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
シナリオ
づくり
55
- 56. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
プロット
56
- 57. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2-1 プロット
利用シーンのあらすじを作
成します。
次の工程のネームと、行っ
たりきたりしながら作るこ
とになると思います。
57
- 58. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ネーム
58
- 59. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2-2 ネーム
プロダクトやサービスのアイ
デア出しをします。
ここでやっと機能の抽出を始
めます。ユーザーをしっかり
とイメージしてから、機能に
ついて考えるんですね。
・ブレーンストーミング
・機能抽出
59
- 60. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ブレーンストーミング
60
- 61. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
シーン 情報 機能
地震直後 状況(生きて)
自分の場所
安否状況登録(PushとPusll)
(家族など特定の人の)安否状況 安否確認機能
・特定の人の安否状況が変わったら、Pushで通知(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索
・安全な場所/経路が分かる
・非難場所が分かる
待ち合わせ場所を設定し、その場所を共有することができる
待ち合わせ場所までの経路/移動手段
待ち合わせ場所までの時間
快適性/安全性(人の流れ、被災状況)
途中に食料/飲料/休憩/タクシー乗車できる場所
待ち合わせ場
所まで
目的地までの方向 ナビゲーション機能
・おおまかな方向
・ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くス
ピード×時間の範囲にある)の場所/方角
ずっとディスプレイを見なくてもナビゲーションされる
ストレス状態での使い勝手
バッテリー節約を節約する仕組み
GPSを切る、3G受信切る、ディスプレイ切る、通話しない(Cメールを返すな
ど、機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能
・特定の人の安否状況が変わったら、Pushで通知
・特定の人への安否状況の問い合わせ
・どれくらいの時間で目的地に到着するか
(自動安否通知機能は未定、リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード)
・ヒトの方向
タクシー乗車 タクシーが乗れる(通っている/待っている)場所 (他のヒトが)タクシーに乗れた場所を検索機能
小学校/
自宅到着
利用者の視点に立って、ユーザーがどんな情報を欲しているのか、ユーザーのどんな機能を欲しているのか
機能抽出
- 62. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ
62
- 63. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2-3 マンガ
描くときのポイント
・画面を描かないことで、UX
にフォーカスする。
・ロケハンをした写真を背景
として使用する。
63
- 64. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
2-3 マンガ
ツール
・コミPo!
・CLIP STUDIO
・Photoshop
・紙とペンとスキャナ
64
- 65. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
コミPo!
65
- 66. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CLIP STUDIO
66
- 67. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
Photoshop
67
- 68. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
モノ
づくり
68
- 69. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
寸劇
69
- 70. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
3-1 寸劇
70
寸劇 マンガ 操作画面
- 71. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
実装
71
- 72. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
3-2 実装
・ウォーターフォール
・アジャイル
72
- 73. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ウォーターホールでの適用
• フェーズとしては要求定義。
• 寸劇を活用することで、関係者全員がイ
メージを共有できる。
73
- 74. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
スクラムでの適用
• プロダクトバックログの左側に、マンガ
のシーンを追加する。
• マンガ→プロダクトバックログ→スプリ
ントバックログという順で展開する。
• 機能の上位概念として、UXを追加するイ
メージ。
• 寸劇、評価をうまくイテレーションに組
み込むと良さそう。
74
- 75. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
スクラム
75
Manga
- 76. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
評価
76
- 77. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
3-3 評価
77
- 78. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
評価
78
- 79. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
まとめ
79
• ストーリーボードをマンガにすると、メ
リットが沢山ある。マンガ作成ツールを
使えば、作成コストは普通のストーリー
ボードとほとんど変わらない。
• マンガを使えば、UXをトリガーにして、
開発を駆動することができる。
• 開発手法として3つのステップ、9つの
フェーズにまとめた。
- 80. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
マンガ駆動開発の3つのステップ
9つのフェーズ
80
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラ
づくり
シナリオ
づくり
モノ
づくり
- 81. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
次回公演
2015年2月25日(水)
19時30分~21時30分
マンガ駆動開発のすゝめ
~ キャラづくり・シナリオづくり・モノづくり~
21cafe<ニイイチカフェ>
東京都渋谷区道玄坂1-14-6
ヒューマックス渋谷ビル3F
http://www.ni-ichicafe.com/
81
- 82. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
http://aitc.jp
https://www.facebook.com/aitc.jp
ハルミン
AITC非公式イメージキャラクター
82