CM08 - Microsoft · 2019-06-05 · de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例 2：Demo-3／位置情報リアルタイム共有システム

de:code 2019 CM08

IT×デザインで働き方が変わる!!

Surface Hub 2S 登場でさらに多様化する

インターフェースデザインの最新動向を解説

日本マイクロソフト株式会社

マーケティング＆オペレーションズ部門

Surfaceビジネス本部

シニアプロダクトマネージャー

白木智幸

株式会社マーベリック

代表取締役

秋葉卓也

日本マイクロソフト株式会社

マーケティング＆オペレーションズ部門

Surfaceビジネス本部

シニアプロダクトマネージャー

白木智幸

Surface Hub 2S ご紹介

リモート作業の増加

プロフェッショナルの70% が、少なくとも週

に1日はオフィス以外の場所で作業

ワークスペースの進化

“選択自由な Office” - 従業員が作業環

境を選択できる - ことで生産性を25%向

上

これからの働く環境

コラボレーションの重要性

現在行われている作業の50% 以上は

コラボレーションにより達成

Surface Hub 2S

最高のチームデバイス

1. あらゆる場所で

共同作業

2. 遠く離れたチームを

結び付ける

3. 流れるような

チームコラボレーション

モバイルで

コードレス

30 kg 以下

（本体重量）

薄い (15 mm) ベゼル

あらゆる場所で共同作業

⚫ 洗練された最新のデザイン、薄型、

クラス最小のベゼル

⚫ 本体重量 28 kg

⚫ Steelcase Roam™ Mobile Stand と

APC™ Charge Mobile Battery で

モバイル、コードレス

⚫ Microsoft Teams でリモート会議やアド

ホックな通話をスムーズに

遠く離れたチームを結び付ける

Surface Hub 2 カメラ

4K+ ディスプレイ Microsoft Teams

for Surface Hub

⚫ Surface Hub 2 カメラ、遠距離マイク、

クリアなスピーカー

⚫ クラス最高の解像度とグラフィック性能の

４K+ ディスプレイ

様々な業務アプリ

⚫ Surface Hub ２ペンとタッチ

⚫ Microsoft Whiteboard で次世代のブ

レインストーミング

⚫ Miracast を利用したワイヤレス投影

⚫ OneDrive 上のファイルにアクセス

⚫ プレインストールされた Office 365、

Microsoft Edgeの利用。

⚫ 必要な業務用3rd パーティアプリの

インストール

Microsoft Whiteboard

Surface Hub 2

ペン

Office 365

アプリ流れるようなチームコラボレーション

Surface Hubを活用した業務アプリの開発事例

2019年5月30日

株式会社マーベリック

インターフェースデザインの最新動向

de:code 2019

de:code 2019 CM08

de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例

1：まずはじめに

IT×デザインマーベリックとは？

Device の多様化

Trial & Errorに有効な手段

User の素人化

Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 11


2：Demo／事例紹介

1：柔道試合映像分析システム［全日本柔道連盟様／データスタジアム様］

2：デジタルワークショップシステム（付箋App）［某大手化粧品メーカー様］

3：位置情報リアルタイム共有システム［某大手運輸事業会社様］



2：Demo-1／柔道試合映像分析システム

Demo

柔道試合映像分析システム全日本柔道連盟様／データスタジアム様向け


トップアスリート向けの映像分析システム

道場の壁に設置／すぐに見れる、確認しながら稽古

映像はAzure上に格納（国内外の試合会場からメタ情報と共にアップロード）


2：Demo-1／柔道試合映像分析システム

デザインのポイント

1：情報へのアクセス見たい映像に2～3回の操作でたどり着ける

Infographicsを直接タップして映像にアクセスできる


2：派手過ぎないアニメーションユーザと画面との距離や関係性（全体ではなく部分が見えている）

大きく動くと何が起こったか分からない


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

Demo

デジタルワークショップシステム（付箋App）某大手化粧品メーカー様向け


ワークショップのデジタル版

デジタルならではの機能や使い方の検討

バックエンドはAzure上に構築（Event Hubsを利用）




1：“利用”をみんなで考えた「使われ方」の検討からスタート／お客様も一緒に思考

「手書き」ではなく「投稿型」の発見


2：使いやすい／触り心地の良さ道具としての「使いやすさ」

ストレスを感じない「触り心地」



Surface Hub (UWP App)

PC (Web App)

クライアントサイド

サーバサイド（Cloud）システム構成

スマホ／タブレット

(Web App)

Web Apps

Event Hubs

Web Apps

StreamAnalytics

Storage(BLOB)

Azure SQLDatabase

投稿を反映

投稿

Workshopを作成・参照

保存

参照

ログ保存

投稿



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

Demo

位置情報リアルタイム共有システム某大手運輸事業会社様向け


どこで何が起き、どこに誰がいるのか？

地図機能／掲示板機能

バックエンドはAzure上に構築（IoT Hubを利用）




1：エンジニアリング × デザイン地図の使いやすさ＝レスポンスの良さが必須要素

常に「技術」と「デザイン」の両軸で試行錯誤


2：みんなが同時に見る、を意識中央指令に設置／複数人がそれぞれの観点で同時に見る

情報の表示に独立性があること



Surface Hub (UWP App)

Windows 10 PC

(UWP App)


iPad (Xamarin Forms App)

サーバサイド（Cloud）

Web Apps

ApplicationGateway

IoT Hub Stream Analytics

Azure SQLDatabase

Storage(BLOB)

ApplicationInsights

システム構成

位置情報を定期的に送信

－簡易認証－IoT Hubの認証トークン取得－iPad位置情報／基本情報の取得

位置情報の更新

監視

データ格納・保持ログ保存



3：まとめ／多様化するデバイスへの対応

“UI開発” を切り離す

モダンなアプリ開発のコツ

クライアントサイドとサーバサイドの分離


クライアントサイドサーバサイド

DBAPIApp

App

App分離

（並行開発）




ソフトウェア

ハードウェア


○User Interface・View・Logic・API連携

サーバサイド

○API／DB○Intelligence

ビジュアル

テスト開発

詳細設計

基本設計要件定義

デザイン会社

実装ではなく見本レベル

システム開発会社

余談:従来のデザインの役割



余談:あるべきデザインの役割


ソフトウェア

ハードウェア


○User Interface・View・Logic・API連携

サーバサイド

○API／DB○Intelligence

テスト開発

詳細設計

要件定義

デザインチームがCLサイドのアプリ開発をすべて担当

デザイン（設計）



まず“動くもの”をつくろう！

モダンなアプリ開発のコツ


引用：How to Improve Product Development by Integrating Design Thinking with MVPhttps://www.infoq.com/articles/design-thinking-mvp/

実用最小限の製品（Most Valuable Product）

エリック・リース提唱「リーンスタートアップ」より

早期での「体験化」が、ビジネスの可能性を広げる


4：最後に

もっと “いいもの” をつくろうとしよう！全員が常に「もっといいものにしよう」という意識と方法論を持つ必要がある→「デザイン」を最上位の定規とした

マーベリックのアプローチ



4：最後に


余談:従来のSIの課題/不満

いいものをつくるための議論がない従来の開発モデル＝マネジメント＞創造的思考

プロジェクトがスタートして早々なのに「着地」の観点ばかり

つくり手じゃない人が多過ぎるExcelを眺め続けてどうしていいものができると思っているの

か？

もっと手を動かして、自分の手で磨こうとしよう！


4：最後に

デザイン＝問題解決の方法論

マーベリックのアプローチ

ITをもっといいものにするために「デザイン」を持ち込んだ


1：デザイン＝よりよくする為のフレームワーク単なるレイアウトやビジュアルではない／製品やサービスを磨いていくためのフレームワーク

2：デザイン＝デザイナーだけの仕事ではないエンジニアもクライアントも、みんなが「自分事」としてデザインに参加するべき

「デザインはデザイナーに任せておくには重要過ぎる」(Tim Brown/IDEO CEO)

Thank you for your attention.

© 2018 Microsoft Corporation. All rights reserved.

本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。

© 2019 Microsoft Corporation. All rights reserved.

本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。

本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。

Documents

CM08 - Microsoft · 2019-06-05 · de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例 2：Demo-3／位置情報リアルタイム共有システム