View
0
Download
0
Category
Preview:
Citation preview
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 カメラ、遠距離マイク、
クリアなスピーカー
⚫ クラス最高の解像度とグラフィック性能の
4K+ ディスプレイ
様々な業務アプリ
⚫ Surface Hub 2 ペンとタッチ
⚫ 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
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo/事例紹介
1:柔道 試合映像分析システム[全日本柔道連盟様/データスタジアム様]
2:デジタルワークショップシステム(付箋App)[某大手化粧品メーカー様]
3:位置情報リアルタイム共有システム[某大手運輸事業会社様]
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 12
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-1/柔道 試合映像分析システム
Demo
柔道 試合映像分析システム全日本柔道連盟様/データスタジアム様向け
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 13
トップアスリート向けの映像分析システム
道場の壁に設置/すぐに見れる、確認しながら稽古
映像はAzure上に格納(国内外の試合会場からメタ情報と共にアップロード)
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-1/柔道 試合映像分析システム
デザインのポイント
1:情報へのアクセス見たい映像に2~3回の操作でたどり着ける
Infographicsを直接タップして映像にアクセスできる
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 14
2:派手過ぎないアニメーションユーザと画面との距離や関係性(全体ではなく部分が見えている)
大きく動くと何が起こったか分からない
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-2/デジタルワークショップシステム
Demo
デジタルワークショップシステム(付箋App)某大手化粧品メーカー様向け
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 15
ワークショップのデジタル版
デジタルならではの機能や使い方の検討
バックエンドはAzure上に構築(Event Hubsを利用)
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-2/デジタルワークショップシステム
デザインのポイント
1:“利用”をみんなで考えた「使われ方」の検討からスタート/お客様も一緒に思考
「手書き」ではなく「投稿型」の発見
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 16
2:使いやすい/触り心地の良さ道具としての「使いやすさ」
ストレスを感じない「触り心地」
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-2/デジタルワークショップシステム
Surface Hub (UWP App)
PC (Web App)
クライアントサイド
サーバサイド(Cloud)システム構成
スマホ/タブレット
(Web App)
Web Apps
Event Hubs
Web Apps
StreamAnalytics
Storage(BLOB)
Azure SQLDatabase
投稿を反映
投稿
Workshopを作成・参照
保存
参照
ログ保存
投稿
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 17
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-3/位置情報リアルタイム共有システム
Demo
位置情報リアルタイム共有システム某大手運輸事業会社様向け
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 18
どこで何が起き、どこに誰がいるのか?
地図機能/掲示板機能
バックエンドはAzure上に構築(IoT Hubを利用)
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-3/位置情報リアルタイム共有システム
デザインのポイント
1:エンジニアリング × デザイン地図の使いやすさ=レスポンスの良さが必須要素
常に「技術」と「デザイン」の両軸で試行錯誤
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 19
2:みんなが同時に見る、を意識中央指令に設置/複数人がそれぞれの観点で同時に見る
情報の表示に独立性があること
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
2:Demo-3/位置情報リアルタイム共有システム
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位置情報/基本情報の取得
位置情報の更新
監視
データ格納・保持 ログ保存
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 20
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
3:まとめ/多様化するデバイスへの対応
“UI開発” を切り離す
モダンなアプリ開発のコツ
クライアントサイドとサーバサイドの分離
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 21
クライアントサイド サーバサイド
DBAPIApp
App
App分離
(並行開発)
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
3:まとめ/多様化するデバイスへの対応
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 22
ソフトウェア
ハードウェア
クライアントサイド
○User Interface・View・Logic・API連携
サーバサイド
○API/DB○Intelligence
ビジュアル
テスト開発
詳細設計
基本設計要件定義
デザイン会社
実装ではなく見本レベル
システム開発会社
余談:従来のデザインの役割
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
3:まとめ/多様化するデバイスへの対応
余談:あるべきデザインの役割
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 23
ソフトウェア
ハードウェア
クライアントサイド
○User Interface・View・Logic・API連携
サーバサイド
○API/DB○Intelligence
テスト開発
詳細設計
要件定義
デザインチームがCLサイドのアプリ開発をすべて担当
デザイン(設計)
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
3:まとめ/多様化するデバイスへの対応
まず“動くもの”をつくろう!
モダンなアプリ開発のコツ
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 24
引用:How to Improve Product Development by Integrating Design Thinking with MVPhttps://www.infoq.com/articles/design-thinking-mvp/
実用最小限の製品(Most Valuable Product)
エリック・リース提唱「リーンスタートアップ」より
早期での「体験化」が、ビジネスの可能性を広げる
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
4:最後に
もっと “いいもの” をつくろうとしよう!全員が常に「もっといいものにしよう」という意識と方法論を持つ必要がある→「デザイン」を最上位の定規とした
マーベリックのアプローチ
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 25
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
4:最後に
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 26
余談:従来のSIの課題/不満
いいものをつくるための議論がない従来の開発モデル=マネジメント>創造的思考
プロジェクトがスタートして早々なのに「着地」の観点ばかり
つくり手じゃない人が多過ぎるExcelを眺め続けてどうしていいものができると思っているの
か?
もっと手を動かして、自分の手で磨こうとしよう!
de:code 2019 CM08 Surface Hubを活用した業務アプリケーションの開発事例
4:最後に
デザイン=問題解決の方法論
マーベリックのアプローチ
ITをもっといいものにするために「デザイン」を持ち込んだ
Copyrightⓒ 2019 Marvelic Inc. All rights reserved. 27
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日) 時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。
Recommended