画面デザインに忠実なUIコードを生成することができるアプリケーションデザインプラットフォーム「Indigo.Design」が目指すもの、構成要素についてまとめた資料です。 SketchやVisual Studio Codeと連携します。 製品については下記をご覧ください。 https://jp.infragistics.com/products/indigo-design

1. 1
Indigo.Design概要

2. 2
自己紹介
▪ 池原 大然
▪ インフラジスティックス・ジャパン株式会社
▪ 製品担当
▪ dikehara@infragistics.com
▪ Twitter: @Neri78
▪ Blog: bit.ly/IGDaizen
画像検索をすると若かりし頃双子の弟が出てくるかもしれません

3. 3
アジェンダ
▪ Indigo.Designとは？開発のきっかけ
▪ Indigo.Designの構成要素
▪ 画面デザイン
▪ プロトタイピング
▪ コード生成
▪ まとめ

4. 4
Indigo.Designとは？
開発のきっかけ

5. 5
よくある話?
▪ デザイナー
▪ 「デザイナーの意図通りの画面が反映されない」
▪ エンジニア
▪ 「実現不可能なデザインが実装側に渡ってきてしまった」
▪ 「デザインを画面側に反映する工数がかかってしまう」
▪ PM、プロジェクト全体
▪ 「なんかうまくいかないよね？」

6. ふざけんじゃ
ねえよ
あぁん？

7. 7
これが理想ですよね？
▪ デザイナー
▪ 「意図通りのデザインが反映されたアプリが実装された！」
▪ エンジニア
▪ 「効率よく良いデザインを実装に落とし込めた！」
▪ PM、プロジェクト全体
▪ 「良いアプリをみんなで顧客に届けることができた！」

8. 8

9. 9
インフラジスティックスは…
▪ 約30年間UIコンポーネント専業
▪ ActiveXに始まり、.NET向け、iOS、Android、jQuery, Angular
▪ どちらかというとデベロッパーより（だった）
▪ 2007年頃から製品開発にデザインプロセスを適用
▪ 画面開発について多くの顧客とミーティングを常に行ってきた
▪ どこでも問題は同じ
▪ UIコントロールという専門領域からアプリ開発全体のプロセス考えた結果、
新しいソリューションが必要だという結論に

10. 10
なぜ、必要なのか？
▪ https://uxify.net/as/
▪ セッション4:UIと合意形成 by Ken Azuma – セッション資料

11. 11
内部への合意形成
▪ チーム内の異なるロールを認識する
▪ プロジェクトマネージャー／リーダー
▪ デベロッパー・アーキテクト
▪ ビジュアルデザイナー・UXデザイナー
▪ ロール相互の責任範囲でなにが扱われているかについて、ある程度把握しておく
必要がある
▪ UI開発に大きく関わる、ロール横断的に重要な要素については積極的な情報
共有が必要（ex: Angular や Prism のようなフレームワークの知識など）
UXify セッション4:UIと合意形成 by Ken Azuma – セッション資料

12. 12
それぞれのチームロール
▪ プロジェクトマネージャー
▪ デベロッパー・アーキテクト
▪ ビジュアルデザイナー・UXデザイナー
UXify セッション4:UIと合意形成 by Ken Azuma – セッション資料

13. 13
想像力テスト：勇者のパーティ
▪ プロジェクトマネージャー＝僧侶
▪ デベロッパー・アーキテクト＝戦士
▪ ビジュアルデザイナー・UXデザイナー＝魔法使い
▪ 雑魚戦ではなく、ボス戦レベルでのバランスを想像
▪ 強い共通のゴール
▪ 相互の能力を知り、信頼することによるチームワーク
UXify セッション4:UIと合意形成 by Ken Azuma – セッション資料

14. 14
デザイナーよ、あえて制約を知れ
▪ デベロッパーに絵に描いた餅を開発させない
▪ Ex : クルマをデザインするのであれば、車の持つ特有の制限、イノベーショ
ン、物理限界を知った上でのデザインになる
▪ Ex : EVでのバッテリー、タイヤの大きさ、空力特性など
▪ テクノロジーからデザインへの提案の可能性の芽を摘まない
▪ ポジションを取りきれば、合意形成は簡単になる
UXify セッション4:UIと合意形成 by Ken Azuma – セッション資料

15. INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
Angular
アプリケーション
コード生成

16. INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
Angular
アプリケーション
コード生成
3ステップでデザインから
画面コードを生成する
アプリケーションデザイン
プラットフォーム

17. 17
プロダクトのゴール
「良いものを作ってみんな幸せに！」

18. 18
Indigo.Design
の
構成要素

19. INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
Angular
アプリケーション
コード生成
Indigo-Components Indigo-Patterns Indigo-Styling
Ignite UI for Angularと対になる
Sketch UIキットを
使ってデザイン
画面デザインをサポートする
UIパターンライブラリー
Sketch UIキットを
自社のブランディングに
合わせ拡張
1. Sketchでデザインを作成
Ignite UI for Angularを完全再現したIndigo.Design Sketch UIキット

20. INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
Angular
アプリケーション
コード生成
2. cloud.indigo.designにデザインをアップロードし、プロトタイプを作成
クラウド上でプロトタイプを作成 ユーザビリティテストの実施 共同編集とコラボレーション
Sketchファイル、画像を
アップロードし
高速プロトタイピングを実現
参加人数無制限、リモート実施可能な
ユーザビリティテストを実施し
デザインを分析
共同編集機能や
コメント機能を活用した
コラボレーション

21. プロトタイピング
&
ユーザビリティテスト
INDIGO.DESIGN
Indigo
Design System
Angular
アプリケーション
コード生成
3. プロトタイプからAngularコードを生成
Angularアプリケーション
コードを生成
VS Codeプラグインから
プロトタイプの画面パーツを選択
html, scss, tsコードを自動生成
Ignite UI for Angularを活用
50種類以上のマテリアルデザインに準拠した
UIコンポーネントがコード生成で使用
個別に利用することも可能

22. 22
まとめ

23. INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
Angular
アプリケーション
コード生成
3ステップでデザインから
画面コードを生成する
アプリケーションデザイン
プラットフォーム

24. 24

25. 25
リソース
▪ UXify
https://uxify.net/as/
▪ Distinct
https://jp.infragistics.com/events/distinct
https://bit.ly/IGDistinct
▪ Indigo.Designビデオチュートリアル
https://www.youtube.com/playlist?list=PL3cMEQZMbdWTMqcTftDwgVbE
DEDg-QgJT
▪ Indigo.Design製品ページ
https://jp.indigo.design

26. Angular
アプリケーション
コード生成
INDIGO.DESIGN
Indigo
Design System
プロトタイピング
&
ユーザビリティテスト
3ステップでデザインから画面コードを生成するアプリケーションデザインプラットフォーム
Sketch UIキット無料公開中: http://jp.indigo.design

27. 27
ハンズオンで実際にご体験ください！