昨今ではさまざまなプロトタイピングツールが出回っていますが、それぞれ想定されている開発段階や状況によって少しずつ違いがあり、使い分ける必要があります。
今回取り上げる「Indigo.Design」はプロトタイプから開発への移行をスムーズにすることをコンセプトに開発されているプロトタイピングツールです。この記事ではそのコンセプトを実現するために、どのような特徴があるのかをハンズオンで試していきます。
Indigo.Designとは
Indigo.Designは、UIデザインやプロトタイピング、ユーザーテストができ、さらに作ったプロトタイプからコードを生成することができるアプリケーションデザインプラットフォームです。 開発プロセスにおけるデザイナーと開発者のスムーズな制作フローに重きを置いたプロダクトです。
デザインと開発の制作フローをスムーズにする
Indigo.Designには以下のような特徴があります。
- コード化前提で作られ、Sketchでも読み込めるデザインシステム
- Sketchで作った画面をオンラインでプロトタイプ化・テストができる
- タスクベースのリモートユーザビリティテストができる
- 作ったプロトタイプからそのままコードが生成できる
開発元のインフラジスティックスのJason Beres氏は以前当サイトのインタビューでIndigo.Designについてこう語っています。
（開発の）背景には、デザインと開発のプロセスにおける断絶に対する問題意識があります。
デザインから開発までのプロセスにはさまざまな役割の人が存在していて、それぞれが使っているツールはバラバラです。たとえば、デザイナーがPhotoshopやSketchでビジュアルデザインを作って、開発者はそのビジュアルデザインを自分でどうにか分解してコードにするというプロセスですね。そこでよくある問題は、デザインからコードへ変換する部分でズレが生まれてしまうというものです。
こうしたデザインと開発の断絶をブリッジして、ビジュアルデザイナーやUXデザイナー、開発者をつなげるプラットフォームがIndigo.Designです。
デザインと開発を繋ぐデザインプラットフォーム「Indigo.Design」がリリース
https://uxmilk.jp/74220
今回は実際に編集部でSketchからユーザビリティテストまでの流れをハンズオンで試してみました。
Indigo.Designを触ってみた
1. SketchでUIライブラリを読み込む
Indigo.Designにログインすると、デザインシステムなどのアセットがダウンロードできます。他のプロトタイピングツールと違い、多くのデザイナーが使っているSketchを用いてのフローを想定している点が特徴的です。
Indigo.DesignのマテリアルデザインベースのUIライブラリは無償で提供されています。さっそくライブラリをSketchに取り込んでみます。
ライブラリを連携すると、Sketch上でさまざまなUIが設置できるようになります。
特筆すべき点はこれらのUIがすべてコード（現時点ではAngular）で書き出せる形で作られているという点です。
コード化できることを前提としたパーツを使ってデザインすれば、デザイン側も当然ながら技術的な制約内でデザインをすることになります。デザインから開発まで考慮されたデザインシステムとして機能するでしょう。
2. Sketchで作った画面をIndigo.Design上でプロトタイプ化
Sketchで画面を作ったあとはIndigo.Designのクラウドにアップロードしてプロトタイプにします。最近はSketchでも画面遷移を作れるようになりましたが、この後のユーザビリティテストのためにIndigo.Design上でフローを作ります。
今回は簡単なタスク管理アプリをSketchで作成しました。ログイン画面、タスクのリスト画面、そしてタスクの登録画面の３画面で構成されています。
SketchのファイルをIndigo.Designにアップロードすると、Sketchで作った画面が読み込まれ、フローとそれに付随するインタラクションやトランジションが設定できます。従来のプロトタイピングツールでもおなじみの作業ですが、未経験でも直感的にできるようなインターフェースです。
プロトタイプを公開するとURLが生成され、外部の方にシェアできるようになります。
3. プロトタイプでユーザビリティテストを設定する
プロトタイプが完成すると、ユーザビリティテストが設定できるようになります。Indigo.Designのユーザビリティテストではタスクを作成し、そのタスクがきちんと処理されたかを追うことができます。
テスト参加者側にはタスクに関する指示が表示され、画面の案内に従う形でテストが行えます。
今回の場合はタスク管理アプリなので、「タスクリストからハンズオンデモの期日を確認する」というタスクを設定してみました。テストを行う参加者が、想定されたフローに沿って操作できるかを観察できるように設定します。
タスクを作ったら、そのタスクで実際に行ってほしいフローを登録します。
今回の場合だと、以下のようなフローを記録させていきます。
①ログイン画面でログインを押下
②タスク画面の該当するタスクを押下
③タスク詳細画面に遷移
これを保存すれば、実際のテスト画面は下記のような形で表示されます。
ユーザーがテストしたのち、ダッシュボードではそのタスクに関するデータが表示されます。
インタラクションの痕跡を示す画面もあり、リモートのユーザビリティテストが捗ります。
4. コードへと書き出す
ここでテストを終えたプロトタイプは、コードとして書き出して開発者へ渡すことができます。Indigo.Designでは現時点ではAngularへの書き出しに対応しています。
今回のハンズオンではテストまでをスコープとしていたので割愛しますが、コードジェネレーターに関しては前述のJason Beres氏とのインタビューで詳しく触れています。
まとめ
プロトタイピングツールはデザイナー側の利便性が重視されがちで、結局は開発側がデザイナーの都合に合わせることが多くあります。ですが、Indigo.Designはよりデザインと開発の中間に位置し、中立な立場で制作現場をサポートするツールだと感じました。
また、コード生成を行う前提でなければ、あらかじめ提供されているSketch UIキット以外で作成されたデザインや、既存の画像アセットからもプロトタイプの作成と、ユーザビリティテストを実施できるため、デザイナーが携わるプロジェクトの状況に応じて利用範囲を変更することもできます。
プロトタイピングからユーザビリティテストなども基本はデザイナーの職務範囲にはなるとは思うのですが、Indigo.Designのリモートユーザビリティテストの仕組みなどは普段テストしなれていない開発側の方でも取り組みやすいのではないでしょうか。
まさにデザインと開発をブリッジするデザインコラボレーションツールとして、今後も注目したいツールです。興味のある方は下記トライアルからぜひ試してみてください。
・・・
提供：インフラジスティックス・ジャパン株式会社
企画制作：UX MILK編集部
