Locofyとは丨生成AI 用語集
最終更新日:
2025年7月25日
ライター:
PM Career編集部
プロダクト開発
この記事の監修者
佐々木真
PM Career事業責任者（Xアカウント ＠shin_sasaki19）
株式会社リクルートにて「スタディサプリ」の初期メンバーとして事業開発・プロダクトマネージャー業を担当し全国展開を達成後、SmartHRのグループ会社としてToB向けSaaS「SmartMeeting」を立ち上げ2021年3月に退任。その後PMオンラインスクール「PM School」、プロダクト開発人材の転職サイト「PM Career」の事業を運営中。プロダクト開発の知見・人材の流動性を高め、日本のプロダクト作りをぶち上げるべく尽力中。個人としてもX（Twitter）アカウントのフォロワーは3万人超え、YouTubeやPodcastでもプロダクト開発のコンテンツを発信する日本で最も有名なプロダクト開発者の1人。
今すぐ転職をしたい人も、中長期的にしたい方も、PM Careerに無料会員登録をしておくことでキャリアに役立つ情報を定期的にキャッチアップすることが重要です。まだ登録されてない方はこちらからどうぞ。3分で完了します。
PM Careerに無料会員登録する
転職についての情報はこちらをご覧ください！
Locofyとは？
Locofy（ロコファイ）は、デザインツール（例：Figma、Adobe XD）で作成したUIを、React、Next.js、Vue、HTML/CSSなどのコードに自動変換することができるUI開発支援プラットフォームです。デザインと実装の間にある手作業の工程を自動化し、プロダクトの開発スピードを大幅に向上させるツールとして注目されています。
主な特徴と機能
Locofyは、ノーコード・ローコードの思想を取り入れながらも、エンジニアの実装業務に直結する高品質なコード出力を重視しており、以下のような機能を提供しています。
- FigmaやXDからのコード生成：デザインファイルを読み込み、数クリックでReactやVueのコードに変換
- レスポンシブ対応の出力：モバイル・タブレット・PCなど複数の画面サイズに適したコードを自動生成
- リアルタイムプレビューとカスタマイズ：生成結果を確認しながら、属性やロジックを手動で微調整可能
- 開発者向けコード最適化：クリーンで編集しやすいコードを出力し、既存コードとの統合も想定
- コンポーネント設計に対応：UIパーツをReactのコンポーネントとして再利用しやすい形で生成
Locofyと生成AIの関係
Locofy自体は従来「コード生成自動化ツール」として分類されてきましたが、近年はプロンプトベースでの指示やAIによる属性推論・コード提案機能など、生成AI技術との融合が進んでいます。
その結果、開発者が自然言語や簡易なUI操作で、実装に近いレベルの成果物を得られるようになりつつあります。
導入のメリット
Locofyは、特に以下のような課題を持つチームにとって有効です。
- デザインと実装の連携コストを削減したい
- プロトタイプを素早くコード化して検証したい
- フロントエンドのコーディングリソースを効率化したい
デザイナーとエンジニアの連携を強化し、開発初期のスピードと柔軟性を同時に高める手段として導入が進んでいます。
