Sketch／VS Code／Angularと統合、デザインと実装のズレを防ぐインフラジスティックス新製品

UIデザイン／開発プロセスを統合、迅速化する「Indigo.Design」発表

　ユーザーインタフェース（UI）デザイン／開発ツールを提供するインフラジスティックス・ジャパンは2018年6月26日、モダンアプリケーションの迅速な構築を支援する“アプリケーションデザインプラットフォーム”「Indigo.Design日本語版」を発表した。

　Indigo.Designは「Sketch」や「Visual Studio Code」「Angular」といったツールに追加するコンポーネント群やクラウドサービスで構成されており、ビジュアルデザイナーとアプリケーションデベロッパーが、使い慣れたツールを使いながら共同でのデザイン／開発プロセスを迅速、効率的に進められる環境を提供する。

インフラジスティックス新製品「Indigo.Design日本語版」の概要。同社によるとこうしたかたちでデザイン／開発を効率化するプラットフォーム製品は世界初だという

インフラジスティックス・ジャパン 代表取締役／シニアUIアーキテクトの東賢氏

米インフラジスティックス デベロッパーツール担当SVPのジェイソン・ベレス（Jason Bares）氏

UI／デザインコンポーネントを提供、プロトタイプからコードへ直接変換

　Indigo.Designは、WebアプリケーションのUIデザインツールである「Sketch」用のコンポーネントライブラリ「Indigo.Design Sketch UIキット」、作成した画面デザインをアップロードして関係者間での共有やユーザビリティテストが実施できるクラウドサービス「Indigo.Designクラウド」、プロトタイプデザインを忠実に再現する画面コード（Angularコード）を生成するVisual Studio Codeエクステンションの「Indigo.Designコードジェネレーター」、高速／高機能なデータグリッドやチャートなどを含むAngular用のコンポーネント群「Ignite UI for Angular」という、4つの主要コンポーネントで構成される。

　これらを活用することで、デザイナーからUXアーキテクト、プロダクトマネージャー、デベロッパーといったメンバーが、従来以上に密接にデザイン／開発プロセスに関わることができるようになる。これにより、開発現場で起こりがちな技術的制約やコミュニケーション不足に基づく画面デザインと実装のズレ、顧客要件からの乖離に起因するプロジェクトの遅延などを防ぐことができる。

Indigo.Designが提供する4つのコンポーネントの概要

　Sketch UIキットとIndigo.Designクラウドは主にデザイナー向けのツールとなる。Sketch UIキットには、あらかじめデザインされた画面テンプレートをはじめ、画面に組み込めるUIコンポーネント、アイコン、スタイル（カラースタイルやフォントなど）などの部品が用意されており、デザイン作業が迅速に行える。作成したデザインデータをクラウドにインポートし、ユーザー操作（メニューのタップなど）に対応するナビゲーションや画面遷移などを設定することで、クラウド上の共有／非共有スペースでプロジェクト関係者に共有し、デザインとシミュレーション、フィードバックを繰り返すことができる。動画レコーディングが可能な人数無制限のユーザビリティテスト機能も備えている。

Sketchのメニュー。Sketch UIキットにより事前定義済みコンポーネント群が追加されている

Indigo.Designクラウドの画面。デザインを取り込み、ナビゲーションなどを設定して関係者に内部公開する

　一方、Indigo.DesignコードジェネレーターとIgnite UI for Angularはデベロッパー向けツールだ。Indigo.Designクラウドで完成したUIデザインを、コードジェネレーターを使ってAngularコードに変換し、Visual Studio Codeに取り込む。前述のSketch UIキットで用意されているコンポーネント群はIgnite UI for Angularが提供するコンポーネントのコードとあらかじめ紐付けられているため、プロトタイプデザインとピクセル単位で完全に一致した画面コードが生成される。したがって、コードレベルの修正や調整は短時間で済む。

Indigo.Designコードジェネレーターの画面。コード化したいデザインを選択する。一部のコンポーネントのみを選択することも可能

　Indigo.Designは7月19日から国内提供を開始する。1利用ユーザー単位の年間サブスクリプションライセンスでの販売となっており、プロトタイプ実行やユーザビリティテストへの参加にはライセンス不要（デザイン／開発作業を行う利用ユーザーのみライセンス購入が必要）。税抜価格は、Enterpriseエディション／通常サポート付きが年額11万5000円、同エディション／プライオリティ（メール優先対応、電話対応）サポート付きが年額16万5000円。また、UI開発ツールスイートの「Infragistics Ultimate」にも同ライセンスが含まれる。

アプリケーション開発が複雑化するなかで「差別化要因」となるUI/UXを実現

　発表会に出席したインフラジスティックス・ジャパン 代表取締役／シニアUIアーキテクトの東賢氏は、インフラジスティックスは1989年からUIコンポーネント専業で展開してきたソフトウェア会社であり、そのビジョンは“Faster Paths to Amazing Experiences”、つまり「いちばん早いかたちで、いちばん良いユーザー体験を提供する」ことだと説明する。

　およそ30年間の歴史を持つ同社だが、昨今のモダンアプリケーション開発においては従来よりも多くの要素が求められるようになっており、東氏は「アプリケーション開発が複雑なものになってきたと実感する」と語る。そして、そこには「短期開発／継続的インテグレーション（CI）の実現」「開発フレームワークの積極的な活用」「UI/UXを差別化要因とするためのデザイナー／デベロッパーワークフロー」という3つの成功要因があると考えているという。特に3つめの要因について東氏は、昨今では技術要件が先行してUI/UXの検討が後回しになりがちだが、実際にはここに他社サービスとの差別化ポイントがあると強調する。

　今回のIndigo.Designは、こうした「成功要因」を現実化するためのツールであり、特に「デザイナーから受け取ったデザインを、しっかりとコードに落とし込めていない」という現状の課題解決を支援するものだと説明した。

Indigo.Designにおける今後の追加予定機能（枠で囲まれた部分）

　また米インフラジスティックスでデベロッパーツールを担当するSVPのジェイソン・ベレス氏は、Indigo.Designはエンタープライズが「時間を節約して」アプリケーションを提供するためのデザインプラットフォームであり、そのためにデザイナーやデベロッパーがよく利用するSketchやVisual Studio Code、Angularといったツール／フレームワークと統合することで、効率性と生産性を高めたと語った。

クラウド＆ソリューション事業本部 グローバルブラックベルト部 テクノロジーソリューションプロフェッショナル（App Innovation）の井上章氏

Kaizen Platform エンジニア／Angular日本ユーザー会代表の稲富駿（すぐる）氏

　なお同説明会には、日本マイクロソフト テクノロジーソリューションプロフェッショナル（App Innovation）の井上章氏、Angular日本ユーザー会代表の稲富駿氏もゲスト出席した。井上氏はVisual Studioファミリーをはじめ、AzureのコンテナやAIに関連するサービスや.NETプラットフォームなど、モダンアプリケーション開発に関わるマイクロソフトのコンポーネント群を、また稲富氏はグーグルが開発を主導する高品質なWebアプリケーションフレームワークとしてのAngularの魅力を紹介した。

■関連サイト

• インフラジスティックス