Daizen Ikehara

インフラジスティックス・ジャパン株式会社の元デベロッパー エバンジェリスト、現製品担当の Blog

Archives

Indigo.Design提供開始しました!

以前からご紹介をしてきましたアプリケーションデザインプラットフォーム、「Indigo.Design」を2017年7月26日に提供を開始しました!

Indigo.Design関連の過去のエントリはこちらからご覧いただけます。

この「Indigo.Design」は3つのステップを経ることでデザインに忠実な画面コードを生成することができ、これまで、これまでアプリケーション開発時にPhotoshopやIllustrator、あるいはPowerPoint、Excelなどで
画面イメージや、外部設計書を作成したものの、画面実装において当初のデザインから逸脱する、あるいは、デザインの実現に工数がかかってしまうというような課題を解決することをねらいとしています。

IndigoDesignHeader

概要:Indigo.Designを用いた画面構築の流れ

ステップ1:Indigo Design Systemに沿った画面デザイン

Sketch Design

一貫性のある画面群を効率よくデザインするには、レイアウト、スタイル、UIパターンなどをまとめた画面規約が必須です。Indigo.Designはデザインに沿って自動的にコードを生成するための規約をまとめたIndigo Design Systemを提供します。このIndigo.Design Systemに沿ったUIライブラリーを多くのデザイナーが利用するSketch向けに提供しており、Indigo.Design Sketch UIキットを用いて画面をデザインすることでコード生成時に画面デザインを忠実に再現できます。

ステップ2:クラウド上でプロトタイピング

2-Prototyping

ステップ1で作成したデザインをクラウドサービスである、「cloud.indigo.design」にアップロードすることで自動的にプロトタイプを作成します。このプロトタイプを用いて顧客から フィードバックを得ることや、ユーザビリティテストを実施し、プロジェクト関係者間で 達成すべきゴールを明確にできます。結果として画面実装時の手戻りの抑制や満足度の向上を実現できます。

ステップ3:コードジェネレーターで画面コードを生成

3-CodeGen

Visual Studio Codeエクステンションとして提供されるIndigo.Designコードジェネレーターを用いて、ステップ2で作成されたプロトタイプからデザインに忠実にHTML、CSS、Angular アプリケーションコードを生成します。ステップ1で使用するSketch UIキットは、弊社が 提供するAngular UIコンポーネントのIgnite UI for Angularにマッピングされているため、 デザインを忠実に再現することができます。

このようにデザインを起点としたアプリケーションコード生成を支援するのがIndigo.Designです。

Indigo.Designの主要コンポーネント

あらためて、Indigo.Designに含まれる主要コンポーネントは下記の通りです。

Indigo.Design Overview

  1. Indigo.Design Sketch UIキット – Indigo Design Systemに沿って作成されているSketch向け追加ライブラリー。約50種類のコンポーネントや、パターン、スタイルを提供します。Sketch UIキットは無料でトライアル期間以降も利用いただけます!
  2. Indigo.Design Cloud – Sketch UIキットや、画像をインポートし、イメージベースのプロトタイプを生成するクラウドサービス。作成したプロトタイプの共有や、ユーザビリティテストが可能になります。
  3. Indigo.Designコードジェネレーター – Visual Studio Codeの拡張機能として提供され、AngularプロジェクトにIndigo.Design Cloudで作成されたイメージベースのプロトタイプからコードを生成できます。なお、デザインからコードを生成するためには、Sketch UIキットを利用する必要があります。
  4. Ignite UI for Angular – Sketch UIキットで提供されているコンポーネントはAngular用コンポーネント、Ignite UI for Angularにマッピングされています。このコンポーネントを独自に使用し、アプリケーションを開発することも可能です。

Indigo.Designのターゲットユーザー

Indigo.Designは開発チームの様々なメンバーが恩恵を受けられると考えています。

image

  • デザイナー - Sketchという使い慣れたツールをそのまま利用できます。また、Indigo Design Systemに沿って作成されたSketch UIキットを用いて作成することで、「絵に描いた餅」にならないような画面デザインをすばやく構築できます。また、自社のブランドに合致するようにSketch UIキットを拡張することで専用の標準デザインパーツを作成することもできます。
  • UXアーキテクト – 作成されたデザインからすばやくプロトタイプを作成でき、参加人数無制限かつ、リモートから参加可能なユーザビリティテストを実施できます。また、テスト結果のレコーディングを閲覧することで実装前にUIの改善を検討することが容易になります。  
  • プロジェクト/プロダクトマネージャー - 開発の初期段階からプロトタイプを用いてプロジェクト全体のゴールを改めて明確化すると共に、開発チーム、エンドユーザーの認識を統一させることで、画面開発時の手戻りを抑制できます。また、Ignite UI for Angularは高機能グリッド、ハイパフォーマンスチャートなど、業務アプリ向けのAngularコンポーネントを提供するため、実装時の生産性を向上させるとこで、最終成果物の質の向上、全体の開発コストの低減を期待できます。
  • デベロッパー - これまで渡されたデザインの実現に多くの工数がかかってしまったり、あるいは、技術的制約により、実現そのものをあきらめてしまうという工数増大、手戻りのリスクを低減することができます。また、Visual Studio Codeというこちらも開発者が使い慣れたツールをそのまま利用できます。また、Ignite UI for Angularを利用できるため、新たな工具・武器を手に入れ、より効率的に画面実装を行えます。

Indigo.Designの今後について

別のエントリでも詳しくご紹介しますが、Indigo.Designは日々進化していきます。初期バージョンではAngularコードを生成する形になりましたが、過去のエントリでご紹介していたFlutterへの対応を現在進めています。Flutterコード生成のベータ版は2018年第三四半期(7-9月)を目標としており、さらに第四四半期(10-12月)にかけてはReactへの対応を開始することも予定しています。ご期待ください!

   IndigoProductPage

Comments

No Comments

Anonymous comments are disabled