AR Service Design Workshop

763e77506a1534bdc6fcc930f5d94eb6?s=47 かじけん
August 29, 2019

AR Service Design Workshop

このWSでは、みなさんに普段MESONでやっている
ARサービスデザインのプロセスの一部を実際に体験してもらいました

763e77506a1534bdc6fcc930f5d94eb6?s=128

かじけん

August 29, 2019
Tweet

Transcript

  1. ˇ AR Service Design Workshop

  2. 2 今⽇は、ARにおけるサービスデザインのプロセスを みなさんに実際に体験してもらいます

  3. 3 ⻑丁場なので、⾃由に飲み⾷いしながら楽しんでやりましょう! アルコールを⼊れた⽅が頭が回るタイプの⼈は、 キンキンに冷えた酒が20時に届くらしいので飲み始めてもOK!

  4. 4 まずは簡単に⾃⼰紹介を。

  5. PAGE 5 梶⾕ 健⼈ MESON, inc. CEO 株式会社MESONの代表. 「いちばんやさしいグロースハックの教本」 (Amazonのマーケティング・セールス⼀般カテゴリ1位)の著者.

    ⼥性向けファッションサービスiQONのGrowthを担当した後, インド・アメリカにて現地スタートアップのサービスデザインと グロースハックに従事. 世界⼀周後帰国し、 AR時代のユースケースとUX開発を⾏うMESONを創業.
  6. PAGE 6 MESONとは MESON is Experience Augmentation Company MESONはAR (Spatial

    Computing)時代の ユースケースとUXをつくる会社です. 様々なアセットを持つパートナー企業と組んで 研究するクリエイティブスタジオ事業を展開.
  7. PAGE 7 AR PORTAL AR CITY AR AR AWE AWARD

    FINALIST AWE AWARD FINALIST UNITY DEVELOPMENT CASE 2019 ݱࡏɺGINZA SIXͱ࿡ຊ໦ϛουλ΢ϯͰެ։த!!
  8. 8 今⽇のWSでは、みなさんに普段MESONでやっている ARサービスデザインのプロセスの⼀部を実際に体験してもらいます

  9. 9 先にお伝えしておくと、 ARにおいても通常のサービスデザインの⼿法をかなり使います。

  10. 10 サービスデザインの核となる⼿法 + ARならではのサービスデザイン⼿法

  11. PAGE 11 ϢʔβʔΰʔϧɾϏδωεΰʔϧ͸ʁ Ͳ͏͍ͬͨػೳͱίϯςϯπΛ੝ΓࠐΉ͔ʁ Ͳ͏͍͏৘ใߏ଄ʁΠϯλϥΫγϣϯʁ ഑ஔɾφϏήʔγϣϯɾ৘ใͷࠎ֨͸ʁ ݟͨ໨ɾײ͡ํΛͲ͏σβΠϯ͢Δ͔ʁ ॱ൪

  12. 12 今⽇サービスデザインで取り組む架空のサービスのお題を選ぶ お題を選ぶ ユーザー体験を描きながらサービスのイメージを具体化させる ストーリーボードの作成 サービスの価値を発揮するために最⼩限必要なコア機能を選定する コア機能の選定 シーン別にユーザーがどういった情報を⾒たり・聞いたりするか、 どういったインタラクションをして次のシーンに遷移するかを設計 リアリティシークエンスの作成

    今回のワークショップのフロー
  13. PAGE 13 2 WARMING UP

  14. 14 各チームで⼀⼈、テーブルに置いてあるボールを⼿にとってください

  15. PAGE 15 Warming Up (8 ) ϘʔϧΛ͍࣋ͬͯΔਓ͸ࠓ݄͋ͬͨϋοϐʔͩͬͨ͜ͱɺ໘ന͔ͬͨ͜ͱΛνʔϜͷਓʹ࿩͠·͠ΐ͏ʂ ࿩͠ऴΘͬͨΒϘʔϧΛ޷͖ͳਓʹ౉͠·͠ΐ͏ʂ どんな些細なことでも遠慮せず話してみましょう! ⇒

    ワークショップの中ではどんな些細なアイデアでも、まず発⾔をすることが重要! 発⾔している⼈の話を暖かく聞きましょう! ⇒ メンバーを話をちゃんと聞くチームは良いアウトプットが出やすい! 1 2 ポイント
  16. PAGE 16 ΞΠσΞΛ֦ࢄͤ͞Δͱ͖͸ҎԼΛकΔ • アイデア出しは個⼈ワーク(周りと話さない) • 1アイデアは 1ポストイットに書く • 可能な限りビジュアル化する

    • ポストイットには太いペン以外で書かない • 突⾶なアイデアほど遠慮なく書き出す。質より量 • スマホやPCはいじらない。カバンにしまいましょう!
  17. PAGE 17 ΞΠσΞΛऩଋͤ͞Δͱ͖͸ҎԼΛकΔ • チームで議論するときは必ず壁で⽴って⾏う • 発⾔している⼈の話をしっかり全員で聞く • 他⼈の発⾔を否定しない •

    他⼈のアイデアに便乗する • 議論の時間を厳守する • コンパクトに発⾔して話しすぎないようにする
  18. PAGE 18 PICK A SERVICE THEME

  19. PAGE 19 Warming Up (6 ) ࠓ೔αʔϏεσβΠϯ͍͓ͯ͘͠୊ΛҰͭબͼ·͠ΐ͏ άϥεσόΠε͕ग़͍ͯͯɺۭؒతʹ৘ใΛѻ͑Δ࣌୅4QBUJBM࣌୅ͷαʔϏε

  20. PAGE 20 AR = Spatial Computingの時代 AR(Spatial Computing) いままでフラットに扱っていた情報を⽴体的・空間的な形で 現実世界と対応させて扱う技術

    「Hyperlink, Social Graphに続く第3のプラットフォーム」 By ケヴィン・ケリー (WIRED, 「〈インターネット〉の次に来るもの」) = = ※厳密にはSpatial Computingが進展したMirror Worldに対する発⾔
  21. PAGE 21 Spatial Computingとは Spatial Computing Responsive Web ↓ Responsive

    Space Manual Input ↓ Input by Context Video Sharing ↓ Presence Sharing Hyper Link ↓ Hyper Space Text / Image / Video ↓ Space 2D Interaction ↓ 3D Interaction O2O / OMO ↓ Mirror World
  22. PAGE 22 Warming Up (6 ) ࠓ೔αʔϏεσβΠϯ͍͓ͯ͘͠୊ΛҰͭબͼ·͠ΐ͏ άϥεσόΠε͕ग़͍ͯͯɺۭؒతʹ৘ใΛѻ͑Δ࣌୅4QBUJBM࣌୅ͷαʔϏε - Spatial

    Google - Spatial Facebook - Spatial Instagram - Spatial Twitter - Spatial Messenger - Spatial Netflix - Spatial Spotify - Spatial X
  23. PAGE 23 Warming Up (6 ) બΜ͓ͩ୊͕ͲΜͳαʔϏεͱͯ͠࡞Εͦ͏͔ΛϑϦʔʹσΟεΧογϣϯ͠·͠ΐ͏ ͜͏͍͏೧Γ͕͋ͬͨΒ4QBUJBMͳΒͰ͸Ͱ໘ന͍͔΋ɺͱ͍͏؍఺Ͱ࿩͠·͠ΐ͏ʂ - Spatial

    Google - Spatial Facebook - Spatial Instagram - Spatial Twitter - Spatial Messenger - Spatial Netflix - Spatial Spotify - Spatial X
  24. PAGE 24 STORY BOARD

  25. 1. ストーリーボードで発散 ユーザー体験をストーリーボードに描きながらサービスのイメージを具体化させましょう! (もしユーザーがDemandとSupplyの2サイドいる場合はチームで⽚⽅を選んで進めましょう)

  26. ポイント:①④を先に書いて、②③を後から書く

  27. 個⼈ワーク (5分) サービスのストーリーボードをアイデア出し

  28. グループワーク (5分) 1⼈1分程度で⾃分が書いたストーリーボードを壁に貼りながら 簡単に説明しましょう 聞く⼈はどのコマに投票するかを考えながら聞きましょう アイデアのグループ内シェア

  29. グループワーク (3分) 投票基準は、課題が明確か/解決策が妥当か ポイント 各⾃4票で良いと思ったストーリーボードの"コマ"にヒートマップ投票しましょう! 1・4コマ⽬に2票、2・3コマ⽬に2票⼊れましょう

  30. グループワーク (5分) 統合するなどして1枚のストーリーボードを選ぶ

  31. PAGE 31 CHOOSING CORE FEATURES

  32. 個⼈ワーク (5分) ストーリーボードの⼀連の体験をつくるために必要な機能をブレストしましょう!
 1機能につき1ポストイット ػೳ ػೳ ػೳ ػೳ

  33. 補⾜ 例. 空中にツイートを置いていくSpatial Twitterの場合 ۭؒʹπΠʔτ Λஔ͚Δ ؾʹͳͬͨπΠʔ τΛอଘͰ͖Δ ۭؒʹࢄΒ͹ͬ ͨπΠʔτΛӾ

    ཡͰ͖Δ ݟ͍ͯΔܠ৭ʹ ؔ࿈ͨ͠πΠʔ τΛදࣔͰ͖Δ ؾʹͳͬͨπΠʔ τΛผͷ৔ॴʹ ΋ஔ͚Δʢ35ʣ 書き出す機能は、ユーザー主語で◯◯できる、という形で書きましょう
  34. グループワーク(5分) 例. 空中にツイートを置いていくSpatial Twitterの場合 書き出した機能のアイデアをチーム内でシェアしましょう! ۭؒʹπΠʔτ Λஔ͚Δ ؾʹͳͬͨπΠʔ τΛอଘͰ͖Δ ۭؒʹࢄΒ͹ͬ

    ͨπΠʔτΛӾ ཡͰ͖Δ ݟ͍ͯΔܠ৭ʹ ؔ࿈ͨ͠πΠʔ τΛදࣔͰ͖Δ ؾʹͳͬͨπΠʔ τΛผͷ৔ॴʹ ΋ஔ͚Δʢ35ʣ
  35. ۭؒʹπΠʔτ Λஔ͚Δ ؾʹͳͬͨπΠʔ τΛอଘͰ͖Δ ۭؒʹࢄΒ͹ͬ ͨπΠʔτΛӾ ཡͰ͖Δ ݟ͍ͯΔܠ৭ʹ ؔ࿈ͨ͠πΠʔ τΛදࣔͰ͖Δ

    ؾʹͳͬͨπΠʔ τΛผͷ৔ॴʹ ΋ஔ͚Δʢ35ʣ 個⼈ワーク(5分) 例. 空中にツイートを置いていくSpatial Twitterの場合 ストーリーボードの4コマ⽬、ユーザーのハッピーな状態をつくるために⽋かせないと思う機能に 1⼈5票ヒートマップ投票しましょう
  36. ۭؒʹπΠʔτ Λஔ͚Δ ؾʹͳͬͨπΠʔ τΛอଘͰ͖Δ ۭؒʹࢄΒ͹ͬ ͨπΠʔτΛӾ ཡͰ͖Δ ݟ͍ͯΔܠ৭ʹ ؔ࿈ͨ͠πΠʔ τΛදࣔͰ͖Δ

    ؾʹͳͬͨπΠʔ τΛผͷ৔ॴʹ ΋ஔ͚Δʢ35ʣ グループワーク(5分) 例. 空中にツイートを置いていくSpatial Twitterの場合 チームでコア機能として5つ機能を選びましょう(ログインや設定などは除く) ここで選んだ5つの機能を備えたバージョンをMVPとして今⽇設計を進めていきます
  37. 37 今回は時間の関係上ライトにコア機能を選んでもらいましたが、 本来はユーザーストーリーマッピングという⼿法を使うので簡単に紹介

  38. 38 ユーザーストーリーマッピングとは ߦಈϑϩʔ ۩ମతͳߦಈ ৺ཧɾཉٻ ηοτΞοϓ ࢖͍ํͷ ֶश ՙ෺ͷൃૹ ൃૹޙͷ֬ೝ

    εςʔλεͷ ֬ೝ ॅॴͷొ࿥ ࠷ॳʹΞϓϦͷ ࢖͍ํΛ ֬ೝ͢Δ ՙ෺ΛμϯϘʔ ϧʹ٧ΊͯѼ ઌΛॻ͘ ՙ෺͕ແࣄ ಧ͍ͨ͜ͱΛ ֬ೝ͢Δ ԿΛ༬͚͍ͯ Δ͔֬ೝ͢Δ ΊΜͲ͏ͳͷ ආ͚͍ͨ ηΩϡϦςΟ ා͍ Ͳ͏࢖ͬͨΒ ͍͍͔Α͘ Θ͔Βͳ͍ ૹΔ్தͰ յΕͳ͍͔ ෆ҆ ͪΌΜͱ ಧ͍͍ͯΔ͔ ෆ҆ ˔˔͕ෆ҆ ˚˚͸ݏͩ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ユーザーの⼼理や⾏動フローから、必要とされる「機能」を探り優先順位をつける⼿法
  39. 39 ユーザーストーリーマッピングの具体的なフロー ߦಈϑϩʔ ۩ମతͳߦಈ ৺ཧɾཉٻ ηοτΞοϓ ࢖͍ํͷ ֶश ՙ෺ͷൃૹ ൃૹޙͷ֬ೝ

    εςʔλεͷ ֬ೝ ॅॴͷొ࿥ ࠷ॳʹΞϓϦͷ ࢖͍ํΛ ֬ೝ͢Δ ՙ෺ΛμϯϘʔ ϧʹ٧ΊͯѼ ઌΛॻ͘ ՙ෺͕ແࣄ ಧ͍ͨ͜ͱΛ ֬ೝ͢Δ ԿΛ༬͚͍ͯ Δ͔֬ೝ͢Δ ΊΜͲ͏ͳͷ ආ͚͍ͨ ηΩϡϦςΟ ා͍ Ͳ͏࢖ͬͨΒ ͍͍͔Α͘ Θ͔Βͳ͍ ૹΔ్தͰ յΕͳ͍͔ ෆ҆ ͪΌΜͱ ಧ͍͍ͯΔ͔ ෆ҆ ˔˔͕ෆ҆ ˚˚͸ݏͩ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ユーザーがサービスを使うときの⾏動を洗い出す
  40. 40 ユーザーストーリーマッピングの具体的なフロー ߦಈϑϩʔ ۩ମతͳߦಈ ৺ཧɾཉٻ ηοτΞοϓ ࢖͍ํͷ ֶश ՙ෺ͷൃૹ ൃૹޙͷ֬ೝ

    εςʔλεͷ ֬ೝ ॅॴͷొ࿥ ࠷ॳʹΞϓϦͷ ࢖͍ํΛ ֬ೝ͢Δ ՙ෺ΛμϯϘʔ ϧʹ٧ΊͯѼ ઌΛॻ͘ ՙ෺͕ແࣄ ಧ͍ͨ͜ͱΛ ֬ೝ͢Δ ԿΛ༬͚͍ͯ Δ͔֬ೝ͢Δ ΊΜͲ͏ͳͷ ආ͚͍ͨ ηΩϡϦςΟ ා͍ Ͳ͏࢖ͬͨΒ ͍͍͔Α͘ Θ͔Βͳ͍ ૹΔ్தͰ յΕͳ͍͔ ෆ҆ ͪΌΜͱ ಧ͍͍ͯΔ͔ ෆ҆ ˔˔͕ෆ҆ ˚˚͸ݏͩ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ユーザーの⾏動を時系列でグルーピング化する
  41. 41 ユーザーストーリーマッピングの具体的なフロー ߦಈϑϩʔ ۩ମతͳߦಈ ৺ཧɾཉٻ ηοτΞοϓ ࢖͍ํͷ ֶश ՙ෺ͷൃૹ ൃૹޙͷ֬ೝ

    εςʔλεͷ ֬ೝ ॅॴͷొ࿥ ࠷ॳʹΞϓϦͷ ࢖͍ํΛ ֬ೝ͢Δ ՙ෺ΛμϯϘʔ ϧʹ٧ΊͯѼ ઌΛॻ͘ ՙ෺͕ແࣄ ಧ͍ͨ͜ͱΛ ֬ೝ͢Δ ԿΛ༬͚͍ͯ Δ͔֬ೝ͢Δ ΊΜͲ͏ͳͷ ආ͚͍ͨ ηΩϡϦςΟ ා͍ Ͳ͏࢖ͬͨΒ ͍͍͔Α͘ Θ͔Βͳ͍ ૹΔ్தͰ յΕͳ͍͔ ෆ҆ ͪΌΜͱ ಧ͍͍ͯΔ͔ ෆ҆ ˔˔͕ෆ҆ ˚˚͸ݏͩ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ 各フローごとにユーザーの⼼理を考える
  42. 42 ユーザーストーリーマッピングの具体的なフロー ߦಈϑϩʔ ۩ମతͳߦಈ ৺ཧɾཉٻ ηοτΞοϓ ࢖͍ํͷ ֶश ՙ෺ͷൃૹ ൃૹޙͷ֬ೝ

    εςʔλεͷ ֬ೝ ॅॴͷొ࿥ ࠷ॳʹΞϓϦͷ ࢖͍ํΛ ֬ೝ͢Δ ՙ෺ΛμϯϘʔ ϧʹ٧ΊͯѼ ઌΛॻ͘ ՙ෺͕ແࣄ ಧ͍ͨ͜ͱΛ ֬ೝ͢Δ ԿΛ༬͚͍ͯ Δ͔֬ೝ͢Δ ΊΜͲ͏ͳͷ ආ͚͍ͨ ηΩϡϦςΟ ා͍ Ͳ͏࢖ͬͨΒ ͍͍͔Α͘ Θ͔Βͳ͍ ૹΔ్தͰ յΕͳ͍͔ ෆ҆ ͪΌΜͱ ಧ͍͍ͯΔ͔ ෆ҆ ˔˔͕ෆ҆ ˚˚͸ݏͩ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ 具体的な⾏動、⼼理をもとに必要とされる機能を洗い出す
  43. 43 ユーザーストーリーマッピングの具体的なフロー ⾏動フロー 機能 セットアップ 使い⽅の 学習 発送後の確認 ステータスの 確認

    ʙ ʙ ػೳ ػೳ ػೳ ػೳ ॏ ཁ େ ॏ ཁ த ॏ ཁ খ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ ػೳ 優先順位をつけてリリース毎に実装する機能を決定する
  44. PAGE 44 AR REALITY SEQUENCE

  45. PAGE 45 今⽇の最後のステップとして、 みなさんが考えたサービスのワイヤーフレームをつくってもらいます

  46. PAGE 46 AR ユーザーが⾃由に視点を選べるARサービスにおいては、 従来のスクリーンベースのワイヤーフレームではサービス体験を⼗分に表現できない

  47. PAGE 47 AR MESONではLillian Warnerの「REALITY SEQUENCE」と「REALITY SKETCH」を使⽤

  48. PAGE 48 AR 「REALITY SEQUENCE」はスクリーンベースではなくシーンベースで ユーザー体験を定義するデザインツール

  49. PAGE 49 AR UI

  50. PAGE 50 AR MESONではREALITY SEQUENCEをつかって、 ⼀連の体験イメージをメンバー間で揃えてからデザインや開発に⼊る

  51. PAGE 51 REALITY SEQUENCE

  52. PAGE 52 REALITY SEQUENCE シーン名

  53. PAGE 53 REALITY SEQUENCE ユーザーの視界に ⾒えている状態を描く

  54. PAGE 54 REALITY SEQUENCE ユーザーが取れる 操作の選択肢

  55. PAGE 55 REALITY SEQUENCE ユーザーが取った 操作毎の遷移

  56. PAGE 56 REALITY SEQUENCE

  57. PAGE 57 REALITY SEQUENCE 遷移先も同様に書く サウンド情報が あれば記載する Swoosh(カードが開かれる効果⾳)

  58. PAGE 58 1SPBDUJWF ೳಈతʹߦ͍͍ͨΞΫγϣϯ 1VTICBTFE *OUFSGBDF (FTUVSF*OUFSGBDF 76* *OUBOHJCMFʢख৮Γײ͕ॏཁͰͳ͍ΞΫγϣϯʣ 5BOHJCMF

    ख৮Γײ͕ཉ͍͠ΞΫγϣϯ 1BTTJWF डಈ৺஍Α͞ͳΞΫγϣϯ 3次元でコンテンツを操作するインターフェイスは確⽴していないが、 いまのところ以下の組み合わせかなと考えている
  59. PAGE 59 20 νʔϜͰڠྗ͠ͳ͕ΒબΜͩίΞػೳͷ3&"-*5:4&26&/$&Λඳ͍͍͖ͯ·͠ΐ͏ʂ ࿅शͳͷͰɺػೳΛ෼୲͠ͳ͕Βඳ͘ͷ͕Φεεϝ

  60. PAGE 60 SHARING

  61. PAGE 61 10 ֤νʔϜ෼൒ఔ౓Ͱ׬݁ʹɺબΜ͓ͩ୊ɺετʔϦʔϘʔυɺίΞػೳɺ 3&"-*5:4&26&/$&ΛγΣΞ͠·͠ΐ͏ʂ 4QBUJBM̋̋ ίΞػೳʷ

  62. PAGE 62 WRAP-UP

  63. PAGE 63 & ϢʔβʔΰʔϧɾϏδωεΰʔϧ͸ʁ Ͳ͏͍ͬͨػೳͱίϯςϯπΛ੝ΓࠐΉ͔ʁ Ͳ͏͍͏৘ใߏ଄ʁΠϯλϥΫγϣϯʁ ഑ஔɾφϏήʔγϣϯɾ৘ใͷࠎ֨͸ʁ ݟͨ໨ɾײ͡ํΛͲ͏σβΠϯ͢Δ͔ʁ ॱ൪

  64. 64 今⽇サービスデザインで取り組む架空のサービスのお題を選ぶ お題を選ぶ ユーザー体験を描きながらサービスのイメージを具体化させる ストーリーボードの作成 サービスの価値を発揮するために最⼩限必要なコア機能を選定する コア機能の選定 シーン別にユーザーがどういった情報を⾒たり・聞いたりするか、 どういったインタラクションをして次のシーンに遷移するかを設計 リアリティシークエンスの作成

    今回のワークショップのフロー
  65. ストーリーボードでアイデア具体化 ユーザー体験をストーリーボードに描きながらサービスのイメージを具体化させましょう! (もしユーザーがDemandとSupplyの2サイドいる場合はチームで⽚⽅を選んで進めましょう)

  66. コア機能の選定 ストーリーボードの4コマ⽬の状態をつくるために必要な機能をブレストしましょう!
 1機能につき1ポストイット ػೳ ػೳ ػೳ ػೳ

  67. PAGE 67 REALITY SEQUENCE

  68. 68 AR = Spatial Experience Design 空間的な体験なので、適切なデザインメソッドを使いながら 具体化・定義していくことが⾮常に重要

  69. 69 より詳細なARサービスデザインのメソッドを知りたい⽅は以下記事や MESONのXR MAGAZINEを参照

  70. 70 そしてまだ答えのないARサービスデザインを共に切り開いていきたい⽅は、 MESON・Graffity・ENDROLLまで!

  71. 71 Thank You!!