Locofy.ai による AI 駆動 エンタープライズフロンドエンド開発実践-s

Locofy.ai による AI 駆動 エンタープライズ フロンドエンド開発実践 2025.2.5 鈴⽊ 章太郎 Executive Evangelist, FPT Data & AI Integration FPT Japan Holdings © Confidential ‒ FPT Smart Cloud

鈴⽊ 章太郎 X (Twitter) ︓ @shosuz FPT ジャパン FPT データ & AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ Microsoft で13年間、テクニカルエバンジェリストとして活動し、.NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) を担当。その後、Dell、Accenture、Elastic、VMware 等での DevRel 活動 等を経て、2024年11⽉1⽇より、現職で引き続き DevRel 活動を継続。NVIDIA との 戦略的協業 AI GPU クラウドサービス や、各パブリッククラウドベンダーとの AI＆データ関連 サービスのマーケティング、プリセールス活動、教育活動、関連新規サービス開発、等を実施。 政府での仕事は、2019年4⽉〜2021年8⽉、内閣官房 IT 総合戦略室 政府 CIO 補佐官(法務省 CIO 補佐官併任)、2021年9⽉〜2024年3⽉、 デジタル庁 ソリューション アーキテクト (⾦融庁 デジタル統括アドバイザー併任) 兼務を経て現職。 https︓//www.docswell.com/user/shosuz

• https://www.docswell.com/user/shosuz

Agenda § AI 駆動開発におけるフロントエンド開発ツール § エンタープライズアプリにおける課題 § Locofy.ai による AI 駆動開発の実践

AI 駆動開発における フロントエンド開発ツール

bolt.new 公式サイト︓ https︓//bolt.new/ • 概要︓ • StackBlitz 社が開発した AI を活⽤したフルスタック Web アプリ開発プラットフォーム • ⾃然⾔語で指⽰を出すことで、AI がコードを⽣成し、Web アプリを構築・デプロイできる • • • React、Next.js、Node.js などのフレームワークに対応 料⾦プラン︓ • Free︓ 制限付きで利⽤可能 • Pro︓ ⽉額$20〜より多くの機能とリソースを利⽤可能 主な機能︓ • AI によるコード⽣成︓ ⾃然⾔語で指⽰を出すことで、AI がコードを⽣成 • ワンクリックデプロイ︓Vercel にデプロイ可能 • リアルタイムプレビュー︓コード変更がリアルタイムで反映 • GitHub 連携︓GitHub リポジトリとの連携が可能

• https://bolt.new/

lovable.dev 公式サイト︓https://lovable.dev/ • 概要︓ • AI を活⽤したノーコード Web デザインツール • 直感的な操作で Web サイト/Web アプリを簡単に作成 • 料⾦プラン︓ • 無料 • 主な機能︓ • ドラッグ&ドロップによる UI 構築 • 豊富なコンポーネント: ボタン、画像、テキスト、フォームなど、 様々なコンポーネントが⽤意されている • レスポンシブデザイン: デスクトップ、タブレット、スマートフォン等、 様々なデバイスに対応したデザインを⾃動⽣成 • パブリッシュ機能: 作成した Web サイトを簡単に公開できる • 豊富なテンプレートな Web アプリの作成に適している

• https://lovable.dev/

v0 by vercel 公式サイト︓https://v0.dev/ ⾼速プロトタイピング: • 迅速なプロトタイピングと開発 を⽀援するプラットフォーム で、ユーザーがアイデアをすぐ に 形にするためのツールやテ ンプレートを提供 • 簡易なインターフェース: • コーディングの知識が少ない ユーザーでも利⽤できる シンプルで直感的なインター フェースが特徴 • API 統合のサポート: • 様々な API やサードパーティ ツールとの統合を容易に⾏う ことができ、効率的な開発が 可能 •

• https://v0.dev/

Uizard 公式サイト︓https://v0.dev/ • • • Uizard は2018年に設⽴された デンマークの企業 AI を使ったアプリデザインツール プロのデザイナーでなくても、 プログラミングができなくても、 簡単に UI が作れる • • • • • • • • • • • • 基本機能 Magic (AI を使った機能) Scan Wireframe Sketch Wireframe Mode Scan Screenshot Smart Themes Attention Heatmap Text Assistant 保存ファイル形式は、SVG, PNG, JPEG, PDF の4種類 無料トライアル、有料プラン 年間プラン︓$160 Angular 対応 → new

• https://uizard.io/
• https://v0.dev/

Figma 新機能 • • • • • • ビジュアル検索、AIを活⽤したアセット検索 ⽂章の翻訳、要約、リライト リアルなキャッチコピーと画像を⽣成 1クリックでプロトタイプを作成 レイヤー名の⾃動変更 テキストからデザインを⾃動⽣成, etc. https://www.figma.com/community/file/1375505114072192161/figma-ai-beta

• https://www.figma.com/community/file/1375505114072192161/figma-ai-beta

Motiff 公式サイト︓https://motiff.com/ • • AI 版 Figma ? Figma の機能の90％を含みながら、定価は Figma の2割程度

• https://motiff.com/

.NET Smart Components https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/ • AI 搭載 UI コンポーネントのセット • UX を再設計したり、機械学習や プロンプトエンジニアリング調査、 開発に何週間も費やす必要なし • 既存の.NET アプリ UI にドロップして すばやく簡単に追加できる • ユーザーの⽣産性を⾼める、事前に 構築済みエンドツーエンド AI 機能 https://www.docswell.com/s/shosuz/ZM1MXG-2024-04-27-154837

• https://devblogs.microsoft.com/dotnet/introducing-dotnet-smart-components/
• https://www.docswell.com/s/shosuz/ZM1MXG-2024-04-27-154837

Smart ComboBox h"ps://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md コンボボックスは、ユーザーが値を⼊⼒し、オートコンプリートのドロップダウンから事前定義された値を選択できる UI ⼊⼒要素 • 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。 • スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する ことにより、これをアップグレード • これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利 •

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md

Smart Paste h"ps://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md • ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能 • Web アプリの既存のフォームに使⽤できる

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md

Smart TextArea https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md • • 従来の TextArea を AI でアップグレードしたもの 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供

• https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md

Locofy.ai 公式サイト︓https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 • 最近、有償版スタート

• https://www.locofy.ai/

エンタープライズアプリ における課題

エンタープライズ顧客における UI/UX PoC 等の評価傾向 • PoC の評価と本番が密接に関連 • とりあえずの UI を作っておくとそれが 関係者に本番と誤解されがち • 要求仕様が細かくそれに忠実に対処 する必要がある • ⾦融、製造、流通…どのインダストリ のアプリも⼀品もの嗜好の傾向 • 関係者によってこだわりポイントが違う • コンポーネント化されて管理されること が多い

Web/モバイルアプリ ➕ バックエンド API による開発例 フロントエンドの Web/ネイティブアプリからクラウドサービスなどの API を呼び出す ユーザー認証 マイクロサービス イベント管理 マイクロサービス AI 検索 マイクロサービス 基盤レベルの開発/ 運⽤⾃動化 開発⾼速化と運⽤省⼒化 及びガバナンスを提供するアプリ基盤 (アプリ基盤が CI/CD を提供) React Native DevSecOps - カスタマイズ可能な基盤組み込みのサプライチェーン (スマホ上で実⾏) クラウド インフラ オンプレミス インフラ コミット 取得 ハードウェア (GPU, スイッチ,..) サーバー テスト ビルド データベース 脆弱性検査 構成定義 コミット デプロイ

Figma + GitHub 等を使ったコンポーネント単位の管理 開発者とデザイナー（社内外）とのコンポーネント単位のコラボレーションが多い傾向 フロントエンドの構築では、デザイナーとエンジニア の間で多くの時間が浪費されている

Locofy.ai による AI 駆動開発の実践

業界はいくつかの成⻑課題に直⾯している 顧客は開発をより早く、より安く ⾏うことを望んでいる 多額の投資をしているが、 製品体験はせいぜい平均的なものだ エンジニアの雇⽤にはコストがかかる ピクセルパーフェクトなコードを書く 優秀なエンジニアが⾒つからない フロントエンドの構築では、デザイナーとエンジニア の間で多くの時間が浪費されている

理想的な状態︓5倍速く、安く開発できる もしこれができたら… デザインから ピクセルパーフェクトなコード を即座に⽣成 時間とお⾦を節約できる ⚡5倍速い 10倍安い これを続けると 収益とコード品質が向上

Locofy.ai のラージデザインモデルは まさにこの問題を解決するために作られた • Locofy.ai の焦点はただ⼀つ、これだけ • どんなデザインツールからでも、ピクセル パーフェクトな製品フロントエンドコードに 変換 • 世界クラスのフロントエンド エクスペリエンス • 猛スピードで構築する

実際に Figma 上で Locofy.ai の動きを ⾒てみよう︕

ラージデザインモデル

なぜ LLM を使わないのか︖

LLM vs LDM : Design to Code 旅⾏ウェブサイトのデザイン画像を直接 React コードに変換することはできませんが、 同様のウェブサイトを React で構築するため の⼀般的なプロセスを説明することはできま す。 1.React プロジェクトのセットアップ︓ •React プロジェクトのセットアップを⽀援する ツールは多数あります。Create React App （CRA）は、基本的な React アプリケー ションに必要なすべてのファイルと依存関係を セットアップする⼀般的なオプションです。 npm または yarn を使⽤してグローバルに インストールできます。… コードは⽣成されない…

LLM vs LDM : Design to Code 申し訳ありませんが、デザイン全体を React コードに 変換することはできません。AI ⾔語モデルとして、画像や ビジュアルデザインからコードを⽣成する機能はありませ ん。ただし、React を使⽤してこのデザインを構築する ⽅法について、⼀般的な説明を提供することはできます。 React でこのデザインを作成するには、通常、次の⼿順 に従います。 1.デザインをコンポーネントに分割する︓ デザインを分析し、ヘッダー、検索バー、旅⾏のお得な 情報を表⽰するためのカードコンポーネントなど、再利⽤ 可能なさまざまなコンポーネントを特定します。 … コードは⽣成されない…

LLM vs LDM : Design to Code ChatGPT デザインを実装するための React コードを以下に⽰します。 出来上がったコードはデザインにマッチしていない

LLM vs LDM : Design to Code すぐ使⽤できるコードが⽣成される︕

LLM は脚本を書き、LDM はキャンバスをセットする Large Language Model Large Design Model 記事、SNS ポスト、電⼦書籍、など デザイン、シェイプ、ベクター、シンボル Then Now

Web・モバイルアプリのデザインを学習して構築された独⾃の AI • • LLM はデザインファイルを効果的に理解することが できない それらはテキスト、オーディオ、ビデオ、画像について 訓練を受けている • • デザインを理解する必要があった 5億の設計パラメータで訓練された独⾃の基礎的 な⼤規模設計モデルを構築した • この独⾃のファウンデーションモデルは、デザインを ⾃動的にコードに変換し、Locofy.ai にパワーを 供給する業界では類を⾒ないもの ... 詳しくはホワイトペーパーを参照

• https://static.locofy.ai/Locofy.ai Large Design Models Whitepaper.pdf

ラージデザインモデル︓1-Click テクノロジー

デザイン・オプティマイザー 最適化された構造 的確なオートレイアウト 正確なグループ分け

タグ付けと特徴検出 Header Image Auto Complete Button Date & Time Picker Input Grid

コード・コンポーネント

応答性

⾃動レイヤー名

ラージデザインモデル︓1-Click テクノロジー

LDM + LLM = 🔥のフロントエンド開発

⾃動レイヤー名

コード・コメント

Locofy.ai コードアシスタント

LLM＋LDM＝ソフトウェア開発⾰命 スケーラブルな LDM スーパーチャージ 機能検出 2B パラメータ、100M Web ページまで拡張可能 Web アプリの主要機能を ⾃動検出 モバイルアプリのモデル より多くのデザインツールに 対応 Locofy Assistant ︓ LLM でコードを最適化 応答性の微調整 ヘッダー/フッター API、バックエンドロジックの 追加 カルーセル I18n, コメント アコーディオン 余分なものを取り除く

2/5 DevRel/Tokyo イベント https://devrel.connpass.com/event/342978/ AI 駆動開発時代の Developer Relations に求められる要件

• https://devrel.connpass.com/event/342978/

2/13 Developer Summit 2025セッション https://event.shoeisha.jp/devsumi/20250213/session/5523

• https://event.shoeisha.jp/devsumi/20250213/session/5523

3/21 NVIDIA GTC Japan AI Day 2025 https://www.nvidia.com/ja-jp/gtc/session-catalog/?search=S73913#/session/1733730503254001xrGX NVIDIA GPU クラウドを使った API アクセスによる⾼速アプリ開発 [S73913]

• https://www.nvidia.com/ja-jp/gtc/session-catalog/?search=S73913

ご清聴ありがとうございました︕