Indigo.Designロードマップ – 2018
このエントリでは下記の原文を基にしつつ、私見を交えて今後のロードマップをご紹介します。
原文 – Jason Beres: Indigo.Design 2018 Roadmap
先のエントリでもご紹介しましたIndigo.Designですが、4つの主要コンポーネントから成り立っています。
- Indigo.Design Sketch UIキット - Indigo Design Systemに沿って作成されているSketch向け追加ライブラリー。約50種類のコンポーネントや、パターン、スタイルを提供します。
(注: Sketchは、Mac向けに提供されているデザインツールです。現在、Indigo.Designでコード生成を可能にするデザインを作成する場合にはあらかじめ導入が必要になります。） - Indigo.Design Cloud – Sketch UIキットや、画像をインポートし、イメージベースのプロトタイプを生成するクラウドサービス。作成したプロトタイプの共有や、ユーザビリティテストが可能になります。
- Indigo.Designコードジェネレーター – Visual Studio Codeの拡張機能として提供され、AngularプロジェクトにIndigo.Design Cloudで作成されたイメージベースのプロトタイプからコードを生成できます。なお、デザインからコードを生成するためには、Sketch UIキットを利用する必要があります。
- Ignite UI for Angular – Sketch UIキットで提供されているコンポーネントはAngular用コンポーネント、Ignite UI for Angularにマッピングされています。このコンポーネントを独自に使用し、アプリケーションを開発することも可能です。
それぞれのコンポーネントについて下記の観点からロードマップが策定されています。
- ツール連携の中で開発チームのコラボレーションと生産性向上に寄与できる価値をどのように提供するのか
- それぞれのコンポーネントにおいて、対応するツールの数をどのように拡張していくのか
2018年後半にかけては、グラフィック/ビジュアルデザイナー、UXデザイナー/アーキテクト、デベロッパーそれぞれの役割向けの機能拡張を予定しています。
グラフィック/ビジュアルデザイナー向けの拡張
現在、Sketchをビジュアルデザインツールのコアとし、Indigo.DesignはこのツールをサポートするSketch UIキットを中心に据えています。Sketchは我々が提供するさまざまなシンボルに対してカスタムオーバーライドを用いてカスタマイズできる機能を提供しており、この機能を活用することでデザインに忠実なコードを生成するための詳細な設定を可能にします。今後も現在提供しているライブラリーに含まれるSketchシンボルの機能拡張を継続していきます。
2018年第三四半期にかけては次の機能強化を予定しています。
- UIパターンの追加 - アプリケーションでよく使用されるであろう共通的なUIパターンを活用することで、デザイン時の繰り返し作業を削減することができます。このUIパターンの提供数を今後も増やしていきます。
- タイポグラフィ、シェープ、より細かな機能 – Sketchの重要な特徴の一つである柔軟性を活かし、最新のMaterial Designに準拠するようにSketch UIキットを拡張します。フォントや形状をより自由にデザインすることができるようになるため、Material & Indigo.Designを用いてよりクリエイティブなデザインを作成できます。
- ステンシル - 洗練されたUI、スタイル化されたステンシル（テンプレート、アイコン等）、グラフィックや画像を用いることで情報をわかりやすく提示するだけでなく、アプリケーションの完成度を高めることができます。今後、金融向け、医療向け、製造業向けなど各業種向けのステンシルライブラリーの出荷を予定しています。
- Sketchプラグイン - 次の2つに関しては可能な限り早く改善を試みたいと考えています。
- SketchアートボードとIndigo.Designワークスペースとの自動同期。現在はファイルをアップロードすることでプロトタイプを作成していますが、Sketchでアートボードに変更を加えることで自動的にIndigo.Design Cloudにその変更が反映されビジュアルデザイナーとUXデザイナーが常に同じデザインに対して作業ができるようになります。
- プラグインからダイアログを呼び出し、その中でグリッドやチャートを視覚的に設定できるようにします。結果、リッチなコントロールをすばやくデザインに追加でき、コード生成へと進めることができます。
UXデザイナー/アーキテクト向けの拡張
Indigo.Design Cloudは重要かつ非常にエキサイティングなアップデートを予定しています。2018年第三四半期から2019年にかけて、現在MacやWindowsクライアント版で提供しているプロトタイピングツールをHTML、Webベースのものに移行させることを計画しています。結果、ハイパフォーマンスなスクリーンデザイナーをWeb経由で使用し、プロトタイプの作成と共有をこれまで以上に簡単に実現できると考えています。
- [2018年第四四半期] クラウドベースのスクリーンデザイナー（プレビュー版） - 現在、Indigo.Designはイメージをアップロードし、ナビゲーションやフローを追加することでプロトタイプを作成できます。ここに、スクリーンデザイナーを提供しクラウド上の同じUIで直接スクリーンやUIパーツなどを追加することができるようにすることを計画しています。このデザイナーには、WYSIWYGデザイン画面と共にSketch UIキットで提供されているコンポーネントやUIパターンが列挙されているツールボックスやプロパティエディターが提供され、Indigo Design Systemに沿った画面をSketchを用いずともデザインできるようになります。
このアプローチは、ビジュアルデザイナー、UXアーキテクトに留まらず、デベロッパーもCloud.Indigo.Design上で画面をデザインでき、かつそのデザインのコードが生成できるようになることを意味しています。
日本においてはデザインチームを持たない、あるいはデザイナーが参加しないプロジェクト、またはWindows PCのみを使用しているというプロジェクトが一定数存在していると考えていますので、この機能はプラスになるのではないでしょうか。
デベロッパー向けの拡張
Visual Studio Code拡張機能は、Indigo.Design上のデザインとAngularコードベースを繋ぐ接着剤の役割を担っています。現在の拡張機能はIndigo.Design上のプロトタイプから各画面に必要なパーツを選択し、HTML, CSS,Angularコードを生成する機能を持っていますが、今後数カ月でこの機能を更に拡張する予定です。
- Visual Studio Code拡張機能にCloud.Indigo.Designへのログイン機能を追加し、プロトタイプやワークスペースをより簡単に選択できるような機能を追加します。
- Flutterコード生成機能 - 本年5月にGoogle I/OでアナウンスしたFlutterコード生成機能を追加します。そのため、Flutter用のSketch UIキットの追加や、Flutterをサポートするための機能追加を行います。Flutterサポートについては5月にプレビューという形でビデオを公開していましたが、本年中の提供に向けて開発を行っています。
- テンプレートとスターターアプリの追加 – Indigo.Designの大きな特長は、誰もがデザインシステムに沿って統一された画面、UIパターン、アプリケーションを作成し、コードを生成できるという点です。我々はSketch用により多くのコンポーネント、UIパターン、サンプルデザインを追加することでデザインのエキスパートであるかそうでないかに関わらず画面デザインを行えるようにしていきたいと考えています。
Ignite UI for AngularについてもスプレッドシートやExcelライブラリーの機能追加やクラウドベースのやWYSIWYG Angularスタイリングツールなどの追加を予定しており、更にReactグリッド、チャートなども予定しています。
ぜひ、ご期待ください！
