ブランドに適合する上質なデザインを構築
Sketch*に組み込めるデザインライブラリーが提供されます。このライブラリーは実開発で利用できるUI要素や画面パターン、アプリケーションのひな形が含まれています。また、拡張性にも優れているため、ブランドに適合する社内標準デザインを作成することができます。
*Sketch社が提供するデザインツール
プロトタイプの共有、フィードバック、ユーザビリティテスト
デザインした画面をインポートし、クラウド上でプロトタイプを作成できます。関係者やエンドユーザーへの共有、フィードバックループ、ユーザビリティテストを実施し、ゴールを共有するのに役立ちます。手戻りのない画面実装を実現しましょう。
1クリックでコードを生成
作成、テストされたプロトタイプをもとに画面コード(HTML/CSS/Angularコード)を生成します。デザインライブラリーはモダンWebアプリ向けUIコンポーネント、Ignite UI for Angularがあらかじめマッピングされているため、デザインを忠実に再現することができます。
Indigo.Design System
-
Ignite UI for Angularと対になるSketchライブラリーを使ってデザイン
50種類以上のIndigo.Design Sketch UIコンポーネントが、Ignite UI for Angular UIコンポーネントにマッピングされています。 このSketch UIコンポーネントを使って画面デザインを行うことで、HTML、CSS、Angularコードが出力できるようになります。
![]()
プロトタイピング&ユーザビリティテスト
ユーザビリティテスト
-
クラウドにホスティングされたサービスでプロトタイプを作成
cloud.indigo.designでSketchドキュメントやイメージをインポートし、プロトタイプを作成できます。プロトタイプにはユーザーフローを示すインタラクション、トランジションを追加でき、プロトタイプのリンクを共有することでさまざまなデバイスで実行できます。
![]()
Angularコードアセット
-
Angularアプリケーションコードを生成
Visual Studio Codeプラグインを使用し、Indigo.Designにアップロードされているプロトタイプにアクセスできます。プロトタイプ内の必要な画面を選択し、コード生成を実行することで、Angular向けに最適化されたHTML、CSS、TypeScriptファイルが生成され、プロジェクトに追加されます。
![]()
アプリケーションギャラリー
Indigo.Designを用いて作成されたリファレンスアプリケーションをご覧いただけます。
また、それぞれのSketchファイルや、最終成果物であるAngularプロジェクトをダウンロードいただけます。
Budget Management
People App
製品ロードマップ
Indigo.Designはデザイナーとデベロッパーの間で起こりがちな技術的制約、コミュニケーション不足を理由とした画面デザインと実装コードの差異、また顧客の要件から乖離することで発生する実装時の手戻りといったプロジェクトの遅延、失敗要因を取り除くことができる画面設計・開発プロセスを提供するアプリケーションデザインプラットフォームです。
Indigo.Designは4つの主要コンポーネントから構成されています。
- Sketchライブラリーとして提供されるコンポーネント、パターン、アプリケーションデザインが含まれるIndigo.Design Sketch UIキット
- クラウドサービスとしてイメージベースプロトタイピングやフィードバック、リモートユーザビリティテストが実施できるIndigo.Design Cloud
- Visual Studio Codeの拡張機能としてAngularコードを生成するIndigo.Designコードジェネレーター
- モバイル、デスクトップ、Webアプリ向け高パフォーマンス、タッチファーストAngularアプリケーションの構築を支援するIgnite UI for Angular
個々のコンポーネントはそれぞれ下記の要素に関して個別にロードマップが策定されています。
- ツール連携の中で開発チームのコラボレーションと生産性向上に寄与できる価値をどのように提供するのか
- それぞれのコンポーネントにおいて、対応するツールの数をどのように拡張していくのか
2018年後半にかけては、それぞれコンポーネントにおいて個々の機能強化を予定しています。近日公開予定のロードマップをこちらで公開いたします。ご期待ください！
最新情報
[18.2] Indigo.Design新機能その3 – Indigo.Design Cloud
- Blog
[Indigo.Design] Indigo Design System v2を利用する場合の注意点 [サポート情報]
- Blog
[18.2] Indigo.Design新機能その2 – Indigo Design System v2 (Sketch UIキット)
- Blog
[18.2] Indigo.Design新機能その1 – Sketch Syncプラグイン
- Blog
デスクトップ版UXプロトタイピングツール
Indigo.Design DesktopはMacおよびWindowsに対応するUXプロトタイピングツールです。オフライン環境でも利用することができ、コードを記述せずプロタイプを作成することができます。
作成したプロトタイプはCloud.Indigo.Designで共有することができ、無制限のユーザビリティテストを実施することも可能です。
（注: Indigo.Design Desktopは、イメージベースプロトタイピング、並びにコード生成機能をサポートしておりません）