c1 delphi/c++テクニカルセッション ゲームuiから考える これからの … ·...
TRANSCRIPT
![Page 1: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/1.jpg)
エークリッパー・インク
羽生章洋
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
ゲームUIから考えるこれからのエンタープライズUX
【C1】Delphi/C++テクニカルセッション
![Page 2: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/2.jpg)
アジェンダ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。2
1
![Page 3: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/3.jpg)
アジェンダ
• エンタープライズモバイルのポテンシャルと課題
• あらためてUIということを考える
• FireMonkeyでのアプローチ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。3
![Page 4: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/4.jpg)
自己紹介
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。4
2
![Page 5: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/5.jpg)
自己紹介
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。5
羽生 章洋(HABU Akihiro)
エークリッパー・インク代表
1968年生まれ。大阪育ち。
1989年、桃山学院大学社会学部社会学科を中退後、2つのソフトウェア会社にて様々な業種・業態向けシステム開発に携わる。この頃Delphiと出会い、当時のボーランド大阪支店にてセミナー講師も務める。
その後、アーサーアンダーセン・ビジネスコンサルティングに所属。ERPコンサルタントとして企業改革の現場に従事。更にその後、トレイダーズ証券株式会社の新規創業にIT部門ディレクターとして、さらにマネースクウェアジャパン株式会社の新規創業にIT担当取締役として参画し新規事業の立ち上げにおける業務のIT化を実現。
2001年4月に現在の株式会社マジカジャパンを設立。2003年に後の特別非営利活動法人Seasarファウンデーションの創設に参画。2006年から2011年まで、国立大学法人琉球大学産官学連携推進機構の非常勤講師。2011年9月に米国エークリッパー・インクを設立。
著書に「楽々ERDレッスン」「SQL書き方ドリル」など多数。
![Page 6: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/6.jpg)
エンタープライズモバイルのポテンシャルと課題
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。6
3
![Page 7: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/7.jpg)
エンタープライズシステムの変遷
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。7
現場 事務 コンピュータルーム
メインフレーム時代
伝票回しのプロセス
パンチャー・オペレータがコンピュータに入力・操作する
![Page 8: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/8.jpg)
エンタープライズシステムの変遷
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。8
現場 事務 コンピュータルーム
デスクトップPC時代
各自の机の上から入力・操作する
クラサバ、Web
![Page 9: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/9.jpg)
エンタープライズシステムの変遷
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。9
現場 事務 コンピュータルーム
モバイル時代
現場で入力・操作する
現場直結型 あるいは すべてが現場になる
![Page 10: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/10.jpg)
手のひらの上に基幹系が乗る時代
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。10
20年前のメインフレーム最新のスマホ
コンピュータに人間系プロセスを合わせる時代の終焉
![Page 11: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/11.jpg)
現場直結型だからこその価値
• そもそもITの本質は「中抜き」の実現– セルフサービス、ダイレクトサービスへ– 既に実証済• ネット証券• ネットショッピング(Amazonとか)• パンチャーやオペレータも既に中抜きされた
• デスクワークから「ながらワーク」へ– 移動しながら– 接客しながら– 修理しながら– etc…
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。11
![Page 12: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/12.jpg)
・・・
顧客
プロセスとITの関係構造
プロセス
IT
コンピュータ
ネットワーク
データベース
クラウド(外部サービスを利用)
または
オンプレミス(自社内で保持)
12 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
スマートデバイスによって人間系プロセスが物理的な場所に縛られなくなる
![Page 13: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/13.jpg)
エンタープライズにおけるUX
• UX=ユーザエクスペリエンス
–ユーザの体験
– でも自社の社員の体験を高めても仕方ないよね?
–重要なのは仕事の実行力を高めること
–良い仕事を出来るようにすることが、結果として成功という最高の体験を実現することになる
• エクスペリエンスではなくエグゼキューション!
13 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
![Page 14: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/14.jpg)
エンタープライズUX実現のために
• リプレースは意味が無い– 既存プロセスを維持したまま、道具だけモバイルにしても効果は出ない• 古いパラダイムのプロセスのままだから
– 開発工数は以前より増大している• アーキテクチャが複雑化している
• UIの表現力向上に伴う実装の手間も増えている
• まだやっていないことをやろう!– 中抜きの力を活かす
– 「ながらワーク」だから出来る価値を考える
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。14
![Page 15: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/15.jpg)
スマートデバイスは一過性か
• 結論から言うと「Windows3.1以上の変革期」– Webはクラサバの応用でありデスクトップパラダイム– モバイルは久しぶりのパラダイムシフト
• 教育コストの観点– 最近の学生は卒論をスマホで書く– パートの人達もスマホ慣れしている
• 業務系で利益貢献する事例の増加– 特に飲食系の注文端末– 人材不足への対応– プロセスの中抜き
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。15
今後のメインストリームはモバイルだと断言できる
![Page 16: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/16.jpg)
スマートデバイスらしいUIの必要性
• スマートデバイスによって
–顧客をビジネスプロセスに組み込む
–現場担当者をリアルタイムでサポートする
• でもWindows向けのGUIをそのままブチ込むと?
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。16
そこでゲームUIに学ぶ必要性が生まれる
![Page 17: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/17.jpg)
あらためてUIということを考える
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。17
4
![Page 18: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/18.jpg)
何故ゲームUIなのか• 実はエンタープライズにおけるUIの知見は殆ど存在しない– 技術制約に従って、無理やり・取り敢えず、押し込んでるだけの
UIが大半を占める– 何故そのUIなのか説明できるシステムはほぼ皆無– プラットフォームのガイドラインを知らないまま設計してるケースが多い
• 結果として前例主義・過去の焼き直しに陥っている– Windowsでメインフレーム時代のUI:ファンクションキーとか– HTMLでWindowsのGUIを再現するとか
• ぶっちゃけ業務系のUIはダサい– パッと見て分かり辛いものが多い
• 別の手本が必要
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。18
![Page 19: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/19.jpg)
何故ゲームUIなのか
• コンピュータ用のUIとしての歴史
• 幅広いユーザへの対応
• 操作マニュアルを読まなくても済むようにする配慮
• コンシューマ向けという苛酷さ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。19
![Page 20: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/20.jpg)
コンシューマ向けUI
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。20
ゲームSNS
らくらくアプリ
![Page 21: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/21.jpg)
目を細めてよく見ると
• 選択指向のUI=選んで押すだけ
– ゲームは典型的
– スタンプもボタン
– ソフトキーボードもボタンの集合
• 世界観の中での統一性・一貫性
–標準的なパーツにこだわってはいない
• ゲームだとむしろつまらなくなる
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。21
![Page 22: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/22.jpg)
選択肢を設計する
• いかにTEditを排除するか
• 選択肢が多すぎると逆効果–年月日とか
– Pickerは本当に使いやすいのか?
• 選択肢のための、いわゆるマスターテーブルが必要になる– これを面倒くさがると、ユーザに手間を押し付けることになる
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。22
![Page 23: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/23.jpg)
例として
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。23
表示領域
コマンド領域
保存する
x
項目1
項目2 選択
◯◯を編集します
・・・
確定する
x担当者を選択します
・・・
絞り込み
羽生 可世木 佐藤
![Page 24: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/24.jpg)
例として
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。24
表示領域
コマンド領域
保存する
x
項目1
項目2 選択
◯◯を編集します
・・・
確定する
x生年月日を入力します
年 月 日
19192020
11 22 3344 55 6677 88 99
00
11 22 3344 55 6677 88 9910 11 12
11 22 3344 55 6677 88 99
![Page 25: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/25.jpg)
UIデザインの三要素
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。25
機能
構造美観
• 処理や項目は機能• 選択肢も機能
• カラーリング• タイポグラフィ• グラフィック
実はここが課題
![Page 26: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/26.jpg)
エンタープライズ特有の課題
• 項目数が多い!
• 小さな画面にいかに収めるかが課題
• UIの正規化・構造化ということ–正規化:ノーマライゼーション
–正しいというよりもノーマル(普通)にするということ
• レイアウトと画面遷移が肝!
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。26
![Page 27: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/27.jpg)
UIの構造化とスコープ定義
• レイアウトと画面遷移を適切に設計するには?
• アプリケーションごとの適切なスコープ定義が不可欠!
• ユーザのタスクごとにスコープを分離する–複数のタスクを同一UIに分けない
• では、ユーザタスクをどう定義する?
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。27
![Page 28: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/28.jpg)
ユーザタスクを考える
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。28
活動
オーダー・要件
材料
レシピ
成果output
評価outcome/result
効果・影響impact
トリガー
やり方・ノウハウ
ユーザタスク=ユーザの仕事
成果が異なれば違う仕事である
![Page 29: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/29.jpg)
FireMonkeyでのアプローチ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。29
5
![Page 30: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/30.jpg)
FireMonkeyに落としこむ
• デザインファースト vs コンポーネントファースト
– いっぱい並んでるコンポーネントをどう使う?
• デザインを優先する!
–標準装備のコンポーネントに振り回されない!
–利用するコンポーネントを敢えて絞る
• スタイル重要!!
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。30
![Page 31: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/31.jpg)
FMの学ぶべきポイント
• スタイルの基本的な知識
• レイアウト系のコンポーネント• レイアウト系のプロパティ– Align, Margin, Paddingなど
• フレーム
• データモジュール
• アクションリスト
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。31
![Page 32: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/32.jpg)
例えばFMでフラットデザイン風に
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。32
demo
![Page 33: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/33.jpg)
いきなりIDEに向かうな!
• 仕様重要!!
• まずオーダーを固める!
–立ちながらUIを考える
• 「ながらワーク」をイメージする
• そもそも何故そのアプリが必要なのか?
–実現したいプロセスの設計こそが実は肝!
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。33
![Page 34: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/34.jpg)
まとめ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。34
![Page 35: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/35.jpg)
まとめ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。35
• スマートデバイスは今後の主流
• 現場直結型時代の到来
• 現場の実行力向上がエンタープライズUX• 現場の足を引っ張るUIじゃダメ
• UIに対するリテラシーをコンシューマ向けから学ぼう
• 適切なUIは適切なプロセス設計から
• FireMonkeyの既存コンポーネントに振り回されない
• 仕様重要!
![Page 36: C1 Delphi/C++テクニカルセッション ゲームUIから考える これからの … · 2018-06-07 · 何故ゲームuiなのか • コンピュータ用のuiとしての歴史](https://reader033.vdocuments.pub/reader033/viewer/2022042219/5ec5bad4f7a1a0769a34f1f7/html5/thumbnails/36.jpg)
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。36
ありがとうございました