本物のアプリケーションを高速で設計・構築
App Builder は、まったく新しいクラウド ベースのビジュアル UI エディターで、ユーザー インターフェースのデザイン・開発の複雑さを解消し、ビジネス アプリケーションを高速で構築することができます。
アプリを最初から開始することも、事前に構築されたテンプレートやレスポンシブな画面レイアウトのライブラリから選択して簡単にカスタマイズすることもできます。ローコードApp Builder次のデジタル製品設計を開始するための 60 以上の UI コントロールのツールボックスを提供します。
![](https://static.infragistics.com/marketing/Website/products/app-builder/app-builder-video-lazy-load-1100.jpg)
アプリケーション制作を80%高速化
デザイン部門をお持ちでない方も、ご安心ください。ビジネス アプリケーションをゼロから作り始めることも、用意されたアプリケーションのテンプレートや、内蔵・カスタムのテーマ設定オプションが付いたレスポンシブ画面レイアウトのライブラリから選ぶこともできます。その後、60 種類以上のコントロールのツールボックスを使って、あらゆる要件や企業ブランドに合うようにカスタマイズし、ワンクリックでプロダクション用のコードを生成できます。
![App Builder featuring code preview and Visual Studio code コード プレビューと Visual Studio コードを備えたApp Builder](https://static.infragistics.com/marketing/Website/products/indigo-design/2019/app-builder-lp/app-builder-feature-code-768.jpg?v=202012100900)
Angular・Blazor・Web Componentsコード生成機能
App Builder プラットフォームで、デザインをすぐに HTML や、Angular 用の TypeScript および CSS、またはBlazor・Web Components コード(React コード生成機能は近日公開予定)に変換できます。アプリを構築しながらライブプレビューを見たり、GitHub レポジトリに同期したり、zip ファイルをダウンロードすることができます。デモを予約して、実際の動作をご覧ください。
![High-Speed RAD Development 高速RAD開発](https://static.infragistics.com/marketing/Website/products/app-builder/app-builder-high-speed-rad-development-768.jpg?v=202012110930)
高速アプリケーション開発 (RAD)
App BuilderはAngular、Blazor、Web Componentsのコードをすぐに使える唯一のRADツールです。独自の美しいユーザーエクスペリエンスを備えたプロジェクトを短期間で予算内で完成させましょう。高性能データグリッドやデータチャートを含むUIコントロールのツールボックスが充実しており、レガシーアプリケーションをハンドコーディングの10倍の速さで最新のレスポンシブWebエクスペリエンスに変換できます。
![App Builder featuring themes and styling テーマとスタイルを備えたApp Builder](https://static.infragistics.com/marketing/Website/products/indigo-design/2019/app-builder-lp/app-builder-feature-themes-768.jpg?v=202012100900)
豊富なテーマとスタイリング
App Builder に収録されているテーマやタイポグラフィー(マテリアル、Bootstrap、Fluent)を使用したり、コントロール、画面、アプリケーションごとにアプリケーションのテーマや企業ブランドに合うようにカスタマイズできます。
![App Builder featuring the ability to import Sketch, Adobe XD and Figma designs Sketch、Adobe XD、Figmaデザインをインポートする機能を備えたApp Builder](https://static.infragistics.com/marketing/Website/products/app-builder/app-builder-sketch-figma-768.png?v=202110291230)
Sketch、Figma からデザインをインポート
デザイン システムから静的ファイルを取り出し、実際の UI コントロールとスタイリングを備えた、インタラクティブでレスポンシブなコンポーネント ベースのアプリを手に入れましょう。そして、SketchもしくはFigmaのデザインをワンクリックで簡単に HTML コードに変換します。
![App Builder illustration showing connect to REST data source REST データ ソースへの接続を示すApp Builder図](https://static.infragistics.com/marketing/Website/products/indigo-design/2019/app-builder-lp/indigo-design-feature-bind-real-data-768.jpg?v=202104081000)
データ バインドとオープン API
データ グリッドや入力画面が空のままアプリケーションのデザインを作る必要はありません。REST データ ソースに接続して意味のあるデータを入れてれば、デザインを見やすくすることができます。この Web ローコード アプリ AppBuilder は現在、Swagger UI サポートと Localhost へのデータ アクセスが可能です。
アプリケーションのデザイン、テスト、 開発プロセスを高速化
オンプレミス ソリューションは いかがですか?
App Builder オンプレミス版にはコンテナ版の App Builder が収録されています。お客さまのローカルネットワークに安全にデプロイでき、お客さまのデータやデザインが外部の影響を受けずに安全であることを保証します。機能とメリットは全てクラウド版 App Builder と同じです。
お問い合わせアプリケーション サンプル
これらのサンプル アプリケーションを使用して、次のプロジェクトをすぐに開始してください。App Builderを使用して作成されたこれらのサンプルは無料で使用でき、Sketch UI キットとAngular、BlazorまたはWeb Componentsコードが含まれています。ダウンロードして自分のものにしましょう。
![CRM App CRM アプリ](https://static.infragistics.com/marketing/Website/products/app-builder/sample-applications/app-builder-crm-768.jpg?v=202105271600)
CRM アプリ
HubSpot からインスピレーションを得た、顧客の詳細を管理するためのマスター詳細スタイルのアプリ。概要ダッシュボードと顧客の詳細を複数のタブで表示する応答性の高いビューが含まれています。
詳細はこちら![Inventory Management App 在庫管理アプリ](https://static.infragistics.com/marketing/Website/products/app-builder/sample-applications/app-builder-inventory-management-768.jpg?v=20230622)
Inventory Management アプリ
在庫レベルを管理し、在庫製品を確認するためのレポート ダッシュボード。ルーティングおよびカテゴリ グラフにカスタム サイド ナビゲーションを使用してパフォーマンスをレポートします。
詳細はこちら![Learning Portal App Learning Portal アプリ](https://static.infragistics.com/marketing/Website/products/app-builder/sample-applications/app-builder-learning-portal-768.jpg?v=20230622)
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 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 Builderを使用すると、コードを記述する前に設計の反復を高速化できます。また、アプリを更新すると、関係者はそれをリアルタイムで確認できます。
Indigo.Designプラットフォーム全体を採用すると、Sketchや XD などのツール (UI キットを使用) でデザインを開始できます。その後、関係者がレビューできるプロトタイプへのリンクを共有できます。デザインをレビューしながらコメントを追加できます。このプラットフォームには、タスク分析を収集し、ユーザー セッションを再生するためのユーザー テストも含まれています。関係者がプロトタイプとどのようにやり取りしたか、どこに問題があったのかを正確に確認できます。テスト後は、デザインをApp Builderの画面としてインポートできます。
What is developer handoff?
一般的なデザイン主導のアプローチでは、開発を開始する前に UI 仕様を定義します。また、一貫した UX を提供するために、デザインは Adob e XD やSketchなどのツールで共通のデザイン システムまたは言語を使用して作成されます。
開発者への引き渡しは、設計仕様の開発準備が整った時点です。デザイナーと開発者は異なるツールを使用するため、それは依然として課題です。引き継ぎを簡単にするブリッジ ツールもありますが、面倒です。開発者はこれらのツールを使用して視覚的な仕様を抽出し、それをコード内で複製します。視覚的な仕様には、アプリのレイアウト、サイズ、間隔、テーマの色、イラスト (存在する場合) が含まれる場合があります。App Builderこのワークフローを完全に置き換えることができ、最初からコーディングする必要がなくなります。そして、結果として得られるアプリがピクセルパーフェクトであることを確認します。
Will App Builder improve the designer-developer collaboration in my team?
App Builder、デザイナーと開発者がデザインと実際のコードを同時に確認して作業できる単一の場所を提供するため、デザイナーと開発者のコ ラボレーションを向上させます。開発者への引き継ぎは必要ありません。また、実際に動作するアプリを操作するためのプレビュー リンクを提供することで、関係者からフィードバックを得ることができます。
App Builder、UI プロトタイピング、デザイン システム、ユーザー テスト、アプリ構築、コード生成を統合する完全なデジタル製品設計プラットフォームであるIndigo.Designの一部でもあります。Indigo.Designはディスカッションおよびフィードバック ツールも含まれているため、プロトタイプを体験する設計チームや開発チーム、関係者からリアルタイムのフィードバックを得ることができます。
Indigo.Designを使用してユーザー テストを実行し、リアルタイム分析とダッシュボードを確認することもできます。ユーザーがアプリケーションをどのように体験しているか、抱えている問題、共有したい機能についての直接のフィードバックについての洞察が得られます。