Locofy.ai × GitHub Copilot-Codex × Postman で加速するモダンアプリ開発

Postman API Night Tokyo 2025 Fall Locofy.ai × GitHub Copilot/Codex × Postman で加速するモダンアプリ開発 - Design to Code から API 統合まで 2025年11⽉19⽇(⽔) 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings

鈴⽊ 章太郎 X (Twitter) ︓ @shosuz https︓//www.docswell.com/user/shosuz FPT ジャパン FPT データ& AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から、Dell、 Accenture、Elastic、VMware を経て現職まで⼀貫して開発者向け に最新技術を啓発。GPU クラウド技術訴求、AI 駆動開発推進。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、 現職を兼務。 エディフィストラーニング社で GH-300 コースを MCT (Microsoft 認定 トレーナー) として担当中。 Google Cloud Partner All Certifications Engineer 2025。

• https://www.edifist.co.jp/course/MSCGH300
• https://cloud.google.com/blog/ja/topics/partners/google-cloud-partner-all-certification-holders-2025
• https://www.docswell.com/user/shosuz

OpenAI DevDay [Exchange (Tokyo)] ⽇時: 11⽉11⽇(⽕) 15:00-19:00 @ ⿇布台ヒルズ コンテンツ: OpenAI 新機能ライブデモ、Q&A

OpenAI Codex チームの実践⼿法概要
agents.md 活⽤

スナップショットテスト⾃動化

•

Feler（記録保持者）の⼿法︓
7時間セッション

エージェントへの⾏動指⽰を明⽂化

•

実装計画・ToDo・意思決定ログを⼀元管理

「このスクリプトで視覚的に検証して」等々の
具体指⽰

•

⼤規模リファクタリング（15000⾏）も
Codex だけで完遂

•

Nacho Soto (iOS) が開発した⼿法

•

20,000+オープンソースプロジェクトで採⽤

•

SwiftUI プレビューから36種類のバリアント
を⾃動⽣成
Codex が⾃⼰修正ループを使ってピクセル
パーフェクトに

•
•

•

plans.md (ExecPlan) 活⽤

# AGENTS.md

# <Short, action-oriented description>

PreviewVariants(layout: .sizeThatFits) {
MyView(mode: .loaded)
.previewVariant(named: "Loaded") }

## Setup commands

## Progress

- Install deps: `pnpm install`

- [x] (2025-10-01) 完了したステップ

- Run tests: `pnpm test`

- [ ] 未完了のステップ

OpenAI OpenAI Codex アプリ実装例

READMEの補完 – AI エージェント向けの指⽰書

「exec plan」 と呼ばれる詳細な実⾏計画

従来の課題: 並⾏開発の壁 デザイン確定待ちでフロントエンド開発が⽌まる API 未実装で統合が遅れる / Mockの整備が後⼿に ⼿戻り: UI/API の両側で仕様差分が発⽣ レビューやテストが段階的で遅延が積み重なる

3ツール連携の全体像 狙い • Design・Code・API を 並⾏に回し、待ち時間を 削減 • 3つのツールを循環させる 実践ワークフロー フェーズ ツール ⽬的 強み プロトタイピング Codex 迅速な試作 デザイナー不在でも 進められる プロダクション Locofy.ai 本番品質コード ピクセルパーフェクト、 LDM 技術 統合・テスト Postman API連携 Mock APIで並⾏ 開発

ツール紹介①: Locofy.ai（DesignToCode） Figma デザインから React / Angular / React Native / (SwiftUI/Kotlin) 等へコード⽣成 コンポーネント/レスポンシブ/変数/テーマの取り込み デザイン確定後の実装を⾼速化

ツール紹介②: GitHub Copilot/Codex スクリーンショットやプロンプトから UI を改良 既存コードの構造を理解し、品質を底上げ デザイナー不在のプロトタイプ強化に有効

DEMO 1: GitHub Copilot/Codex（プロトタイピング） デモンストレーション 1 ⼊⼒ GitHub Copilot/Codex 出⼒ スクリーンショット/ プロンプト プロトタイプ段階 AI によるコード ⽣成・改良 SwiftUI / React コード デザイナー不在でも迅速な試作 素早いフィードバックと改良 アイデアの即時視覚化

DEMO 1: 実演ステップ（GitHub Copilot/Codex） 1 プロジェクトへ画像配置: ProductCard.png 2 カレントディレクトリ移動: codex-demo-project 3 Codex にプロンプト⼊⼒: 「この画像を基に SwiftUI で ProductCard を実装して」 4 ⽣成コード確認・調整: 必要に応じて再⽣成・修正 5 ContentView.swift に組み込み: 表⽰確認・調整 ヒント 画像に加えて「〇〇⾵のデザイン」「〇〇のようなアニメーション」などの追加指⽰で精度向上

DEMO 1 : SwiftUI プレビュー → スクショ → Codex 改良フロー 1 2 3 最⼩の SwiftUI コンポーネント プレビューのスクリーンショット Codex による改良 • • 基本的な UI 要素のみを持つ シンプルなコンポーネントを作成 例: ProductCard の⾒た⽬だけ の簡素な実装 • SwiftUI プレビュー画⾯をキャプチャ • • ⾃動キャプチャスクリプトまたは⼿動で Screenshots/ 配下に保存 • キャプチャ画像を⼊⼒に UI 改善 を依頼 アクセシビリティ・アニメーション・状態 管理まで⾃動実装 Codex コマンド例:(当該 Project があるパスで実⾏） $ codex -i "~/Desktop/ProductCard.png" "この画像を元にContentView.swiftのProductCard viewを 改良してください。重要な制約︓1. 既存のProduct構造体はそのまま使⽤、2. ProductCardEnhancedという新しい Viewを作成、3. アクセシビリティとアニメーション機能を追加、4. 状態管理（@State）を組み込む、5. グラデーション背 景とシャドウを追加、6. ボタンとインタラクティブ要素を実装" … Codex が画像を認識して質問してきたら： … "この画像を元にContentView.swiftのProductCard viewを改良してください。ProductCardEnhancedという新しい Viewを作成し、アクセシビリティ、アニメーション、状態管理(@State)、グラデーション背景、シャドウ、 インタラクティブなボタンを実装してください"

反復改良プロセス（OpenAI ⽅式のブラッシュアップ） 1 2 3 4 初期 UI ⽣成 配⾊・タイポグラフィ調整 視覚効果追加 インタラクション追加 ProductCard.png から 基本的な UI をCodex が⽣成 ブランド"⾵"のカラー適⽤ フォントとスペーシング調整 シャドウ / グラス効果 ダークモード対応 hover/press 効果 ⼊場アニメーション バリエーション⽣成: 3〜5案を並⾏出⼒して A/B ⽐較 → ベスト版を選定 反復による課題 成果物: SwiftUI/React コンポーネントを Figma に渡せる形式で出⼒ ⾒た⽬は良くなるが、細部の⼀貫性に⽋ける 反復サイクル: 「もっとカラフルに」「より⼤きなボタンで」など指⽰でさらに改良 ブランドガイドラインへの厳密な準拠が困難 デザイナーの専⾨知識による調整が必要...

Codex の限界とデザイナー介⼊の必然性 ブランド/デザインガイドラインの厳密順守が難しい場合（ロゴ⽐率・⾊指定・余⽩基準） アクセシビリティ要件（コントラスト/フォーカス/ARIA）を網羅的に担保しづらい場合 レスポンシブの極端幅・複数デバイスでの破綻検知と微調整が不⼗分な場合 デザインシステム/トークン整合（⾊/タイポ/スペーシング命名）に揺らぎがある場合 承認プロセスで求められる"証跡と再現性"に限界がある場合 結論: デザイナーの介⼊が不可⽋ デザイナーが Figma で最終調整して"確定デザイン"を作る必然性 次の⼀⼿: UI をデザインファイル（少なくとも SVG）に変換して Figmaへ 使い分けの判断基準 OpenAI ⽅式（CodeToDesign 反復） DesignToCode ⽅式（Figma → Locofy.ai） シンプルな UI・スピード重視の場合 エンプラ・⾦融・製造など厳格要求の場合 社内ツールや頻繁な変更が必要な開発 ブランド⼀貫性・アクセシビリティ重視 デザイナーリソースが限られた環境 証跡・承認プロセスが必要な開発 Codex 反復が効率的 Figma → Locofy.ai が適切

UI → Figma 変換とデザイナー調整（CodeToDesign ブリッジ） UI コード (SwiftUI/React) SVG/PNG エクスポート Figma インポート デザイナー 調整 確定 Figma ファイル ⼿順︓ UI をエクスポート︓ コンポーネント単位で SVG（推奨）/PNG を出⼒ Figma へインポート︓ フレーム化、レイヤー命名、グループ整理 テキスト復元︓ ⽣テキストに変換し、Auto Layout を適⽤ デザイントークン︓ ⾊/タイポ/スペーシングをスタイル登録 コンポーネント化︓ バリアント（hover/disabled/selected）を定義 注意︓ • 画像化（ラスタライズ）されると編集が 困難 • SVG の分割/グルーピングを適切に • アイコンはベクター、写真は画像として 扱いを分離 レスポンシブ設定︓ 制約/ブレークポイント設定 最終レビュー︓ ブランド準拠・アクセシビリティ・多⾔語余⽩ 出⼒︓ 確定 Figma ファイル → Locofy.ai へ渡して LDM でピクセルパーフェクトな本番コード⽣成

DEMO 2: Locofy.ai（プロダクション） デモンストレーション 2 ⼊⼒ Figma デザイン DEMO 1の UI → デザイナー調整済み Locofy.ai (LDM) 出⼒ ラージデザインモデルによる 変換 ピクセルパーフェクトな 本番品質コード プロダクション段階 デザイン忠実度100% 開発時間5倍短縮 MCP 統合で機能拡張

DEMO 2: 実演ステップ（Locofy.ai） 1 Figma プラグイン導⼊: Locofy.ai をインストール 2 デザイン最適化: ⾃動レイアウト設定、コンポーネント化 3 Locofy Builder へ同期: LDM（ラージデザインモデル）でコード⽣成 4 UIPro/MCP 設定: プロジェクト設定→MCP タブからトークン⽣成 5 AIエディタ連携: Cursor/GitHub Copilot と統合して機能拡張

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

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

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

Design To Code 実践

LLM ＋ 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 でコードを拡張する

開発フェーズ別ツール活⽤ワークフロー フェーズ 1 フェーズ 2 プロトタイピング段階 プロダクション段階 GitHub Copilot/Codex Locofy.ai (LDM) フェーズ 3 統合・テスト段階 Postman 迅速な試作︓ デザイナー不在でも UI 構築 確定した Figma デザインから⽣成 Mock API でバックエンド待ちなし スクリーンショットからコード⽣成 ピクセルパーフェクトな⾼品質コード フロントエンドと並⾏開発 素早い反復改良でアイデア検証 強み︓開発速度と柔軟性 レスポンシブ対応とコンポーネント管理 強み︓⾼精度とデザイン忠実性 ⾃動テスト実⾏と CI/CD 連携 強み︓開発効率と品質保証

DEMO 3: ExecPlan × Postman 連携 デモンストレーション 3 ⼊⼒ plans.md 設計書 API 未完成でも計画駆動で 統合前進 実⾏ テスト 出⼒ API クライアント 実装 テスト⽣成 Postman Mock API テスト Progress ⾃動更新 進捗管理 plans.md ⾃動更新とタスク進捗 Mock API による疎結合開発

ツール紹介③: Postman（Mock・テスト・⾃動化） Mock Server で API 未完成でもフロントを前進 Collections/Tests で回帰と品質担保 Agent Mode や CI 連携で⾃動実⾏

ExecPlan（plans.md）の構造 必須セクション Purpose: ⽬標と範囲を明確に定義 Big Picture: 全体像と依存関係 Purpose Progress: ⾃動更新される実績ログ プロジェクトの⽬的と対象範囲 「何を」「なぜ」実施するか Todos: 実⾏可能なタスク列 Big Picture # Purpose UserService のリファクタと Postman Mock API 連携 実装アプローチの概要 技術選定や依存関係 # Big Picture リファクタリングと機能拡張を段階的に実施 Progress # Todos - PostmanMockClient 実装 - API 連携テスト - エラーハンドリング # Progress Codex が⾃動更新 実⾏ログと変更履歴 Todos 具体的な実⾏タスク 優先順位付きの作業リスト

DEMO 3: ⾃動進捗管理の威⼒ コマンド: codex exec --skip-git-repo-check Codex が plans.md を読み、 タスクを順次実⾏ 成果物: コード、テスト、plans.md の Progress Postman Mock で API 未完成で も統合可能

DesignToCode × CodeToDesign の統合 使い分け指針 デザイン確定 → Locofy.ai プロトタイプ強化 → Codex API は常に Postman Mock で並⾏ ツール組み合わせが最強 デザイン確度×実装速度マトリクス

効果測定データ（例） UI 実装リードタイム 統合待ち時間推移 開発時間配分 主要指標と改善効果 UI 実装リードタイム 統合待ち時間 ⼿戻り率 30-60% 短縮 ⼤幅削減 40% 減少 社内テスト + デモプロジェクト計測 Postman Mock API 活⽤による並⾏開発 ExecPlan による要件明確化効果

明⽇から始める実践⼿順 1 Locofy.ai Figma にプラグイン導⼊ サンプル画⾯で出⼒を試す 2 Postman ワークスペース作成 Mock Server 発⾏ Collection 作成 3 Codex CLI 最新版インストール plans.md テンプレート⽤意 画像⼊⼒デモ準備 4

フロントエンド⽀部 #1 with あずもば 2025年12⽉11⽇ https://aid.connpass.com/event/374658/

• https://aid.connpass.com/event/374658/

Microsoft ｜Git・GitHub NEW GitHub Copilot 開催⽇程︓2025/10/24(⾦)、11/21(⾦)、12/19(⾦)、2026/1/23(⾦)、2/27(⾦)、3/27(⾦) https://www.edifist.co.jp/course/MSCGH300 本コースは、GitHub Copilot の機能とその責任ある活⽤⽅法を学ぶためのトレーニングです。 Microsoft の最近の調査では、GitHub Copilot の活⽤により⼤幅な⽣産性の向上を経験することが わかりました。 ・ 新しいコードの 46% が AI によって記述されるようになった ・ 開発者の全体的な⽣産性が 55% 速くなった ・ 開発者の 74% が満⾜のいく作業に集中できるようになったと感じている どのような⼿段で⽣産性の向上が実現可能か、具体的なケースによる GitHub Copilot の活⽤⽅法を 学びます。 対象者 ・ ソフトウェア開発者、DevOps エンジニア、管理者の⽅ ・ AI ツールを開発ワークフローに統合したい⽅ ・ 責任ある AI の使⽤と倫理的な配慮を学びたい⽅ ・ GitHub Copilot の機能を深く理解し、業務に活⽤したい⽅ 前提条件 MSCGIT01 : Git・GitHub 基礎と実践 （https://www.edifist.co.jp/course/MSCGIT01）受講済、また は、次の知識を保有する⽅ ・ 統合開発環境 (Visual Studio Code) と GitHub などのバージョン管理システムに関する知識 ・ AI と機械学習の原則に関する基礎知識 到達⽬標 ・ GitHub Copilot を責任ある⽅法で活⽤できる ・ 効果的なプロンプトを作成し、提案精度を向上できる ・ Visual Studio Code や CLI など様々な環境で Copilot を使いこなせる ・ Business や Enterprise プランの管理機能を理解できる カリキュラム 1. GitHub Copilot を使⽤した責任ある AI 2. GitHub Copilot の概要 3. GitHub Copilot を使⽤したプロンプト エンジニアリングの概要 4. GitHub Copilot Space の概要 5. ⾼度な GitHub Copilot の機能の使⽤ 6. さまざまな環境での GitHub Copilot: IDE、チャット、コマンド ラインの⼿法 7. GitHub Copilot での管理とカスタマイズに関する考慮事項 8. GitHub Copilot を使⽤した AI の開発者ユース ケース 9. GitHub Copilot ツールを使⽤して単体テストを開発する 10. GitHub Copilot エージェント モードを使⽤したアプリケーションのビルド 11. GitHub Copilot コーディング エージェントを使⽤して開発を加速する 12. MCP サーバーの概要 13. GitHub Copilot を使⽤したコード レビューと pull request の平準化 14. JavaScript で GitHub Copilot を使う 15. Python で GitHub Copilot を使⽤する 研修⽇数 1⽇ 時間 9:30〜17:30 受講料 7,7000 円（税込） 学習形態 オンライン コースコード MSCGH300

• https://www.edifist.co.jp/course/MSCGIT01
• https://www.edifist.co.jp/course/MSCGH300

Thank you for your attention!