マンガ駆動開発のすゝめ

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

マンガ駆動開発のすゝめ

2015年2月3日

先端IT活用推進コンソーシアムナチュラルユーザーインターフェース活用部会リーダー

ユーザーエクスペリエンス技術部会メンバー

株式会社テクリエ岡村和英

SOFTWARE JAPAN 2015 - ITフォーラムセッション


本日のまとめ

3


吾輩はマンガ駆動開発である～マンガ駆動開発とは～

走れマンガ駆動開発～マンガ駆動開発の実例紹介～

4




5


マンガ駆動開発とは

6

マンガでユーザー経験(UX)を表現し、

それを基にすることで、

関係者全員がUXを意識しながら

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

新しい開発プロセス。


マンガによる表現

7

マンガ駆動開発では

背景・利用シーン

ユーザー

感情・考え

デバイス

などの要素をマンガを用いて視覚的に表現する。


ストーリーボードの比較

8

マンガによるストリーボードではペルソナ像、置かれた状況、そのときの感情などをひと目で把握することができる。


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

9

キャラ取材分析

プロットネーム

寸劇実装評価

マンガ

キャラづくり

シナリオづくり

モノづくり


開発への適用

10

要求分析フェーズでの利用

サービスによってユーザがどのような体験を得るか、利用者・利用状況・目的をマンガで表現する。

マンガで視覚的に表現し、開発に携わるステークホルダー間でイメージの共有を図ることが重要。




11


大規模災害発生時における避難アプリ

交通切符販売機の改良

空間OS

実例紹介

12

AITCにおける取り組みから


アクティングアウト

13


マンガ駆動開発のすゝめ～マンガ駆動開発の心得～

15


マンガのメリット

16



17

UXに注力できる！言葉による表現では、ついシステム的な振る舞いやユーザーインターフェースについての記述をおこないがちです。

マンガを用いることでユーザーの経験にフォーカスを当てることができます。



18

利用シーンがわかる！

言葉による表現では読み手によって思い浮かべるイメージが異なります。

マンガを用いて視覚的に表現することで読み手のイメージが一致しやすくなります。



19

感情表現ができる！

表情・漫符・書き文字・背景などを組み合わせることで、言葉だけではうまく表わせ難かった利用者の感情を読み手に伝えることができます。

書き文字

背景

表情

漫符



20

利用者視点で考えられる！

吹き出しをつかうことで発言や考えを利用者視点で記述することが強制されます。

読み手も利用者視点で内容をイメージすることになります。


どんなところに向いているの？

21


マンガの使い処

22

文章で表現しにくいもの

大きな流れの表現

タッチポイントの具体化


よくある勘違い

23


アンチケース

24

挿絵としてのマンガ

UXが表現されていないマンガ


マンガ駆動開発とは

25

マンガでユーザー経験(UX)を表現し、

それを基にすることで、

関係者全員がUXを意識しながら

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

新しい開発プロセス。


ガイドライン

26

マンガ駆動のマンガは文章を補足するものではありません。

マンガを主体としてユーザー目線で

UXを含んだ利用シーンを表現するようにしましょう。

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

縦書き？

横書き？


セリフの縦横

28

どちらがいいのかよくわかりません…

メンバーの間でも見解がわかれています。

いまのところどっちでもいいんじゃないかと……


ガイドライン

29

セリフを横書きにしておくことで、英語などに翻訳する際の対応が容易になります。

ただし、日本人のキャラクターのまま言葉だけ英語にしてもマンガのメリットが発揮できないかもしれません。


ガイドライン

30

セリフを縦書きにした方が、キャラクターとセリフの配置バランスがとりやすいという意見もあります。漫画の書き方などのサンプルも縦書きで画かれているものが多いです。

ただし、最近は横書きで書かれたマンガも増えてきています。


アクティングアウトはいつやるの？

31


アクティングアウトのタイミング

32

開発の前にも後にもやりましょう！


開発の前にアクティングアウトを行うことで、実際の利用イメージを膨らませます。

本当に必要なものだけを残し不要なものを削ぎ落としましょう。

ガイドライン


開発の後でアクティングアウトを行うことで、作ったものと前提とした利用シーンが適合していることを再確認しましょう。

ガイドライン


デモンストレーションの際に、プロジェクタ等でマンガ駆動のストーリーボードを投影しておくことで、ストーリーの内容がよりわかりやすく伝わるようになります。

ガイドライン


アクティングアウトを行うのは１度だけではありません。

何度も繰り返し、よりよいサービスを創りだしていきましょう。

ガイドライン


業務システムでも使えるの？

37


使えます！

業務システムとマンガ



39

現場の要求を表現する

言葉による表現は開発者よりの抽象的な内容になりがちです。

マンガを使って視覚的に表現することで、実際にシステムを利用する現場利用者にも理解しやすい具体的な内容で利用イメージを伝えるようにしましょう。



40

部署間・担当者間での意識合わせ

マンガを使うことで自分がシステムを利用する立場とした場合のイメージが捉えやすくなります。

業務の流れに沿った具体的な利用イメージを関係者全体で共有しましょう。



41

マンガ作成のコスト

マンガを作ることによるコストは確かに存在しますが、サービスデザイン全体からみれば僅かなものです。

マンガを用いてサービスイメージを共有することで、従来のやり方で生じていた担当者間における齟齬による出戻りコストなどを抑えることができるのではないでしょうか。


今後のとりくみ

42



43

協働プロジェクトへの適用

「空気を読む家」のなかで、人がどのように快適な生活をおくることができるのかというユーザー体験を、マンガ駆動開発の手順でデザインしていく予定です。

2月26日(木)に横浜で検討会を行いますので、まだAITCに参加されていないけど興味があるという方は是非AITCメンバーま

たは [email protected]にご連絡下さい。

mailto:[email protected]



44

ワークショップの開催

マンガ駆動開発を体験して頂けるワークショップの開催を計画中です。

Facebookページで告知しますので、ぜひいいね!をしてAITCからのイベント情報をいち早く入手してください。

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




45

まだまだ発展途上の手法です

みんなで一緒に考えていきましょう！

UX技術部会への参画をお待ちしております!!!

最新情報はこちらをご参照ください

http://aitc.jp


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


http://aitc.jp/


マンガ駆動開発のすゝめ

Design