Upload
koji-hara
View
118
Download
5
Embed Size (px)
Citation preview
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 1
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー
原 孝治
マンガ駆動開発で始める初めての UX デザインプロセ
スマンガ駆動開発 第 4 版
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
4
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は発表したイベントの一例です
20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション
httpwwwipsjorjpeventsjsj2015IT-F_AITChtml
20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219
2015225 21cafe<ニイイチカフェ>
マンガ駆動開発のすゝめ
httpsgeechs-magazinecomevent20150304
他AITC主催のイベント多数
5
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー
原 孝治
マンガ駆動開発で始める初めての UX デザインプロセ
スマンガ駆動開発 第 4 版
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
4
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は発表したイベントの一例です
20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション
httpwwwipsjorjpeventsjsj2015IT-F_AITChtml
20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219
2015225 21cafe<ニイイチカフェ>
マンガ駆動開発のすゝめ
httpsgeechs-magazinecomevent20150304
他AITC主催のイベント多数
5
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
4
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は発表したイベントの一例です
20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション
httpwwwipsjorjpeventsjsj2015IT-F_AITChtml
20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219
2015225 21cafe<ニイイチカフェ>
マンガ駆動開発のすゝめ
httpsgeechs-magazinecomevent20150304
他AITC主催のイベント多数
5
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
4
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は発表したイベントの一例です
20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション
httpwwwipsjorjpeventsjsj2015IT-F_AITChtml
20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219
2015225 21cafe<ニイイチカフェ>
マンガ駆動開発のすゝめ
httpsgeechs-magazinecomevent20150304
他AITC主催のイベント多数
5
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は発表したイベントの一例です
20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション
httpwwwipsjorjpeventsjsj2015IT-F_AITChtml
20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219
2015225 21cafe<ニイイチカフェ>
マンガ駆動開発のすゝめ
httpsgeechs-magazinecomevent20150304
他AITC主催のイベント多数
5
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
以下は公開したスライドの一例です
マンガ駆動開発
httpwwwslidesharenetharakoji20150203-44300333
マンガ駆動開発 第2版
httpwwwslidesharenetharakojiss-44862696
マンガ駆動開発 第3版
httpwwwslidesharenetharakojiss-45119351
マンガ駆動開発で始める初めてのUXデザインプロセス
マンガ駆動開発 第4版
httpwwwslidesharenetharakojiux-65813363
6
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
7
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXneUI8
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
UXneUI
UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの
でフロントエンドを改善しようということが多いのではないかと思います
しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な
機能外部設計から変更になるかもしれませんUXを見直すことによる影響は
UIの変更でとどまるものではありません
だからといって小さな改善にUXデザインが無意味ということではありません
今あるサービスも見える形になっていないだけで想定するUXは存在している
はずですそれを言語化可視化することでメンバー間であるべきサービスの
形を共有することができます
まずはUXをデザインすることはフロントエンドにとどまるものではないとい
うことを理解してくださいそこから先はやりながら考えましょう
9
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2 つのマンガ駆動開発
「マンガ駆動開発」には二通りの意味があります
狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用
するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行
う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は
マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています
対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま
すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な
組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ
を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその
中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ
んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです
10
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
11
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
12
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価13
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
14
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
15
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
16
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
17
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
18
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
19
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
20
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
21
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
22
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
23
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
24
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
25
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
26
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
27
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
28
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
29
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
30
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
31
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
32
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
33
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
34
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
35
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
36
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
37
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
38
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
39
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
40
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
41
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出42
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
43
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
44
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
46
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
47
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
48
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
49
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
50
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51
マンガの例
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
60
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
61
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
62
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
63
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
64
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
65
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
66
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
67
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
68
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
70
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
72
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
73
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
74
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
75
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
76
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
77
コスト
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarrマンガ作成ツールを使用する
78
デメリット
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
79
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
80
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
81
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
82
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
83
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
84
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
85
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
86
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
87
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
88
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
89
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
90
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
91
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
92
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
93
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
94
寸劇 マンガ 操作画面
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
95
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
96
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
98
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
99
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
100
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
101
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
102
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
103
Manga
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
104
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
105
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
106
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
107
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
108
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
109
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110
Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
110