XAMLで業務アプリがこんなに変わる！デザイン志向による業務アプリの事例紹介

デザイン志向による業務アプリの事例紹介
2017年10月6日
株式会社マーベリック
代表取締役秋葉卓也
XAMLで業務アプリが
こんなに変わる！
ECHO Tokyo 2017

［ECHO Tokyo 2017］XAMLで業務アプリがこんなに変わる！WPFやUWPのエンタープライズ事例
Copyrightⓒ 2017 Marvelic Inc. All rights reserved.
1：まずはじめに
1
「XAML+C#」で開発された
業務アプリの事例紹介
本セッション
デモ（UWP, WPF）を中心とした構成
技術的な観点でのXAMLのお話はありません
事例ごとに「Why XAML?」をご紹介致します

IT×デザイン
マーベリックとは？
Device の
多様化
1
Computing
機会の増加
2
User の
素人化
3
Copyrightⓒ 2017 Marvelic Inc. All rights reserved. 2

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

2：Demo／事例紹介
1：インシデント情報共有アプリ
［某大手鉄道事業会社様］
2：在庫シミュレーションアプリ “Global PSI”
［某グローバル製造業様］
3：ワークショップ付箋アプリ “Connect Board”
［某大手化粧品メーカー様］
4：訪日外国人向け次世代券売機
［東京都交通局様・東京メトロ様］

2：Demo-1／インシデント情報共有アプリ

1：全情報を生まれた瞬間に共有
地図への情報プロット／掲示板によるコミュニケーション
欲求／課題
2：中央業務の最適化
指令や本部機構を本来の業務（整理／判断／指示）に集中させる
情報収集／発信は、アプリケーションが担当

支社
利用イメージ
Surface Hub
支社
現場
現場
現場
Surface Hub
本部

アプリDemo
インシデント情報共有アプリ
某大手鉄道事業会社様向け

1：地図の操作性・レスポンス
タッチ操作
3～4万ユーザを地図上にプロット（もちろん同時利用）
WHY XAML?
2：Windows と iOS への展開
Xamarin Formsを想定

2：Demo-2／在庫シミュレーションアプリ

1：ERPのUIをもっと使いやすく
現場が使えるUI
欲求／課題
2：同じ情報を見ながら協議
大画面（Surface Hub）／ダイレクトに操作／Skype連携
3：協議内容のメモ書きを残したい
エビデンスを手書きで保存

利用イメージ
製造拠点-1
Surface Hub
(UWP App)
製造拠点-2
Surface Hub 販売拠点
Skype
連携
Skype
連携

アプリDemo
在庫シミュレーションアプリ “Global PSI”
某グローバル製造業様向け

1：Surface Hubが前提
工場の関係者みんなで一緒に見る、触る（大きさが重要！）
Surface Hub向けのアプリケーションF/W＝UWPのみ
WHY XAML?
2：画像化とペン入力
シミュレーションプランの画像化／ペンでの手書き入力

2：Demo-3／ワークショップ付箋アプリ

1：ワークショップのデジタル化
ホワイトボード＋付箋のデジタル版／ITならではの機能を検討
ディスカッション結果の共有
欲求／課題
2：多人数の同時参加
従来のワークショップ同様に、みんなが参加できる
遠隔地からのワークショップ参加

利用イメージ
本社
Surface Hub
(UWP App)
ファシリテーター
（App操作）
支社
投稿
支社
投稿
投稿
Skypeで画面共有 Skypeで画面共有

アプリDemo
ワークショップ付箋アプリ “Connect Board”
某大手化粧品メーカー様向け

1：インタラクティブな機能
付箋／ゴミ箱／スタンプ／ペン／テンプレート切替
すべてがタッチ操作
WHY XAML?
2：新しいUI技術に対応しやすい
XAMLは標準的にサポートされる（例：ペン入力／筆圧）

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

現行の券売機
都営地下鉄東京メトロ

1：ユーザフレンドリーなUI
東京がはじめての外国人でも迷わず正しい切符が買えるように
欲求／課題
2：柔軟な画面メンテナンスの実現
制御部と画面部の切り離し・疎結合化
データや機能の変更・追加など、画面に手を入れやすいように

アプリDemo
訪日外国人向け次世代券売機
東京都交通局様・東京メトロ様

試行版（2016年1月～）

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

GUIの変遷
1：モック版 2：試行版 3：リリース版

1：デザインの試行錯誤のしやすさ
素早くカタチに → 試用・評価 → 壊してリデザイン
アニメーションの効果的な適用（有機的／親しみ／丁寧／安心）
WHY XAML?
2：XAMLの再利用性
Windows ストアアプリ（モック・試行）→ WPF（リリース）

App FirstのBenefit

1：UIプロトによる発見
体験化を優先させたからこそ “気づき”を得ることができた
結果的に32inchに（路線図をワンショットで！のリクエスト）
App FirstのBenefit
2：UIがH/Wの仕様に影響
「利用」の疑似体験による “計画” の見直し（サービスやH/W）

3：まとめ／今日お伝えしたいコト
僕らは “デザイン志向”
「IT×デザイン」というコンセプト
1：デザインに没頭できる環境をつくりたい
“デザイン” が最上位にある組織／常に全員がデザインできるチーム
2：業務アプリにこそ “デザイン” が必要！
多機能／多連携／業務フロー／複雑／保守性・拡張性／社会的重要度
デザインで解決できるテーマが多い
デザインの価値を最大化できる

だから “XAML”を選んだ
「デザイン」を業務アプリ開発に持ち込める唯一の環境
1：デザインに最適
自分たちの “デザイン” を実現するのに、最も効率的で最適な環境がXAMLだった
2：XAML+C#という構成
開発環境・ツールの充実（Blend・Visual Studio）
アプリ開発へのデザイナーの参画が可能に

ソフト
ウェア
ハード
ウェア
クライアント
サイド
○User Interface
・View
・Logic
・API連携
サーバ
サイド
○API
○Database
ビジュアル
開発（実装）
テスト
基本設計
要件定義
デザイン会社
実装ではなく
見本レベル
システム開発
会社
従来のデザインの役割

ソフト
ウェア
ハード
ウェア
クライアント
サイド
○User Interface
・View
・Logic
・API連携
サーバ
サイド
○API
○Database
開発
テスト
要件ヒアリング
デザイン会社
がCLサイドの
アプリ開発を
すべて担当
あるべきデザインの役割
デザイン
（設計）

結構ウケてます！
UIへの不満や課題意識はだいぶ高い／解決策がない
1：エンタープライズな企業様に大変好評
“デザイン” に投資できるのは、まずは大企業からなのかもしれない
2：あと数年でどこも Windows 10 に
既存アプリや既存技術と比較検討するテーブルに、XAML（WPF, UWP, Xamarin）も
十分乗ってくると思っています

XAML の検討、
はじめてみては？
WPF／UWP／Xamarin
多様化するデバイスへのチャレンジ
（モバイル／Surface Hub／HoloLens／etc）
新しいチャレンジを！（XAML／WEB）
例えば

4：最後に
ComponentOne Studio
も便利につかってます！
WPF／UWP／Xamarin も入ってます
国内の主要なサードパーティ
コンポーネントで UWP の取扱いは
GrapeCityさんだけなのでは？

4：最後に
Surface Hubも
体験してみてください！
マイクロソフト様、
お貸し出しありがとうございます
せっかくお借りしたので、休憩や
終了後のフリータイムにでも是非！

XAMLで業務アプリがこんなに変わる！デザイン志向による業務アプリの事例紹介

More Related Content

What's hot

Viewers also liked

Similar to XAMLで業務アプリがこんなに変わる！デザイン志向による業務アプリの事例紹介

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

Recently uploaded

XAMLで業務アプリがこんなに変わる！デザイン志向による業務アプリの事例紹介

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