Toolsの杜 - マーベリック - 「IT×デザイン」のススメ
- 1. エンタープライズにおけるタッチアプリケーションの 事例デモとそのアプローチ 2018年7月10日 株式会社マーベリック 代表取締役 秋葉 卓也 「IT×デザイン」のススメ Toolsの杜 GrapeCity Developer Tools 30th Anniversary
- 2. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 1：まずはじめに IT×デザイン マーベリックとは？ Device の 多様化 1 Trial & Error に有効な手段 2 User の 素人化 3 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 1
- 3. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 1：まずはじめに Application First！ 共通するアプローチ 「最後に画面」ではなく「まず画面」 何が欲しいのか？を 最初に見える化・体験化 「あったらいいな／欲しい！」をカタチに モックで 体験を共有 1 UIアプリ開発 2-1 サーバ開発（API/DB） 2-2 インターフェース定義／疎結合な構造 UIとバック を並行開発 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 2
- 4. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 1：まずはじめに デザインの効能 みんな が参加できる Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 3 早期に 気づける ・ピンとこないITの話でも、デザインが 掛け合わさると分かりやすくなる ・エンジニアリングだけでは解決できない 課題も、デザイン的アプローチと融合 すると解決できる ・動くものとして素早くアウトプット することで、様々な気づきを得られる ・ビジネスの可能性を広げたり、計画を 軌道修正するリスクマネジメントにも 繋がる
- 5. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo／事例紹介 1：位置情報リアルタイム共有システム ［某大手運輸事業会社様］ 2：デジタルワークショップシステム（付箋App） ［某大手化粧品メーカー様］ 3：訪日外国人向け 次世代券売機 ［東京都交通局様・東京メトロ様］ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 4
- 6. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-1／位置情報リアルタイム共有システム 1：位置情報リアルタイム共有システム ［某大手運輸事業会社様］ 2：デジタルワークショップシステム（付箋App） ［某大手化粧品メーカー様］ 3：訪日外国人向け 次世代券売機 ［東京都交通局様・東京メトロ様］ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 5
- 7. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-1／位置情報リアルタイム共有システム アプリDemo 位置情報リアルタイム共有システム 某大手運輸事業会社様向け Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 6 どこで何が起き、どこに誰がいるのか？ 地図機能／掲示板機能
- 8. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-1／位置情報リアルタイム共有システム 課題解決のポイント 1：エンジニアリング × デザイン 地図の使いやすさ＝レスポンスの良さが必須要素 常に「技術」と「デザイン」の両軸で試行錯誤 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 7 2：UIプロトによる計画の見直し ターゲットユーザが「中央」から「現場」へ軌道修正
- 9. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-1／位置情報リアルタイム共有システム Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 8 1mo. 2mos. 3mos. 4mos. 5mos. 6mos. 7mos. 8mos. 9mos. 10mos. 11mos. 12mos.0 リリース版開発までの流れ phase.1（3month） ＜このフェーズの主な目的＞ ［1］Appのデザイン・操作感を共有 ［2］Surface Hubの体験を共有 ［3］ステークホルダーへの提案／検討材料 UWP版モック 完成 phase.2（2month） ＜このフェーズの主な目的＞ ［1］iPadにおける操作感を共有 ［2］必要最小限の機能に対する評価 Xamarin Forms版 モック 完成 phase.3（4.5month） ＜このフェーズの主な目的＞ ［1］Microsoft Azureによるバックエンド構築 ［2］リリース版アプリケーションの開発 （データ連携／レスポンス／堅牢さ／セキュリティ等） エンドユーザ向け リリース版開発完了 －要件・スコープ整理 －Azure技術調査・構成検討 －見積／予算稟議等
- 10. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-1／位置情報リアルタイム共有システム Surface Hub (UWP App) Windows 10 PC (UWP App) クライアントサイド iPad (Xamarin Forms App) サーバサイド（Cloud） Web Apps Application Gateway IoT Hub Stream Analytics Azure SQL Database Storage (BLOB) Application Insights システム構成 位置情報を 定期的に送信 －簡易認証 －IoT Hubの認証トークン取得 －iPad位置情報／基本情報の取得 位置情報 の更新 監視 データ 格納・保持 ログ保存 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 9
- 11. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-2／デジタルワークショップシステム 1：位置情報リアルタイム共有システム ［某大手運輸事業会社様］ 2：デジタルワークショップシステム（付箋App） ［某大手化粧品メーカー様］ 3：訪日外国人向け 次世代券売機 ［東京都交通局様・東京メトロ様］ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 10
- 12. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-2／デジタルワークショップシステム アプリDemo デジタルワークショップシステム（付箋App） 某大手化粧品メーカー様向け Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 11 ホワイトボード＋付箋のデジタル版 デジタルならではの機能や使い方の検討
- 13. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-2／デジタルワークショップシステム 1：“利用”をみんなで考えた 「使われ方」の検討からスタート／お客様も一緒に思考 「手書き」ではなく「投稿型」の発見 課題解決のポイント 2：“利用”のためのスモールスタート 遠隔地からの参加が成立するかどうか？の体験・検証を優先 画面共有は、Skypeの機能を活用 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 12
- 14. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-2／デジタルワークショップシステム Surface Hub (UWP App) PC (Web App) クライアントサイド サーバサイド（Cloud）システム構成 スマホ／タブレット (Web App) Web Apps Event Hubs Web Apps Stream Analytics Storage (BLOB) Azure SQL Database 投稿を反映 投稿 Workshop を作成・参照 保存 参照 ログ保存 投稿 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 13
- 15. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 1：位置情報リアルタイム共有システム ［某大手運輸事業会社様］ 2：デジタルワークショップシステム（付箋App） ［某大手化粧品メーカー様］ 3：訪日外国人向け 次世代券売機 ［東京都交通局様・東京メトロ様］ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 14
- 16. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 元々の券売機 都営地下鉄 東京メトロ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 15
- 17. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 アプリDemo 訪日外国人向け 次世代券売機 東京都交通局様・東京メトロ様 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 16 外国人でも迷わず切符が買えるユーザフレンドリーなUI プロトコルの違いを “デザイン” で埋める
- 18. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 1：素早いOutputで隙間を埋めた クライアントとのプロトコルの違いを「デザイン」で埋める 課題解決のポイント 2：ポジティブなマインド形成 みんなが「デザイン」に参加 モックで終わらない／本当につくっちゃおう！になった Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 17
- 19. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 試行版（2016年1月～） Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 18
- 20. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 リリース版（2017年3月～） Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 19
- 21. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 2：Demo-3／訪日外国人向け 次世代券売機 Appの変遷 1年目：モック版 2年目：試行版 3年目：リリース版 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 20 OS App ：Windows 8.1 ：Windowsストアアプリ 形式 OS App ：Windows XP Embedded ：WPF 形式 31sta.1sta.
- 22. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 3：まとめ／「IT×デザイン」のススメ もっと “いいもの” を つくろうとしよう！ 常に「もっといいものにしよう！」という観点で挑み続けるのは 結構大変なこと マーベリックの出発点 Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 21
- 23. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 3：まとめ／「IT×デザイン」のススメ 1：どうやって終わらせるか？ プロジェクトがスタートして早々なのに「着地」の観点ばかり いいものをつくるための議論が存在しない 開発サイド（SIer）の問題点 2：つくり手じゃない人が多過ぎる SE＝見積、進捗管理、議事録、課題管理簿？（猛烈Officeユーザ） もっと手を動かそう！エンジニアなんだから！ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 22
- 24. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 3：まとめ／「IT×デザイン」のススメ 1：自分事として取り組まない 発注・稟議申請や、進捗管理・納品だけが仕事なのか？（丸投げ体質） 技術が分からないから…は致命的／新しい技術を一緒に実践するべき ビジネスサイドの問題点 2：とにかく決めるのが遅い！ PDCAなんてやめた方がいい／正解もなく、使い方すら試行錯誤 計画を立てている間に時代は変わる。前提すら変わるかもしれない Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 23
- 25. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 3：まとめ／「IT×デザイン」のススメ デザイン＝問題解決の方法論 デザイン＝よりよくする為のフレームワーク 単なるレイアウトやビジュアルではない／製品やサービスを磨いていくためのフレームワーク デザイン＝デザイナーだけの仕事ではない エンジニアもクライアントも、みんなが「自分事」としてデザインに参加するべき 「デザインはデザイナーに任せておくには重要過ぎる」(Tim Brown/IDEO CEO) マーベリックのアプローチ ITをもっといいものにするために「デザイン」を持ち込んだ Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 24
- 26. 「IT×デザイン」のススメ ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～ 3：まとめ／「IT×デザイン」のススメ 引用：Dmytro Svarytsevych How to Improve Product Development by Integrating Design Thinking with MVP 実用最小限の製品（Most Valuable Product） エリック・リース提唱「リーンスタートアップ」より 早期での「体験化」が、 ビジネスの可能性を広げる Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 25 マーベリックのアプローチ まず“動くもの”をつくろう！
- 27. Thank you for your attention.