マンガ駆動開発第3版

Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1

Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

2015年2月25日

先端IT活用推進コンソーシアム UX技術部会サブリーダー

株式会社ディーディーエス原孝治

マンガ駆動開発


自己紹介

原孝治

株式会社ディーディーエスシステム部所属 AITC UX技術部会サブリーダー AITC 運営委員 https://www.facebook.com/harakoji.net


http://aitc.jp https://www.facebook.com/aitc.jp

ハルミン AITC非公式イメージキャラクター

4

とは

http://aitc.jp/

https://www.facebook.com/aitc.jp


先端IT活用推進コンソーシアム（１）

5

Windows コンソーシアム

日本経営協会 XMLフェスタ

Java コンソーシアム

XML部会

2000/07 設立宣言 2001/06~2010/03実活動 2010/03~2010/09 2010/09/08 設立

Advanced IT Consortium to Evaluate, Apply and Drive


先端IT活用推進コンソーシアム（２）

6

企業における先端ITの活用および先端ITエキスパート技術者の育成を目的とし、

社会に貢献することを目指す非営利団体設立： 2010年9月8日（会期：～2016年8月31日）会長：鶴保征城（IPA顧問、HAL校長）会員：正会員（法人＆個人事業主）準会員（個人会員＆学術会員）特別会員（産業技術総合研究所、気象庁、消防研究センター、

防災科学技術研究所）顧問：萩野達也（慶応義塾大学教授) 稲見昌彦（慶応義塾大学大学院教授）橋田浩一（東京大学大学院教授) 丸山不二夫（早稲田大学大学院客員教授山本修一郎（名古屋大学教授) 三淵啓自（デジタルハリウッド大学大学院教授）川田十夢（AR三兄弟長男）


先端IT活用推進コンソーシアム（３）

7


UX技術部会活動内容

• 招待講演・セミナー

• 外部ワークショップの受講学習

• 部会でのデザインプロセスの実施

• プロジェクトを対象にしたデザインツールの適用

実践


UX技術部会（招待講演・セミナー） HTML5で変わるWebの世界株式会社OpenWeb Technology代表 HTML5-Developers-jp管理人

白石俊平様

HTML5総覧慶應義塾大学大学院プロジェクト専任講師 W3C HTML and Web Applications Working Groups Team Contact Michael Smith 様

ユーザーエクスペリエンスとそれを支えるアーキテクチャ

(株)セカンドファクトリー取締役／シニアUXアーキテクト東賢氏

ユーザーエクスペリエンスデザイン日本マイクロソフト株式会社 UXエバンジェリスト川西裕幸様 iOS/Android UIデザインセオリー PFUアプリケーションズ株式会社大場知悟様モバイルアプリ開発と軽量型開発プロセス「CYCLONE」と適用事例

クラスメソッド株式会社経営本部マーケティング担当嵩原將志様

マルチデバイス＝クロスプラットフォーム時代のアプリ開発手法とツール

アドビシステムズ株式会社テクニカルエバンジェリスト太田禎一様

これまでのUIとこれからのUIについてインフラジスティックス・ジャパン株式会社シニアUXアーキテクト東賢様

UXによる業務生産性を向上した事例及びマルチOS開発環境のXPLATFORMの紹介 TOBESOFT CO.,LTD 日本支社長崔彰桓様

ユーザーエクスペリエンス～それは何か・どう捉え・どう開発につなげるのか？千葉工業大学工学部デザイン科学科准教授安藤昌也様

企業戦略としてのユーザーエクスペリエンス株式会社アゼストディレクター/UXコンサルタント後藤雄介様 UXデザイン入門株式会社ミツエーリンクス UXエバンジェリスト金山豊浩様

マイクロソフトのNUIテクノロジー日本マイクロソフト株式会社ソフトウェアデベロップメントエンジニア千葉慎二様

コミュニケーションロボットの未来株式会社オリィ研究所代表取締役所長吉藤健太朗様

ビジネスを広げるサービスデザインの概要と実践大日本印刷株式会社 C&I事業部 ICT開発本部サービスデザイン・ラボ室長山口博志様

9


アジェンダ

マンガ駆動開発の「マンガ」についてマンガとはメリットマンガ駆動開発プロセスについてキャラづくりシナリオづくりモノづくり

10


マンガ駆動開発とは

関係者全員がユーザー経験を意識しながらプロダクトを開発するための、新しい開発プロセスです。

11


UXとは

次の画像は、ある学校で配布されたアンケートです。

12



結構ヘビーな内容ですね

私は、このアンケートは情報収集の目的を果たせないだろうなと感じました。

14


オペレーション

講義の最後に教授が配布して、学生はその場で記入、教授が回収していました。

15


書きづらい

16


アンケートの特徴

・「お金を払う人」と、「ユーザー」が別・ステークホルダーがたくさんいる

17


この例の場合

・アンケート結果を欲しい人・アンケートを作る人・評価される人（教授）・評価する人（学生）ユーザー・アンケートを配る人・アンケートを集める人・アンケートの仕組みにお金を払う人

18


仕様

→アンケートの内容 →アンケートの対象の授業 →アンケートの対象の学生の属性、人数仕様はOK 要求は満たされない

19


マンガ駆動開発とは

関係者全員がユーザー経験を意識しながらプロダクトを開発するための、新しい開発プロセスです。

20


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

21

キャラ取材分析

プロットネーム

寸劇実装評価

マンガ

キャラづくり

シナリオづくり

モノづくり


マンガ

22


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

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

23


マンガの例










マンガが表現するもの

マンガ駆動開発におけるマンガは、こういう要素を表現しています

33


背景・利用シーン

34


背景・利用シーン

ユーザーがどういった状況でシステムを利用するかということを表現します。単に物理的な環境だけでなく、利用に至ったコンテキストも表現することが出来ます。

35


ユーザー

36


ユーザー

ユーザーの服装、年齢、職業などを、文章で明示することなく表現することが出来ます。

37


感情・考え

38


感情・考え

ユーザーの感情、その時の考えを表現します。

39


デバイス

40


デバイス

デバイスがどういったものなのかを表現します。ここでは、ユーザーインターフェースは表現しません。簡単な外観で記述します。

41


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

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


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

マンガ駆動開発のマンガと、一般的なストーリーボードを比較してみましょう。

43


揺れる～

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

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

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


マンガ

45


比較

46


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

•会社にいる •勤務中 •地震が発生した •ユーザーは男性 •スーツを着ている

47


マンガの特徴

•主人公の性別、年齢、職業、場面の状態を推定できる

•一つの場面だけ取り出しても、状況が把握できる

48


•文脈の表現のため、背景などはコマごとに必要

•作成に、手間（コスト）がかかる

49

デメリット


この部分がコスト

50

コスト


•文脈の表現のため、背景などはコマごとに必要

•作成に、手間（コスト）がかかる →マンガ作成ツールを使用する

51

デメリット


コミPo!

52


マンガを使用すると

• 利用シーンがわかる • 感情表現ができる • ユーザーを想像できる • 絵を描くのは時間がかかるということであれば、マンガ作成ツールが便利

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

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

53


UXコンシャスな人向けの説明

54

• デザインしたUXを可視化し、参照できる状態にすることで、UXを重視した開発が可能。

• ストーリーボードをマンガにすると、メリットが沢山ある。

• マンガ作成ツールを使えば、作成コストは普通のストーリーボードとほとんど変わらない。


さらに一歩進めて

マンガを使えば、UXをキーにして、開発をすることができるのではないか

55


マンガ駆動開発 MangaDrivenDevelopment

56


すばらしいUX実現のために

UXを重視した開発のために、要求設計から実装までのプロセスを開発手法としてまとめています。

57


58




60



寸劇実装評価

マンガ

キャラづくり


モノづくり



• マンガ駆動開発の3つのステップと９つのフェーズです。

• マンガ駆動開発は、大きく分けて3つのステップに分かれていて、さらにそれぞれ3つのフェーズにわかれます。

• それぞれのフェーズを、他の開発プロセスと比較したものが次の図です。

61


マンガ駆動開発と他のプロセスの比較マンガ駆動開発他のデザインプロセス

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

分析

キャラ

プロット課題、アイデアのグルーピングシナリオストーリーボードのびたの一日出てくるドラえもんの道具

ネーム機能を抽出する

マンガ

寸劇アクティングアウト（寸劇）アジャイル開発プロセスウォーターフォール要求定義要件定義

実装開発への適用（実装）

評価

62

キャラづくり


モノづくり


キャラづくり

63


キャラづくり

• キャラづくりでは、マンガを描く準備をします。

• マンガでいうと、キャラクターを作るという作業に相当します。

64


取材

65


1-1 取材

まず、キャラクター（ペルソナ）を作成する準備をします。まず取材から始めましょう。・エスノグラフィ・ロケーションハンティング

66


1-1 取材

• 医療マンガを書こうと思ったら、まず何をしますか。全部想像で書きますか？あなたが医療関係者でなければ、想像で医療マンガを描くのはとても難しいと思います。まずは、医者や、看護師、患者に、取材をするのではないでしょうか。

• マンガ駆動開発でも、最初に取材をするところから始めましょう。

67


エスノグラフィ

エスノグラフィは、文化人類学者が別の文化圏の取材を行う為のアプローチです。民族誌を作成するように、取材対象にずっとついてまわって、取材対象の動作を観察します。

68


インタビューしたら

トイレ（小） • トイレに入る • 用を足す • 手を洗う

69


実際には

トイレ（小）私の場合 • トイレに入る • 便器の上にある10センチくらいの段になっている部分に慎重にかばんを置く

• 用を足す • 手を洗わずにかばんを持つのと、そのまま手を洗いに行って戻ってくる間にかばんが落下するリスクとを比較する。

70


エスノグラフィ

• インタビューして返ってくる答えに、聞きたいことは入っていない。

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

• 行為と行動 • 師匠・弟子モデル

71


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

• 一口にキッチンといっても、全員の頭に浮かぶキッチンはそれぞれ違う

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

• アイランドキッチンか、対面か、窓はあるのか

72


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

• 実際にその場所に足を運んで、その写真を撮って共有することで、メンバー全員が共通の意識を持つことができます。

• コンロとコンロの間の距離が、システムのUIに大きな影響を与えるかもしれません。

• ここで撮影した写真は、マンガを作成する際の背景として使用しましょう。 73


分析

74


1-2 分析

次は、キャラクターの考えていることを分析し、可視化していきます。・エンパシーマップ・カスタマージャーニーマップ

・問題提起

75


エンパシーマップ

76



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

• 一般的にはエンパシーマップは線で区切っているだけですが、気分を盛り上げるために吹き出しを使用してみました。

• エンパシーマップは、作成するキャラクターの数だけ作ると、後の工程でアイデアを出しやすくなります。

77



78


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

79


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

• カスタマージャーニーマップを作成して、問題を抽出します。

• この例では、駅の券売機を使用する上で、問題となる箇所を抽出しています。

80


問題定義

81

券売機を探す切符を買う

表示を探す値段を調べる

値段表

切符を受け取る

ボタンを押す

お金を入れる券売機

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

行き先が探しにくい

アクティビティ

インタラクション

感情の起伏


キャラ

82


1-3 キャラ

これまでに作成した情報を元に、キャラクターを作っていきます。ユーザーモデリング、ペルソナといわれる手法です。・ユーザーモデリング

83


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

84

名前：電脳太郎性別：男性年齢：40歳職業：IT企業のプロジェクトマネージャー家族：妻38歳(リカ)/長男小3(翔)/長女小1(凛) 潜在ニーズ：子どもとのコミュニケーション遠距離通勤：1.5時間（電車）その他

•持ち家 •電車、駅と自宅・会社は徒歩10分 •混雑を避けたいが、遅刻はしたくない •時間に余裕をもちたい •情報を能動的に取得する •スマホアプリを使いこなす •通勤時間を有効活用したい（電車の中は自由） •天気が気になる（雨を避けたい）


ペルソナ

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

• 写真を使用する際のよくある失敗として、芸能人や実在の知人の写真を使用してしまって、ペルソナではなくその人物のイメージになってしまうというものがあります。

• オリジナルのマンガのキャラクターにすることで、抽象度を適切に設定できます。マンガなら、架空の人物であることが誰にでもわかります。そして、ある特定の人物であるということも、同じように認識できます。

85



86


プロット

87


2-1 プロット

利用シーンのあらすじを作成します。次の工程のネームと、行ったりきたりしながら作ることになると思います。

88


プロット • マンガでユーザー経験を表現するシナリオというのはどういうものでしょうか。

• ドラえもんのストーリーでは、一つの道具がテーマとなって、物語が進んでいきます。未来の道具ですから、誰も見たことの無い道具です。しかし、一話を読み終わったときには、その道具がどういう目的のもので、ユーザーはどんな風に使用して、どんな経験ができるかということを、理解できています。

• ユーザーが、システムを利用するシーンをこのステップでは準備します。利用するシーンが明確になることで、次の工程でのアイデアを出すためのきっかけが増えることになります。

89


ネーム

90


2-2 ネーム

プロダクトやサービスのアイデア出しをします。ここでやっと機能の抽出を始めます。ユーザーをしっかりとイメージしてから、機能について考えることが重要です。・ブレーンストーミング・機能抽出

91


ブレーンストーミング

92


ブレーンストーミング

• ここで、プロダクトやサービスのアイデア出しをします。ブレーンストーミングというタイトルにしましたが、重要な点はアイデア出しのキーの部分にあります。

• これまでに行った、エスノグラフィ、エンパシーマップ、ペルソナというプロセスの成果物の中に、実際のユーザーの行為に肉薄した、リアルなアイデアを出すためのキーが埋まっています。

93


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

自分の場所安否状況登録（PushとPusll）

（家族など特定の人の）安否状況安否確認機能・特定の人の安否状況が変わったら、Pushで通知（家族など特定の人の）場所

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

待ち合わせ場所までの経路/移動手段待ち合わせ場所までの時間快適性/安全性（人の流れ、被災状況）途中に食料/飲料/休憩/タクシー乗車できる場所

待ち合わせ場所まで

目的地までの方向ナビゲーション機能・おおまかな方向・ランドマークや必要なモノ（飲食物やトイレ）などのチェックポイント（歩くスピード×時間の範囲にある）の場所/方角ずっとディスプレイを見なくてもナビゲーションされるストレス状態での使い勝手バッテリー節約を節約する仕組み GPSを切る、３G受信切る、ディスプレイ切る、通話しない(Cメールを返すなど、機内モードにする）

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

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

（家族など特定の人の）場所

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

タクシー乗車タクシーが乗れる（通っている/待っている）場所（他のヒトが）タクシーに乗れた場所を検索機能小学校/ 自宅到着

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


機能抽出

• ブレーンストーミングの後は、アイデアの整理を行い、機能抽出を行います。

95


ネームとシナリオについて • 翻訳こんにゃくがどういうツールか、ドラえもんを読めばわかりますね。しかし、どうやって機能を実現するかとか、翻訳対象の言語をどうするかということは、物語では表現されていません。

• シナリオやネームは、あくまでユーザーの経験を表現することが目的です。この段階で実装を表現してしまうと、その通りに実装されることになります。それは、ユーザー経験を中心とした設計ではありません。

• この段階ではユーザー経験を表現するストーリーを作成することに注力し、実装の段階で、改めてその経験を実現する機能の実装方法を考えましょう。

96


実現可能性について

• 仕様を考える段階ではありませんが、実現可能性を全く考えなくて良いということではありません。

• 全く実現可能性を考えずに作ると、空飛ぶ車や、ボタンを押すとお金が出てくる装置ができてしまうかもしれません。

• ブレストとしては楽しいかもしれませんが、時間は無駄になります。

97


マンガ

98


2-3 マンガ

描くときのポイント・画面を描かないことで、UXにフォーカスする。・ロケハンをした写真を背景として使用する。

99


2-3 マンガ

ツール・コミPo! ・CLIP STUDIO ・Photoshop ・紙とペンとスキャナ

100


コミPo！

101


コミPo！

• マンガ作成ツール • ペンタブレットがいらない • 誰が作っても画風が同じになる • キャラクターの種類がもう少しあったら無敵

• 私はこのメーカーさんと何の関わりもありません

102


CLIP STUDIO

103


CLIP STUDIO

• 本格的なマンガ • 何でもできます • 絵がかけないと、どうにもならない • 同一人物が作成しないと、画風が揃わない

104


Photoshop

105


Photoshop

• CLIP STUDIOと同様

106


紙とペンとスキャナ

• 絵がかける人はいる

107


モノづくり

108


モノづくり

• 機能を実装します。 • このフェーズも、イテレーションしてください。

109


寸劇

110


3-1 寸劇

111

寸劇マンガ操作画面


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

• UXDや、サービスデザインのワークショップで最後に発表するものが、寸劇（アクティングアウト・スキット）であるのは、その表れでしょう。

• 寸劇はコミュニケーションのツールとして非常に有効なもので、「マンガ駆動開発」でもマンガや画面表示を加えるという工夫をしながら取り入れています。

• 寸劇自体は成果物にするにも、開発のトリガーにするにも、あまりに不安定です。寸劇は、資料として形に残すことも、配布することもできません。しかし、マンガと併用することで、寸劇の機能を向上させ、さらに、形に残すことができます。

112


寸劇 • プロジェクタを二面使用して、デバイスの画面とマンガユースケースを表示することができます。

• 背景が分かる • 小道具の不足を補える • セリフが聞き取れない場合に、文字が表示されている

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

113



実装

115


3-2 実装

・ウォーターフォール・アジャイル

116


実装

• 社外に出すパンフレットにマンガが書いてあることがあります。このように、マンガは、システムがユーザーに提供する価値を表現するのに有効です。

• さらに、デザインの段階でマンガを作成し、開発に持ち込むのがマンガ駆動開発です。開発に使う前提でマンガを作成することで、機能の抽出を適切に行うことができます。

117


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

• フェーズとしては要求定義。 • 寸劇を活用することで、関係者全員がイメージを共有できる。

118


スクラムでの適用

• プロダクトバックログの左側に、マンガのシーンを追加する。

• マンガ→プロダクトバックログ→スプリントバックログという順で展開する。

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

• 寸劇、評価をうまくイテレーションに組み込むと良さそう。

119


スクラム

120

Manga


評価

121


3-3 評価

122


評価

123


評価

• マンガを評価のフェーズで使用することで、そのシステムが想定する使用条件で適切に機能するか、レビューすることができます。

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

124


まとめ

125

• ストーリーボードをマンガにすると、メリットが沢山ある。マンガ作成ツールを使えば、作成コストは普通のストーリーボードとほとんど変わらない。

• マンガを使えば、UXをトリガーにして、開発を駆動することができる。

• 開発手法として3つのステップ、9つのフェーズにまとめた。



126



寸劇実装評価

マンガ

キャラづくり


モノづくり


http://aitc.jp https://www.facebook.com/aitc.jp

ハルミン AITC非公式イメージキャラクター

127

http://aitc.jp/

https://www.facebook.com/aitc.jp

Design

マンガ駆動開発 第3版

マンガ駆動開発第3版