Indigo.Design logoデザインとプロトタイプの作成、共有に「Indigo.Design」

デザインからコード生成に至るアプリ作成を加速

完全な design-to-code システムを利用して、イノベーションと製品開発をスピードアップしましょう。Indigo.Design はシステムデザインプラットフォームであり、UI プロトタイピング、デザイン機能、ユーザーテスト、アプリケーション構築、コード生成を統合し、デザインにかかる手間や、一連のプロセスで生じるコストを削減することができます。

Indigo.Design showing design to code with App Builder.

Indigo.Design Benefits and Features

Indigo.Design System showing a prototype  with usable components.

全ての作業が完結する、柔軟なデザインシステム

Indigo.Design システムがあれば、どんな作業環境からでも、マネージャー、デザイナー、ソフトウェア開発者が最高クラスの UI/UX デザインを作成できます。ステークホルダーとのコラボレーションを容易に実現し、継続的なデザインプロセスの中でプロトタイプをテストすることができます。

  • Sketchデザインの取り込み (Adobe XD や Figma は近日対応予定)
  • ビルトインコンポーネントを用いてインタラクティブなプロトタイプを構築
  • デザインパターンテンプレート
Design Systemを始める
Indigo.Design showing user testing

ユーザーテストを開発初期から頻繁に

早い段階でユーザーテストとユーザーフィードバックを得ることで、ソフトウェア開発チームによる費用のかさむ開発工程を避けることができます。ユーザーテストの詳細な分析結果を基に、ソフトウェア開発チームに引き継ぐ前に、アプリケーションのデザインが適切であることを確かめることができます。

  • 操作制限のないユーザーテストを素早く実施
  • スクリーンショットもしくは動画での、分析結果の閲覧
  • テスト利用者数の制限なし
詳細
Indigo.Design App Builder showing components being used in a working application

アプリ開発をスピードアップ

クラウドベースの WYSIWYG ドラッグアンドドロップツールで、業務アプリケーションのデザインと構築を、これまで以上に加速させましょう。ツールでデザインを行い、その場ですぐにアプリケーションの見た目を確認することができます。主要なデザインツールとの互換性があるので、IDE やサードパーティ製品をダウンロードする必要はありません。

  • 100% クラウドベースの WYSIWIG
  • 豊富なテンプレートとスターターレイアウト
  • 変更を即座に反映する、リアルタイムプレビュー
詳細
ndigo.Design App Builder showing components being used in a working application

デザイン画面から、瞬時にコード生成

Indigo Designシステムを利用することで、Sketchや他のデザインツールで作成したデザインから、シングルクリックでピクセルパーフェクトなコードを生成します。ブラウザで素早くデザインを確認できます。つまり、ツールのダウンロードやコードのコンパイルの必要もありません。クラウドベースの WYSIWYG App Builderを利用して、Angular用のクリーンで再利用可能なコードを生成しましょう。(React, Web Components, Blazorにも対応予定)

  • UI キットに収録されているコンポーネントは、実際に動作する UI コンポーネントに変換
  • HTML、CSS、TypeScript、そして C#にも変換
  • ご利用中の IDE から直接コードを生成
無料で開始

さあ始めましょう

無料で開始
UX designer using his tablet.

製品価格

Indigo.Design Essential

55,000円/年
(税込み) 
  • 無制限のプロトタイピングおよびそのクラウド共有、コメントフィードバック等
  • リモート環境でのユーザーテスト実施と解析
  • ユーザーテストのビデオ再生
  • チーム間・グループ間でのコラボレーション

Indigo.Design

154,000円/年
(税込み) 

Indigo.Design の全ての機能 :

  • Indigo Design System UI キット
  • 60以上のUIコントロールと、60種類以上のチャートを備えた Ignite UI for Angular
  • ドラッグアンドドロップで Web アプリケーションを構築できる ローコード WYSIWYGデザイナー(App Builder)の利用
  • Visual Studio Code上でコード生成を行うためのプラグイン

Indigo.Design
オンプレミス

オンプレミスでのセキュアな環境で利用可能、サーバー1台あたり1ライセンス:

  • オンプレミスのセキュアな環境でのプロトタイピングおよびその共有
  • チームや意思決定者とのコラボレーション
  • リモート環境でのユーザーテスト実施と解析
  • ドラッグアンドドロップで Web アプリケーションを構築できる ローコード WYSIWYGデザイナー(App Builder)の利用
  • Visual Studio Code 上で コード生成を行うためのプラグイン

Indigo.Design Embed

WYSIWYGデザイナーをアプリケーション内部に組み込むことでローコード・ノーコードソリューションを容易に実現:

  • ドラッグアンドドロップでWebアプリケーションを構築できるローコードWYSIWYGデザイナーをアプリへ組み込み可能に
  • App Builderのツールボックス、データソース、テーマ、プロパティエディタ対応のAPIを提供
  • Visual Studio Code上でコード生成を行うためのプラグイン

アプリケーションサンプル

Indigo.Designを用いて作成されたリファレンスアプリケーションをご覧いただけます。 また、それぞれのSketchファイルや、最終成果物であるAngularプロジェクトをダウンロードいただけます。

予算管理

予算管理アプリは、組織の予算を管理し、収支を記録するAngularのサンプル財務アプリです。

People App(アドレス帳)

Peopleアプリは、リスト表示、詳細表示、項目編集といったデモンストレーションが含まれるAngularのサンプルアプリです。

ビデオチュートリアル

Indigo.Designの概要から、インストール方法、デザイン、プロトタイピング、コード生成の方法を詳しく解説する日本語ビデオチュートリアルをご用意いたしております。

Indigo.Designの概要  

Indigo.Designの概要

Sketch UIキットのインストール 

Sketch UIキットをインストールする

Sketchで最初のアートボードを作成 

Sketchで最初のアートボードを作成する

アートボードのアライメントとサイズの調整 

アートボードのアライメントとサイズを調整する

プロトタイピングを開始 

プロトタイピングを始める(Sketchファイルをダウンロード

Visual Studio Codeでコード生成 

Visual Studio Codeでコードを生成する(ベースプロジェクトをダウンロード

最新情報

よくあるご質問(FAQ)

Questions and Answers for Indigo Design

”Design to Code”とは何ですか?

”Design to Code” は、デザインチームと開発チームを含むプロダクトチームが、開発現場で実際に利用可能なコンポーネントに支えられた UI コンポーネント・UI パターン・スタイリングオプションを含むデザインシステムを使う場合のプロセスです。 チームにとっては、このデザインシステムを前提としてデザイン可能なものは全てコードとして生成可能となります。 デザインのコード化とコードジェネレーター(変換プロセス)の重要な差別化ポイントは、Design to Code における出力コードがクリーンかつ使えるもので、カスタマイズ可能であることです。 皆さんの会社のトップ開発者の方であっても、実際に手動で開発した場合に比べても同等に高品質であるとして受け入れられるものです。

デザインチームと開発チームが同期してこのプロセスを利用する時、プロダクトのデリバリーが高速化されます。 Indigo.Design による Design to Code における真のベネフィットは大幅な時間の節約です。デザインチームが Indigo.Design のデザインシステムを利用して Sketch で作った全てのものが Ignite UI に対応しています。ボタンを押すだけで開発チームはUXチームがデザインした通りの高品質な HTML/CSS/Angular コードを入手することができます。

Design to Code Systemとは何ですか?

Design to Code System は、デザインを使用可能なコードに変換するプロセスを促進する一連のツールとベストプラクティスにより、チームや組織がアプリ作成を効率化するのに役立ちます。歴史的に、製品開発チームとデザインチームは単独で作業を行い、デザインと開発の間にはコラボレーションのギャップがあり、イノベーションを遅らせていました。Deign to Code System を使えば、チームはシームレスなコラボレーションを実現し、デザインの主導による受け渡しをなくし、コストのかかる反復作業を減らし、真の UX デザインと開発のコラボレーションを可能にします。

信頼性の高い、使い勝手の良い Design to Code System の基礎は、UX デザイナーと開発者のために1つのデザインシステムを確保することです。合意されたコーポレートデザインシステムと、実際のコンポーネントライブラリをベースにした再利用可能な UI キットがあれば、Design to Code System でデザインされたものはすべて、使用可能なコード出力にすることができます。

Design to Codeがビジネスに適したソリューションである理由とは?

今日の競争の激しい市場では、市場投入までの時間を短縮し、コストを削減するために、あらゆる利用可能な全ての方法を考慮することが重要です。Design to Codeシステムは、コスト削減と時間短縮の両方を実現します。デザインチームが Sketch のようなお気に入りのデザインツールを使ってベスト・プラクティスの反復的なデザインを行うことができれば、Indigo.Design のクラウド・デジタルプロダクトデザイン・プラットフォームは、マークアップ、スタイリング、ユーザーテスト、ユーザビリティスタディ(リモートでの自律的なテスト)を大規模に行うことができ、最終的にデザインからピクセル・パーフェクトなコード出力を得ることができます。このようなツールを使ってチームをサポートすれば、競合他社よりも優位に立つことができるでしょう。

歴史的に見ても、デザインチームと開発チームの間で行われるデザインの手動による受け渡しは、ソフトウェア開発における最大の隠れたコストのひとつです。調査によると、開発時間のうち60%はユーザー・インターフェースに費やされていますが、承認されたデザインからバグのない正しいコードを得るためのツールは限られています。Indigo.Design は、デザインからコードまでのソリューションを提供することで、このコストを増加させるUXバグという形でのスローダウンやミスを排除します。

反復設計段階で修正されたUXバグであれば修正/変更に1ドルで済む場合でも、市場に投入された同じバグの修正には100ドルかかることもあります。これらはほんの一例であり、低品質なデザインやUXのバグを放置することによる実際のコストを理解するには、このコストを2〜3桁増やして考えるが妥当だといえるでしょう。

さらに良いことに、Design to Code システムでは、デザインから開発へのハンドオフにより、ピクセルパーフェクトな HTML、CSS、TypeScript が生成され、開発チームはそれらを使用して、UI/UXバグのない高品質なアプリケーションを構築することができます。

Indigo.Designとは何ですか?

Indigo.Design は、チームが Design to Code を加速するためのデジタル製品設計プラットフォームです。Indigo.Design は、4つの主要な柱を持っています

  1. Indigo.Design は、プロトタイピング・ツールです。
  2. Indigo.Design は、ユーザーテストツールです。
  3. Indigo.Design は、Design to Code ツールです。
  4. Indigo.Design は、WYSIWYG アプリケーションビルダーです。

Indigo.Design は、チームがより高品質なソフトウェアをこれまで以上に迅速に提供することを支援するために開発されました。Indigo.Design は、設計チームから開発チームへの高いコストと時間のかかるハンドオフを削減します。デザインが Indigo.Design クラウドにアップロードされると、チームはプロトタイプの反復作業、ステークホルダーとのコラボレーション、マークアップやスタイリングの取得、無制限のリモートユーザーテストの実施、そして最終的にはデザインからピクセルパーフェクトなコードを生成することができます。

インディゴ・デザインでは、4つの柱のうちのどの部分でもアプリケーションを使用することができ、機能は互いにシームレスに、または独立して動作するように設計されています。

  • デザインチームであれば、プロトタイピングやユーザーテストの機能を利用することができます。
  • 開発チームで、Sketchデザインからピクセルパーフェクトなコードを取得したい場合は、Visual Studio Code プラグインを使用して HTML、TypeScript、CSS を Angular アプリで直接取得する方法を選択できます。

Indigo.Design は、デジタルプロダクトデザインプラットフォームとしての完全なソリューションであり、ソフトウェア開発プロセスにおいてこれらの全ての機能を使用することにより大幅なコスト削減と市場投入までの時間短縮、そして何よりも確実な成果を実現します。

Indigo Design の最新バージョンとはどのようなものですか?

Indigo.Design は、常に最新の状態でご利用いただけるSaaS型製品です。 https://cloud.indigo.design、Indigo.Design クラウドにログインすると、常に最新バージョンの製品をご利用いただけます。Indigo.Design の最新版にでは、Ignite UI for Angular ツールセットに含まれる弊社Angularコンポーネントの最新版と、Indigo.Design デザインシステムに含まれるSketch UIキットの最新版が含まれます。

Sketch UI キットとは何ですか?

Sketch UI キットとは、UIコンポーネントやUIパターン、さらには画面全体を含むライブラリ(ステッカーのようなもの)の集合体です。Indigo.Design の Sketch 用UIキットでは、3つのライブラリを提供することで、「Atomic Design」のアプローチをとっています。

  • スタイリングライブラリには、カラー、シャドウ、タイポグラフィスタイル、アイコングリフなどのサブアトミックなパーツがあり、コンポーネントライブラリにあるより小さな要素の外観を定義します。
  • コンポーネントライブラリは、チャートやグリッドなどのフル機能を持つコンポーネントを表すアトムのコレクションです。
  • Patternsライブラリは、ログインフォーム、ユーザープロファイル、詳細ページなど、より上位のコンポーネントのコレクションです

Sketch UI キットを使用することで、デザインチームは企業内のあらゆるアプリに対して、一貫性のあるブランド化されたデジタル体験を構築することができます。Indigo.Design では、Sketch UI キットを Angular UI コンポーネントと組み合わせることで、Design to Code System を実現し、製品の提供を大幅に加速することができます。

Sketch to Codeとは何ですか?

グローバルマーケットをリードするデジタルプロダクトデザインプラットフォームであるIndigo.Design では、無制限のスクリーンと無制限のインタラクションを持つ完全なスケッチプロトタイプをアップロードし、それを実際に動作する Angular コードに変えることができます。

Sketch to Code では、Sketch のようなお気に入りのデザインツールを使って完全な反復的デザインプロセスを実施し、そのデザインを開発チームに渡して、Sketch のデザインからコードを生成することができます。Sketch to Code への移行のメリットは、ツールを使って行うことができる画面設計の反復的作業を開発チームに任せることで、大幅な時間短縮とコスト削減が可能になることです。また、Sketch デザインと Visual Studio Code の間に位置するクラウドプラットフォームとして Indigo.Design を利用することで、インタラクティブなプロトタイプの作成や、プロトタイプ上でのユーザーテストやユーザビリティスタディの作成が可能となり、それらを無制限のユーザーと共有することで、即座にフィードバックを得ることができるようになります。

Indigo.Design では、Sketch デザインをコード化することができますか?

Indigo.Design は、Sketch ファイルのコード化に対応しています。これは、Sketch プロトタイプを Indigo.Design クラウドにアップロードまたは同期させることで可能となります。Sketch ファイルが Indigo.Design クラウドにアップロードされると、開発チームは Visual Studio Code プラグインを使用して、個々のコンポーネント、全画面、またはアプリケーション全体を選択し、実際の HTML コード、TypeScript、CSS を生成することができます。文字通り、Sketch からコードまでを3つの簡単なステップで行うことができます。

Sketch to code を使えば、時間とコストを大幅に削減できます。さらに言えば、Sketch デザインから直接ピクセルパーフェクトなアプリ画面を作成することで、市場投入までの時間を競合他社よりも短縮することができます。

Indigo.Design はユーザーテストツールですか?

Indigo.Design は、包括的なユーザーテストツールです。 Indigo.Design では、イメージベースのプロトタイプや Sketch デザインを Indigo.Design クラウドにアップロードし、ユーザーテストやユーザビリティスタディを作成することができます。Indigo.Design では、ポイント&クリックの簡単な操作で、ユーザーテストを実施することができます。

Indigo.Design のユーザーテストでは、ユーザーテストを実施するためにコードやスクリプトを書く必要はなく、高度な知識も必要ありません。Indigo.Design のユーザーテストは、PowerPoint のスライドを作成するのと同じくらい簡単です。 プロダクトマネージャーや開発者の方が、数枚のスクリーンショットを使って素早くユーザーテストを行いたい場合、Indigo.Design クラウドにスクリーンショットをアップロードし、ホットスポット・プロトタイピング・ツールでプロトタイプを作成し、ワンクリックでユーザーテストを行うことができます。

私たちが目指したのは、どんなスキルを持った人でも、簡単にユーザーテストを行えるようにすることです。高度な学位を持つ UX リサーチャーでなくても、Indigo.Design を使えば、洗練された詳細なユーザーテストを作成し、ユーザーテスト結果のレポートをリアルタイムに分析することができます。

Indigo.Design でリモートユーザーテストを行うことはできますか?

Indigo.Design は、あらゆるタイプのアプリケーションやデザインを対象としたユーザーテストや、ユーザーによる自律的なリモートユーザーテストを含む、包括的なクラウドプラットフォームです。完全な Sketch プロトタイプや画像(アプリケーションのスクリーンショット)をアップロードし、Indigo.Design のホットスポット・プロトタイピング・ツールを使って、ユーザーテストやユーザビリティ・スタディの基礎となるインタラクティブ・プロトタイプを作成することができます。このユーザーテストには、UX のフィードバックを得るための質問をいくつでも含めることができます。ユーザーテストの作成は、Indigo.Design のポイント&クリックレコーダーで簡単に行うことができます。そして、そのユーザーテストをテスターと共有するには、テスターのメールアドレスを入力するか、ハイパーリンクをメールで送信します。

特に COVID-19 のある現状におけるユーザーによる自律的なリモートユーザーテストの利点は、ユーザーと直接顔を合わせる必要がないことです。非常に迅速に結果を得ることができ、ユーザーテストレポートの分析で得られたリアルタイムのデータを使って、デザインを非常に迅速に繰り返し変更することができます。テスターの数に制限はなく、プロトタイプごとの質問の数にも制限はありません。コードを書き始める前に、プロトタイプを改善するための必要な結果を得るために、ユーザーテストを無制限のユーザーに送り、無制限の数の質問をすることができます。

 

製品の詳細やライセンスについてのご質問、お見積りについてはお問い合わせフォームより承っております