デザイナーであれば、ビジュアルデザインを元に開発をしてもらったが、デザイン通りになっていないという経験をほとんどの方がしているのではないでしょうか。
今回、そうしたデザインと開発における問題を解決するアプリケーションデザインプラットフォーム「Indigo.Design」がリリースされると聞き、開発元のInfragistics, Inc.のJason Beres氏にインタビューをしてきました。
＊本記事は、英語インタビューの内容を翻訳したものです。
登場人物
Jason Beres / Infragistics, Inc. Senior Vice President
デザイナーと開発者を橋渡しするIndigo.Design
── 今回、新しくIndigo.Designというサービスをリリースするとのことですが、まずは簡単にサービス紹介をお願いします。
Indigo.Designは、デスクトップ・Web・モバイルソリューションのデザインと開発を加速させるUXおよびUIツールです。
以前は、プロトタイピングツール「Indigo Studio」と連携するクラウドサービス「indigodesigned.com」として提供していたのですが、リブランドして機能も強化してリリースすることになりました。また、Indigo Studioもその名称をIndigo.Design Desktopに変更しています。
── 新しいIndigo.Designは、以前のクラウドサービスとどのような点で違うのですか？
Indigo.Designは、弊社の戦略ビジョンである「Faster Paths to Amazing Experiences.」にも表れているように、デザイナーと開発者がより良い体験を素早く作るための道筋を作ることにフォーカスしています。
その背景には、デザインと開発のプロセスにおける断絶に対する問題意識があります。
デザインから開発までのプロセスにはさまざまな役割の人が存在していて、それぞれが使っているツールはバラバラです。たとえば、デザイナーがPhotoshopやSketchでビジュアルデザインを作って、開発者はそのビジュアルデザインを自分でどうにか分解してコードにするというプロセスですね。そこでよくある問題は、デザインからコードへ変換する部分でズレが生まれてしまうというものです。
こうしたデザインと開発の断絶をブリッジして、ビジュアルデザイナーやUXデザイナー、開発者をつなげるプラットフォームがIndigo.Designです。
── 具体的にどのような形でデザインと開発のプロセスをブリッジするのですか？
Indigo.Designには、デザイナー向けの「Indigo.Design Sketch UIキット」と「Indigo.Design Cloud」、エンジニア向けの「Indigo.Designコードジェネレーター」と「Ignite UI for Angular」という４つの主要コンポーネントがあります。
それぞれ、以下のような特徴があります。
Sketch UIキット：Sketchのプラグインとして提供するマテリアルデザインベースのUIキットです。
Cloud：ファイル共有やユーザビリティテストができるクラウドサービスです。さらに、Sketchからインポートしたイメージを元にクラウド上でプロトタイプを作成するイメージベースドプロトタイピングという機能もあります。
コードジェネレーター：Visual Studio Codeのエクステンションとして提供するコードジェネレーターです。これは、Indigo.Designクラウド上にあるプロトタイプからAngularのコードを自動生成できる機能です。
Ignite UI for Angular：以前から提供していたエンタープライズ向けのUIコントロールです。さまざまな用途向けのUIをAngularで実装したパッケージです。
── Indigo.Designは独自ツールを提供するのではなく、SketchとVisual Studio Codeを拡張する形で提供するのですね。
皆さんのお気に入りのツールをそのまま使っていただきつつ、全体のエコシステムにしっかり貢献ができるようなプラットフォームを作るために、このような形で提供することにしました。
いままで多くのツールベンダーが、デザイナーも開発者も使う１つの統合されたツールを作ろうとしてきたのですが、ユーザーにあまり受け入れられませんでした。１つのツールにするということは、デザイナーに開発について学ぶことを強制するのと同じなので、私たちは別のアプローチをとりました。
Indigo.Designの最初のバージョンでは、使っている方が多いSketchとVisual Studio Codeのサポートしています。
Indigo.Designの使い方
デザインとプロトタイピング
── 次に、Indigo.Designの使い方について聞きたいと思います。まず、Sketch UIキットとIndigo.Designクラウドはどのように使うことを想定していますか？
Indigo.DesignのSketch UIキットでは、よく使うUIコンポーネントやUIパターンを50個以上用意しています。ログイン画面のように多くのサービスで必要となる画面が用意されているので、これを活用することでデザイナーの時間を節約することができます。
特徴としては、このUIキットを使ってデザインしたものであれば、Angularのコードとして生成できることが保証されている点が挙げられます。
また、マテリアルデザインをベースとしたデザインシステムとその詳細なドキュメントをオンライン提供します。このドキュメントを見ればすぐにプロダクトを作り始められるようになっています。もちろん、全ページが日本語に翻訳されています。
Sketch UIキットを使用し作成されたデザイン
── このSketchのUIコンポーネントはカスタマイズできるのですか？
自社のブランドに合わせて個々のパーツの配色やサイズなどを変更することができます。
また、Indigo.Designクラウドのイメージベースドプロトタイピングという新しい機能では、Sketchからインポートしたデザインに画面遷移やアニメーションを設定し、プロトタイプを作成できます。
作ったプロトタイプは、クラウド上でレビューやフィードバックすることができます。さらに、Indigo.Designクラウドのユーザビリティテスト機能を使ったテストをオンライン上で行い、ユーザーの操作をレコーディングすることもできます。
クラウド上でプロトタイプを作成可能
Angularコードジェネレーター
── Indigo.Designコードジェネレーターはどのように使うのですか？
ビジュアルデザインがある程度完成した段階で、Visual Studio Codeを使った開発プロセスに入ります。Indigo.Designコードジェネレーターというエクステンションを使い、Indigo.Designクラウド上にあるプロトタイプからコードを自動生成することができます。
ここからは、「People」アプリというサンプルを元に説明します。プロトタイプの中から必要なページだけを選んでコードを生成できるので、ここではPeopleListとPeopleDetailsを選び「コード アセットの作成」を選択をします。
そうすると、HTMLとCSSがすぐに使える形で生成され、Angularのデータプロパティも設定していたものについてはコードになっています。ただ、日付データのフォーマットや条件分岐などはあらかじめ設定できないので開発者が修正をする必要があります。
Indigo.Design Sketch UIキットを使わずに作った要素など一部コードジェネレーターが対応できない部分もありますが、改善を重ねて可能な限り対応できる範囲を増やしていく予定です。
── 若干の手直しを加えるだけで良いというのは、開発の時間短縮に役立ちそうですね。
Indigo.Designでは、できるだけ書くコードを少なくして、より良い体験を作れることにフォーカスしているので、場合にもよりますが数時間〜数週間程度の時間節約ができると思います。
また、デザイナーが作ったものをベースにHTMLとCSSが生成されるので、ビジュアルデザイン上のズレがなくなるというのは大きいと思います。これによって、手戻りの時間もなくなるのは大きなメリットです。
コードになることが保証されたデザインというのは、Indigo.Designが重視しているポイントでもあります。デザイナーが開発上の制約を知ることを強いるのではなく、Indigo.Designというツール自体がルールになるのが大事だと思います。
── デザインのズレがなくなるのは、デザイナーとしても嬉しいポイントですね。生成されたコードは本開発に使えるのでしょうか？
はい、そのまま本開発で利用できます。ライセンスも商用利用可能となっているので、その点は安心してお使いいただきたいです。
FlutterとReactへの対応も予定
── Indigo.Designの今後のロードマップがあれば教えてもらえますか。
小さなアップデートとしては、継続的にUIコンポーネントやUIパターンを追加していく予定です。また、Sketch UIキットやクラウドなどの各機能においてもアップデートが予定されています。
Indigo.Designクラウドでは、イメージベースプロトタイピングを拡張したスクリーンデザイナーという新機能が追加されます。スクリーンデザイナーは、Sketchを使わずにクラウドでデザインを行うことができ、作ったデザインはすべてコードとして生成できるようになります。
Visual Studio Codeジェネレーターでは、UIの改善やCLIで使えるようにしていきます。さらに、リリース当初に対応しているのはAngularだけですが、今後FlutterやReactへの対応も予定されています。
Sketch UIキットは無料で利用可能
── 最後に、Indigo.Designのアピールはありますか？
おそらく、読んでいただいた方の中にはSketch UIキットだけ使いたい方もいると思います。そういう方は、無料でSketch UIキットだけ使うこともできます。
まず、無料で14日間利用可能なIndigo.Design Enterpriseのトライアル版にサインアップし、そこから案内される手順に従って、Sketch UI キットをダウンロードできます。このSketch UIキットは、トライアル期間の終了後も商用利用可能な形で継続的に利用いただけます。
Indigo.DesignのデザインシステムはSketch ライブラリーに加えて詳細なドキュメントが提供される
── Indigo.Designを使わなくても、マテリアルデザインのUIキットとして利用できるということですよね。なぜ、無料にしたのですか？
Sketch UIキットを無料で皆さんに使っていただくことによって、私たちの製品が広がることを期待しています。
また無料にすればSketch UIキットを使ってデザインを作り、それを公開する方も出てくると思います。そうすると、Indigo.Designでコードにできるデザインが世の中にあふれることになり、自然とIndigo.Designを使う方も増えると考えています。
── Indigo.Designによってデザインのエコシステムを作るということですね。
Indigo.Designも一度触ってもらえれば、良さを理解してもらえると思うのでぜひ試していただきたいです。Sketch UIキットでデザインを作り、クラウドでプロトタイピングを作って、ユーザビリティスタディを行うという一連の流れを体験していただけると嬉しいです。
── 興味を持った方は、トライアルをダウンロードしてみると良さそうですね。本日はありがとうございました。
・・・
提供：インフラジスティックス・ジャパン株式会社
企画制作：UX MILK編集部
