Logo for Indigo.Design application for prototyping

Indigo.Design App Builderで、アプリケーションのデザインから開発までを高速化

Indigo.Design App Builderは、デザインからコード生成までをワンストップで行える、プロダクトデザインプラットフォーム「Indigo.Design」の新機能です。ドラッグ&ドロップできるクラウド型ビジュアルエディタとコード生成機能で、業務アプリケーション開発チームの作業を効率化します。

アプリのデザイン、テスト、開発プロセスを加速

Indigo.Design App Builderはチームの生産性向上を支援します。Adobe XDやSketch、Figmaといった一般的に利用されるデザインツールとの互換性、豊富なUIコントロールやテーマ、標準ベースのコード出力機能を備えたデザインシステム Indigo.Design App Builderで、思いのままにアプリケーションを構築しましょう。

アプリケーションのリリースを加速

Indigo.Designを使用して、チーム全体で1つのプラットフォームを共有して作業を進めることができます。マネージャー、デザイナー、開発者がそれぞれ別のツールを使ってデザイン作業を進めるのは効率的ではありません。同じプラットフォームで情報を共有してプロジェクトを進めることで、チーム内での認識のずれやコミュニケーションの行き違いから発生するミスや手戻りを減らすことができます。

Accelerate App Delivery

すぐに使えるテンプレートとスターターレイアウト

アプリテンプレートや予め用意されているプリセットレイアウトを使用して、すぐにアプリ構築を始めることができます。デザインを微調整したり、テーマを変更するだけで完了です。

Complete Templates and Starter Layouts

100%クラウド型のビジュアルエディタ

何かをダウンロードする必要もなければ、重い統合開発環境(IDE)も不要です。サードパーティの依存関係もありません。全ての機能をWeb上でお使い頂けますので、さまざまなプラットフォームからアクセスすることが可能です。

100% Cloud-Based WYSIWYG

リアルタイムに表示されるインスタントプレビュー

デザインをしながら、実行中のアプリとライブソースコードをリアルタイムで確認できます。 インタラクションや見え方を確認する等、アプリエクスペリエンスをリアルタイムに体験することができます。

Instant Real-Time Preview

デザイナーにも開発者にも。App Builderの特長

App Builder featuring code preview and Visual Studio code

ソースコードの生成

デザインしたものは、Angularでの開発用にHTML、TypeScript、CSSで出力することができます。2021年にはReact、Web Components、Blazorなどにも対応予定です。ソースコードはデザイン作成中にリアルタイムで確認したり、ZIPファイルでまとめてダウンロードすることができます。

App Builder featuring rich layout system

作業にかかる時間の削減

App Builderに備わっている豊富なレイアウトシステムとコンポーネントツールボックスを使用することで、画面やアプリを数時間ではなく数分で作成できます。時間のかかる単純な繰り返し作業から解放され、重要な作業に集中することができます。

App Builder featuring themes and styling

豊富なテーマとスタイリング

予め用意されているテーマやタイポグラフィー(マテリアル、Bootstrap、Fluent)を使用したり、アプリのテーマやコーポレートブランディングに合うようにコントロール、画面、アプリごとにカスタマイズすることができます。

App Builder featuring the ability to import Sketch, Adobe XD and Figma designs

Sketch、Adobe XD、Figmaからデザインをインポート

ワンクリックで、インポートした静的なデザインから実際のUIコンポーネントとスタイリングを備えたインタラクティブでレスポンシブなアプリを起こすことができます。

App Builder featuring the ability to iterate on your app design before code

デザインイテレーションで効率的にアプリを開発

Indigo.Designの機能を使用してプロトタイピング、チームコラボレーション、ユーザーテスト、分析などのサイクルを効率よく回してアプリをデザインすることができます。 コーディングを始める前にピクセルパーフェクトにしましょう!

まずは無料でトライアル!

App Builderを試してみる
UX designer using his tablet.

現在のプレビュー版で提供されている機能

  • ビジュアルエディタを使用したアプリデザイン
  • テーマとタイポグラフィー(マテリアル、Bootstrap、Fluent)、カスタムテーマ
  • プロパティ編集が可能なUIコントロールライブラリ
  • データバインディングを備えたリピーターコントロール
  • Relative、Absolute、Fixed、Sticky positionが指定可能なレイアウト
  • Angularでの開発用のソースダウンロード
  • アプリ、コードのインスタントプレビュー
  • サンプルアプリやスターターライブラリ

今後リリースを予定している機能

  • ツールボックスへのUIコントロールの追加
  • コンポーネントのプロパティ拡充
  • カスタムコンポーネント対応
  • Excel、JSONデータソース対応
  • Adobe XD、Sketch、Figmaからのインポート
  • React、Web Componentsコード生成
  • チームデザインの同時実行
  • サンプルとスターターレイアウトの追加
  • カスタムレイアウトテンプレート
  • etc.

学習リソース

Indigo.Design App Builderを使用してUX開発を始めるためのリソースをご用意しました。

Indigo.Designのビデオチュートリアルを見る
 Get Started with App Builder

App Builderを使ってみましょう(英語)

 create app layouts

アプリのレイアウトを作成する(英語)

 Using Indigo.Design components

Indigo.Designのコンポーネントを使用する(英語)

 Customize Indigo.Design app themes

アプリのテーマをカスタマイズする(英語)

 Single-Page Apps and Navigation

シングルページアプリケーションでナビゲーションを設定する(英語)

 Preview and Generate App Code

コードのプレビューと生成について(英語)