ラージデザインモデル： Web・モバイルアプリ開発の未来 on Vibe Coding Catfe

Regional Developer Advocate ラージデザインモデル︓ Web・モバイルアプリ開発の未来 https://www.youtube.com/@locofy_ai Shotaro Suzuki Locofy.ai

• https://www.youtube.com/@locofy_ai

Web アプリとネイティブモバイルアプリの開発需要は⼤きく成⻑している 需要が⼈材の供給を ⼤きく上回っている

課題︓世界的な開発者不⾜ 600k+ 75k ソフトウェア エンジニアリング職 コンピューターサイエンス の新卒者 ソフトウェア・エンジニア 求⼈の70％ は⾮技術系企業にいる 150万⼈以上 5倍速い ソフトウェアエンジニアの不⾜ 技術部⾨が提供できるものよりも $22k+ 失われた収⼊ これまで以上に より挑戦的に

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

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

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

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

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

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

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

Locofy.ai は既存のワークフローと技術スタックに適合

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

ラージデザインモデル

なぜ LLM を使わないのか︖

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

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

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

LLM vs LDM : Design to Code このデザインを React の コードに変換してもらえますか︖ すぐ使⽤できるコードが⽣成される︕

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 テクノロジー

LLM ＋ Locofy のデザインモデル ＝🔥 のデザインエンジニアリング

Locofy MCP • • Locofy で⽣成したコードを AI コードエディタ（Cursor、Windsurf、Claude など）と統合‧拡張するためのプロトコル コードの⽣成精度を向上させ、フロントエンドコードのより効果的な活⽤を可能にする

Locofy MCP を始める⽅法 1 Figma プラグイン準備 Figma でのプロジェクト作成と Locofy プラグインを使ったデザインの コード変換 2 デザインの最適化 MCP トークン⽣成プロセス 1 プロジェクト設定から MCP 設定タブへ移動 2 トークン有効期限を選択（1ヶ⽉または無期限） 3 「トークン⽣成」ボタンをクリック 4 IDE を選択し MCP 設定ファイルをコピー ⾼品質なコードを⽣成するために、Figma デザインを最適化する 3 Locofy Builderへの同期 MCP を使⽤する前に、デザインを Locofy Builder に同期させる 4 MCPトークンの⽣成 Locofyダッシュボードからプロジェクト設定でMCPトークンを⽣成する ※ MCP を使⽤する前に必ずデザインを Locofy Builder に同期してください

Locofy MCP の設定と使⽤⽅法 エディタでの設定⽅法 MCP の使い⽅ チャットの起動 コードファイルを開き、IDE のチャット機能を起動（⌘+I または ⌘+L） Cursor での設定 1.プロジェクトのルートディレクトリに .cursor フォルダを作成 2.⽣成された MCP 設定ファイルを .cursor/mcp.json として保存 3.Cursor 設定から MCP タブを開く ※Agent モードを使⽤してください ⾃然⾔語でコード取得 4.「Disabled」をクリックして Locofyサーバーを有効化 ※ 数秒後にサーバーが有効化されない場合は、更新アイコンをクリックしてください •「NavigationBar コンポーネントを Locofy から取得して」 •「Homepage を pull して、ナビバーを現プロジェクトのものに置換して」 •「ListingCard コンポーネントを取得してマージ」 •「Homepage を取得してアクセシビリティ対応にして」 利⽤可能なツール ・getLatestComponentAndDependencyCode: 依存関係を含めてコードを取得 ・getLatestFileCode: 特定のファイルのみを依存関係なしで取得 ※ コードのマージも⼀緒に依頼することをお勧めします MCP を使った Locofy コードのカスタマイズ例 アクセシビリティの追加 フォームバリデーション ダークモード対応

Locofy MCP 実装例
アクセシビリティ追加

フォームバリデーション

Locofy で⽣成したコンポーネントに ARIA 属性や

Locofy で⽣成したフォームに⼊⼒検証ロジックとエラー

キーボードナビゲーションを追加

メッセージを追加

accessibility.jsx

ダークモード対応
Locofy コンポーネントにダークモード切り替え機能を実装

form-validation.jsx

// Locofyからコンポーネントを取得

const [email, setEmail] =

const NavMenu = (props) => {
// アクセシビリティを追加
return (
<nav aria-label="メインナビゲーション">

useState('');
const [error, setError] =
useState('');
const validateEmail = () => {
if (!email.includes('@')) {

dark-mode.jsx
const [darkMode, setDarkMode] =
useState(false);
return (
<div className={`${darkMode ?
'bg-gray-900 text-white' :
'bg- white text-gray-800'}`}>
<button
onClick={()
=> setDarkMode(!darkMode)}>

Locofy MCP の可能性
AI エディタと Locofy の強⼒な組み合わせにより、以下のような機能拡張が簡単に実現できる

多⾔語対応

レスポンシブ最適化

パフォーマンス向上

状態管理統合

MCP でコードを拡張する

Locofy MCP の主な利点 コードクリーンアップ • • Locofy.ai で⽣成されたコードを簡単にクリーンアップ して微調整できる 不要なコードの削除や最適化が可能 インタラクティビティの向上 • • UI を超えたコード拡張 • • ロジック、アクセシビリティ、ローカライゼーションなどを 追加できる 可能性は無限⼤ カルーセル、タブギャラリーなどのコンポーネントに簡単に スクリプトやモーションを追加できる 動的な UI を実現する セキュリティとテスト機能の向上 • • ⽣成されたコードが要件を満たしていることを確認できる より安全で堅牢なアプリケーションを構築できる AI コードエディタの⼒と Locofy の優れた UI ⽣成能⼒を組み合わせることで、より⾼品質で機能的なフロントエンド コードを実現

LLM＋LDM ＝ ソフトウェア開発⾰命 スケーラブルな LDM スーパーチャージ 機能検出 Locofy MCP でコードを最適化 2B パラメータ、100M Web ページまで拡張可能 Web アプリの主要機能を ⾃動検出 AI コードエディタ（Cursor、 Windsurf、Claude など）と 統合‧拡張 モバイルアプリのモデル ヘッダー/フッター より多くのデザインツールに 対応 カルーセル アコーディオン コードの⽣成精度を向上させ、 フロントエンドコードのより効果 的な活⽤を可能に

Locofy.ai vs Figma Site/Make Locofy.ai Figma Site Sematic tags ✅ ❌ Responsive layout ✅ ✅ download code ✅ ❌ Support breakpoint ✅ ✅ Form Design Interactivity ✅ ❌ Global Styles & CSS variables ✅ ❌ CMS support ❌ Coming soon Various Framework support ✅ ❌ ❌ Support Custom Components ✅ ❌ ❌ Deterministic Code(No Hallucination) ✅ ❌ ❌ Vibe coding ❌ ❌ ✅ Github integration ✅ ❌ ❌ Advance figma prototyping ❌ ✅ ✅ Support different styling(ex.css,sass) ✅ ❌ * Figma Make はリリース前の情報です。 Figma Make

7/11 実施 @ GitHub Copilot Meetup Tokyo GitHub Copilot for Xcode: 最新 AI 機能で Swift 開発を⾰新する Agent Mode Copilot Vision NEW Swift/iOS アプリ開発のための AI ペアプログラミングツール 最新機能で開発効率を向上させる実践的なテクニック 2025年7⽉最新情報: Copilot Vision 機能で画像からのコード⽣成が可能に︕ 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings

世界3,000社以上、500,000⼈以上の 開発者とデザイナーに信頼されています︕

ラージデザインモデルに関するホワイトペーパーを執筆 スキャンしてください もしご興味あれば︓ ご連絡ください︕ 🤫 私たちは研究論⽂にも取り組んでいます

Locofy.ai を試してみる 年間プランの場合 早期割引コード GOLOCO15 学⽣なら +LDMtokens を 1,000個プレゼント

Google Cloud Next Tokyo 2025（8/5-6） https://www.googlecloudevents.com/next-tokyo/sessions?session_id=3123576

• http://www.googlecloudevents.com/next-tokyo/sessions?session_id=3123576

EC 新時代︓ AI Factory × Vertex AI ハイブリッド連携術 〜.NET 分散 EShop × Cloud Run × ハイブリッド GenAI で実現する EC サイト ⾰新〜 Proprietary

AI 駆動開発 Conference Autumn 準備中︕ 8⽉参加登録開始 予定︕

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