ight © 2017 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 1
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー
原 孝治
マンガ駆動開発で始める初めての UX デザインプロセ
スA Guide to the Manga Driven Development
Body of Knowledge MaBOK v1
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
一般的な UX デザインプロセス
bull マイルストーンとしての成果物
rarr ストーリー
rarr 文字や寸劇で表現する
rarr 分かりにくかったり
残らなかったりする
4
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが
いいんじゃ
ない 5
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー
原 孝治
マンガ駆動開発で始める初めての UX デザインプロセ
スA Guide to the Manga Driven Development
Body of Knowledge MaBOK v1
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
一般的な UX デザインプロセス
bull マイルストーンとしての成果物
rarr ストーリー
rarr 文字や寸劇で表現する
rarr 分かりにくかったり
残らなかったりする
4
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが
いいんじゃ
ない 5
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
3
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
一般的な UX デザインプロセス
bull マイルストーンとしての成果物
rarr ストーリー
rarr 文字や寸劇で表現する
rarr 分かりにくかったり
残らなかったりする
4
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが
いいんじゃ
ない 5
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
一般的な UX デザインプロセス
bull マイルストーンとしての成果物
rarr ストーリー
rarr 文字や寸劇で表現する
rarr 分かりにくかったり
残らなかったりする
4
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが
いいんじゃ
ない 5
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが
いいんじゃ
ない 5
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
はじめに
先端 IT 活用推進コンソーシアム ユーザーエクス
ペリエンス技術部会ではソフトウェアやサービス
の設計の手法を研究実践しています
その中で「マンガ駆動開発」というマンガを活
用した UX デザインの手法に到達しました「マン
ガ駆動開発」は学会やイベントで発表を行い実
践しながらブラッシュアップしています
6
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とは
マンガ駆動開発とは
関係者全員が
ユーザー経験を意識しながら
プロダクトを開発するための
新しい開発プロセスです
9
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
空気を読む家
13
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 14
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 15
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 16
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 17
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 18
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 19
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 20
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 21
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 22
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 23
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 24
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 25
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 26
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 27
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 28
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 29
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 30
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 31
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
32
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の 3 つのステップ9つのフェーズ
マンガ駆動開発の 3 つのステップと9つの
フェーズです
マンガ駆動開発は大きく 3 つのステップ
に分かれていてさらにそれぞれ 3 つの
フェーズに分かれます
33
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発とツールマンガ駆動開発 ツール
取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス
分析
キャラプロット 課題アイデアのグルーピング
シナリオストーリーボードのびたの一日出てくるドラえもんの道具
ネームマンガ寸劇 アクティングアウト(寸劇)
要求定義要件定義実装
評価34
キャラづくり
シナリオづくり
モノづくり
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
35
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラづくり
キャラづくりではマンガを描く準備をし
ます
マンガでいうとキャラクターを作るとい
う作業に相当します
36
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
取材
37
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
まずキャラクター(ペルソ
ナ)を作成する準備をします
まず取材から始めましょう
エスノグラフィ
ロケーションハンティング
38
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-1 取材
医療マンガを書こうと思ったらまず何をしますか
全部想像で書きますか
あなたが医療関係者でなければ想像で医療マンガを
描くのはとても難しいと思いますまずは医者や
看護師患者に取材をするのではないでしょうか
マンガ駆動開発でも最初に取材をするところから始
めましょう
39
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
エスノグラフィは文化人類学者が別の文
化圏の取材を行う為のアプローチです
民族誌を作成するように取材対象にずっ
とついてまわって取材対象の動作を観察
します
40
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
インタビューしたら
トイレ(小)
bull トイレに入る
bull 用を足す
bull 手を洗う
41
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実際には
トイレ(小)私の場合
bull トイレに入る
bull 便器の上にある 10 センチくらいの段になっている部分に
慎重にかばんを置く
bull 用を足す
bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ
て戻ってくる間にかばんが落下するリスクとを比較する
42
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エスノグラフィ
bull インタビューして返ってくる答えに聞き
たいことは入っていない
bull 大切なことは認識していない部分にある
bull 行為と行動
bull 師匠弟子モデル
43
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 一口にキッチンといっても全員の頭に浮
かぶキッチンはそれぞれ違う
bull コンロの数冷蔵庫のサイズシンクの形
bull アイランドキッチンか対面か窓はある
のか
44
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ロケーションハンティング
bull 実際にその場所に足を運んでその写真を撮って
共有することでメンバー全員が共通の意識を持
つことができます
bull コンロとコンロの間の距離がシステムの UI に大
きな影響を与えるかもしれません
bull ここで撮影した写真はマンガを作成する際の背
景として使用しましょう
45
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
分析
46
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-2 分析
次はキャラクターの考え
ていることを分析し可視
化していきます
エンパシーマップ
カスタマージャーニーマップ
問題提起
47
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
48
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
bull ここではエンパシーマップという手法を使用します
bull 一般的にはエンパシーマップは線で区切っているだけ
ですが気分を盛り上げるために吹き出しを使用して
みました
bull エンパシーマップは作成するキャラクターの数だけ
作ると後の工程でアイデアを出しやすくなります
49
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
エンパシーマップ
50
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
51
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
カスタマージャーニーマップ
bull カスタマージャーニーマップを作成して
問題を抽出します
bull この例では駅の券売機を使用する上で
問題となる箇所を抽出しています
52
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
問題定義
53
券売機を探す 切符を買う
表示を探す 値段を調べる
値段表
切符を受け取る
ボタンを押す
お金を入れる券売機
操作感が悪いとイライラする
行き先が探しにくい
アクティビティ
インタラクション
感情の起伏
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
キャラ
54
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
1-3 キャラ
これまでに作成した情報を元に
キャラクターを作っていきます
ユーザーモデリングペルソナ
といわれる手法です
ユーザーモデリング
55
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザーモデリング ペルソナ
56
名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ペルソナ
ペルソナでは一般的に写真を使用しますがマンガ駆動開発で
はマンガを使用します
写真を使用する際のよくある失敗として芸能人や実在の知人の
写真を使用してしまってペルソナではなくその人物のイメージ
になってしまうというものがあります
オリジナルのマンガのキャラクターにすることで抽象度を適切
に設定できますマンガなら架空の人物であることが誰にでも
わかりますそしてある特定の人物であるということも同じ
ように認識できます
57
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シナリオづくり
58
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
59
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-1 プロット
利用シーンのあらすじを作
成します
次の工程のネームと行っ
たりきたりしながら作る
ことになると思います
60
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
プロット
マンガでユーザー経験を表現するシナリオというのはどういう
ものでしょうか
ドラえもんのストーリーでは一つの道具がテーマとなって物
語が進んでいきます未来の道具ですから誰も見たことの無い
道具ですしかし一話を読み終わったときにはその道具がど
ういう目的のものでユーザーはどんな風に使用してどんな経
験ができるかということを理解できています
ユーザーがシステムを利用するシーンをこのステップでは準備
します利用するシーンが明確になることで次の工程でのアイ
デアを出すためのきっかけが増えることになります
61
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネーム
62
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-2 ネーム
プロダクトやサービスのアイデア出
しをします
ここでやっと機能の抽出を始めます
ユーザーをしっかりとイメージして
から機能について考えることが重
要です
ブレーンストーミング
機能抽出63
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
64
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ブレーンストーミング
ここでプロダクトやサービスのアイデア出しをしま
すブレーンストーミングというタイトルにしました
が重要な点はアイデア出しのキーの部分にあります
これまでに行ったエスノグラフィエンパシーマッ
プペルソナというプロセスの成果物の中に実際の
ユーザーの行為に肉薄したリアルなアイデアを出す
ためのキーが埋まっています
65
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
シーン 情報 機能地震直後 状況(生きて)
自分の場所安否状況登録( Pushと Pusll)
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知
(家族など特定の人の)場所
待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる
待ち合わせ場所までの経路 移動手段
待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所
待ち合わせ場所まで
目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角
ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)
その方向に特定の範囲にあるチェックポイント
(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)
(家族など特定の人の)場所
外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向
タクシー乗車
タクシーが乗れる(通っている 待っている)場所
(他のヒトが)タクシーに乗れた場所を検索機能
小学校 自宅到着
利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
機能抽出
ブレーンストーミングの後はア
イデアの整理を行い機能抽出を
行います
67
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ネームとシナリオについて
翻訳こんにゃくがどういうツールかドラえもんを読めばわか
りますねしかしどうやって機能を実現するかとか翻訳対象
の言語をどうするかということは物語では表現されていません
シナリオやネームはあくまでユーザーの経験を表現することが
目的ですこの段階で実装を表現してしまうとその通りに実装
されることになりますそれはユーザー経験を中心とした設計
ではありません
この段階ではユーザー経験を表現するストーリーを作成すること
に注力し実装の段階で改めてその経験を実現する機能の実装
方法を考えましょう
68
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実現可能性について
仕様を考える段階ではありませんが実現可能性を
全く考えなくて良いということではありません
全く実現可能性を考えずに作ると空飛ぶ車やボ
タンを押すとお金が出てくる装置ができてしまうか
もしれません
ブレストとしては楽しいかもしれませんが時間は
無駄になります
69
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
70
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発のマンガとは
マンガ駆動開発の
マンガとは
71
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 72
マンガの例
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 73
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 74
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 75
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 76
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 77
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 78
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 79
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 80
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガが表現するもの
マンガ駆動開発に
おけるマンガは
こういう要素を表
現しています
81
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
82
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
背景利用シーン
ユーザーがどういった状況でシステム
を利用するかということを表現します
単に物理的な環境だけでなく利用に
至ったコンテキストも表現することが
出来ます
83
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
84
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ユーザー
ユーザーの服装年齢職業などを
文章で明示することなく表現すること
が出来ます
85
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
86
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
感情考え
ユーザーの感情その時の考えを
表現します
87
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
88
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
デバイス
デバイスがどういったものなのかを表
現します
ここではユーザーインターフェース
は表現しません簡単な外観で記述し
ます
89
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 90
マンガ駆動開発のマンガ背景 利用シーン
考えデバイス ユーザー感情
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ストーリーボードとの比較
マンガ駆動開発のマンガと
一般的なストーリーボード
を比較してみましょう
91
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
揺れる~取り敢えず机の下に隠れよう
震度 5 の地震かなり揺れます
一般的なストーリーボード
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ
93
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
比較
94
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガで表現されているもの
会社にいる
勤務中
地震が発生した
ユーザーは男性
スーツを着ている
95
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガの特徴
主人公の性別年齢職業場面の状
態を推定できる
一つの場面だけ取り出しても状況が
把握できる
96
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
97
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
この部分がコスト
98
コスト
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
文脈の表現のため背景などはコマご
とに必要
作成に手間(コスト)がかかる
rarr マンガ作成ツールを使用する
99
デメリット
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
100
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガを使用すると
利用シーンがわかる
感情表現ができる
ユーザーを想像できる
絵を描くのは時間がかかるということであればマンガ作
成ツールが便利
画面を表示しないことで抽象度の高い要求を表現できる
画面を表示しないことでセンサーなどの NUI の利用を
表現できる
101
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
描くときのポイント
画面を描かないことで UXにフォーカスする
ロケハンをした写真を背景
として使用する
102
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
2-3 マンガ
ツール
コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ
103
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
104
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
コミ Po
マンガ作成ツール
ペンタブレットがいらない
誰が作っても画風が同じになる
キャラクターの種類がもう少しあったらhellip
105
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
106
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
CLIP STUDIO
本格的なマンガ
何でもできる
絵がかけないとどうにもならない
同一人物が作成しないと画風が揃わない
107
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
108
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
Photoshop
CLIP STUDIO と同様
何でもできる
109
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
紙とペンとスキャナ
紙とペンで絵がかける人はいる
マンガ駆動開発に必要なマンガは
一般のマンガのラフ程度
110
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
111
デザインした UX を可視化し参照で
きる状態にすることで UX を重視し
た開発が可能
ストーリーボードをマンガにすると
メリットが沢山ある
マンガ作成ツールを使えば作成コス
トは普通のストーリーボードとほとん
ど変わらない
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
112
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
モノづくり
機能を実装します
このフェーズもイテレーションしてくだ
さい
113
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
114
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-1 寸劇
115
寸劇 マンガ 操作画面
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
サービスのデザインで重要なことはユーザーの経験をデザインするこ
とです
UXDやサービスデザインのワークショップで最後に発表するものが
寸劇(アクティングアウトスキット)であるのはその表れでしょう
寸劇はコミュニケーションのツールとして非常に有効なもので「マン
ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り
入れています
寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不
安定です寸劇は資料として形に残すことも配布することもできま
せんしかしマンガと併用することで寸劇の機能を向上させさら
に形に残すことができます
116
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
寸劇
プロジェクタを二面使用してデバイスの画面と
マンガユースケースを表示することができます
背景が分かる
小道具の不足を補える
セリフが聞き取れない場合に文字が表示されて
いる
プレゼンテーション資料に残すことができる
117
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 118
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
実装
119
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
120
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
121
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
122
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
123
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-2 実装
ウォーターフォール
アジャイル
120
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
121
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
122
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
123
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
パンフレットにマンガが書いてあることがありま
すこのようにマンガはシステムがユーザー
に提供する価値を表現するのに有効です
さらにデザインの段階でマンガを作成し開発
に持ち込むのがマンガ駆動開発です開発に使う
前提でマンガを作成することで機能の抽出を適
切に行うことができます
実装
121
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
122
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
123
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
ウォーターホールでの適用
フェーズとしては要求定義
寸劇を活用することで関係者全員がイ
メージを共有できる
122
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
123
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
スクラムでの適用
bull プロダクトバックログの左側にマンガのシーン
を追加する
bull マンガrarrプロダクトバックログrarrスプリントバッ
クログという順で展開する
bull 機能の上位概念として UX を追加するイメージ
bull 寸劇評価をうまくイテレーションに組み込むと
良さそう
123
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
アジャイル
124
Manga
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
125
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
3-3 評価
126
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
127
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
評価
マンガを評価のフェーズで使用することで
そのシステムが想定する使用条件で適切に
機能するかレビューすることができます
寸劇を使用することも有効です
128
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
マンガ駆動開発の3つのステップ9つのフェーズ
129
キャラ取材 分析
プロット ネーム
寸劇 実装 評価
マンガ
キャラづくり
シナリオづくり
モノづくり
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 201 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
まとめ
130
ストーリーボードをマンガにするとメリットが沢
山あるマンガ作成ツールを使えば作成コストは
普通のストーリーボードとほとんど変わらない
マンガを使えば UX をマイルストーンにして開
発を駆動することができる
開発手法として 3 つのステップ 9 つのフェーズに
まとめた
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131
Copyright copy 2017 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved
httpaitcjphttpswwwfacebookcomaitcjp
131