Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

マンガ駆動開発 第3版

2,209 views

Published on

マンガ駆動開発(Manga Driven Development)とは、ユーザーの経験(UX)をマンガで表現し、そのシーンを実現するための機能を設計する、新しい開発プロセスです。

2015/2/25 21cafe<ニイイチカフェ>

Published in: Design

マンガ駆動開発 第3版

  1. 1. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1
  2. 2. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2015年2月25日 先端IT活用推進コンソーシアム UX技術部会 サブリーダー 株式会社 ディーディーエス 原 孝治 マンガ駆動開発
  3. 3. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 自己紹介 原 孝治 株式会社ディーディーエス システム部 所属 AITC UX技術部会サブリーダー AITC 運営委員 https://www.facebook.com/harakoji.net
  4. 4. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. http://aitc.jp https://www.facebook.com/aitc.jp ハルミン AITC非公式イメージキャラクター 4 とは
  5. 5. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 先端IT活用推進コンソーシアム(1) 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
  6. 6. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 先端IT活用推進コンソーシアム(2) 6 企業における先端ITの活用および 先端ITエキスパート技術者の育成を目的とし、 社会に貢献することを目指す非営利団体 設立 : 2010年9月8日(会期: ~2016年8月31日) 会長 : 鶴保 征城(IPA顧問、HAL校長) 会員 : 正会員(法人&個人事業主) 準会員(個人会員&学術会員) 特別会員(産業技術総合研究所、気象庁、消防研究センター、 防災科学技術研究所) 顧問 : 萩野 達也(慶応義塾大学 教授) 稲見 昌彦(慶応義塾大学大学院 教授) 橋田 浩一(東京大学大学院 教授) 丸山 不二夫(早稲田大学大学院 客員教授 山本 修一郎(名古屋大学 教授) 三淵 啓自(デジタルハリウッド大学大学院 教授) 川田 十夢(AR三兄弟 長男)
  7. 7. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 先端IT活用推進コンソーシアム(3) 7
  8. 8. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. UX技術部会 活動内容 • 招待講演・セミナー • 外部ワークショップの受講 学習 • 部会でのデザインプロセスの実施 • プロジェクトを対象にした デザインツールの適用 実践
  9. 9. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 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. 10. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. アジェンダ マンガ駆動開発の「マンガ」について マンガとは メリット マンガ駆動開発プロセスについて キャラづくり シナリオづくり モノづくり 10
  11. 11. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発とは 関係者全員が ユーザー経験を意識し ながら プロダクトを開発する ための、新しい開発プ ロセスです。 11
  12. 12. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. UXとは 次の画像は、ある学校で配布 されたアンケートです。 12
  13. 13. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 13
  14. 14. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 結構ヘビーな内容ですね 私は、このアンケートは情報 収集の目的を果たせないだろ うなと感じました。 14
  15. 15. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. オペレーション 講義の最後に 教授が配布して、 学生はその場で記入、 教授が回収していました。 15
  16. 16. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 書きづらい 16
  17. 17. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. アンケートの特徴 ・「お金を払う人」と、「ユーザー」が別 ・ステークホルダーがたくさんいる 17
  18. 18. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. この例の場合 ・アンケート結果を欲しい人 ・アンケートを作る人 ・評価される人(教授) ・評価する人(学生)ユーザー ・アンケートを配る人 ・アンケートを集める人 ・アンケートの仕組みにお金を払う人 18
  19. 19. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 仕様 →アンケートの内容 →アンケートの対象の授業 →アンケートの対象の学生の属性、人数 仕様はOK 要求は満たされない 19
  20. 20. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発とは 関係者全員が ユーザー経験を意識し ながら プロダクトを開発する ための、新しい開発プ ロセスです。 20
  21. 21. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発の3つのステップ 9つのフェーズ 21 キャラ取材 分析 プロット ネーム 寸劇 実装 評価 マンガ キャラ づくり シナリオ づくり モノ づくり
  22. 22. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ 22
  23. 23. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発のマンガとは マンガ駆動開発の マンガとは 23
  24. 24. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 24 マンガの例
  25. 25. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 25
  26. 26. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 26
  27. 27. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 27
  28. 28. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 28
  29. 29. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 29
  30. 30. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 30
  31. 31. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 31
  32. 32. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 32
  33. 33. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガが表現するもの マンガ駆動開発に おけるマンガは、 こういう要素を表 現しています 33
  34. 34. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 背景・利用シーン 34
  35. 35. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 背景・利用シーン ユーザーがどういった状況でシ ステムを利用するかということ を表現します。 単に物理的な環境だけでなく、 利用に至ったコンテキストも表 現することが出来ます。 35
  36. 36. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ユーザー 36
  37. 37. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ユーザー ユーザーの服装、年齢、職業 などを、文章で明示すること なく表現することが出来ます。 37
  38. 38. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 感情・考え 38
  39. 39. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 感情・考え ユーザーの感情、その時の考 えを表現します。 39
  40. 40. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. デバイス 40
  41. 41. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. デバイス デバイスがどういったものな のかを表現します。 ここでは、ユーザーインター フェースは表現しません。簡 単な外観で記述します。 41
  42. 42. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 42 マンガ駆動開発のマンガ 背景 利用シーン 考えデバイス ユーザー感情
  43. 43. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ストーリーボードとの比較 マンガ駆動開発の マンガと、一般的 なストーリーボー ドを比較してみま しょう。 43
  44. 44. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 揺れる~ 取り敢えず机の下に隠れよう 震度5の地震。かなり揺れます。 一般的なストーリーボード
  45. 45. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ 45
  46. 46. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 比較 46
  47. 47. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガで表現されているもの • 会社にいる • 勤務中 • 地震が発生した • ユーザーは男性 • スーツを着ている 47
  48. 48. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガの特徴 • 主人公の性別、年齢、職業、 場面の状態を推定できる • 一つの場面だけ取り出して も、状況が把握できる 48
  49. 49. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. • 文脈の表現のため、背景な どはコマごとに必要 • 作成に、手間(コスト)が かかる 49 デメリット
  50. 50. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. この部分がコスト 50 コスト
  51. 51. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. • 文脈の表現のため、背景な どはコマごとに必要 • 作成に、手間(コスト)が かかる →マンガ作成ツールを使用す る 51 デメリット
  52. 52. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. コミPo! 52
  53. 53. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガを使用すると • 利用シーンがわかる • 感情表現ができる • ユーザーを想像できる • 絵を描くのは時間がかかるということで あれば、マンガ作成ツールが便利 • 画面を表示しないことで、抽象度の高い 要求を表現できる • 画面を表示しないことで、センサーなど の、NUIの利用を表現できる 53
  54. 54. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. UXコンシャスな人向けの説明 54 • デザインしたUXを可視化し、 参照できる状態にすることで、 UXを重視した開発が可能。 • ストーリーボードをマンガに すると、メリットが沢山ある。 • マンガ作成ツールを使えば、 作成コストは普通のストー リーボードとほとんど変わら ない。
  55. 55. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらに一歩進めて マンガを使えば、 UXをキーにして、 開発をすることがで きるのではないか 55
  56. 56. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発 MangaDrivenDevelopment 56
  57. 57. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. すばらしいUX実現のために UXを重視した開発 のために、要求設計 から実装までのプロ セスを開発手法とし てまとめています。 57
  58. 58. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 58
  59. 59. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 59
  60. 60. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発の3つのステップ 9つのフェーズ 60 キャラ取材 分析 プロット ネーム 寸劇 実装 評価 マンガ キャラ づくり シナリオ づくり モノ づくり
  61. 61. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発の3つのステップ 9つのフェーズ • マンガ駆動開発の3つのステップと9つの フェーズです。 • マンガ駆動開発は、大きく分けて3つのス テップに分かれていて、さらにそれぞれ3 つのフェーズにわかれます。 • それぞれのフェーズを、他の開発プロセ スと比較したものが次の図です。 61
  62. 62. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発と他のプロセスの比較 マンガ駆動開発 他のデザインプロセス 取材 ペルソナ エンパシーマップ カスタマージャーニーマップ ロケハン ユーザーモデリング ステークホルダ ビジネスモデルキャンバス 分析 キャラ プロット 課題、アイデアのグルーピング シナリオ ストーリーボード のびたの一日 出てくるドラえもんの道具 ネーム 機能を抽出する マンガ 寸劇 アクティングアウト(寸劇) アジャイル開発プロセス ウォーターフォール 要求定義 要件定義 実装 開発への適用(実装) 評価 62 キャラ づくり シナリオ づくり モノ づくり
  63. 63. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. キャラ づくり 63
  64. 64. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. キャラづくり • キャラづくりでは、マンガを描く準備を します。 • マンガでいうと、キャラクターを作ると いう作業に相当します。 64
  65. 65. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 取材 65
  66. 66. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1-1 取材 まず、キャラクター(ペルソ ナ)を作成する準備をします。 まず取材から始めましょう。 ・エスノグラフィ ・ロケーションハンティング 66
  67. 67. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1-1 取材 • 医療マンガを書こうと思ったら、まず何 をしますか。全部想像で書きますか? あなたが医療関係者でなければ、想像で 医療マンガを描くのはとても難しいと思 います。まずは、医者や、看護師、患者 に、取材をするのではないでしょうか。 • マンガ駆動開発でも、最初に取材をする ところから始めましょう。 67
  68. 68. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. エスノグラフィ エスノグラフィは、文化人類学者が別の文 化圏の取材を行う為のアプローチです。 民族誌を作成するように、取材対象にずっ とついてまわって、取材対象の動作を観察 します。 68
  69. 69. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. インタビューしたら トイレ(小) • トイレに入る • 用を足す • 手を洗う 69
  70. 70. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 実際には トイレ(小)私の場合 • トイレに入る • 便器の上にある10センチくらいの段に なっている部分に慎重にかばんを置く • 用を足す • 手を洗わずにかばんを持つのと、そのま ま手を洗いに行って戻ってくる間にかば んが落下するリスクとを比較する。 70
  71. 71. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. エスノグラフィ • インタビューして返ってくる答えに、聞 きたいことは入っていない。 • 大切なことは、認識していない部分にあ る。 • 行為と行動 • 師匠・弟子モデル 71
  72. 72. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ロケーションハンティング • 一口にキッチンといっても、全員の頭に 浮かぶキッチンはそれぞれ違う • コンロの数、冷蔵庫のサイズ、シンクの 形 • アイランドキッチンか、対面か、窓はあ るのか 72
  73. 73. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ロケーションハンティング • 実際にその場所に足を運んで、その写真 を撮って共有することで、メンバー全員 が共通の意識を持つことができます。 • コンロとコンロの間の距離が、システム のUIに大きな影響を与えるかもしれませ ん。 • ここで撮影した写真は、マンガを作成す る際の背景として使用しましょう。 73
  74. 74. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 分析 74
  75. 75. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1-2 分析 次は、キャラクターの考 えていることを分析し、 可視化していきます。 ・エンパシーマップ ・カスタマージャーニーマップ ・問題提起 75
  76. 76. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. エンパシーマップ 76
  77. 77. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. エンパシーマップ • ここでは、エンパシーマップという手法 を使用します。 • 一般的にはエンパシーマップは線で区 切っているだけですが、気分を盛り上げ るために吹き出しを使用してみました。 • エンパシーマップは、作成するキャラク ターの数だけ作ると、後の工程でアイデ アを出しやすくなります。 77
  78. 78. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. エンパシーマップ 78
  79. 79. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. カスタマージャーニーマップ 79
  80. 80. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. カスタマージャーニーマップ • カスタマージャーニーマップを作成して、 問題を抽出します。 • この例では、駅の券売機を使用する上で、 問題となる箇所を抽出しています。 80
  81. 81. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 問題定義 81 券売機を探す 切符を買う 表示を探す 値段を調べる 値段表 切符を受け取る ボタンを押す お金を入れる券売機 操作感が悪いと イライラする 行き先が探しにくい アクティビティ インタラクション 感情の起伏
  82. 82. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. キャラ 82
  83. 83. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1-3 キャラ これまでに作成した情報を元に、 キャラクターを作っていきます。 ユーザーモデリング、ペルソナ といわれる手法です。 ・ユーザーモデリング 83
  84. 84. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ユーザーモデリング ペルソナ 84 名前 :電脳 太郎 性別 :男性 年齢 :40歳 職業 :IT企業のプロジェクトマネージャー 家族 :妻38歳(リカ)/長男小3(翔)/長女小1(凛) 潜在ニーズ :子どもとのコミュニケーション 遠距離通勤:1.5時間(電車) その他 •持ち家 •電車、駅と自宅・会社は徒歩10分 •混雑を避けたいが、遅刻はしたくない •時間に余裕をもちたい •情報を能動的に取得する •スマホアプリを使いこなす •通勤時間を有効活用したい(電車の中は自由) •天気が気になる(雨を避けたい)
  85. 85. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ペルソナ • ペルソナでは、一般的に写真を使用しますが、 マンガ駆動開発ではマンガを使用します。 • 写真を使用する際のよくある失敗として、芸 能人や実在の知人の写真を使用してしまって、 ペルソナではなくその人物のイメージになっ てしまうというものがあります。 • オリジナルのマンガのキャラクターにするこ とで、抽象度を適切に設定できます。マンガ なら、架空の人物であることが誰にでもわか ります。そして、ある特定の人物であるとい うことも、同じように認識できます。 85
  86. 86. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. シナリオ づくり 86
  87. 87. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. プロット 87
  88. 88. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2-1 プロット 利用シーンのあらすじを作 成します。 次の工程のネームと、行っ たりきたりしながら作るこ とになると思います。 88
  89. 89. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. プロット • マンガでユーザー経験を表現するシナリオという のはどういうものでしょうか。 • ドラえもんのストーリーでは、一つの道具がテー マとなって、物語が進んでいきます。未来の道具 ですから、誰も見たことの無い道具です。しかし、 一話を読み終わったときには、その道具がどうい う目的のもので、ユーザーはどんな風に使用して、 どんな経験ができるかということを、理解できて います。 • ユーザーが、システムを利用するシーンをこのス テップでは準備します。利用するシーンが明確に なることで、次の工程でのアイデアを出すための きっかけが増えることになります。 89
  90. 90. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ネーム 90
  91. 91. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2-2 ネーム プロダクトやサービスのアイ デア出しをします。 ここでやっと機能の抽出を始 めます。ユーザーをしっかり とイメージしてから、機能に ついて考えることが重要です。 ・ブレーンストーミング ・機能抽出 91
  92. 92. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ブレーンストーミング 92
  93. 93. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ブレーンストーミング • ここで、プロダクトやサービスのアイデ ア出しをします。ブレーンストーミング というタイトルにしましたが、重要な点 はアイデア出しのキーの部分にあります。 • これまでに行った、エスノグラフィ、エ ンパシーマップ、ペルソナというプロセ スの成果物の中に、実際のユーザーの行 為に肉薄した、リアルなアイデアを出す ためのキーが埋まっています。 93
  94. 94. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. シーン 情報 機能 地震直後 状況(生きて) 自分の場所 安否状況登録(PushとPusll) (家族など特定の人の)安否状況 安否確認機能 ・特定の人の安否状況が変わったら、Pushで通知(家族など特定の人の)場所 待ち合わせ場所 待ち合わせ場所までの経路探索 ・安全な場所/経路が分かる ・非難場所が分かる 待ち合わせ場所を設定し、その場所を共有することができる 待ち合わせ場所までの経路/移動手段 待ち合わせ場所までの時間 快適性/安全性(人の流れ、被災状況) 途中に食料/飲料/休憩/タクシー乗車できる場所 待ち合わせ場 所まで 目的地までの方向 ナビゲーション機能 ・おおまかな方向 ・ランドマークや必要なモノ(飲食物やトイレ)などのチェックポイント(歩くス ピード×時間の範囲にある)の場所/方角 ずっとディスプレイを見なくてもナビゲーションされる ストレス状態での使い勝手 バッテリー節約を節約する仕組み GPSを切る、3G受信切る、ディスプレイ切る、通話しない(Cメールを返すな ど、機内モードにする) その方向に特定の範囲にあるチェックポイント (家族など特定の人の)安否状況 安否確認機能 ・特定の人の安否状況が変わったら、Pushで通知 ・特定の人への安否状況の問い合わせ ・どれくらいの時間で目的地に到着するか (自動安否通知機能は未定、リカさん視点が必要) (家族など特定の人の)場所 外苑到着 どの方向に待ち合わせする人がいるか 赤い糸モード(ヒトに逢うための近接モード) ・ヒトの方向 タクシー乗車 タクシーが乗れる(通っている/待っている)場所 (他のヒトが)タクシーに乗れた場所を検索機能 小学校/ 自宅到着 利用者の視点に立って、ユーザーがどんな情報を欲しているのか、ユーザーのどんな機能を欲しているのか 機能抽出
  95. 95. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 機能抽出 • ブレーンストーミングの後は、ア イデアの整理を行い、機能抽出を 行います。 95
  96. 96. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ネームとシナリオについて • 翻訳こんにゃくがどういうツールか、ドラえもん を読めばわかりますね。しかし、どうやって機能 を実現するかとか、翻訳対象の言語をどうするか ということは、物語では表現されていません。 • シナリオやネームは、あくまでユーザーの経験を 表現することが目的です。この段階で実装を表現 してしまうと、その通りに実装されることになり ます。それは、ユーザー経験を中心とした設計で はありません。 • この段階ではユーザー経験を表現するストーリー を作成することに注力し、実装の段階で、改めて その経験を実現する機能の実装方法を考えましょ う。 96
  97. 97. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 実現可能性について • 仕様を考える段階ではありませんが、実 現可能性を全く考えなくて良いというこ とではありません。 • 全く実現可能性を考えずに作ると、空飛 ぶ車や、ボタンを押すとお金が出てくる 装置ができてしまうかもしれません。 • ブレストとしては楽しいかもしれません が、時間は無駄になります。 97
  98. 98. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ 98
  99. 99. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2-3 マンガ 描くときのポイント ・画面を描かないことで、UX にフォーカスする。 ・ロケハンをした写真を背景 として使用する。 99
  100. 100. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2-3 マンガ ツール ・コミPo! ・CLIP STUDIO ・Photoshop ・紙とペンとスキャナ 100
  101. 101. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. コミPo! 101
  102. 102. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. コミPo! • マンガ作成ツール • ペンタブレットがいらない • 誰が作っても画風が同じになる • キャラクターの種類がもう少しあったら 無敵 • 私はこのメーカーさんと何の関わりもあ りません 102
  103. 103. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CLIP STUDIO 103
  104. 104. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CLIP STUDIO • 本格的なマンガ • 何でもできます • 絵がかけないと、どうにもならない • 同一人物が作成しないと、画風が揃わな い 104
  105. 105. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. Photoshop 105
  106. 106. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. Photoshop • CLIP STUDIOと同様 106
  107. 107. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 紙とペンとスキャナ • 絵がかける人はいる 107
  108. 108. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. モノ づくり 108
  109. 109. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. モノづくり • 機能を実装します。 • このフェーズも、イテレーションしてく ださい。 109
  110. 110. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 寸劇 110
  111. 111. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 3-1 寸劇 111 寸劇 マンガ 操作画面
  112. 112. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 寸劇 • サービスのデザインで重要なことは、ユーザーの 経験をデザインすることです。 • UXDや、サービスデザインのワークショップで最 後に発表するものが、寸劇(アクティングアウ ト・スキット)であるのは、その表れでしょう。 • 寸劇はコミュニケーションのツールとして非常に 有効なもので、「マンガ駆動開発」でもマンガや 画面表示を加えるという工夫をしながら取り入れ ています。 • 寸劇自体は成果物にするにも、開発のトリガーに するにも、あまりに不安定です。寸劇は、資料と して形に残すことも、配布することもできません。 しかし、マンガと併用することで、寸劇の機能を 向上させ、さらに、形に残すことができます。 112
  113. 113. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 寸劇 • プロジェクタを二面使用して、デバイス の画面とマンガユースケースを表示する ことができます。 • 背景が分かる • 小道具の不足を補える • セリフが聞き取れない場合に、文字が表 示されている • プレゼンテーション資料に残すことがで きる 113
  114. 114. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 114
  115. 115. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 実装 115
  116. 116. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 3-2 実装 ・ウォーターフォール ・アジャイル 116
  117. 117. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 実装 • 社外に出すパンフレットにマンガが書い てあることがあります。このように、マ ンガは、システムがユーザーに提供する 価値を表現するのに有効です。 • さらに、デザインの段階でマンガを作成 し、開発に持ち込むのがマンガ駆動開発 です。開発に使う前提でマンガを作成す ることで、機能の抽出を適切に行うこと ができます。 117
  118. 118. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ウォーターホールでの適用 • フェーズとしては要求定義。 • 寸劇を活用することで、関係者全員がイ メージを共有できる。 118
  119. 119. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. スクラムでの適用 • プロダクトバックログの左側に、マンガ のシーンを追加する。 • マンガ→プロダクトバックログ→スプリ ントバックログという順で展開する。 • 機能の上位概念として、UXを追加するイ メージ。 • 寸劇、評価をうまくイテレーションに組 み込むと良さそう。 119
  120. 120. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. スクラム 120 Manga
  121. 121. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 評価 121
  122. 122. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 3-3 評価 122
  123. 123. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 評価 123
  124. 124. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 評価 • マンガを評価のフェーズで使用すること で、そのシステムが想定する使用条件で 適切に機能するか、レビューすることが できます。 • 寸劇を使用することも有効です。 124
  125. 125. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. まとめ 125 • ストーリーボードをマンガにすると、メ リットが沢山ある。マンガ作成ツールを 使えば、作成コストは普通のストーリー ボードとほとんど変わらない。 • マンガを使えば、UXをトリガーにして、 開発を駆動することができる。 • 開発手法として3つのステップ、9つの フェーズにまとめた。
  126. 126. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. マンガ駆動開発の3つのステップ 9つのフェーズ 126 キャラ取材 分析 プロット ネーム 寸劇 実装 評価 マンガ キャラ づくり シナリオ づくり モノ づくり
  127. 127. Copyright © 2015 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. http://aitc.jp https://www.facebook.com/aitc.jp ハルミン AITC非公式イメージキャラクター 127

×