Top Banner
Indigo Studio で作るプロトタイプ インフラジスティックス・ジャパン株式会社
35

Indigo Studio で作るプロトタイプ

Jul 04, 2015

Download

Documents

だれでも簡単に使える無償のプロトタイプツール、Indigo Studio をご紹介します。
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Indigo Studio で作るプロトタイプ

Indigo Studio で作るプロトタイプ

インフラジスティックス・ジャパン株式会社 東 賢

Page 2: Indigo Studio で作るプロトタイプ

INFRAGISTICS 【名】

ɪnfrədʒɪˈstɪks : インフラジスティックス

1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー

2. Infrastructure(基礎構造)+ logistics(後方支援)

3. バイク乗りが社長の東京・原宿の会社【日本】

4. インフラさん【俗称】

SummitDevelopers

Page 3: Indigo Studio で作るプロトタイプ

利用のポイント/傾向

ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求

•プロジェクトにおける工数の削減

•提案/設計時のラピッドプロトタイピングにも利用SIer

•自社製品の継続的アップグレードに伴う価値向上

•弊社製品による他のプラットフォームへの迅速な対応ISV

•セルフ開発スキーム確立における標準パーツとしての利用

•「作らない」ための弊社製品の利用In-house IT

• 開発/テスト双方における工数の削減• パフォーマンスの高さ(特にグリッド/チャート)• 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能• 日本法人によるダイレクトサポート• サブスクリプション/アップグレードにおける継続的な価値向上(大小の機能追加及びバグフィックスを含む)

• ソースコードの開示(100万行以上の洗練されたコード!)• どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減

SummitDevelopers

Page 4: Indigo Studio で作るプロトタイプ

Ken Azuma

東 賢(Ken Azuma)インフラジスティックス・ジャパン株式会社

代表取締役/シニアUXアーキテクト

「全ての状況における生産性の向上」と

「優れた UI / UX をお届けすること」の二つを

コアバリューとして、様々な形で

アプリケーションにかかわる皆様が、

優れたユーザーインターフェイスを通じ、

満足度の高いサービスを展開されるための

様々なお手伝いをさせていただいております。

インフラジスティックス・ジャパン株式会社

fMicrosoft MVP

Windows Touch & Tablet PC

Blog

SummitDevelopers

Page 5: Indigo Studio で作るプロトタイプ
Page 6: Indigo Studio で作るプロトタイプ

UIコントロール

Page 7: Indigo Studio で作るプロトタイプ

ANDROID HTML5 iOS

Page 8: Indigo Studio で作るプロトタイプ
Page 9: Indigo Studio で作るプロトタイプ

Announce!

製品版Ignite UIから、グリッドを商用利用な形で無償提供しています!

Page 10: Indigo Studio で作るプロトタイプ

Announce!

誰でも簡単に使えるプロトタイプツール、Indigo Studio を無償提供しています!

Page 11: Indigo Studio で作るプロトタイプ
Page 12: Indigo Studio で作るプロトタイプ

UXサービス

ビジネスソリューション(アプリケーション)

UIコントロール(RAD Dev Tool)

Why Indigo Studio from Infragistics?

Page 13: Indigo Studio で作るプロトタイプ

何故 Indigo Studio が必要なの?(優等生)

調査の結果、71パーセントの方が設計や仕様の認識不足/共有不足に起因した作業のやり直しが、ソフトウェア開発におけるもっとも大きな問題であると回答しています。

一方、下記のような課題もあります。• UIデザインツールが扱いにくい、あるいは難しい

• 例)SI企業におけるFireworks-phobia

• 膨大なUI仕様の存在の結果、一部が無視されたり、部分的に適用されるというような事態が起こる

• ツールがユーザー中心設計にマッチしていない• インタラクティブなプロトタイプを作るのに大きなコストがかかる

• 時間をかけていないつもりでも、どんどん時間をかけている。。。

• プロトタイプを作るのに、コードの知識が必要になる• プロトタイプの修正がドキュメント修正のように再起タスク化する

Page 14: Indigo Studio で作るプロトタイプ

何故 Indigo Studio が必要なの?(アズマ)

ユーザーインターフェイスへの理解が十分でない状態が続くと:

データグリッドしか売れない

Page 15: Indigo Studio で作るプロトタイプ

14

Surface : 表層

Skeleton : 骨格

Structure : 構造

Scope : 要件

Strategy : 戦略Goals : ゴール

Tasks : タスク

Features : 機能

•ビジネスゴール•コンセプト•ユーザーゴールに従ったユーザーモデル

•ユーザータスクと行動、ユースケース•テクノロジーに依存しない

•ナビゲーションマップ•ワイヤフレーム•UI デザインガイドライン

UXの要素検討

Page 16: Indigo Studio で作るプロトタイプ

UXの要素検討

ソフトウェアプロダクト

ゴール

タスク

Tools機能

UX

UI

Page 17: Indigo Studio で作るプロトタイプ

ゴールやタスクの検討

Page 18: Indigo Studio で作るプロトタイプ

ユーザーインターフェイスの構成要素 : View

アセットベクターやビットマップによるアイコンなど、

UI 上でそのまま表示されるもの

スタイル UI コントロールに適用される外観

モーション 状態内/状態間のアニメーション

レイアウト ネスト構造を持ったグループ化されたレイアウトコントロール

UI コントロール 多くはデータバインドの対象となる UI コントロール

スクリーンフロー 複数のレイアウトを管理する画面の集合

Page 19: Indigo Studio で作るプロトタイプ

検討プロセスに足りないものがある

?UXの検討 UIの検討

Page 20: Indigo Studio で作るプロトタイプ

プロトタイプ:

なにかツールの助けが必要

スケッチレベルでの大きなイメージやストーリーの共有

スクリーンフローやモーションを含めたより細かいレベルの共有

Page 21: Indigo Studio で作るプロトタイプ

by

Page 22: Indigo Studio で作るプロトタイプ

ストーリーボードによるユーザーストーリーの検討

Page 23: Indigo Studio で作るプロトタイプ

スクリーンのスケッチとデザイン

Page 24: Indigo Studio で作るプロトタイプ

あなたのUIに集中できる環境

Page 25: Indigo Studio で作るプロトタイプ

インタラクティブなコントロールで発想を助ける

Page 26: Indigo Studio で作るプロトタイプ

インタラクションを可視化する

Page 27: Indigo Studio で作るプロトタイプ

モーションを設定する

Page 28: Indigo Studio で作るプロトタイプ

コメントでフィードバック

Page 29: Indigo Studio で作るプロトタイプ

共有/エクスポート/プレゼンテーション!

Page 30: Indigo Studio で作るプロトタイプ

デモ

Page 31: Indigo Studio で作るプロトタイプ

Indigo Studioのこれから:

Ask me!

特定のプラットフォームに対応したコントロールパックを提供予定

対応プラットフォームを増やす予定

Page 32: Indigo Studio で作るプロトタイプ

Call to (small) Action!:

是非知り合いの皆様にご紹介ください!

Ignite UIをダウンロードしてください!

Indigo Studioをダウンロードしてください!

Page 33: Indigo Studio で作るプロトタイプ

Call to (small) Action!:

(その機能があれば、安ければ買っていただけますか?)

Ignite UI V1はいつまでもサポートつきで無償で利用できます!

どんな機能がV2にあったらいいでしょうか?是非フィードバックをお願いします!

Page 34: Indigo Studio で作るプロトタイプ

Call to Action!:

日本初の良質なユーザーインターフェイスをどんどん発信していきましょう!

プロトタイプをうまく活用することで、ユーザーとの認識齟齬を回避し、開発全体をスムーズにしましょう。

プロトタイプをデザイナーだけのものにせずに、是非もっと広く開発現場に浸透させてください。

Page 35: Indigo Studio で作るプロトタイプ