マンガ駆動開発で始める、初めてのuxデザインプロセス マンガ駆動開発...

110
ight © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1

Upload: koji-hara

Post on 21-Feb-2017

116 views

Category:

Engineering


5 download

TRANSCRIPT

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 1

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー

原 孝治

マンガ駆動開発で始める初めての UX デザインプロセ

スマンガ駆動開発 第 4 版

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

3

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

先端 IT 活用推進コンソーシアム ユーザーエクス

ペリエンス技術部会ではソフトウェアやサービス

の設計の手法を研究実践しています

その中で「マンガ駆動開発」というマンガを活

用した UX デザインの手法に到達しました「マン

ガ駆動開発」は学会やイベントで発表を行い実

践しながらブラッシュアップしています

4

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は発表したイベントの一例です

20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション

httpwwwipsjorjpeventsjsj2015IT-F_AITChtml

20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219

2015225 21cafe<ニイイチカフェ>

マンガ駆動開発のすゝめ

httpsgeechs-magazinecomevent20150304

他AITC主催のイベント多数

5

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

先端 IT 活用推進コンソーシアムユーザーエクスペリエンス技術部会 リーダー

原 孝治

マンガ駆動開発で始める初めての UX デザインプロセ

スマンガ駆動開発 第 4 版

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

3

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

先端 IT 活用推進コンソーシアム ユーザーエクス

ペリエンス技術部会ではソフトウェアやサービス

の設計の手法を研究実践しています

その中で「マンガ駆動開発」というマンガを活

用した UX デザインの手法に到達しました「マン

ガ駆動開発」は学会やイベントで発表を行い実

践しながらブラッシュアップしています

4

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は発表したイベントの一例です

20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション

httpwwwipsjorjpeventsjsj2015IT-F_AITChtml

20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219

2015225 21cafe<ニイイチカフェ>

マンガ駆動開発のすゝめ

httpsgeechs-magazinecomevent20150304

他AITC主催のイベント多数

5

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

3

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

先端 IT 活用推進コンソーシアム ユーザーエクス

ペリエンス技術部会ではソフトウェアやサービス

の設計の手法を研究実践しています

その中で「マンガ駆動開発」というマンガを活

用した UX デザインの手法に到達しました「マン

ガ駆動開発」は学会やイベントで発表を行い実

践しながらブラッシュアップしています

4

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は発表したイベントの一例です

20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション

httpwwwipsjorjpeventsjsj2015IT-F_AITChtml

20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219

2015225 21cafe<ニイイチカフェ>

マンガ駆動開発のすゝめ

httpsgeechs-magazinecomevent20150304

他AITC主催のイベント多数

5

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

先端 IT 活用推進コンソーシアム ユーザーエクス

ペリエンス技術部会ではソフトウェアやサービス

の設計の手法を研究実践しています

その中で「マンガ駆動開発」というマンガを活

用した UX デザインの手法に到達しました「マン

ガ駆動開発」は学会やイベントで発表を行い実

践しながらブラッシュアップしています

4

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は発表したイベントの一例です

20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション

httpwwwipsjorjpeventsjsj2015IT-F_AITChtml

20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219

2015225 21cafe<ニイイチカフェ>

マンガ駆動開発のすゝめ

httpsgeechs-magazinecomevent20150304

他AITC主催のイベント多数

5

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は発表したイベントの一例です

20150203 情報処理学会 ソフトウェアジャパン2015ITフォーラムセッション

httpwwwipsjorjpeventsjsj2015IT-F_AITChtml

20150219 Developers Summit 2015 Open Jamhttpeventshoeishajpdevsumi20150219

2015225 21cafe<ニイイチカフェ>

マンガ駆動開発のすゝめ

httpsgeechs-magazinecomevent20150304

他AITC主催のイベント多数

5

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

はじめに

以下は公開したスライドの一例です

マンガ駆動開発

httpwwwslidesharenetharakoji20150203-44300333

マンガ駆動開発 第2版

httpwwwslidesharenetharakojiss-44862696

マンガ駆動開発 第3版

httpwwwslidesharenetharakojiss-45119351

マンガ駆動開発で始める初めてのUXデザインプロセス

マンガ駆動開発 第4版

httpwwwslidesharenetharakojiux-65813363

6

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とは

マンガ駆動開発とは

関係者全員が

ユーザー経験を意識しながら

プロダクトを開発するための

新しい開発プロセスです

7

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXneUI8

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

UXneUI

UXデザインを始めるきっかけはサービスやソフトウェアのUIがイマイチなの

でフロントエンドを改善しようということが多いのではないかと思います

しかしUXデザインはユーザーの経験のデザインです場合によっては本質的な

機能外部設計から変更になるかもしれませんUXを見直すことによる影響は

UIの変更でとどまるものではありません

だからといって小さな改善にUXデザインが無意味ということではありません

今あるサービスも見える形になっていないだけで想定するUXは存在している

はずですそれを言語化可視化することでメンバー間であるべきサービスの

形を共有することができます

まずはUXをデザインすることはフロントエンドにとどまるものではないとい

うことを理解してくださいそこから先はやりながら考えましょう

9

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

2 つのマンガ駆動開発

「マンガ駆動開発」には二通りの意味があります

狭義の「マンガ駆動開発」とはユーザーに価値のあるプロダクトを開発するためにユーザーがプロダクトを使用

するシナリオストーリーをマンガで表現することでステークホルダーで情報を共有し UX を重視した開発を行

う助けにする手法ですつまり一つのツールとしての「マンガ」です UX デザインの手法を一通りご存知の方は

マンガの章をごらんください狭義の「マンガ駆動開発」の「マンガ」について記載しています

対して広義の「マンガ駆動開発」は 1 つのツールではありません UX を重視した開発には様々な手法がありま

すこれらの手法にはそれぞれ個別にツールがありますが使用する開発の段階やシーンはそれぞれ違い効果的な

組み合わせタイミングが存在します広義の「マンガ駆動開発」はそれらの手法で使用されるツールをマンガ

を描くという行為をメタファーとして分類し整理したものです狭義の「マンガ駆動開発」の「マンガ」はその

中の一つのツールとして定義されます他のツールと同様「マンガ」は単独で作り上げられるものではありませ

んユーザーを定義しストーリーを作成しユーザーが求めるものを考えた上で表現されるものです

10

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

11

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の 3 つのステップ9つのフェーズ

マンガ駆動開発の 3 つのステップと9つの

フェーズです

マンガ駆動開発は大きく 3 つのステップ

に分かれていてさらにそれぞれ 3 つの

フェーズに分かれます

12

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発とツールマンガ駆動開発 ツール

取材 ペルソナエンパシーマップカスタマージャーニーマップロケハンユーザーモデリングステークホルダビジネスモデルキャンバス

分析

キャラプロット 課題アイデアのグルーピング

シナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネームマンガ寸劇 アクティングアウト(寸劇)

要求定義要件定義実装

評価13

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

14

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラづくり

キャラづくりではマンガを描く準備をし

ます

マンガでいうとキャラクターを作るとい

う作業に相当します

15

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

取材

16

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

まずキャラクター(ペルソ

ナ)を作成する準備をします

まず取材から始めましょう

エスノグラフィ

ロケーションハンティング

17

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-1  取材

医療マンガを書こうと思ったらまず何をしますか

全部想像で書きますか

あなたが医療関係者でなければ想像で医療マンガを

描くのはとても難しいと思いますまずは医者や

看護師患者に取材をするのではないでしょうか

マンガ駆動開発でも最初に取材をするところから始

めましょう

18

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

エスノグラフィは文化人類学者が別の文

化圏の取材を行う為のアプローチです

民族誌を作成するように取材対象にずっ

とついてまわって取材対象の動作を観察

します

19

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

インタビューしたら

 トイレ(小)

bull トイレに入る

bull 用を足す

bull 手を洗う

20

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実際には

 トイレ(小)私の場合

bull トイレに入る

bull 便器の上にある 10 センチくらいの段になっている部分に

慎重にかばんを置く

bull 用を足す

bull 手を洗わずにかばんを持つのとそのまま手を洗いに行っ

て戻ってくる間にかばんが落下するリスクとを比較する

21

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エスノグラフィ

bull インタビューして返ってくる答えに聞き

たいことは入っていない

bull 大切なことは認識していない部分にある

bull 行為と行動

bull 師匠弟子モデル

22

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 一口にキッチンといっても全員の頭に浮

かぶキッチンはそれぞれ違う

bull コンロの数冷蔵庫のサイズシンクの形

bull アイランドキッチンか対面か窓はある

のか

23

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ロケーションハンティング

bull 実際にその場所に足を運んでその写真を撮って

共有することでメンバー全員が共通の意識を持

つことができます

bull コンロとコンロの間の距離がシステムの UI に大

きな影響を与えるかもしれません

bull ここで撮影した写真はマンガを作成する際の背

景として使用しましょう

24

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

分析

25

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-2  分析

次はキャラクターの考え

ていることを分析し可視

化していきます

エンパシーマップ

カスタマージャーニーマップ

問題提起

26

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

27

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

bull ここではエンパシーマップという手法を使用します

bull 一般的にはエンパシーマップは線で区切っているだけ

ですが気分を盛り上げるために吹き出しを使用して

みました

bull エンパシーマップは作成するキャラクターの数だけ

作ると後の工程でアイデアを出しやすくなります

28

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

エンパシーマップ

29

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

30

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 カスタマージャーニーマップ

bull カスタマージャーニーマップを作成して

問題を抽出します

bull この例では駅の券売機を使用する上で

問題となる箇所を抽出しています

31

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

問題定義

32

券売機を探す 切符を買う

表示を探す 値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

操作感が悪いとイライラする

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

キャラ

33

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

1-3  キャラ

これまでに作成した情報を元に

キャラクターを作っていきます

ユーザーモデリングペルソナ

といわれる手法です

ユーザーモデリング

34

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  ユーザーモデリング ペルソナ

35

名前 電脳 太郎性別 男性年齢 40歳職業 IT企業のプロジェクトマネージャー家族 妻 38歳 (リカ )長男小 3(翔 )長女小 1(凛 )潜在ニーズ 子どもとのコミュニケーション遠距離通勤 15時間(電車)その他bull持ち家bull電車駅と自宅会社は徒歩 10分bull混雑を避けたいが遅刻はしたくないbull時間に余裕をもちたいbull情報を能動的に取得するbullスマホアプリを使いこなすbull通勤時間を有効活用したい(電車の中は自由)bull天気が気になる(雨を避けたい)

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ペルソナ

ペルソナでは一般的に写真を使用しますがマンガ駆動開発で

はマンガを使用します

写真を使用する際のよくある失敗として芸能人や実在の知人の

写真を使用してしまってペルソナではなくその人物のイメージ

になってしまうというものがあります

オリジナルのマンガのキャラクターにすることで抽象度を適切

に設定できますマンガなら架空の人物であることが誰にでも

わかりますそしてある特定の人物であるということも同じ

ように認識できます

36

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シナリオづくり

37

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

38

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

   2-1  プロット

利用シーンのあらすじを作

成します

次の工程のネームと行っ

たりきたりしながら作る

ことになると思います

39

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

プロット

マンガでユーザー経験を表現するシナリオというのはどういう

ものでしょうか

ドラえもんのストーリーでは一つの道具がテーマとなって物

語が進んでいきます未来の道具ですから誰も見たことの無い

道具ですしかし一話を読み終わったときにはその道具がど

ういう目的のものでユーザーはどんな風に使用してどんな経

験ができるかということを理解できています

ユーザーがシステムを利用するシーンをこのステップでは準備

します利用するシーンが明確になることで次の工程でのアイ

デアを出すためのきっかけが増えることになります

40

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネーム

41

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-2 ネーム

プロダクトやサービスのアイデア出

しをします

ここでやっと機能の抽出を始めます

ユーザーをしっかりとイメージして

から機能について考えることが重

要です

ブレーンストーミング

機能抽出42

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

43

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ブレーンストーミング

ここでプロダクトやサービスのアイデア出しをしま

すブレーンストーミングというタイトルにしました

が重要な点はアイデア出しのキーの部分にあります

これまでに行ったエスノグラフィエンパシーマッ

プペルソナというプロセスの成果物の中に実際の

ユーザーの行為に肉薄したリアルなアイデアを出す

ためのキーが埋まっています

44

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

シーン 情報 機能地震直後 状況(生きて)

自分の場所安否状況登録( Pushと Pusll)

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知

(家族など特定の人の)場所

待ち合わせ場所 待ち合わせ場所までの経路探索 安全な場所 経路が分かる 非難場所が分かる待ち合わせ場所を設定しその場所を共有することができる

待ち合わせ場所までの経路 移動手段

待ち合わせ場所までの時間快適性 安全性(人の流れ被災状況)途中に食料 飲料 休憩 タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向 ナビゲーション機能 おおまかな方向 ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くスピード times時間の範囲にある)の場所 方角

ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み  GPSを切る3 G受信切るディスプレイ切る通話しない (Cメールを返すなど機内モードにする)

その方向に特定の範囲にあるチェックポイント

(家族など特定の人の)安否状況 安否確認機能 特定の人の安否状況が変わったら Pushで通知 特定の人への安否状況の問い合わせ どれくらいの時間で目的地に到着するか(自動安否通知機能は未定リカさん視点が必要)

(家族など特定の人の)場所

外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ヒトの方向

タクシー乗車

タクシーが乗れる(通っている 待っている)場所

(他のヒトが)タクシーに乗れた場所を検索機能

小学校 自宅到着

利用者の視点に立ってユーザーがどんな情報を欲しているのかユーザーのどんな機能を欲しているのか機能抽出

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

機能抽出

ブレーンストーミングの後はア

イデアの整理を行い機能抽出を

行います

46

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ネームとシナリオについて

翻訳こんにゃくがどういうツールかドラえもんを読めばわか

りますねしかしどうやって機能を実現するかとか翻訳対象

の言語をどうするかということは物語では表現されていません

シナリオやネームはあくまでユーザーの経験を表現することが

目的ですこの段階で実装を表現してしまうとその通りに実装

されることになりますそれはユーザー経験を中心とした設計

ではありません

この段階ではユーザー経験を表現するストーリーを作成すること

に注力し実装の段階で改めてその経験を実現する機能の実装

方法を考えましょう

47

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実現可能性について

仕様を考える段階ではありませんが実現可能性を

全く考えなくて良いということではありません

全く実現可能性を考えずに作ると空飛ぶ車やボ

タンを押すとお金が出てくる装置ができてしまうか

もしれません

ブレストとしては楽しいかもしれませんが時間は

無駄になります

48

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

49

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガ駆動開発のマンガとは

マンガ駆動開発の

マンガとは

50

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 51

 マンガの例

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 52

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 53

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 54

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 55

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 56

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 57

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 58

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 59

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 マンガが表現するもの

マンガ駆動開発に

おけるマンガは

こういう要素を表

現しています

60

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

61

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

背景利用シーン

ユーザーがどういった状況でシステム

を利用するかということを表現します

単に物理的な環境だけでなく利用に

至ったコンテキストも表現することが

出来ます

62

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

63

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ユーザー

ユーザーの服装年齢職業などを

文章で明示することなく表現すること

が出来ます

64

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

65

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

感情考え

ユーザーの感情その時の考えを

表現します

66

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

67

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

デバイス

デバイスがどういったものなのかを表

現します

ここではユーザーインターフェース

は表現しません簡単な外観で記述し

ます

68

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 69

マンガ駆動開発のマンガ背景 利用シーン

考えデバイス ユーザー感情

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ストーリーボードとの比較

マンガ駆動開発のマンガと

一般的なストーリーボード

を比較してみましょう

70

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

揺れる~取り敢えず机の下に隠れよう

震度 5 の地震かなり揺れます

一般的なストーリーボード

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ

72

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

比較

73

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガで表現されているもの

会社にいる

勤務中

地震が発生した

ユーザーは男性

スーツを着ている

74

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガの特徴

主人公の性別年齢職業場面の状

態を推定できる

一つの場面だけ取り出しても状況が

把握できる

75

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

76

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

この部分がコスト

77

コスト

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

文脈の表現のため背景などはコマご

とに必要

作成に手間(コスト)がかかる

rarrマンガ作成ツールを使用する

78

デメリット

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

79

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガを使用すると

利用シーンがわかる

感情表現ができる

ユーザーを想像できる

絵を描くのは時間がかかるということであればマンガ作

成ツールが便利

画面を表示しないことで抽象度の高い要求を表現できる

画面を表示しないことでセンサーなどの NUI の利用を

表現できる

80

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

描くときのポイント

画面を描かないことで UXにフォーカスする

ロケハンをした写真を背景

として使用する

81

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

  2-3  マンガ

ツール

コミ Po CLIP STUDIO Photoshop紙とペンとスキャナ

82

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

83

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

コミ Po

マンガ作成ツール

ペンタブレットがいらない

誰が作っても画風が同じになる

キャラクターの種類がもう少しあったらhellip

84

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

85

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

CLIP STUDIO

本格的なマンガ

何でもできる

絵がかけないとどうにもならない

同一人物が作成しないと画風が揃わない

86

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

87

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

Photoshop

CLIP STUDIO と同様

何でもできる

88

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

紙とペンとスキャナ

紙とペンで絵がかける人はいる

マンガ駆動開発に必要なマンガは

一般のマンガのラフ程度

89

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

 まとめ

90

デザインした UX を可視化し参照で

きる状態にすることで UX を重視し

た開発が可能

ストーリーボードをマンガにすると

メリットが沢山ある

マンガ作成ツールを使えば作成コス

トは普通のストーリーボードとほとん

ど変わらない

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

91

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

モノづくり

機能を実装します

このフェーズもイテレーションしてくだ

さい

92

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

93

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-1 寸劇

94

寸劇 マンガ 操作画面

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

サービスのデザインで重要なことはユーザーの経験をデザインするこ

とです

UXDやサービスデザインのワークショップで最後に発表するものが

寸劇(アクティングアウトスキット)であるのはその表れでしょう

寸劇はコミュニケーションのツールとして非常に有効なもので「マン

ガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り

入れています

寸劇自体は成果物にするにも開発のトリガーにするにもあまりに不

安定です寸劇は資料として形に残すことも配布することもできま

せんしかしマンガと併用することで寸劇の機能を向上させさら

に形に残すことができます

95

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

寸劇

プロジェクタを二面使用してデバイスの画面と

マンガユースケースを表示することができます

背景が分かる

小道具の不足を補える

セリフが聞き取れない場合に文字が表示されて

いる

プレゼンテーション資料に残すことができる

96

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved 97

>

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

実装

98

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-2  実装

ウォーターフォール

アジャイル

99

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

パンフレットにマンガが書いてあることがありま

すこのようにマンガはシステムがユーザー

に提供する価値を表現するのに有効です

さらにデザインの段階でマンガを作成し開発

に持ち込むのがマンガ駆動開発です開発に使う

前提でマンガを作成することで機能の抽出を適

切に行うことができます

実装

100

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

ウォーターホールでの適用

フェーズとしては要求定義

寸劇を活用することで関係者全員がイ

メージを共有できる

101

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

スクラムでの適用

bull プロダクトバックログの左側にマンガのシーン

を追加する

bull マンガrarrプロダクトバックログrarrスプリントバッ

クログという順で展開する

bull 機能の上位概念として UX を追加するイメージ

bull 寸劇評価をうまくイテレーションに組み込むと

良さそう

102

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

アジャイル

103

Manga

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

104

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

3-3  評価

105

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

106

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

評価

マンガを評価のフェーズで使用することで

そのシステムが想定する使用条件で適切に

機能するかレビューすることができます

寸劇を使用することも有効です

107

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

マンガ駆動開発の3つのステップ9つのフェーズ

108

キャラ取材 分析

プロット ネーム

寸劇 実装 評価

マンガ

キャラづくり

シナリオづくり

モノづくり

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

まとめ

109

ストーリーボードをマンガにするとメリットが沢

山あるマンガ作成ツールを使えば作成コストは

普通のストーリーボードとほとんど変わらない

マンガを使えば UX をマイルストーンにして開

発を駆動することができる

開発手法として 3 つのステップ 9 つのフェーズに

まとめた

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110

Copyright copy 2016 Advanced IT Consortium to Evaluate Apply and Drive All Rights Reserved

httpaitcjphttpswwwfacebookcomaitcjp

110

  • Slide 1
  • マンガ駆動開発で始める 初めてのUXデザインプロセス マンガ駆動開発 第4版
  • はじめに
  • はじめに (2)
  • はじめに (3)
  • はじめに (4)
  • マンガ駆動開発とは
  • UXneUI
  • UXneUI (2)
  • 2つのマンガ駆動開発
  • マンガ駆動開発の3つのステップ 9つのフェーズ
  • マンガ駆動開発の3つのステップ 9つのフェーズ (2)
  • マンガ駆動開発とツール
  • キャラ づくり
  • キャラづくり
  • 取材
  • 1-1 取材
  • 1-1 取材 (2)
  • エスノグラフィ
  • インタビューしたら
  • 実際には
  • エスノグラフィ (2)
  • ロケーションハンティング
  • ロケーションハンティング (2)
  • 分析
  • 1-2 分析
  • エンパシーマップ
  • エンパシーマップ (2)
  • エンパシーマップ (3)
  •  カスタマージャーニーマップ
  •  カスタマージャーニーマップ (2)
  • 問題定義
  • キャラ
  • 1-3 キャラ
  •   ユーザーモデリング ペルソナ
  • ペルソナ
  • シナリオ づくり
  • プロット
  •   2-1 プロット
  • プロット (2)
  • ネーム
  •  2-2 ネーム
  • ブレーンストーミング
  • ブレーンストーミング (2)
  • 機能抽出
  • 機能抽出 (2)
  • ネームとシナリオについて
  • 実現可能性について
  • マンガ
  •  マンガ駆動開発のマンガとは
  •  マンガの例
  • Slide 52
  • Slide 53
  • Slide 54
  • Slide 55
  • Slide 56
  • Slide 57
  • Slide 58
  • Slide 59
  •  マンガが表現するもの
  • 背景利用シーン
  • 背景利用シーン (2)
  • ユーザー
  • ユーザー (2)
  • 感情考え
  • 感情考え (2)
  • デバイス
  • デバイス (2)
  • マンガ駆動開発のマンガ
  • ストーリーボードとの比較
  • Slide 71
  • マンガ (2)
  • 比較
  • マンガで表現されているもの
  • マンガの特徴
  • デメリット
  • この部分がコスト
  • デメリット (2)
  • コミPo
  • マンガを使用すると
  •  2-3 マンガ
  •  2-3 マンガ (2)
  • コミPo
  • コミPo (2)
  • CLIP STUDIO
  • CLIP STUDIO (2)
  • Photoshop
  • Photoshop (2)
  • 紙とペンとスキャナ
  •  まとめ
  • モノ づくり
  • モノづくり
  • 寸劇
  • 3-1 寸劇
  • 寸劇 (2)
  • 寸劇 (3)
  • Slide 97
  • 実装
  • 3-2 実装
  • 実装 (2)
  • ウォーターホールでの適用
  • スクラムでの適用
  • アジャイル
  • 評価
  • 3-3 評価
  • 評価 (2)
  • 評価 (3)
  • マンガ駆動開発の3つのステップ 9つのフェーズ (3)
  • まとめ
  • Slide 110