【2026年最新版】Locofy(ロコファイ・デザイン→コード変換)が使えない・変換できない時の対処法

公開日：2026/06/23　更新日：2026/06/23　

※本ページにはプロモーション(広告)が含まれています

FigmaやPenpotで作ったデザインを、AIの力でReactやHTML/CSSなどのコードに変換してくれるとされるツール「Locofy（ロコファイ・locofy.ai）」を使おうとして、「プラグインが読み込まない」「変換ボタンを押しても進まない」「出てきたコードのレイアウトが崩れている」といったトラブルで止まってしまった、という方は多いはずです。結論から先にお伝えすると、原因の多くはプラグインやデザインツールのバージョン・ログイン状態・デザインのレイヤー構成（自動レイアウトの有無）・連携や認証の権限・プランやクレジット（トークン）の残量のいずれかに集約される傾向があります。

この記事では、デザイナーや開発者寄りの方に向けて、Locofyがうまく動かないときに「どこを・どの順番で」確認すればよいかを、つまずきやすいポイントごとに整理して解説します。Locofyは2025年から2026年にかけて機能の追加や仕様の更新が活発なツールであり、メニュー名・ボタンの位置・対応フレームワーク・無料枠やプランの条件は、お使いのバージョン・地域・契約プランによって変わる可能性があります。最終的な正解は必ず公式情報（locofy.aiの公式ドキュメントや料金ページ）でご確認いただく前提で、本記事は「あたりの付け方」を提供するものとお考えください。

トラブルシューティングで大切なのは、いきなり一つの原因を決め打ちしないことです。Locofyのように「デザインツール」「ブラウザのプラグイン」「クラウド上のビルダー」「外部サービスとの連携」という複数の要素が絡むツールでは、表面的な症状だけでは原因の層が見えにくいことがよくあります。たとえば「変換が進まない」という同じ症状でも、実体はログイン切れだったり、デザインが大きすぎてタイムアウトしていたり、というケースがあり得ます。そこで本記事では、影響範囲が大きく確認の手軽な項目から順に並べ、上から潰していけば自然と原因にたどり着けるよう構成しています。一つずつ確認しながら、落ち着いて切り分けていきましょう。

まず3行で:Locofyが使えないときの最初の一手

細かい原因を追う前に、まずこの3つを上から順に確認すると、多くのケースで原因の切り分けが進みます。難しい設定は不要で、いずれもすぐに試せる基本的な確認です。

デザインツール（Figma等）とLocofyプラグインを最新版に更新し、いったんログインし直す（プラグインが読み込まない・止まる系の多くはここで改善することがあります）。
変換したいフレームのレイヤー構成を整理し、自動レイアウト（Auto Layout）を設定しておく（コードが崩れる・レイアウトがおかしい系の基本対策です）。
プランやクレジット（トークン）の残量、連携先の権限を確認する（途中で止まる・エクスポートできない系で見落としがちなポイントです）。

この3点を押さえるだけで、「どの層で詰まっているのか」がかなり見えてきます。以降の章で、それぞれを掘り下げていきます。

この記事でわかること

そもそもLocofy（ロコファイ）とはどんなツールで、何ができるとされているのか
Locofy Lightningプラグインが動かない・読み込まないときに見るポイント
デザインがうまく変換されない・コードが崩れるときの整え方
自動レイアウト（Auto Layout）やタグ付け（最適化）の考え方
エクスポートやGitHubなどへの連携ができないときの確認手順
レスポンシブ（画面サイズ対応）が崩れるときに見直す設定
無料枠やコンポーネント数・クレジットの制限についての考え方
それでも直らないときの一般的な対処と問い合わせの進め方

症状別早見表

まずは今の症状がどの分類に近いかを、下の表でざっくり当ててください。詳しい手順は各章で説明します。なお表の内容は一般的な傾向であり、実際の挙動はバージョンやプランによって異なる場合があります。

症状	よくある原因	最初に見る章
プラグインが起動しない／読み込み中のまま進まない	プラグインやデザインツールが古い・ログイン切れ・通信不安定	プラグイン編
変換は終わるがレイアウトが崩れている	自動レイアウト未設定・レイヤー構成が複雑	変換崩れ編
要素が意図どおりに認識されない	タグ付け（最適化）が不足・グループ構造の問題	タグ付け編
エクスポートや連携でつまずく	連携の認証切れ・権限不足	エクスポート編
画面幅を変えると表示が崩れる	ブレークポイントや制約（Constraints）の設定	レスポンシブ編
途中で止まる・制限の表示が出る	無料枠やクレジット（トークン）の上限	プラン編

Locofy（ロコファイ）とは:デザインをコードに変換するツール

Locofy（ロコファイ・locofy.ai）は、FigmaやPenpotなどのデザインツールで作った画面デザインを、AIの助けを借りてフロントエンドのコードに変換できるとされているサービスです。手作業でデザインを見ながらHTMLやCSSを書き起こす作業を、ツールが下支えしてくれる、というイメージです。出力できるとされるコードの種類は幅広く、React・HTML/CSS・Vue・Angular・Next.js・React Nativeなど、複数のフレームワークに対応しているとされています。どの形式に対応しているか、また各形式の細かな出力仕様は更新されることがあるため、最新の対応状況は公式情報でご確認ください。

デザインツールのプラグインとして動く

Locofyの基本的な使い方は、FigmaやPenpotに専用のプラグインをインストールして、その中から操作する形だとされています。デザインツールの中でプラグインを開き、変換したいフレーム（画面）を選んで処理を走らせると、Locofy側がデザインの構造を読み取り、対応するコードや、ブラウザで確認できるプレビューを生成してくれる、という流れです。デザインの環境から離れずに作業を進められる点が、デザイナーにとっての利点とされています。

LightningモードとClassic（Legacy）モード

Locofyには、大きく分けて2つの進め方が用意されているとされます。一つは「Locofy Lightning」と呼ばれる、AIがフレーム全体を解析して比較的少ない操作でコード化を進めるモードです。もう一つは「Classic（クラシック）」あるいは「Legacy（レガシー）」と呼ばれる、要素を一つずつ手作業でタグ付け（最適化）しながら段階的に変換していくモードです。前者は手早く全体を変換したいとき、後者は細部を自分でコントロールしたいときに向いている、という位置づけだと理解しておくと整理しやすいでしょう。モードの名称や提供状況は変更される可能性があるため、画面表示と公式の説明を優先してください。

プラグイン以外の使い方もあるとされる

近年のLocofyは、デザインツールのプラグインだけでなく、コマンドラインから扱うCLIや、AI開発支援ツールと連携するための仕組み、フレームのURLを渡して取り込む方法など、利用者の役割に合わせた複数の入り口を用意しているとされています。本記事では、もっとも多くの方が使うであろう「デザインツールのプラグイン」を中心に解説しますが、別の入り口を使っている場合は、それぞれに対応した公式ドキュメントもあわせてご確認ください。

UIは英語が中心とされる

Locofyの操作画面は、英語表記が中心だとされています。日本語に慣れた方にとってはメニュー名が分かりにくく感じられることがありますが、本記事では主要な操作を日本語で補足しながら説明します。ボタンのラベルや文言は更新されることがあるため、見当たらない場合は近い意味の英語表記を探してみてください。

「デザインの構造」を読み取ってコード化する、という考え方

トラブルを切り分けるうえで知っておくと役立つのが、Locofyは「見た目」だけでなく「構造」を読み取ってコードに変換しようとする、という発想です。人がデザインを見れば「これはボタン」「これは縦に並んだリスト」と直感的に分かりますが、ツールはレイヤーの並び方や自動レイアウトの設定、グループの入れ子といった手がかりから、その意図を推測します。

つまり、デザインが整理されていて意図が読み取りやすいほど、出力されるコードもきれいになりやすく、逆に手がかりが乏しいデザイン（要素をただ置いただけ、名前が自動名のまま、グループが無秩序）では、ツールが意図を取り違えて崩れにつながりやすい、という関係になります。「Locofyの不具合」と感じる症状の多くが、実はデザイン側の手がかり不足に由来する、という点を頭の片隅に置いておくと、原因の見当が付けやすくなります。本記事で繰り返し「まずデザインを整える」とお伝えするのは、この理由からです。

Locofy Lightningプラグインが動かない・読み込まないとき【プラグイン編】

もっとも多い相談が、「プラグインを開いても読み込み中のまま進まない」「ボタンを押しても反応しない」というものです。この種のトラブルは、プラグインそのものよりも環境側の状態が原因になっていることが少なくありません。次の順番で確認してみてください。

1. デザインツールとプラグインを最新版に更新する

まず確認したいのが、FigmaなどのデザインツールとLocofyプラグインのバージョンです。デザインツール本体やプラグインが古いままだと、内部の仕様が噛み合わずに動作が不安定になることがあります。

デスクトップアプリ版を使っている場合は、アプリを最新版に更新します（多くの場合、再起動で更新が反映されます）。
ブラウザ版を使っている場合は、ブラウザを最新にしたうえで、ページを再読み込みします。
Locofyプラグイン自体も、提供元の最新版になっているかを確認します（自動更新されないケースもあるため、プラグイン管理画面を見直すと確実です）。

更新後は、いったんデザインツールを完全に閉じてから開き直すと、状態がリセットされて改善することがあります。

2. ログインし直す（セッション切れの解消）

プラグインが途中で止まる原因として見落とされがちなのが、ログインセッションの期限切れです。一定時間が経過すると認証が切れ、見た目は動いているのに処理が進まない、という状態になることがあります。

Locofyプラグイン内のアカウントメニューから、いったんログアウトします。
再度ログインし直し、プラグインを開き直します。
それでも改善しない場合は、プラグインをいったん削除して入れ直す（再インストールする）ことも検討します。

再ログインだけで読み込みが正常化するケースは多いため、早い段階で試す価値があります。

3. 通信環境とブラウザ・拡張機能を確認する

Locofyはクラウド側と通信しながら動くため、ネットワークの不安定さが読み込みの停滞につながることがあります。社内ネットワークやVPN、セキュリティソフトが特定の通信を制限している場合もあります。

別の安定した回線（自宅やテザリングなど）で同じ操作を試し、回線が原因かどうかを切り分けます。
ブラウザ版で使っている場合は、広告ブロックなどの拡張機能を一時的にオフにして再読み込みします。拡張機能が通信を遮っていることがあります。
うまくいかないときは、別のブラウザやシークレットウィンドウで試すと、拡張やキャッシュの影響を切り分けられます。

4. ビルダー（クラウド画面）が読み込みのまま固まるとき

プラグインから生成したプロジェクトをクラウド上のビルダー画面で開いた際に、読み込み画面のまま止まることがあります。この場合は、無理に待ち続けるよりも、いったん同期や作り直しを試すほうが早いことがあります。

デザインファイル側に戻り、もう一度プラグインからプロジェクトを同期（sync）し直します。
それでも改善しない場合は、新しいプロジェクトを作成し、デザインを新規プロジェクトとして同期し直します。
ブラウザのキャッシュをクリアしてから開き直すのも有効なことがあります。

具体的な操作名や手順はバージョンによって異なる可能性があるため、見当たらない場合は公式のトラブルシューティング情報をあわせてご確認ください。

5. デザインが大きすぎる・重すぎる場合

変換しようとしているフレームが非常に大きい・要素が極端に多い場合、解析に時間がかかって止まったように見えることがあります。その場合は、いったん小さな範囲で試すのが切り分けに有効です。

まずはシンプルな小さなフレームを一つだけ変換してみて、プラグイン自体が正常に動くかを確認します。
正常に動くなら、大きなページをセクションごとに分割して、無理のない単位で変換していきます。
不要な非表示レイヤーや使っていない要素が大量に残っている場合は、整理してから試すと軽くなることがあります。

プラグイン以外の使い方でつまずくとき【CLI・連携編】

Locofyには、デザインツールのプラグイン以外にも、開発者向けの入り口が用意されているとされます。プラグインではなくこうした方法を使っていてつまずいている場合は、確認すべきポイントが少し変わります。代表的な入り口について、一般的なつまずきどころを整理します。なお各機能の名称・提供状況・利用条件は変更されることがあるため、最新は公式情報でご確認ください。

コマンドライン（CLI）で使う場合

ターミナルから扱うCLI（コマンドラインツール）を使う場合、プラグインのトラブルとは別に、開発環境側の問題が絡みます。コマンドが見つからない、認証が通らない、といった症状が中心になります。

CLIが最新版になっているかを確認します。古いバージョンのままだと、サービス側の仕様変更に追従できず不具合が起きることがあります。
ログイン（認証）が必要な場合は、トークンやログイン状態が有効かを確認します。認証切れは「急に動かなくなった」原因として典型的です。
うまくいかないときは、まず簡単な確認コマンド（バージョン表示など）が動くかを試し、ツール自体が正しく入っているかを切り分けます。

AI開発支援ツールと連携して使う場合

近年は、AIのコーディング支援ツールやエージェントと連携してLocofyを使う仕組みも案内されているとされます。この場合、Locofy単体ではなく連携先のツール側の設定が原因になっていることがあります。

連携の接続情報（認証や設定）が正しく入っているかを確認します。
連携先のツールが、Locofyとの連携に対応したバージョンになっているかを確認します。
片方だけ更新して仕様がずれていることがあるため、両方を最新にそろえると安定することがあります。

フレームのURLから取り込む場合

デザインのフレームのURL（リンク）を渡して取り込む方法を使う場合は、共有設定・アクセス権限が壁になりがちです。リンクは渡せても、相手（Locofy側）がそのデザインを閲覧できなければ取り込めません。

共有しようとしているフレームやファイルの共有設定（閲覧権限）を確認します。限定公開のままだと取り込めないことがあります。
URLが正しいフレームを指しているか、コピーミスがないかを確認します。
組織で管理されているファイルの場合、外部サービスからのアクセスが制限されていることがあります。

いずれの入り口でも、共通して効くのは「最新版にそろえる」「認証・権限を確認する」という基本です。これはプラグインのトラブルと同じ考え方であり、入り口が違っても切り分けの軸は変わりません。

変換は終わるがレイアウトが崩れるとき【変換崩れ編】

「変換自体は完了したのに、出てきたコードのレイアウトがデザインと違う」「要素が重なったり、変な位置に飛んだりする」というのも、よくある悩みです。これは多くの場合、デザイン側の構造に原因があります。コードを直接いじる前に、まずデザインを整えるのが近道です。

1. 自動レイアウト（Auto Layout）を活用する

レイアウトの崩れで真っ先に見直したいのが、自動レイアウト（Auto Layout）の設定です。自動レイアウトを使わずに、要素を絶対座標で「置いただけ」のデザインは、変換時に位置がうまく解釈されず、崩れの原因になりやすいとされています。

並んでいるボタンやリスト、カードなど、規則的に並ぶ要素には自動レイアウトを設定します。
縦並び・横並び・要素間の余白（gap）・内側の余白（padding）を、自動レイアウトの仕組みで指定しておきます。
これにより、ツール側が「これは縦に並んだリストだ」といった意図を読み取りやすくなり、コードの構造が整いやすくなります。

絶対位置で配置した要素は、コード化したときに固定的な位置指定になりやすく、画面幅が変わると崩れる傾向があります。自動レイアウトへの置き換えは、崩れ対策の基本と考えてよいでしょう。

実際、Locofyの案内でも、要素が絶対位置（決め打ちの座標）で出力されてしまう問題に対しては、自動レイアウトを使う方向で整えるのが基本とされています。「なぜか要素が画面の左上に固まる」「重なってしまう」といった崩れは、デザインの該当部分が絶対位置のままになっていないかを疑うのが近道です。崩れている箇所だけでもよいので、自動レイアウトに置き換えてから再変換すると、改善が見込めます。

2. レイヤー構成を整理する

レイヤーの構造が複雑すぎたり、意味のないグループが何重にもなっていたりすると、ツールが要素の役割を読み取りづらくなります。人間が見て分かりやすい構造は、ツールにとっても解釈しやすい構造です。

レイヤーやフレームに、内容が分かる名前を付けておきます（「Frame 123」のような自動名のままにしない）。
意味のない入れ子のグループは、できる範囲でまとめたり外したりして整理します。
同じ役割の要素は、まとまり（グループやフレーム）として整えておきます。

3. 画像とフォントの扱いを確認する

画像やフォントが原因で見た目が変わることもあります。デザインで使っているフォントが、出力先の環境に存在しない場合は、別のフォントに置き換わって印象が変わることがあります。

画像は、書き出し設定が適切になっているか（解像度や形式）を確認します。
使っているフォントが特殊な場合は、コード側で同じフォントを読み込む必要が出てくることがあります。Web上で利用できるフォントかどうかを意識しておくと安全です。
アイコンなどは、画像として書き出すのか、文字として扱うのかで結果が変わることがあります。

4. 「整えてから変換」を習慣にする

崩れたコードを後から手で直すより、デザインを整えてから変換し直すほうが、結果的に手戻りが少なくなることが多いです。崩れが目立つときは、コードを修正する前に一度デザイン側に戻り、自動レイアウトとレイヤー構成を見直してから再変換する、という流れをおすすめします。

要素が意図どおりに認識されないとき【タグ付け編】

Locofyでは、「ここはボタン」「ここは入力欄」「ここは画像」といった要素の役割をツールに教える作業が用意されているとされます。これはモードによって、自動で行われたり、手作業で指定したりします。要素が思ったとおりに認識されないときは、このタグ付け（最適化）を見直すと改善することがあります。

1. 手動でタグ付け（最適化）する

Classic（クラシック）のような段階的なモードでは、要素を選んで「これはボタン」「これは入力欄」と指定していく作業が中心になるとされています。自動で正しく認識されなかった要素は、手動で正しい種類に指定し直すことで、出力されるコードの意味が整います。

うまく認識されていない要素を選択します。
その要素が本来どういう役割か（ボタン・リンク・入力欄・画像など）を指定します。
同じ種類の要素が複数ある場合は、一括で扱える機能がないか確認すると効率的です。

2. コンポーネント化でばらつきを減らす

同じ見た目の部品（ボタンやカードなど）がデザイン上でバラバラに作られていると、変換結果もばらつきやすくなります。共通部品はコンポーネントとしてまとめることで、ツール側も「これは繰り返し使われる部品だ」と認識しやすくなり、コードの再利用性が高まることがあります。

3. デザインの変更を変換に取り込む

Locofyには、デザイン側で行った変更を検知して、次の変換に反映する仕組みがあるとされています。デザインを直したのに結果に反映されていないと感じたときは、変更を取り込んだうえで再変換できているかを確認してください。古いプロジェクトのまま作業していると、修正が反映されていないことがあります。

エクスポートや連携ができないとき【エクスポート編】

生成したコードを書き出したい、あるいはGitHubなどの外部サービスに連携したい、という段階でつまずくこともあります。この種のトラブルは、認証や権限に原因があることが多いです。

1. 連携サービスの認証をやり直す

GitHubなどと連携する場合、連携の認証（ログイン許可）が切れていたり、最初の設定が不完全だったりすると、書き出しや反映ができません。

Locofyの設定画面で、連携サービスの接続状態を確認します。
いったん連携を解除して、もう一度連携し直す（再認証する）と、状態がリセットされて改善することがあります。
連携時に求められる権限（リポジトリへのアクセスなど）を、必要な範囲で許可できているかを確認します。

2. アクセス権限を確認する

連携先のリポジトリやプロジェクトに対して、書き込みや作成の権限がない場合、エクスポートに失敗します。とくにチームや組織のリポジトリでは、個人アカウントの権限が制限されていることがあります。

連携先のリポジトリに対して、自分のアカウントが必要な操作（作成・書き込み）を行える権限を持っているか確認します。
組織で管理されている場合は、管理者にLocofyの連携を許可してもらう必要があるか確認します。

3. ダウンロード形式での書き出しを試す

外部連携がうまくいかないときは、いったんコードを手元にダウンロードする方法に切り替えると、連携の問題と切り分けられます。手元に書き出せるのに連携だけ失敗するなら、原因は連携側（認証・権限）にあると判断できます。書き出し方法の名称や場所はバージョンによって変わる可能性があるため、画面表示に従って操作してください。

画面幅で表示が崩れるとき【レスポンシブ編】

「パソコンの幅では正しく表示されるのに、スマートフォンの幅にすると崩れる」というのも、デザインからコードへ変換する際によくある課題です。これはレスポンシブ（画面サイズ対応）の設定を見直すことで改善することがあります。

1. ブレークポイントを見直す

レスポンシブ対応は、「この画面幅を境に、レイアウトをこう切り替える」というブレークポイントの考え方が基本です。Locofyにもレスポンシブの挙動を調整する仕組みがあるとされるため、想定する端末幅でどう表示されるかを確認しながら設定を見直します。

パソコン・タブレット・スマートフォンなど、主要な幅でプレビューを確認します。
崩れる幅があれば、その幅でのレイアウトを意図どおりに調整します。

2. 制約（Constraints）と自動レイアウトを整える

デザインツール側の制約（Constraints）や自動レイアウトの設定が、レスポンシブの挙動に影響します。たとえば「左に固定」「左右に伸びる」といった制約の指定が適切でないと、幅が変わったときに要素が思わぬ動きをします。

幅が変わったときに伸びてほしい要素には、左右に伸びる制約や自動レイアウトの伸縮設定を使います。
固定したい要素には、固定の制約を指定します。
絶対座標で置いただけの要素は、幅が変わると崩れやすいため、自動レイアウトへの置き換えを検討します。

具体的な制約の指定方法はデザインツール側の機能であり、Locofyはその情報を読み取ってコード化するという関係です。レスポンシブの崩れは、コード側だけでなくデザイン側の制約から見直すと解決が早いことがあります。

途中で止まる・制限が表示されるとき【プラン編】

「ある程度まで進むと止まる」「制限に達したような表示が出る」という場合は、無料枠やプラン、クレジット（トークン）の上限に達している可能性があります。Locofyは利用量に応じたプランが用意されているとされ、無料の範囲には一定の制限があるのが一般的です。

1. クレジット（トークン）の残量を確認する

Locofyの利用量は、クレジットやトークンといった単位で管理されているとされます。変換のたびに消費される仕組みの場合、残量が尽きると処理が止まることがあります。アカウントの利用状況の画面で、残量や使用量を確認してみてください。

2. 無料枠とプランの条件を確認する

無料で使える範囲には、変換できる量やコンポーネント数などに上限が設けられていることがあります。仕事として継続的に使う場合は、有料プランへの切り替えが現実的な選択肢になります。プランごとの具体的な条件や金額は変動しうるため、必ず公式の料金ページで最新の内容をご確認ください。本記事では、特定の金額やクレジット数を断定することは避けます。

3. 必要な分だけ効率的に変換する

無料枠の中で試したい場合は、本当に必要なフレームだけを変換する、まずは小さな範囲で品質を確かめてから本番のページを変換する、といった工夫で消費を抑えられます。いきなり全ページを一気に変換するのではなく、段階的に進めるのが安全です。

それでも直らないときの一般的な対処

ここまでの確認をしても解決しないときは、もう一度、影響範囲の大きい基本対処に立ち返るのが有効です。次のチェックリストを上から順に試してみてください。

デザインツールとLocofyプラグインを最新版に更新する（バージョン不一致は不具合の温床です）。
ログインし直す（セッション切れは静かに不具合を起こします）。
プラグインを入れ直す（再インストールする）（壊れた状態のリセットに有効です）。
レイヤーを整理し、自動レイアウトを設定する（崩れ系の大半はここで改善します）。
連携を再認証し、権限を確認する（エクスポート系の基本です）。
プランやクレジットの残量を確認する（止まる系で見落としやすい点です）。
別ブラウザ・別回線・シークレットウィンドウで試す（環境要因を切り分けます）。
小さなフレームで試す（ツール自体の動作確認と、デザイン側の問題切り分けに役立ちます）。

これらを試しても解決しない場合は、再現する操作・使っているデザインツールとそのバージョン・症状のスクリーンショットを整理したうえで、公式のサポート窓口に問い合わせるのが確実です。Locofyの公式ドキュメント（locofy.aiのドキュメントページ）には、トラブルシューティングの情報やサポートへの連絡先が案内されているとされますので、あわせてご確認ください。状況を具体的に伝えるほど、的確な回答を得やすくなります。

つまずきを減らすための予防策

最後に、そもそもトラブルに遭いにくくするための心がけをまとめます。Locofyは「デザインの作り方」が結果を大きく左右するツールです。日頃からデザインを整えておくことが、もっとも効果的な予防策になります。

最初から自動レイアウトで組む:後から付け替えるより、設計段階で自動レイアウトを使っておくほうが、崩れにくいコードにつながりやすいです。
レイヤーに分かりやすい名前を付ける:人にもツールにも読み取りやすい構造になります。
共通部品はコンポーネント化する:再利用性の高い整ったコードにつながりやすくなります。
小さく試してから本番に進む:いきなり大きなページを変換せず、まず一画面で品質を確認します。
定期的にプラグインとデザインツールを更新する:古いバージョンのまま使い続けると、不具合に当たりやすくなります。

うまくいくときの基本的な作業の流れ

トラブル対処と並行して、「そもそもどういう流れで進めればつまずきにくいか」を押さえておくと、再発を防ぎやすくなります。あくまで一般的な流れであり、モードやバージョンによって細部は異なりますが、考え方の地図として参考にしてください。

デザインを整える:変換したいフレームに自動レイアウトを設定し、レイヤー名を分かりやすくし、共通部品はコンポーネントにまとめます。ここでの整え方が、最終的なコードの質をほぼ決めます。
プラグインから同期・変換する:対象のフレームを選び、プラグインから処理を走らせます。最初は小さなフレームで試し、結果の傾向をつかみます。
プレビューで確認する:生成されたプレビューを、パソコン・タブレット・スマートフォンの幅で確認し、崩れがないかをチェックします。
必要に応じてタグ付け（最適化）を調整する:意図どおりに認識されていない要素があれば、役割を指定し直します。
レスポンシブを調整する:崩れる幅があれば、ブレークポイントやデザイン側の制約を見直します。
コードを書き出す・連携する:手元にダウンロードするか、GitHubなどに連携して取り込みます。連携でつまずいたら、まず手元書き出しで切り分けます。

この流れのどこで止まったかが分かれば、本記事のどの章を見ればよいかも自然と決まります。たとえば「2の段階で止まる」ならプラグイン編、「3で崩れが見える」なら変換崩れ編、というように対応します。

他のデザイン→コード変換ツールとの位置づけ

デザインからコードへ変換するツールは、Locofy以外にも複数存在するとされます。どれを使うかはプロジェクトの要件や好みによりますが、共通して言えるのは、どのツールでも「デザインの整え方」が結果を左右するという点です。自動レイアウトやレイヤー整理の重要性は、ツールが変わっても基本的に共通します。

そのため、もしLocofyで思うような結果が得られない場合でも、いきなり別ツールに乗り換える前に、まずはデザイン側を整えて再変換してみる価値があります。デザインが整っていないままツールだけ替えても、同じような崩れが起きることが多いからです。逆に、デザインをきれいに整えておけば、どのツールを使っても、また手作業でコードを書く場合でも、結果が安定しやすくなります。ツール選びの前に、まずはデザイン資産そのものの品質を高めておく、という視点を持っておくと無駄が少なくなります。

🛒 関連商品をAmazonでチェック

よくある質問（FAQ）

Q1. Locofyは無料で使えますか？

無料で試せる範囲は用意されているとされますが、変換できる量やコンポーネント数などに一定の制限があるのが一般的です。継続的・本格的に使う場合は有料プランが必要になることがあります。無料枠の条件や各プランの金額は変動しうるため、最新の内容は必ず公式の料金ページでご確認ください。

Q2. プラグインが読み込み中のまま進みません。どうすればよいですか？

まずはデザインツールとプラグインを最新版に更新し、いったんログインし直すのが基本です。それでも改善しない場合は、ブラウザのキャッシュをクリアする、別ブラウザやシークレットウィンドウで試す、プロジェクトを同期し直す、新規プロジェクトを作って同期し直す、といった手順を順に試してみてください。大きなデザインは小さく分割して試すのも有効です。

Q3. 変換したコードのレイアウトが崩れます。何が原因ですか？

多くの場合、デザイン側の構造に原因があります。要素を絶対座標で置いただけになっていないか、自動レイアウト（Auto Layout）が設定されているか、レイヤー構成が複雑すぎないかを確認してください。デザインを整えてから再変換すると、崩れが大きく改善することがあります。

Q4. FigmaとPenpot以外のデザインツールにも対応していますか？

主にFigmaやPenpotでの利用が案内されているとされます。対応するデザインツールや、URLからの取り込みなど別の入り口も用意されている場合がありますが、対応状況は更新されることがあるため、お使いのツールが対応しているかは公式情報でご確認ください。

Q5. どのフレームワークのコードに変換できますか？

React・HTML/CSS・Vue・Angular・Next.js・React Nativeなど、複数のフレームワークに対応しているとされます。ただし対応する種類や、各形式での出力品質・仕様は更新されることがあります。お使いの開発環境に合うかどうかは、最新の対応一覧でご確認ください。

Q6. GitHubに連携できません。どう対処すればよいですか？

連携の認証が切れているか、リポジトリへの権限が不足している可能性が高いです。設定画面で連携状態を確認し、いったん連携を解除してから再認証してみてください。組織で管理されているリポジトリの場合は、管理者の許可が必要なことがあります。まずは手元へのダウンロードを試して、連携固有の問題かどうかを切り分けるのも有効です。

Q7. スマートフォン幅で表示が崩れます。どこを直せばよいですか？

レスポンシブ（画面サイズ対応）の設定を見直してください。主要な画面幅でプレビューを確認し、崩れる幅でのレイアウトを調整します。あわせて、デザインツール側の制約（Constraints）や自動レイアウトの伸縮設定が適切かを確認すると、崩れの原因にたどり着きやすくなります。

Q8. 出てきたコードはそのまま本番で使えますか？

Locofyは開発の出発点となるコードを生成してくれるツールという位置づけで、プロジェクトの要件によっては手直しが前提になることが一般的です。生成されたコードの内容を確認し、命名やレスポンシブ対応、アクセシビリティなどを必要に応じて整えてから使うのが安全です。最終的な品質や採用可否は、ご自身のプロジェクト基準で判断してください。

📚 あわせて読みたい

まとめ

Locofy（ロコファイ・locofy.ai）がうまく使えないときは、症状ごとに原因の層が異なります。本記事の要点を、もう一度整理します。

プラグインが動かない・読み込まないときは、まずデザインツールとプラグインの更新・ログインし直し・再インストール・通信環境の確認から。大きなデザインは分割して試す。
レイアウトが崩れるときは、コードを直す前にデザイン側を整える。自動レイアウト（Auto Layout）の活用とレイヤー構成の整理が基本。
要素が意図どおり認識されないときは、タグ付け（最適化）を見直し、共通部品はコンポーネント化する。デザイン変更が変換に取り込まれているかも確認する。
エクスポートや連携でつまずくときは、連携の再認証と権限の確認を。まず手元へのダウンロードを試して切り分ける。
レスポンシブが崩れるときは、ブレークポイントとデザイン側の制約・自動レイアウトを見直す。
途中で止まる・制限が出るときは、無料枠やクレジット（トークン）の残量・プラン条件を確認する（金額は公式の料金ページで要確認）。

Locofyは2025年から2026年にかけて活発に更新されているツールであり、メニュー名・対応フレームワーク・プランや料金などの仕様は、お使いのバージョン・地域・契約プランによって変わる可能性があります。本記事は原因の切り分け方の指針としてご活用いただき、具体的な操作や最新の対応状況については、必ずlocofy.aiの公式ドキュメントや料金ページなど、公式情報をご確認ください。落ち着いて上から一つずつ確認していけば、多くのケースで原因にたどり着けるはずです。