App Builder - 概要

    App Builder は、Angular、Blazor、React、Web Components 向けのプロフェッショナルなコンポーネントを使用して、本番対応の Web アプリケーションを迅速に構築できる Web ベースのデザインからコード作成へのプラットフォームです。デザイン システム対応、ピクセルパーフェクトなレイアウト、リアルタイム プレビューなどが標準搭載されており、無駄な引き継ぎ作業を省き、デザインから直接高品質な開発用コードを生成できます。インストールや重たい IDE、外部依存は不要です。

    あらかじめ作成されたテンプレートやレイアウトプリセットを使用してアプリを開始し、ニーズに合わせてデザイン、テーマ、ブランドをすばやくカスタマイズできます。画面をゼロからデザインする場合も、既存テンプレートを編集する場合も、App Builder を使えばコンセプトからライブコードへの変換が数分で完了し、お好みの開発環境ですぐに拡張・配置が可能です。

    Note

    サポートされているブラウザーは、Chrome、Edge (Chromium)、Firefox、Safari MacOS、および Mobile Safari です。IE11 はサポートされていません。

    App Builder ライフサイクルの概要

    ステージ 概要
    1.デザインの基盤構築 デザイン システム (Indigo.Design など) を使用して開始します。Figma UI キットとアダプターでデザインと開発を接続します。
    2.ビジュアル アプリ作成 App Builder 上でドラッグ＆ドロップ操作します。レイアウト作成、REST API バインド、Reveal ダッシュボード、Slingshot タスク連携など。
    3.共通アプリ モデル デザイン・ロジック・データバインディングが共通アプリモデルに変換されます。
    4.フレームワーク固有のコード生成 このモデルを元に、Angular、React、Web Components、Blazor 向けのコードを自動生成できます。
    5.ワンクリック配置 コードを GitHub にエクスポートするか、Azure に即座に配置します。

    なぜ重要なのか？

    • デザインからコード作成への一貫性: Figma からの手作業での変換は不要です。デザインの忠実性を維持し、再作業を削減します。
    • ローコード スピード、フルコード制御: 拡張、監査、または完全に所有できる本番品質のコードを取得します。
    • 再利用可能なアーキテクチャ: 共通のアプリ モデルで構築し、複数フレームワークへの出力が可能。
    • エンタープライズ対応: リアルデータ接続、ダッシュボード統合、ワークフロー拡張に対応。

    利用対象者

    • プロトタイピングや本番開発を迅速化したい開発者。
    • 本番対応 UI を引き渡したいデザイナー。
    • スケーラブルで一貫したフロントエンド構成を求めるチーム リーダーや CTO。
    • 社内ツールやダッシュボード、顧客向けアプリを構築するクロスファンクショナル チーム。

    主なメリットと影響

    メリット 影響
    Figma からコード作成への一貫したワークフロー フロントエンド開発時間を最大 30〜50% 削減
    １つの共通アプリ モデル チームやツール間での一貫性を維持
    ライブ統合とデータ サポート 現実世界で使用できる実用的なアプリを構築可能
    柔軟な出力フォーマット Angular、React、Web Components、Blazor に対応し、技術スタックを将来対応化
    ワンクリック配置オプション DevOps の複雑さを軽減し、リリースまでの時間を短縮

    使用事例

    • 社内ダッシュボードや管理ツール
    • 動的データを含むクライアント ポータル
    • 実用的な MVP やプロトタイプ
    • デザイン システムに基づくアプリケーション

    試してみましょう

    Figma ファイルから開始し、REST API に接続して、10 分以内に完全に機能する Angular または React アプリを生成してみましょう。

    その他のリソース