本物のアプリケーションを高速で設計・構築
App Builder は、まったく新しいクラウド ベースのビジュアル UI エディターで、ユーザー インターフェースのデザイン・開発の複雑さを解消し、ビジネス アプリケーションを高速で構築することができます。
アプリをゼロから作成するか、あらかじめ構築されたテンプレートやレスポンシブな画面レイアウトのライブラリから選択して簡単にカスタマイズできます。ローコードのApp Builder次のデジタル製品の設計を開始するための 60 を超える UI コントロールのツールボックスが用意されています。

アプリケーション制作を80%高速化
デザイン部門をお持ちでない方も、ご安心ください。ビジネス アプリケーションをゼロから作り始めることも、用意されたアプリケーションのテンプレートや、内蔵・カスタムのテーマ設定オプションが付いたレスポンシブ画面レイアウトのライブラリから選ぶこともできます。その後、60 種類以上のコントロールのツールボックスを使って、あらゆる要件や企業ブランドに合うようにカスタマイズし、ワンクリックでプロダクション用のコードを生成できます。

Angular・Blazor・Web Componentsコード生成機能
App Builder プラットフォームで、デザインをすぐに HTML や、Angular 用の TypeScript および CSS、またはBlazor・Web Components コード(React コード生成機能は近日公開予定)に変換できます。アプリを構築しながらライブプレビューを見たり、GitHub レポジトリに同期したり、zip ファイルをダウンロードすることができます。デモを予約して、実際の動作をご覧ください。

高速アプリケーション開発 (RAD)
App BuilderはAngular、Blazor、Web Componentsのコードをすぐに使える唯一のRADツールです。独自の美しいユーザーエクスペリエンスを備えたプロジェクトを短期間で予算内で完成させましょう。高性能データグリッドやデータチャートを含むUIコントロールのツールボックスが充実しており、レガシーアプリケーションをハンドコーディングの10倍の速さで最新のレスポンシブWebエクスペリエンスに変換できます。

豊富なテーマとスタイリング
App Builder に収録されているテーマやタイポグラフィー(マテリアル、Bootstrap、Fluent)を使用したり、コントロール、画面、アプリケーションごとにアプリケーションのテーマや企業ブランドに合うようにカスタマイズできます。

Sketch、Figma からデザインをインポート
デザイン システムから静的ファイルを取り出し、実際の UI コントロールとスタイリングを備えた、インタラクティブでレスポンシブなコンポーネント ベースのアプリを手に入れましょう。そして、SketchもしくはFigmaのデザインをワンクリックで簡単に HTML コードに変換します。

データ バインドとオープン API
データ グリッドや入力画面が空のままアプリケーションのデザインを作る必要はありません。REST データ ソースに接続して意味のあるデータを入れてれば、デザインを見やすくすることができます。この Web ローコード アプリ AppBuilder は現在、Swagger UI サポートと Localhost へのデータ アクセスが可能です。
アプリケーションのデザイン、テスト、 開発プロセスを高速化
オンプレミス ソリューションは いかがですか?
App Builder オンプレミス版にはコンテナ版の App Builder が収録されています。お客さまのローカルネットワークに安全にデプロイでき、お客さまのデータやデザインが外部の影響を受けずに安全であることを保証します。機能とメリットは全てクラウド版 App Builder と同じです。
お問い合わせアプリケーション サンプル
これらのサンプルアプリケーションを使用して、次のプロジェクトをすぐに開始できます。App Builderを使用して作成されたこれらのサンプルは無料で使用でき、Sketch UI キットとAngular、Blazor、またはWeb Componentsコードが含まれています。ダウンロードして自分だけのものにしてください。

CRM アプリ
HubSpot からインスピレーションを得た、顧客の詳細を管理するためのマスター詳細スタイルのアプリ。概要ダッシュボードと顧客の詳細を複数のタブで表示する応答性の高いビューが含まれています。
詳細はこちら
Inventory Management アプリ
在庫レベルを管理し、在庫製品を確認するためのレポート ダッシュボード。ルーティングおよびカテゴリ グラフにカスタム サイド ナビゲーションを使用してパフォーマンスをレポートします。
詳細はこちら
Learning Portal アプリ
Learning Portal アプリを利用して、人気のあるトピックや講師に基づいてコースの進捗状況を追跡します。 REST にバインドされたカスタム リストと適応型レイアウトが特徴です。
詳細はこちら製品価格
ご要件に合わせて3つの製品プランからお選びください。(製品比較表はこちら)
Webアプリケーション開発を高速化するUIコントロールライブラリ、ドラッグアンドドロップでコードを生成できるローコードデザインツールを提供します。
1開発者あたりの年間サブスクリプション価格
複数年割引
Web・デスクトップ・モバイルアプリケーション開発を効率化する、ソフトウェア開発チームのためのオールインワンUI/UX開発ツールキットです。
1開発者あたりの年間サブスクリプション価格
クイックApp Builderチュートリアル
素晴らしいユーザー エクスペリエンスを生み出すために必要なすべてを提供する製品機能の概要をご覧になり、すぐに始めましょう。
すべてのビデオを見るよくあるご質問 (FAQ)
Indigo Design に関する Q&A
What is App Builder?
App Builder、最新の Web アプリケーションの開発をスピードアップする Web ベースの WYSIWYG デザイン ツールです。60 以上の UI コンポーネントのツールボックスと UI を構築するためのデザイン サーフェスを提供します。これを使用して、個々の画面や完全なアプリケーション UX を作成できます。App App Builderは、データ バインディングやテーマなどの重要なアプリ構築機能も含まれています。
Sketch、Adobe XD、またはFigmaで作成されたデザインがある場合は、それらをアプリの完成画面としてインポートできます。付属のサンプル アプリやレイアウト テンプレートを使用して、App Builderでデザインを開始することもできます。最終的には、ターゲット プラットフォーム (AngularまたはBlazor) を選択し、本番環境で使用でき、パフォーマンスが高く、保守可能なピクセル パーフェクトなアプリのコードを生成します。
What is a drag and drop app builder?
ドラッグ アンド ドロップのアプリ ビルダーを使用すると、アプリの迅速なアプリケーション開発 (RAD) が可能になります。画面を作成するには、デザイン画面上でコンポーネントをドラッグ アンド ドロップし、プロパティを構成します。
ほとんどのコンポーネントには、一般的な使用シナリオをサポートする組み込みのプリセットが付属しています。これらのプリセットには、すぐに使える一貫したデザインのためのデザインのベスト プラクティスがカプセル化されています。事前に構築されたアプリケーションとレイアウト テンプレートから選択して、機能的な App Shell を開始することもできます。これにより、プラットフォーム固有のプログラミング知識を学ぶよりも早く UI を作成できます。
What is WYSIWYG app builder?
WYSIWYG(見たままを得られる) App Builder は、その名前が示すとおり、デザイン設計上でドラッグアンドドロップしたUIコントロールによって作成された画面そのままのアプリケーションを結果として得ることができます。 デザインのニーズに合わせてUIコントロールを配置および移動できます。見えるものはすべて、AppBuilder のデザイン画面および AppBuilder のコード出力でピクセルに正確に表示されます。
WYSIWYG App Builder を使用することは、アプリケーションのプロトタイピングまたは設計を迅速に行うために不可欠であり、開発チーム、製品マネージャー、またはデザイナーが、アプリケーション内のすべての画面とインタラクションエラーが発生しやすいハンドコーディングを数日から数週間節約できます。
Why is App Builder the right tool for enterprise development?
インフラジスティックスのWYSIWYGローコード App Builder は、デザインからコードまですべてを効率化します。あらゆる規模の企業向けに作られているため、開発時間を最大 80% 短縮し、最新のソフトウェアソリューションを迅速に構築することができます。ほとんどのコンポーネントには、一般的な使用シナリオをサポートするためのプリセットが組み込まれています。 また、サンプルやレイアウトテンプレートも用意されており、開発者はすぐに使い始めることができます。
IT のプロフェッショナルも、コーディング経験の少ないプログラマーも、一行一行コードを書くことなくアプリケーションを構築できます。その代わりに、UIコントロールの包括的なライブラリ、再利用可能なドラッグ&ドロップコンポーネント、ビルド済みのアプリテンプレート、カスタマイズやブランディングのための追加オプションもご用意しています。
Angular と Blazor のコードをリアルタイムでプレビューして検査するオプションがあるため、App Builder は設計段階の早い段階でエラーを発見し、コストのかかる繰り返しと修正のための時間とリソースを大幅に節約することができるようになります。
また、クロスプラットフォームのアクセシビリティを実現し、アプリ開発を民主化します。このように、App Builderソフトウェアは、アウトソーシングプロジェクトや「市民開発者」との共同作業を容易にすると同時に、フルタイムの開発者の不足などの主要なビジネス課題に対応し、取り組むことができます。
包括的なデータエンジニアリング機能を搭載したローコードのApp Builderソフトウェアは、ビジネスインテリジェンス戦略を促進します。
How App Builder improves the designer’s workflow?
完全なデザインシステムに支えられ、デザインのインポートがより簡単になりました。デザイナーは、既存の Sketch や Adobe XDのデザインを私たちのアプリメーカーにアップロードして作業を続けることができ、すべてをゼロから作り直す必要はありません。そして、デザインが完成したら、App Builder は、ワンクリックでそれらをクリーンなコードに変換することができます。デザイナーと開発者のハンドオフの必要性は、誰もが単一のプラットフォームでやり取りし、プロトタイプやアプリ全体をプレビューできるため、最小限に抑えることができます。
How App Builder improves the developer’s workflow?
ローコードの App Builderプラットフォームは、ビジュアルな統合開発環境 (IDE)、さまざまなバックエンドやサービスへのコネクター、アプリケーションライフサイクルマネージャー、統合 DTP システムを提供することにより、UI/UX の構築に要する時間を短縮し、エラーを起こしやすいハンドコーディングや繰り返し行う手作業をなくします。
必要なコンポーネントと再利用可能なビルディングブロックをすべて提供することで、ドラッグ&ドロップ式の Web アプリケーションビルダーは、市民開発者がフル機能のプロトタイプを組み立て、その背後にあるコードのライブプレビューを取得することを可能にします。経験豊富な開発者は、エンタープライズアプリケーションのビジネスロジックに集中することができます。
App Builder を使用すれば、開発者は HTML/CSS、スケーラビリティ、コーディングルール、ページレイアウト、ブランディング、画面サイズについて心配する必要はありません。デザインからコードまでカバーするツールボックスとUIコントロールがあり、Angular と Blazor でプロダクションレディのコードを生成します。マスタービューを使えば、ユーザーは作成したページにすぐに戻ることができ、クリックすることでアプリの仕上がりを簡単に確認することができます。
その後、ボタン1つでアプリを ZIP ファイルとして保存したり、GitHub に公開することができます。
Why Product Owners should adopt tools like App Builder
App Builder が提供するのは、リソースの割り当てに関する俊敏性と柔軟性です。ローコードの App Builder プラットフォームは、単一の源として機能するため、デザイナー、開発者、関係者、PMが協力し、デザイナーと開発者のハンドオフを処理する際の手動タスクやミスコミュニケーションを排除することができます。デジタル製品の設計と開発に携わる誰もが、ユーザーテストやユーザビリティテストをより簡単に実施し、プロトタイプを検証し、最終的にアプリがどのように仕上がるかを確認することができます。
How to create an app without coding?
App Builderでは、コードを記述せずにアプリを作成し、AngularアプリやBlazorアプリを生成できます。生成されたコードは本番環境に対応しており、プラットフォームの規則と一致します。これにより、将来のアプリの保守と拡張が容易になります。
App Builderアプリ構築におけるノーコードまたはローコード カテゴリに分類されます。WYSIWYG デザイン サーフェスを使用してアプリ UI を作成し、コンポーネントを追加および構成できます。これにより、レイアウトやコンポーネントを手動でコーディングする必要がなくなり、時間を節約できます。これにより、フィードバックをより早く取得し、フィードバックに基づいてより迅速に反復処理できます。これらすべてを、コードを記述することなく実行できます。ノーコード アプローチは、データバインディングやナビゲーション ワークフローにも適用されます。
さらにロジックを追加するには、アプリを生成し、詳細な API ドキュメントを使用して IDE で拡張します。ワークフローのこの部分は、ローコードのカテゴリに分類されます。最も優れた点は、生成されたアプリには、ローカルでコンパイルして実行するためのすべての依存関係が含まれていることです。
Is App Builder good for app testing?
App Builderで作成したアプリは、プレビュー リンクを使用して関係者と共有できます。関係者は、アプリの外観や動作を想像することなく、ライブ アプリをレビューして操作できます。これにより、フィードバックを得るために必要な時間と労力が削減されます。App App Builderを使用すると、コードを記述する前に設計の反復を高速化できます。また、アプリを更新すると、関係者はそれをリアルタイムで確認できます。
Indigo.Designプラットフォーム全体を採用すると、SketchやXD(UIキットを使用)などのツールでデザインを開始できます。その後、関係者がレビューできるプロトタイプへのリンクを共有できます。デザインのレビュー中にコメントを追加できます。このプラットフォームには、タスク分析を収集し、ユーザーセッションを再生するためのユーザーテストも含まれています。関係者がプロトタイプとどのようにやり取りしたか、どこに問題があったかを正確に確認できます。また、テスト後、デザインを画面としてインポートできますApp Builder。
What is developer handoff?
一般的なデザイン主導のアプローチでは、開発を開始する前に UI 仕様を定義します。また、一貫したUXを提供するために、デザインはAdobeXDやSketchなどのツールで共通のデザインシステムまたは言語を使用して作成されます。
開発者へのハンドオフは、設計仕様が開発の準備ができた時点です。デザイナーと開発者は異なるツールを使用しているため、依然として課題が残ります。ハンドオフを容易にするブリッジ ツールはありますが、面倒です。開発者はこれらのツールを使用してビジュアル仕様を抽出し、コードに複製します。ビジュアル仕様には、アプリのレイアウト、サイズ、間隔、テーマの色、イラスト (存在する場合) が含まれます。App App Builder使用すると、このワークフローを完全に置き換えることができ、最初からコーディングする必要がなくなります。また、結果として得られるアプリがピクセル パーフェクトであることを保証します。
Will App Builder improve the designer-developer collaboration in my team?
App Builderデザイナーと開発者がデザインと実際のコードを同時に確認して作業できる単一の場所を提供するため、デザイナーと開発者のコラボレーションが向上します。開発者のハンドオフは必要ありません。また、実際の動作中のアプリを操作するためのプレビュー リンクを提供することで、関係者からのフィードバックを得ることができます。
App Builderの一部でもあります。Indigo.Design Indigo.Designには、ディスカッションやフィードバックのツールも含まれており、デザインチームや開発チーム、関係者がプロトタイプを体験しながらリアルタイムでフィードバックを得ることができます。
Indigo.Designを使用してユーザー テストを実行し、リアルタイムの分析とダッシュボードを確認することもできます。ユーザーがアプリケーションをどのように体験しているか、どのような問題を抱えているか、共有したい機能に関する直接的なフィードバックなどについての洞察が得られます。