皆さんこんにちは、ソリューション・コンサルタントの山口です。
本記事では、Indigo.Designの2021年4月時点でのロードマップ、今後のアップデート予定について紹介します。
Indigo Design とは?
Indigo.Design は、アプリケーションデザインからプロトタイピングとその評価、更には開発工程までをシームレスにつなげるソリューションです。 これまではコード生成を行うためには、Sketch等のUIデザイナーが利用するような特定のUIデザインツールを介してデザインを行う必要がありました。今回の App Builder のリリースにより、Web上のWYSIWYGデザインツールでドラッグ&ドロップ操作にてデザインを作成し、そのデザインをそのままコード生成できるようになりました。2021年4月のリリースでApp Builderが加わったIndigo.Designを活用することで、以下のような効果が期待できます。
- 開発者の HTML や CSS によるデザインコストを大幅に短縮
- デザイナーまたは設計者と開発者の間でのコミュニケーションコストの削減
- 実現の難しい、あるいはコストのかかるUI設計をデザインフェーズで抑止(「絵に描いた餅」を防ぐ)
- 開発工程に入る前のデザイン・プロトタイプを用いた合意形成による、開発手戻りの抑制
- リモートユーザビリティテストによる、UXの底上げ(簡単にユーザビリティの検証が可能)
Indigo.Design 2021年のロードマップ
Indigo.Designでは、リリースされてからこれまでのおよそ4年間で、イメージベースプロトタイピング、SketchやAdobe XDでのデザインシステム(UI Kits)、プロトタイプのクラウド共有や管理、リモートユーザビリティテスト、デザインのインスペクションツールなど様々な機能を提供してきました。2021年の残りの期間は、本年4月にリリースされたApp Builderに関連アップデートを多く予定しています。
App Builderについて、まだご存じない方は、まずはこちらのBlog記事をご参照ください。
以下、2021年4月現時点でのIndigo.Designの2021年5月以降~2022年3月頃までの開発スケジュールとなります。
2021年 2Q(4月~6月)
- Adobe XD & Figmaのサポート、UI kitsとして提供されている各コンポーネントをアップデートします。
- アプリテンプレートの拡充
- イメージベースプロトタイピングの導線の改善
- Github インテグレーション
2021年4月時点では、UIデザインツールからのデザインのインポートはSketchしか対応していませんでしたが、ついにAdobe XDにも対応します!これによりWindows を利用している方にもデザインのインポートを行っていただけるようになります。
また、Githubインテグレーションにより、App Builderで管理されているデザインを変更した際にgithub側でその変更を検知し、デザインの差分に対応するコードの差分を把握できるようになります。これにより初期デザインから開発の流れだけでなく、継続的なアップデート対応の中でも活用いただけるようになります。
2021年 3Q(7月~9月)
- React, Blazor Web Coponents ベースでのコード生成のサポート
- App Builder上でのデータソースサポートの拡充(OData、Excel、CSV等)
- App Builderの組み込み版SDKの提供
- App Builderを含めたオンプレサーバーモジュールの提供
2021年4月時点では、コード生成についてはAngularのみの対応となっておりましたが、ReactやBlazor、WebComponent(Vue.jsでも使えます)ベースでもコード生成できるようになります。開発プロジェクトで利用するフレームワークの制限がなくなることは大きいですね!
また、App Builderの組み込み版SDKを提供する予定です。自社でノーコード(またはローコード)ソリューションをスクラッチ開発しようとすると、ドラッグ&ドロップで画面デザインを行うためのデザイナー画面が必要となりますが、この部分をApp Builderを組み込んで開発いただくことで、お客様のプロダクトとしてドラッグ&ドロップのデザイン体験をエンド顧客へ提供できるようになります。
2021年 4Q(10月~12月)
- レイアウトの編集、およびカスタムレイアウトの作成
- UIコンポーネントの追加、およびカスタムコンポーネントの作成
- サードパーティのデザインシステムとの連携サポート
独自のレイアウトやカスタムコンポーネントを定義して利用することができるようになります。これによりデザインの自由度が格段に上がります。また、他社ベンダーやOSS組織が提供しているデザインシステムとの連携も検討しています。(デザインシステムは、例えばカラースキームやフォント、コンポーネント等のデザインに関するルール、ガイドラインのようなものです。)
2021年 1Q(1月~3月)
- デザインシステムマネジメント(DSM)
- デザイン仕様に関するドキュメント生成
- プロダクトマネージャーやプロジェクトマネージャー向けのインテグレーション
デザインシステムを独自に定義したり管理できる仕組みが提供されます。まだ仕様は全く固まっていませんが、ブラウザ上でデザインのルール・ガイドラインを視覚的に作成・管理できるような仕組みです。また、作成・管理しているデザイン仕様をドキュメントとして生成したり、プロジェクトやプロダクトを管理する立場の方向けの機能(タスク管理等)も組み込まれる予定です。
まとめ
かなり大きなアップデートが盛りだくさんとなっています!上記開発スケジュールは理想的な目標となっています。設計や実装を進めていく中で想定以上に時間を要するものも出てくるかと思いますが、進捗状況については本ブログなどでアップデートしていく予定です。
もし機能要望がある場合には以下お問合せページよりリクエストくださいませ!もしリクエストいただける場合には、その機能が必要な背景やプロジェクトのことも可能な範囲で教えてください!弊社側でも検討しやすくなります。
それでは、今後のIndigo.Designのアップデートにご期待ください!