滨苍诲颈驳辞.顿别蝉颈驳苍概要
?
0 likes?250 views
画面デザインに忠実なUIコードを生成することができるアプリケーションデザインプラットフォーム「Indigo.Design」が目指すもの、構成要素についてまとめた資料です。 SketchやVisual Studio Codeと連携します。 製品については下記をご覧ください。 https://jp.infragistics.com/products/indigo-design
More Related Content
What's hot (20)
Similar to 滨苍诲颈驳辞.顿别蝉颈驳苍概要 (20)
More from インフラジスティックス?ジャパン株式会社 (20)
滨苍诲颈驳辞.顿别蝉颈驳苍概要
- 2. 2 自己紹介 ? 池原 大然 ? インフラジスティックス?ジャパン株式会社 ? 製品担当 ? dikehara@infragistics.com ? Twitter: @Neri78 ? Blog: bit.ly/IGDaizen 画像検索をすると若かりし頃双子の弟が出てくるかもしれません
- 3. 3 アジェンダ ? Indigo.Designとは？開発のきっかけ ? Indigo.Designの構成要素 ? 画面デザイン ? プロトタイピング ? コード生成 ? まとめ
- 5. 5 よくある話? ? デザイナー ? 「デザイナーの意図通りの画面が反映されない」 ? エンジニア ? 「実現不可能なデザインが実装側に渡ってきてしまった」 ? 「デザインを画面側に反映する工数がかかってしまう」 ? PM、プロジェクト全体 ? 「なんかうまくいかないよね？」
- 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 – セッション資料
- 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 まとめ
- 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