Toolsの杜 - マーベリック - 「IT×デザイン」のススメ

エンタープライズにおけるタッチアプリケーションの
事例デモとそのアプローチ
2018年7月10日
株式会社マーベリック
代表取締役秋葉卓也
「IT×デザイン」のススメ
Toolsの杜
GrapeCity Developer Tools
30th Anniversary

「IT×デザイン」のススメ～エンタープライズにおけるタッチアプリケーションの事例デモとそのアプローチ～
1：まずはじめに
IT×デザイン
マーベリックとは？
Device の
多様化
1
Trial & Error
に有効な手段
2
User の
素人化
3
Copyrightⓒ 2018 Marvelic Inc. All rights reserved. 1

Application First！
共通するアプローチ
「最後に画面」ではなく「まず画面」
何が欲しいのか？を
最初に見える化・体験化
「あったらいいな／欲しい！」をカタチに
モックで
体験を共有
1
UIアプリ開発
2-1
サーバ開発（API/DB）
2-2 インターフェース定義／疎結合な構造
UIとバック
を並行開発

デザインの効能
みんなが参加できる
早期に気づける
・ピンとこないITの話でも、デザインが
掛け合わさると分かりやすくなる
・エンジニアリングだけでは解決できない
課題も、デザイン的アプローチと融合
すると解決できる
・動くものとして素早くアウトプット
することで、様々な気づきを得られる
・ビジネスの可能性を広げたり、計画を
軌道修正するリスクマネジメントにも
繋がる

2：Demo／事例紹介
1：位置情報リアルタイム共有システム
［某大手運輸事業会社様］
2：デジタルワークショップシステム（付箋App）
［某大手化粧品メーカー様］
3：訪日外国人向け次世代券売機
［東京都交通局様・東京メトロ様］

2：Demo-1／位置情報リアルタイム共有システム

アプリDemo
位置情報リアルタイム共有システム
某大手運輸事業会社様向け
どこで何が起き、どこに誰がいるのか？
地図機能／掲示板機能

課題解決のポイント
1：エンジニアリング × デザイン
地図の使いやすさ＝レスポンスの良さが必須要素
常に「技術」と「デザイン」の両軸で試行錯誤
2：UIプロトによる計画の見直し
ターゲットユーザが「中央」から「現場」へ軌道修正

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技術調査・構成検討
－見積／予算稟議等

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位置情報／基本情報の取得
位置情報
の更新
監視
データ
格納・保持ログ保存

2：Demo-2／デジタルワークショップシステム

アプリDemo
デジタルワークショップシステム（付箋App）
某大手化粧品メーカー様向け
ホワイトボード＋付箋のデジタル版
デジタルならではの機能や使い方の検討

1：“利用”をみんなで考えた
「使われ方」の検討からスタート／お客様も一緒に思考
「手書き」ではなく「投稿型」の発見
2：“利用”のためのスモールスタート
遠隔地からの参加が成立するかどうか？の体験・検証を優先
画面共有は、Skypeの機能を活用

Surface Hub (UWP App)
PC (Web App)
クライアントサイド
サーバサイド（Cloud）システム構成
スマホ／タブレット
(Web App)
Web Apps
Event Hubs
Web Apps
Stream
Analytics
Storage
(BLOB)
Azure SQL
Database
投稿を反映
投稿
Workshop
を作成・参照
保存
参照
ログ保存
投稿

2：Demo-3／訪日外国人向け次世代券売機

元々の券売機
都営地下鉄東京メトロ

アプリDemo
訪日外国人向け次世代券売機
東京都交通局様・東京メトロ様
外国人でも迷わず切符が買えるユーザフレンドリーなUI
プロトコルの違いを “デザイン” で埋める

1：素早いOutputで隙間を埋めた
クライアントとのプロトコルの違いを「デザイン」で埋める
2：ポジティブなマインド形成
みんなが「デザイン」に参加
モックで終わらない／本当につくっちゃおう！になった

試行版（2016年1月～）

リリース版（2017年3月～）

Appの変遷
1年目：モック版 2年目：試行版 3年目：リリース版
OS
App
：Windows 8.1
：Windowsストアアプリ形式
OS
App
：Windows XP Embedded
：WPF 形式
31sta.1sta.

3：まとめ／「IT×デザイン」のススメ
もっと “いいもの” を
つくろうとしよう！
常に「もっといいものにしよう！」という観点で挑み続けるのは
結構大変なこと
マーベリックの出発点

1：どうやって終わらせるか？
プロジェクトがスタートして早々なのに「着地」の観点ばかり
いいものをつくるための議論が存在しない
開発サイド（SIer）の問題点
2：つくり手じゃない人が多過ぎる
SE＝見積、進捗管理、議事録、課題管理簿？（猛烈Officeユーザ）
もっと手を動かそう！エンジニアなんだから！

1：自分事として取り組まない
発注・稟議申請や、進捗管理・納品だけが仕事なのか？（丸投げ体質）
技術が分からないから…は致命的／新しい技術を一緒に実践するべき
ビジネスサイドの問題点
2：とにかく決めるのが遅い！
PDCAなんてやめた方がいい／正解もなく、使い方すら試行錯誤
計画を立てている間に時代は変わる。前提すら変わるかもしれない

デザイン＝問題解決の方法論
デザイン＝よりよくする為のフレームワーク
単なるレイアウトやビジュアルではない／製品やサービスを磨いていくためのフレームワーク
デザイン＝デザイナーだけの仕事ではない
エンジニアもクライアントも、みんなが「自分事」としてデザインに参加するべき
「デザインはデザイナーに任せておくには重要過ぎる」(Tim Brown/IDEO CEO)
マーベリックのアプローチ
ITをもっといいものにするために「デザイン」を持ち込んだ

引用：Dmytro Svarytsevych
How to Improve Product Development by Integrating Design Thinking
with MVP
実用最小限の製品（Most Valuable Product）
エリック・リース提唱「リーンスタートアップ」より
早期での「体験化」が、
ビジネスの可能性を広げる
マーベリックのアプローチ
まず“動くもの”をつくろう！

Toolsの杜 - マーベリック - 「IT×デザイン」のススメ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Ähnlich wie Toolsの杜 - マーベリック - 「IT×デザイン」のススメ

Ähnlich wie Toolsの杜 - マーベリック - 「IT×デザイン」のススメ (20)

Mehr von Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社）

Mehr von Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社） (20)