---
title: Locofy.ai による AI 駆動 エンタープライズフロンドエンド開発実践-s
tags:  #vs code #github copilot #gemini #locofy.ai #figma #enterprise #ui/ux #designer &amp; developer #collaboration #fpt #fpt ai factory #nvidia #gpu cloud #frontend  
author: [Shotaro Suzuki](https://www.docswell.com/user/shosuz)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PERM8GG679.jpg?width=480
description: https://findy.connpass.com/event/342057/
published: February 05, 25
canonical: https://www.docswell.com/s/shosuz/ZG1JQ8-2025-02-05-130029
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PERM8GG679.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/P7XV8XXDJX.jpg)

鈴⽊ 章太郎
X (Twitter) ︓ @shosuz
FPT ジャパン
FPT データ &amp; 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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/37KQKWWD7D.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ3PZ11P75.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8JDLRXX37G.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VEP2WPPPE8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/27VD822V7Q.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5JGY5RR1JL.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47QMZVVNEP.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KE4V3MM371.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L713188ZEG.jpg)

.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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/G7WP8ZZ6E2.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JZK811RJ3.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/YE6QPLL1EV.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GE5RK11LJ4.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/972DW1137R.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DJY2LZZ8JM.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/V7N84339E8.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YJ9KQ993J3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GJ8RG99L7D.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LJLKGWWQ7R.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/47M2Q9YK7W.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/P7RM8G96J9.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PJXV8XQDEX.jpg)



# Page. 25

![Page Image](https://bcdn.docswell.com/page/3JKQKW9DJD.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE3PZ1WPJ5.jpg)



# Page. 27

![Page Image](https://bcdn.docswell.com/page/8EDLRXK3JG.jpg)

ラージデザインモデル


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V7P2WPKP78.jpg)

なぜ LLM を使わないのか︖


# Page. 29

![Page Image](https://bcdn.docswell.com/page/2JVD82VVJQ.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/5EGY5RL1EL.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4JQMZVYN7P.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/K74V3MW3J1.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJ1318YZ7G.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GJWP8ZG672.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/4EZK81LRE3.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/Y76QPLW17V.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/G75RK1MLE4.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/9J2DW193JR.jpg)

コード・コンポーネント


# Page. 39

![Page Image](https://bcdn.docswell.com/page/DEY2LZ48EM.jpg)

応答性


# Page. 40

![Page Image](https://bcdn.docswell.com/page/VJN843Y978.jpg)

⾃動レイヤー名


# Page. 41

![Page Image](https://bcdn.docswell.com/page/YE9KQ9P3E3.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/GE8RG9DLJD.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/LELKGWMQJR.jpg)

⾃動レイヤー名


# Page. 44

![Page Image](https://bcdn.docswell.com/page/4JM2Q96KJW.jpg)

コード・コメント


# Page. 45

![Page Image](https://bcdn.docswell.com/page/PJRM8GP6E9.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/PEXV8X3D7X.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/3EKQKWYDED.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/L73PZ19PE5.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/87DLRXG3EG.jpg)

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]


# Page. 50

![Page Image](https://bcdn.docswell.com/page/VJP2WP3PJ8.jpg)

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


