DevOps を前提としたユーザーインターフェイスの構造解析

Infragistics Proprietary1
DevOps を前提とした
ユーザーインターフェイスの
構造解析
July 2nd, 2019

DevOpsにおける
UIにまつわる課題の整理

What is DevOps?
https://ja.wikipedia.org/wiki/DevOps
ソフトウェア開発手法
かばん語
ソフトウェアのビルド、テスト、そし
てリリースの文化と環境を以前よりも迅速に、頻繁に、確実に発生す
る確立を目指している。

あなたの DevOps は成功していますか？
• ユーザーインターフェイスに関わる部分を考えてみると、答
えは変わりますか？

team
外側からの
フィードバック
内側からの
フィードバック

UIがどのように認識されているか？
V V V

UIとどう向き合うべきなのか？

UI / UXの要素

任天堂株式会社採用ページ：UI/UXデザイン
https://www.nintendo.co.jp/jobs/introduction/design/work03.html

https://ja.m.wikipedia.org/wiki/%E3%83%A6%E3%83%BC
%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3
%83%95%E3%82%A7%E3%83%BC%E3%82%B9

Surface : 表層
Skeleton : 骨格
Structure : 構造
Scope : 要件
Strategy : 戦略
Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/

Surface : 表層
Skeleton : 骨格
Structure : 構造
Scope : 要件
Strategy : 戦略
Goals : ゴール
Tasks : タスク
Features : 機能
•ビジネスゴール
•コンセプト
•ユーザーゴールに従ったユーザーモデル
•ユーザータスクと行動、ユースケース
•テクノロジーに依存しない
•ナビゲーションマップ
•ワイヤフレーム
•UI デザインガイドライン

ソフトウェアプロダクト
ゴール
タスク
機能
Why?
What?
How?

Elements of User Interface
Asset Bitmap or Vector graphic, media files
Style Style that can be applied to UI Control
Layout Nest of Layout control
UI Control Standard UI Control, custom control, user control
<data-bindable UI elements>
Motion Animation, transition between states or screens
Screen Flow Screen Flow by use case, between states or screens

ユーザーインターフェイスの要素
アセット
ビットマップやベクターグラフィック、
メディアファイルなど
スタイル UIコントロールに適用できるテーマ、スタイル
レイアウトネスト構造を持つレイアウトコントロール
UIコントロール
標準UIコントロール、カスタムUIコントロール
<データバインディング可能な UI 要素>
モーション
ステートやスクリーン間の
トランジション・アニメーション
スクリーンフロー
ステートやスクリーン間の
画面遷移

アセット
コンテンツ以
外の装飾用
の画像
情報表示用
のアイコン
画像化した
テキスト
データを反映
したアイコン

アセット：インパクトを最小化するためのヒント

スタイル (material design)

スタイル：インパクトを最小化するためのヒント

レイアウト：インパクトを最小化するためのヒント

UIコントロール：インパクトを最小化するためのヒント

Asset
StyleMotion
Screen
Flow
Layout
UI
Control
６要素の中でも多くのロール
で知見を共有しておくべき要素
もっとUIコントロールについて知っておこう

もっとUIコントロールについて知っておこう
差別化要因となるような、
個別の開発が必要なユニークなUIコントロール
1
事実上スクラッチ開発が困難な大型のUIコントロール
（ガントチャートやスケジュールなど）
2
よくあるUI要件だが、思った以上に複雑な要件を持つもの
（データグリッドやチャートなど）
3
OS標準のUIコントロールで十分な要件4
点線部分が弊社製品の範囲。レベル4で十分と思った仕様がユーザーにとってはレベル３である場合が多く、多機能なコントロールがなけれ
ば追加開発となる。この場合サードパーティUIコントロールの活用によって大きく生産性を高めることができる。レベルと使いどころの把握にお
いても、ベンダーのサポートの活用で最大限の効果を発揮できる。レベル２に該当する場合さらに効果が高い。

モーション：インパクトを最小化するためのヒント

スクリーンフロー：インパクトを最小化するためのヒント

採用テクノロジーと
影響インパクト

Asset
StyleMotion
Screen
Flow
Layout
UI
Control
スタイルの定義は独立して
いるか、どの程度の自由度
があるか
どんなレイアウト構造・コン
トロールが利用できるのか
どんなコントロールの選択
肢があるか、カスタマイズは
柔軟に可能か
画面遷移の制御方法？
一部ステートも変化可能か、
後で変更可能か
どんな表現が可能か
他の要素との依存関係？
どの程度調整可能か
受け入れ可能な形式は？
動作を重くすることはないか

Asset
Style
Motio
n
Screen
Flow
Layout
UI
Contro
l
「ルックアンドフィールに関するフィードバック」
Photoshop
Illustrator
Sketch
グラフィックカンプ
イメージスライス
コンセプトドキュメント

Asset
Style
Motio
n
Screen
Flow
Layout
UI
Contro
l
「機能を確認したい」「画面遷移を確認したい」
Word
Excel
PowerPoint
画面設計書
画面遷移図
レイアウト定義

Asset
Style
Motio
n
Screen
Flow
Layout
UI
Contro
l
「動きの気持ち良さを確認したい」
Animate
プロトタイプツール
(Flash?)
モーションサンプル
プロトタイプ
動作するアプリ

プロトタイピングツールのススメ : Indigo Studio

Executable SampleInstruction Guide
Building Block Set
understanding
Getting idea Defining patterns
Data Modeling
Develop sampler
Prototype
visual design
UI Control AssetStyleScreen FlowMotion Layout
Instruction guide templates Sample code Initial application
Technicalplatformdecision

DevOpsチームとその役割
-Conclusion

DevOps を前提としたユーザーインターフェイスの構造解析

僧侶
戦士
魔法使い
▪ 強い共通のゴール
▪ 相互の能力を知り、信頼することによるチームワーク

DevOps を前提としたユーザーインターフェイスの構造解析

More Related Content

What's hot (18)

Similar to DevOps を前提としたユーザーインターフェイスの構造解析 (20)

More from インフラジスティックス・ジャパン株式会社 (20)