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

デザインデータの共有を簡単にし、デザインからコードを1クリックで生成

Indigo.Designは、プロトタイピング、ユーザビリティテスト、検証ツール、コード生成といったデザインから開発までのプロセスをワンストップで行えるシステムです。プロジェクトチームでIndigo.Designをお使いいただくことで、品質を落とすことなく優れたUXデザインを効率よく設計することができます。

Indigo.Designを使ったWebデザイン制作の流れ

デザイナーとエンジニアのために開発されたデザインシステム

豊富なコンポーネントやUXパターンが用意されているIndigo Design Systemで、美しく洗練されたUIデザインを作成しましょう。SketchのUIキットも利用可能です。予め用意されているパターンを使って効率よくデザインをしたり、オリジナルのUIライブラリーを作成したあと、1クリックでAngularのコードに変換して共有できます。

  • 50種類以上のカスタマイズ可能なUIキットコンポーネント
  • UIキット、開発向けのテーマを生成
  • デザイン言語の開発チームへの共有
Design Systemを始める

プロトタイプ作成やユーザビリティテストをクラウドで迅速に

コーディング前のデザインフィードバックを効果的に反映できていますか? Indigo.Designを使うと、フィードバックを素早く何度も繰り返し反映することができます。プロトタイプに対するユーザーテストを迅速に開始でき、ユーザーがどのようにページ間を移動したかをリアルタイムまたは録画で確認したり、タスク分析レポートを確認することができます。ユーザーはさまざまなデバイスからテストに参加することができます。

  • クラウド上でプロトタイプを作成しテストが可能
  • オンラインでのユーザビリティテストで、デザインフィードバックを受けるまでの時間を短縮
  • テストは何回でも、コーディングは一回でOK
プロトタイプ作成とユーザビリティテストを始める

すぐに使えるAngularコンポーネントを生成

Design SystemでSketchを使って作成したものは全て、Angularコンポーネントに変換されます。1クリックで、デザインを損なうことなく高品質のHTML、CSS、Angularコードを生成することができます。

  • 高品質のIgnite UI for Angularコンポーネント
  • 統合開発環境(IDE)上でコードを直接生成
  • 充実した開発者へのサポートと製品ドキュメント
コード生成を始める

製品価格

Indigo.Design Essential

無料 
 
  • 1 ユーザーサブスクリプション
  • Indigo.Design Desktop
  • 無制限のプロジェクト数
  • ストーリーボード機能
  • ワイヤーフレーム機能
  • 豊富なアニメーション機能
  • 画面遷移図機能

Indigo.Design Professional

50,000円/年
(税抜き) 
  • 1 ユーザーサブスクリプション
  • Indigo.Design Desktop 
  • レビュー、コメント機能
  • 無制限のグループワークスペース
  • 共同編集機能
  • ユーザビリティ テスト機能
  • クラウド上でイメージベースの
    プロトタイピング

*請求書でのお支払いを承ります。購入について

Indigo.Design Enterprise

120,000円/年
(税抜き) 
  • 1 ユーザーサブスクリプション
  • Windows & Macアプリで
    プロトタイピング 
  • レビュー、コメント機能
  • 無制限のグループワークスペース
  • 共同編集機能
  • ユーザビリティ テスト機能
  • クラウド上でイメージベースの
    プロトタイピング
  • Sketch UIキット
  • コード生成ジェネレーター
  • Ignite UI for Angular

*請求書でのお支払いを承ります。購入について

Indigo.Design オンプレミス

1,000,000円/年
(税抜き) 
  • 1サーバーサブスクリプション
  • 10ユーザーサブスクリプション
  • Indigo.Design Professional が提供する全機能
  • 社内利用向け
  • 社内ネットワークで完結
  • LDAP 認証サポート

*請求書でのお支払いを承ります。お問い合わせ

さあ、始めましょう!

無料で開始

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

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でコードを生成する(ベースプロジェクトをダウンロード

Capture user videos and analytics

Indigo.Design Desktop

オンライン環境でだけでなくオフライン環境でも、リッチなインタラクティビティとカスタムトランジションを伴うプロトタイプを作成したい、といったご要望にはIndigo.Design Desktopがおすすめです。

クラウド上にプロトタイプをアップロードすることで、Indigo.Design同様にコメントやコラボレーション、ユーザビリティ分析ビデオといったフィードバックを受けることができます。

最新情報

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