デザイナーが作ったUIモックから、デベロッパー向けにAngularのコードを生成。「Indigo.Design」日本語版をインフラジスティックスが提供開始

2018年6月27日

インフラジスティックスは、Webアプリケーションのデザインから開発までの一連の作業を効率化するツールやサービス群をまとめた「Indigo.Design」の日本語版を、7月19日から提供を開始すると発表しました

Indigo Design fig1

Indigo.Designの特長は、UIデザイナーの作業とプログラマの作業をスムーズに接続することで、効率のよいWebアプリケーションの開発を実現すること、そしてUIデザイナーやプログラマは新たなツールに乗り換えることなく、普段使っているツールをそのまま使いつつ、前述の効率性を実現する点などにあります。

4つのコンポーネントからなるIndigo Design

Indigo.Designは下記の4つの主要コンポーネントによって構成されます。1つ目と2つ目はUIデザイナーのためのツールです。

1つ目の「Indigo.Design Sketch UIキット」は、デザインツールとしてよく使われている「Sketch」で画面デザインを作成するときに使えるライブラリ。

2つ目の「Indigo.Designクラウド」は、Sketchで作成した画面デザインをクラウドへアップロードし、ナビゲーションや画面遷移などをデザインし、モックアップとしてプレビューできるサービスです。クラウド上でモックアップを共有できるため、関係者のレビューやユーザビリティテストなどを実施できます。

Indigo Design fig2

3つ目と4つ目はプログラマのためのツールです。3つ目の「Indigo.Designコードジェネレータ」は、Visual Studio Codeの拡張機能として、Indigo.Designクラウド上にあるモックアップからAngularのコードを生成。

4つ目の「Ignite UI for Angular」は、Angularに対応したコンポーネントとしてデータグリッドやチャートなど豊富な要素が提供されます。

Indigo.Designを利用することで、デザイナによって作られたモックアップのデザインが、そのまま忠実にアプリケーションに反映されるようになるため、デザイナにとってデザイン面での手戻りなどが減ると同時に、プログラマはデザインに合わせてHTMLやCSSを微妙に調整するといったUI関連の手間を省略でき、ロジックに集中できるワークフローが実現できます。

また、デザイナーやプログラマは、普段使っているSketchやVisual Studio Codeのまま、Indigo.Designの機能を利用してこのワークフローを回すことができます。

インフラジスティックスは今後Indigo.Designをさらに充実させていく計画で、UIパターンやタイポグラフィ、ステンシルなどの追加、コード生成ではFlutterへの対応、Angularコンポーネントの充実などを行っていくとしています。

あわせて読みたい

プログラミング言語 Angular




タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本