越境するテック情熱：AIツールとの出会いが導いた海外スタートアップとの協働

#DevRelKaigi DevRel Kaigi 2025 越境するテック情熱︓ AI ツールとの出会いが導いた 海外スタートアップとの協働 鈴⽊ 章太郎 FPT ジャパン エグゼクティブエバンジェリスト Locofy.ai Regional Developer Advocate 2025年10⽉4⽇

鈴⽊ 章太郎 #DevRelKaigi X (Twitter) ︓ @shosuz https︓//www.docswell.com/user/shosuz FPT ジャパン データ& AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼 最⾼情報セキュリティアドバイザー Regional Developer Advocate Locofy.ai 略歴︓ AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代 から現職まで⼀貫して開発者向けに最新技術を啓発。GPU クラウド技術訴求、AI 駆動開発推進。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。 職業エバンジェリスト

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

本⽇お話しすること Locofy.ai との出会いのプロセス 技術探索からパートナーシップへの発展 技術的な情熱からキャリア拡張へ 本業の経験を活かした副業展開のステップ ⼤企業と海外スタートアップの橋渡し 異なるビジネス⽂化・⾔語の翻訳者としての役割 エンタープライズ開発における AI 活⽤の現場 実際の顧客事例と技術導⼊の成功ポイント #DevRelKaigi

出会いのきっかけ︓モバイルアプリ開発の課題 アプリ開発で直⾯した壁 デザインと実装の乖離 #DevRelKaigi デザインと実装のギャップ デザイナーが作成したモックアップと実際の開発結果に⼤きなギャップが発⽣ 「⾒た⽬通りに作れない」問題が頻発 多様なデバイス対応の複雑さ スマートフォン、タブレット、デスクトップなど異なる画⾯サイズへの対応 レスポンシブデザインの実装に膨⼤な⼯数 エンジニア不⾜と専⾨知識の壁 フロントエンド開発の専⾨⼈材確保が困難 新技術の習得にも時間がかかり、開発が遅延 解決への探索 効率的な開発⼿法を模索 国内外の開発者コミュニティで AI を活⽤した開発ツールの情報収集 デザインからコードへの変換技術に着⽬ 海外スタートアップの発⾒ テックブログでシンガポール発のスタートアップ Locofy.ai を発⾒ Figma プラグインとして試⽤してみることに 「デザインが表⽰崩れする」 「ピクセルパーフェクトにならない」 「レスポンシブ対応が困難」

#DevRelKaigi Locofy.ai との初回接触 出会いのプロセス 海外 AI 開発ツール探索の中で 偶然 Locofy.ai を発⾒ デザインからコードへの変換という 課題解決の可能性に興味 モバイルアプリ開発の課題解決の ⽷⼝として注⽬ Figma プラグインの初体験 シンプルで直感的なインターフェース に好感 初めてのコード⽣成が驚くほど ⾼精度だった フィードバックを送ったところ CEO から直接返信 他ツールとの違い ⼀般的なデザイン→ コードツール • 精度の低いコード⽣成 • 過剰なコード量 • コンポーネント構造 の理解が不⼗分 • デザイナーとエンジニア間 の溝が解消されない • 再利⽤性の低さ Locofy.ai • ピクセルパーフェクトな精度 • クリーンで最適化されたコード • コンポーネントを適切に 認識・構築 • デザイナー視点で 作られたツール • 実⽤的な再利⽤ 可能なコード

#DevRelKaigi 技術的興味から始まったフィードバック 1 2 3 4 製品発⾒ 技術評価 フィードバック 関係構築 Figma Community 内で Locofy.ai プラグインを発⾒ 実際のプロジェクトで 試⽤し技術的優位性を 確認 詳細な技術 フィードバックを 企業に直接送信 CEO との 直接対話が始まり 信頼関係構築 具体的かつ実⽤的なフィードバックを提供 ⽇本のエンタープライズ環境での実⽤性、UI/UX の改善点、導⼊障壁などを詳細に報告 CEO との直接対話 フィードバックの質と具体性がきっかけとなり、CEO から個別の返信と対話の提案 実際の PoC 事例や課題感の共有が関係深化のきっかけに ⽇本市場特有の要件や懸念点を製品開発チームに直接伝える役割を担うように

#DevRelKaigi 関係性の変化︓ユーザーから協⼒者へ 単なる ユーザー フィードバック 提供者 パートナー 候補 Regional Advocate ユーザーからパートナー候補へ 技術フィードバックや具体的な改善提案がきっかけで、単なる製品ユーザーから協業検討対象へ関係性が進化 実際の現場での導⼊・利⽤例の共有 エンタープライズ環境での実証実験結果やユースケースを Locofy チームに提供し、製品改善に貢献 ⽇本市場ニーズの伝達と翻訳役 ⽇本企業特有の要件や⽂化的背景をシンガポール本社チームに伝え、ローカライズ対応を⽀援 “当初は単なる興味から始まった関係が、互いの価値を⾒出す協⼒関係へと発展。 ⽇本とシンガポールという距離を越えて、技術的な会話が⾃然と続いた”

#DevRelKaigi 潜在顧客紹介者としての活動 具体的な活動内容 ⼤⼿企業向け導⼊提案 技術理解と説得⼒を活かし、エンタープライズレベルでの導⼊メリットを 具体的に提⽰。製品の技術的価値と業務効率化の数値を明確に説明 東証 プライム ⼤⼿ SIer Locofy.ai IT コミュニティ 東証プライム上場企業との商談橋渡し 保守的な意思決定プロセスを理解し、セキュリティや社内承認に関する 具体的な懸念点を事前に解消。技術と業務の両⾯から導⼊メリットを提⽰ コミュニティ内での⾃発的プロモーション スタート アップ ⾃ら構築した多⾓的なビジネスネットワーク 技術セミナーやカンファレンスで実際のユースケースを共有 AI 駆動開発勉強会など⾃主的なコミュニティ活動を通じた認知度向上 技術的説得⼒の発揮 ⻑年の DevRel 経験と技術知識を活かし、⽇本企業特有の要件に対する 製品の適合性を的確に説明。実際のデモを交えた具体的な価値提案 ビジネス成果 エンジニアとしての専⾨知識とビジネス感覚の両⽴が スタートアップ成⻑の加速要因に

#DevRelKaigi 代理店契約から Regional Developer Advocate へ 役割の進化 個⼈ユーザー 2023年初頭 熱⼼なフィードバックを提供する⼀ユーザーとして開始 紹介パートナー 2023年中頃 ⽇本企業への紹介・営業活動を⾃発的に開始 代理店契約 2023年後半 正式な代理店として⽇本市場での販促活動を担当 Regional Developer Advocate 2024年〜 技術⽀援・啓発活動を公式に担当する役割も Regional Developer Advocate 活動 両国間の通訳 技術的内容を正確に 翻訳、 ⽂化的ギャップ を埋める橋渡し役 広報活動 技術カンファレンスでの 講演や記事執筆を 通じた認知度向上 商談サポート ⽇本企業との商談に同席、 技術的質問への対応と 導⼊を⽀援 製品フィードバック ⽇本市場ニーズを反映した 製品改善の提案と検証 副業としての価値 本業で培った技術的専⾨性とコミュニケーション能⼒が、 海外スタートアップとの協働で新たな価値を創出

#DevRelKaigi 実践的活動︓CEO 来⽇と⽇本語講演担当他、イベントのサポート 技術通訳＆⽇本語での登壇 シンガポールからの CEO 来⽇で⽇本語版の講演を担当 ➔ 単なる翻訳ではなく、⽇本企業⽂化へのローカライズが重要 ➔ 技術⽤語と⽇本市場特有の関⼼事をつなぐ橋渡し役 商談＆デモのリアルタイムサポート 顧客ミーティングでタイムリーな技術デモの実施 ➔ 質問に対する即時技術回答と実装サンプル提⽰ ➔ ⽇本企業特有の技術課題に現場で対応 国を越えた連携の難しさとやりがい 直⾯した課題 時差によるコミュニケーション 意思決定プロセスの差 ビジネス⽂化の違い ニュアンスの翻訳 得られたやりがい 両国の優れた側⾯を体験 技術の普及に直接貢献 異⽂化コミュニケーション能⼒向上 グローバル視点のキャリア構築 “技術を超えて⼈と⼈、⽂化と⽂化をつなぐ役割が、 海外スタートアップと⽇本企業の協働では最も重要"

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

Design To Code 実践 #DevRelKaigi

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

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

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

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

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

#DevRelKaigi 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 の設定と使⽤⽅法 エディタでの設定⽅法 #DevRelKaigi 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 コードのカスタマイズ例 アクセシビリティの追加 フォームバリデーション ダークモード対応

#DevRelKaigi

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

Japan DX Expo での講演 #DevRelKaigi 思いがけず写真撮影と FB へのポストとコメント 戴いた松下 享平さん、 偶然にも会場で声かけ てくれた⽊原 康智さん、 ⼤変嬉しかったです。 有り難うございました︕

#DevRelKaigi 顧客ミーティングでの技術デモと通訳 実際の現場での活動 Live デモの実施 Figma上での実際の操作を顧客の具体的なユースケース に合わせて実演。技術的な仕組みを⽇本語で分かりやすく 解説 技術 QA の即時対応 顧客からの細かい技術質問を翻訳し、開発者とのリアルタイ ム連携でその場で回答。事前に想定問答集を準備 コード⽣成結果の詳細説明 ⽣成されたコードの構造と品質をエンジニア視点で解説。 ⽇本企業特有の品質要求への対応⽅法を強調 導⼊障壁への対応 セキュリティ懸念 ⽂化的ギャップを埋める通訳の秘訣 ⽇本 企業⽂化 技術的翻訳 シンガポール スタートアップ⽂化 Regional Developer Advocate の役割 単なる翻訳を超えて 関係構築の調整役 技術⽤語の正確な対応だけで なく、⽂化的背景や⽂脈を含め た「意図」の翻訳が重要 ⽇本企業の意思決定プロセスと スタートアップの俊敏性のバラン スを取る 業界特化の知識活⽤ フィードバックの循環 → オンプレミス構成の提案 企業内承認プロセス → 段階的導⼊パターンの提⽰ 既存システム連携 → API 連携実績の具体例共有 ⾦融・製造業など業界固有の 課題と⽤語を理解して翻訳に 活かす 顧客の反応を製品改良に繋 げるため、正確に開発チーム へ伝達

#DevRelKaigi 得られた知⾒と教訓 副業とキャリア拡張のリアリティ 難しさ 技術コミュニティとキャリア機会 コミュニティからチャンスへ 時間管理の難しさ - 本業と副業の両⽴ コミュニティでの積極的な貢献と知⾒共有 ⽂化的ギャップ - ⽇本企業と海外スタートアップの違い 特定の技術領域でのプレゼンスの確⽴ ⾮公式→公式の役割移⾏に伴う責任の変化 関連企業からの⾮公式・公式オファー 「翻訳者」としての価値 醍醐味 技術への情熱が収⼊源に変わる体験 キャリアの多⾓化による市場価値向上 国際的なネットワークの構築 バランスの重要性 技術的好奇⼼」と「ビジネス価値」の両⽴が、 持続可能なキャリア拡張につながる 技術と⼈ 国と国 開発とビジネス 製品と市場 境界を越える「通訳」は 単なるスキル以上の価値がある

Figma – Locofy.ai – Cursor 連携がさらに効率的になった 新プラグイン UI Pro 連携とコード変換のフロー開発中の画⾯の共有

#DevRelKaigi これからの可能性 Tech ⼈材×グローバル副業時代の到来 地理的制約を越えた新しい働き⽅がテック業界で加速 技術スキル ⾔語・⽂化理解 グローバル 価値創出 技術アドボカシーの副業展開ルートモデル ユーザー フィードバック提供 コラボレーション 公式アドボケイト 本業の専⾨性×技術好奇⼼×コミュニケーション⼒が新たなキャリアパスを開く ⽇本×海外スタートアップ連携の展望 ⾔語・⽂化の架け橋 イノベーション共創 技術的背景を持つ通訳者の重要性が急増 ⽇本特有のニーズを反映した製品改良 国際的市場展開 コミュニティ形成 ⽇本企業の海外テクノロジー導⼊加速 国境を越えた技術共有と学習の場

#DevRelKaigi AI 駆動開発の最前線を⼀挙紹介︕ https://www.ai-driven.dev/

AI 駆動開発カンファレンス 2025年秋 キーノート https://www.ai-driven.dev/ #DevRelKaigi

AI 駆動開発カンファレンス 2025年秋 特別招待講演 https://www.ai-driven.dev/ #DevRelKaigi

#DevRelKaigi 本⽇のキーポイント 技術への情熱が新しいキャリアの扉を開く 「翻訳者」としての価値を発揮する 国境を越えた技術協働の可能性 職業エバンジェリストにどうなっていくのか Thank you for your attention!