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を使用して、チーム全体で１つのプラットフォームを共有して作業を進めることができます。マネージャー、デザイナー、開発者がそれぞれ別のツールを使ってデザイン作業を進めるのは効率的ではありません。同じプラットフォームで情報を共有してプロジェクトを進めることで、チーム内での認識のずれやコミュニケーションの行き違いから発生するミスや手戻りを減らすことができます。
すぐに使えるテンプレートとスターターレイアウト
アプリテンプレートや予め用意されているプリセットレイアウトを使用して、すぐにアプリ構築を始めることができます。デザインを微調整したり、テーマを変更するだけで完了です。
100%クラウド型のビジュアルエディタ
何かをダウンロードする必要もなければ、重い統合開発環境（IDE）も不要です。サードパーティソリューションへの依存関係もありません。全ての機能をWeb上でお使い頂けますので、さまざまなプラットフォームからアクセスすることが可能です。
リアルタイムに表示されるインスタントプレビュー
デザインをしながら、実行中のアプリとライブソースコードをリアルタイムで確認できます。 インタラクションや見え方を確認する等、アプリエクスペリエンスをリアルタイムに体験することができます。
デザイナーにも開発者にも。App Builderの特長
ソースコードの生成
デザインしたものは、Angularでの開発用にHTML、TypeScript、CSSで出力することができます。2021年にはReact、Web Components、Blazorなどにも対応予定です。ソースコードはデザイン作成中にリアルタイムで確認したり、ZIPファイルでまとめてダウンロードすることができます。
作業にかかる時間の削減
App Builderに備わっている豊富なレイアウトシステムとコンポーネントツールボックスを使用することで、画面やアプリを数時間ではなく数分で作成できます。時間のかかる単純な繰り返し作業から解放され、重要な作業に集中することができます。
豊富なテーマとスタイリング
予め用意されているテーマやタイポグラフィー（マテリアル、Bootstrap、Fluent）を使用したり、アプリのテーマやコーポレートブランディングに合うようにコントロール、画面、アプリごとにカスタマイズすることができます。
Sketch、Adobe XD、Figmaからデザインをインポート
ワンクリックで、インポートした静的なデザインから実際のUIコンポーネントとスタイリングを備えたインタラクティブでレスポンシブなアプリを起こすことができます。Adobe XDやFigmaは近日対応予定です。
リアルデータへのバインド
アプリケーションをデザインする際に、空のグリッドや空の入力フィールドといった画面パーツに妥協する必要はありません。REST データソースに接続し、アプリケーションのデザインをより意味のあるものにしましょう！
デザインイテレーションで効率的にアプリを開発
Indigo.Designの機能を使用してプロトタイピング、チームコラボレーション、ユーザーテスト、分析などのサイクルを効率よく回してアプリをデザインすることができます。 コーディングを始める前にピクセルパーフェクトにしましょう！
学習リソース
Indigo.Design App Builderを使用してUX開発を始めるためのリソースをご用意しました。
注：動画は英語ですが、日本語の字幕が設定できます。日本語字幕設定方法はこちら
App Builderを使ってみましょう（英語）
アプリのレイアウトを作成する（英語）
Indigo.Designのコンポーネントを使用する（英語）
アプリのテーマをカスタマイズする（英語）
シングルページアプリケーションでナビゲーションを設定する（英語）
コードのプレビューと生成について（英語）
よくあるご質問（FAQ）
FAQ
App Builderとは何ですか?
App BuilderはWYSIWYG（見たままを得られる）ツールであり、用意されているUIコンポーネントセットをツールボックスからデザイン画面にドラッグアンドドロップでき、どのようなUIデザイン設計においても利用いただけます。 App Builderを使用すると、アプリケーションのUIデザインについて手作業でマークアップのコーディングする必要はありません。さらにApp Builderは、使いやすい高品質なコードを生成することができます。 結果的に、開発チームがアプリケーションのUI開発において手動でコーディングする必要がなくなり、アプリケーションを構築する際の時間と費用を大幅に節約できます。
Indigo.Design App Builderとは何ですか?
Indigo.Design App Builderは、UIコントロールをデザイン画面にドラッグしてアプリケーションのUXを作成することにより、画面またはアプリケーション全体をすばやく作成するのに役立つWebベースのWYSIWYGツールです。 Indigo.Design App Builderには、データバインディングやテーマ設定などの一般的なアプリ構築機能だけでなく、Sketch、Adobe XD、Figmaなどのツールからのデザインのインポートのサポートなどの独自のデザイン機能も含まれているため、既存のデザインを使用してアプリを構築できます。 何をデザインする場合でも、Angularフレームワークで出力をコード化するためのピクセルパーフェクトな設計が保証されます。 Indigo.Design App Builderには、簡単に開始できるように、事前にデザインされたアプリケーションテンプレートと一般的なレイアウトテンプレートが含まれています。 Indigo.Design App Builderを使用すれば、UIデザインからWebデザインの専門家でなくてもでシンプルで美しいデザイン設計が可能です。
ドラッグアンドドロップApp Builderとは何ですか?
ドラッグアンドドロップApp Builderは、簡単なドラッグアンドドロップでアプリの迅速なアプリケーション開発作成を可能にするツールです。 ドラッグアンドドロップApp Builderを使用すると、デザイナー、開発者、またはパワーユーザーには通常、UIコントロールのツールボックス、デザイン画面、およびプロパティエディターが表示されます。 これらの3つの機能は、ドラッグアンドドロップApp Builderのコアエクスペリエンスを構成するものです。 誰でもApp Builderを使用して、画面またはアプリケーション全体を作成できます。 ドラッグアンドドロップApp Builderで組み込みのテンプレートと事前定義されたレイアウトを使用すると、UIデザインのニュアンスに精通する必要はありません。ドラッグアンドドロップApp Builderツールは、画面デザインの複雑さを取り除き、アプリケーション構築のための高速なモダンエクスペリエンスを提供します。
WYSIWYG App Builderとは何ですか?
WYSIWYG（見たままを得られる）App Builderは、その名前が示すとおり、デザイン設計上でドラッグアンドドロップしたUIコントロールによって作成された画面そのままのアプリを結果として得ることができます。 デザインのニーズに合わせてUIコントロールを配置および移動できます。見えるものはすべて、AppBuilderのデザイン画面およびAppBuilderのコード出力でピクセルに正確に表示されます。 WYSIWYG App Builderを使用することは、アプリケーションのプロトタイピングまたは設計を迅速に行うために不可欠であり、開発チーム、製品マネージャー、またはデザイナーが、アプリケーション内のすべての画面とインタラクションエラーが発生しやすいハンドコーディングを数日から数週間節約できます。
コーディングせずにアプリを作成するにはどうすればよいですか？?
WYSIWYG App Builderを使用すると、コーディングなしでアプリケーションを作成できます。 App Buildeを使用すると、コードエディターを直接使用してアプリケーションを作成できる、クリーンで使用可能なコードを生成できます。 ツールボックスからデザイン画面へのUIコントロールで簡単なドラッグアンドドロップを使用すると、App builderでコーディングせずにアプリを簡単に作成できますが、App builderはローコードツールまたはノーコードツールのいずれかのカテゴリに分類できるため、 違いを理解することが重要です。 Indigo.Design App BuilderのようなローコードApp Builderの目的は、ユーザーインターフェイスのあらゆる側面を手作業でコーディングするのに通常費やす時間とお金を大幅に節約することです。 App Builderを使用すると、アプリケーション構築の仕組みに精通している必要はありません。WYSIWYGドラッグアンドドロップエディターを使用するだけで、フル機能のインタラクティブな画面を作成できます。
Indigo.Design App Builderはアプリのテストに適していますか?
Indigo.Design App Builderは、App Builderでデザインしたものをすべて使用してユーザーテストを開始できるため、アプリのテストに適しています。 Indigo.Designにはインタラクティブなプロトタイピング、ユーザビリティテスト、チームコラボレーション、ステークホルダーのフィードバックループ、デザインからコード、アプリの構築などの機能が含まれています。 Indigo.Designでプロトタイプを作成するとき、ユーザビリティテスト機能を使用してこれらをユーザーとテストすることができます。これにより、ステークホルダーとのコラボレーションが可能になり、同時にユーザーが行った内容、タスクを完了するのにかかった時間、ユーザビリティテストの過程の詳細な分析もできます。
開発者ハンドオフとは何ですか?
開発者ハンドオフは、反復デザインプロセスの最も重要な部分ですが、特にそのプロセスの一部をコーディングするための設計です。開発者ハンドオフフェーズでは、デザイナーまたはデザインチームがデザインを開発チームに送信または「引き渡し」ます。通常、これはデジタルで作成された画面（Adobe Photoshopなどのツールから）またはSketch、Figma、AdobeXDなどの高度なベクターグラフィックスデザインツールの形式です。反復デザインプロセスのこの側面が非常に重要である理由は、それが潜在的に最もエラーが発生しやすいためです。デザイナーと開発者は異なるツールを使用します。開発者は通常、デザインツールに関する専門知識を持っていないため、使用する開発者ツールで渡されたデザインを複製するように求められます。間違いが起こるのはここです。 Indigo.Designのようなデジタル製品設計プラットフォームを使用すると、開発者ハンドオフミスが回避され、デザインからコードへの移行で、開発チームが手動でデザインを再作成しなくても、ピクセル単位の完全なコードを生成できます。
Indigo.Design App Builderは、チーム内でのデザイナーと開発者のコラボレーションを改善しますか?
Indigo.Design App Builderは、Indigo.Designデジタル製品デザインプラットフォームの一部です。 Indigo.Designを使用すると、プロトタイプの作業中にチーム内のデザイナーと開発者のコラボレーションを劇的に改善したり、ステークホルダーとのコラボレーションを改善したりできます。 あらゆるデザインやプロトタイプをシンプルなURLで共有でき、Indigo.Designのディスカッションおよびフィードバックツールを使用すると、設計チームや開発チーム、およびステークホルダーがプロトタイプを体験するときに、リアルタイムのフィードバックを得ることができます。 ユーザビリティテストプロセス中、Indigo.Designには、ユーザーがアプリケーションをどのように体験しているか、ユーザーが抱えている問題、共有したい機能に関する直接フィードバックを示すリアルタイム分析とダッシュボードが含まれています。 デザイナーと開発者のコラボレーションは、反復的なデザインプロセスの重要な側面であり、Indigo.Designは、組み込みツールを使用して、このデザイナーと開発者のコラボレーションを促進するのに役立ちます。