Locofy.ai による AI 駆動 エンタープライズフロンドエンド開発実践-s
32.9K Views
February 05, 25
スライド概要
https://findy.connpass.com/event/342057/
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で C#、.NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動を担当後、Dell、Accenture、Elastic、VMware を経て現職まで一貫して同様の活動を継続。現職では NVIDIA AI GPU クラウドサービス、各パブリッククラウドとの AI 関連での協業、マーケティングを担当。政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。
関連スライド
FPT AI Factory で加速する AI 開発-20250213-公開版
Shotaro Suzuki
24.5K
各ページのテキスト
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
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 リポジトリとの連携が可能
lovable.dev 公式サイト︓https://lovable.dev/ • 概要︓ • AI を活⽤したノーコード Web デザインツール • 直感的な操作で Web サイト/Web アプリを簡単に作成 • 料⾦プラン︓ • 無料 • 主な機能︓ • ドラッグ&ドロップによる UI 構築 • 豊富なコンポーネント: ボタン、画像、テキスト、フォームなど、 様々なコンポーネントが⽤意されている • レスポンシブデザイン: デスクトップ、タブレット、スマートフォン等、 様々なデバイスに対応したデザインを⾃動⽣成 • パブリッシュ機能: 作成した Web サイトを簡単に公開できる • 豊富なテンプレートな Web アプリの作成に適している
v0 by vercel 公式サイト︓https://v0.dev/ ⾼速プロトタイピング: • 迅速なプロトタイピングと開発 を⽀援するプラットフォーム で、ユーザーがアイデアをすぐ に 形にするためのツールやテ ンプレートを提供 • 簡易なインターフェース: • コーディングの知識が少ない ユーザーでも利⽤できる シンプルで直感的なインター フェースが特徴 • API 統合のサポート: • 様々な API やサードパーティ ツールとの統合を容易に⾏う ことができ、効率的な開発が 可能 •
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
Figma 新機能 • • • • • • ビジュアル検索、AIを活⽤したアセット検索 ⽂章の翻訳、要約、リライト リアルなキャッチコピーと画像を⽣成 1クリックでプロトタイプを作成 レイヤー名の⾃動変更 テキストからデザインを⾃動⽣成, etc. https://www.figma.com/community/file/1375505114072192161/figma-ai-beta
Motiff 公式サイト︓https://motiff.com/ • • AI 版 Figma ? Figma の機能の90％を含みながら、定価は Figma の2割程度
.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
Smart ComboBox h"ps://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-combobox.md コンボボックスは、ユーザーが値を⼊⼒し、オートコンプリートのドロップダウンから事前定義された値を選択できる UI ⼊⼒要素 • 従来のコンボボックスは、部分⽂字列の完全⼀致に基づいてのみ値を提案。 • スマートコンボボックスは、セマンティックマッチ（つまり、最も密接に関連する意味を持つオプション）を提案する ことにより、これをアップグレード • これは、探している事前定義された⽂字列を正確に知らない/覚えていないユーザーにとって、より便利 •
Smart Paste h"ps://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-paste.md • ユーザーのクリップボードのデータを使ってフォームに⾃動的に⼊⼒するインテリジェントなアプリ機能 • Web アプリの既存のフォームに使⽤できる
Smart TextArea https://github.com/dotnet-smartcomponents/smartcomponents/blob/main/docs/smart-textarea.md • • 従来の TextArea を AI でアップグレードしたもの 設定とユーザーが現在⼊⼒している内容に基づき、⽂章全体への⾃動補完候補を提供
Locofy.ai 公式サイト︓https://www.locofy.ai/ • Figma で作成した UI デザイン から React 等 のコードを⾃動 ⽣成するサービス • デザインと開発の間のギャップが 埋まり、効率的な開発が可能に • デザインの構造を読み取り、適切 なコンポーネントを⾃動⽣成 • ⼿動でコンポーネントを作成する ⼿間が省け、効率的な開発が 可能 • 最近、有償版スタート
エンタープライズアプリ における課題
エンタープライズ顧客における 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 にパワーを 供給する業界では類を⾒ないもの ... 詳しくはホワイトペーパーを参照
ラージデザインモデル︓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 に求められる要件
2/13 Developer Summit 2025セッション 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]
ご清聴ありがとうございました︕