MarkupGenユーザーガイド
Figmaのデザインを本番品質のコードに変換するために知っておくべきすべて — 機能、プラン、制限、そして最良の結果を得る方法をご紹介します。
MarkupGenへようこそ
MarkupGenとは何か、どんな人に向いているか、そして何が違うのかをご紹介します。
MarkupGenとは？
MarkupGenは、Figmaのデザインを本番品質のフロントエンドコードに変換するプラットフォームです。専用のFigmaプラグインで作業中のフレームをエクスポートすると、MarkupGenがそれをHTMLとCSSに変換します。有料プランでは、React、Vue、Svelte、Angularのコンポーネントへの変換も可能です。内蔵のデュアルモードエディター（Code Editorとクリックして編集できるVisual Editor）により、エクスポート前に結果を調整できます。
こんな方におすすめ
デザインファイルのレイアウトを手作業で書き起こしたくないフロントエンド開発者やフリーランス、クライアントのデザインを素早く動作するページに変換したい小規模な制作会社、そしてGmail、Outlook、Apple Mailで正しく表示されるHTMLメールテンプレートを作りたい方に最適です。
解決する課題
Figmaファイルを手作業でマークアップに変換する作業は反復的で、細かなミスも起こりがちです。MarkupGenの基本変換は、Figmaのレイヤー名とAuto Layoutの設定に基づいた予測可能なルールベースのエンジンで動作するため、同じデザインは常に同じ結果に変換されます。そのうえで、インタラクティブ性、レスポンシブバリアント、品質スコアリング、ワンクリック修正といった、AIが本当に価値を発揮する部分に絞った機能群が重ねられています。
主なユースケース
- 1つのFigmaフレームやコンポーネントを、単体のHTMLページに変換する。
- デスクトップとモバイルの両方に対応するレスポンシブなランディングページを作成する。
- 各種メールクライアントで正しく表示されるよう、インラインスタイルを使ったHTMLメールテンプレートを生成する。
- デザインをReact、Vue、Svelte、Angularのコンポーネントとして自分のコードベース向けにエクスポートする（有料プラン）。
- Templatesを使って、個人やチームで再利用できるスタート地点のライブラリを構築する。
はじめに
アカウント作成から、最初に生成されたページを確認するまでの流れです。
- 1
アカウントを作成する
ワンクリックでGoogleアカウントを使って登録するか、メールアドレスとパスワードで登録します。メールでの登録では、簡単な確認チェックを行い、ログイン前にメールアドレスの確認が必要です。
- 2
サインインする
登録時と同じ方法でサインインしてください。パスワードの入力に5回連続で失敗すると、アカウントは15分間ロックされます — 「Forgot password」からいつでもメールでパスワードをリセットできます。
- 3
ダッシュボードを確認する
ダッシュボードには、「Create from Figma」ボタン、プロジェクト数と平均AI品質スコア、Quick Convertランチャー、そして最近更新したプロジェクトが表示されます。
- 4
Workspaceについて理解する
すべてのプロジェクトはWorkspace（あなたとチームメンバーで共有するスペース）の中に存在します。プロジェクト内では、Code Editor（すべてのプラン）とVisual Editor（Starter、Pro、Business）を切り替えて使用できます。
- 5
最初のプロジェクトを作成する
Figma CommunityからMarkupGenプラグインをインストールし、Figma上で開いて1つのフレームまたはコンポーネントを選択し、「Export & Send」をクリックします。
MarkupGenのダッシュボードに新しいプロジェクトが表示されます。
- 6
最初の変換を実行する
新しいプロジェクトを開いて「Generate Code」をクリックします。MarkupGenがデザインデータに接続し、レイヤーを解析して画像を抽出し、HTML/CSSを書き出す過程を確認できます。
動作するHTML/CSSページと、自動計算された0〜10の品質スコアが得られます。
- 7
結果を確認する
Codeタブでは分割表示のHTML/CSS/JSエディターを使用でき、Previewパネルでは Desktop（1280px）、Tablet（768px）、Mobile（375px）の各表示を確認できます。
- 8
コードをエクスポートする
どのプランでも、そのままのHTML/CSSをダウンロードできます。有料プランでは、単一のフレームワークコンポーネントとしてエクスポートしたり、全フレームワークをまとめてZIPバンドルとしてエクスポートしたりできます。
主な機能
製品内のすべての機能、それぞれに必要なプラン、そして仕組みについて説明します。
Figmaプラグインインポート
Figmaから選択した1つのフレーム、コンポーネント、またはグループをエクスポートします — ベクターアイコンは実際のSVGとして、背景画像、フォント、Auto Layout構造も含まれます。
Figma Communityからインストールし、一度ログインしてから1つのフレームを選択し、「Export & Send」をクリックします。
1回のエクスポートにつきフレームは1つのみです — 複数フレームやページ全体を一括インポートする機能はまだありません。
Code Editor
生成されたHTML、CSS、JSのための本格的な分割表示コードエディターです。シンタックスハイライトと自動整形に対応しています。
Visual Editor
ライブプレビュー上でクリックして直接編集できます：要素のインスペクト、ドラッグ＆ドロップによるスタイル編集、インラインテキスト編集、安全なリンク管理、トランジション付きの表示/非表示切り替えなど。
有効な有料サブスクリプションが必要で、サーバー側で制御されます。
AIセマンティック要素変換
AIを使用して、静的なレイアウトのボックスを、ボタン、input、textarea、selectといった実際に操作可能なフォームコントロールへとアップグレードします。
3段階の精度レベル：
現在のHTML構造、スタイル、プレビュー画像を解析します。
元のデザインと照合し、精度をさらに高めます。
複雑なコンポーネントを正確に分類するため、構造全体を詳細に解析します。
AI JavaScriptとインタラクティブコンポーネント
スライダー、カルーセル、アコーディオン、モーダル、タブ、フォームバリデーションといったUIパターンを検出し、動作するJSとCSSを生成します。
AIレスポンシブレイアウトジェネレーター
デスクトップ用に変換されたレイアウトを、別の画面サイズに最適化した構造へ再構成し、変更前後を並べて比較できるプレビューを表示します。
モバイルとデスクトップの2方向に対応しており、ブレークポイント（320〜2000px）を設定できます。
AI品質スコアリングと比較
生成されたコードを元のデザインと比較し、Layout、Spacing、Typography、Color、Content、Detailsという6つの重み付けされた基準に基づいて0〜10で採点します。
スコアの色分け
Excellent
元のデザインとほぼ完全に一致しています。
Good
全体的に近い仕上がりですが、いくつか目立つ差異があります。
Needs Improvement
元のデザインとの差異が大きい状態です。
スマート1クリック修正
品質スコアで検出された差異に対して、AIが生成したピンポイントの修正パッチを適用します。他のコード部分には影響しません。
自動構文・コード検証
保存前に、生成されたHTML/CSSの構文の問題を検出して修復します。
高速優先処理
1分あたり・1日あたりの生成上限が引き上げられ、Businessプランではさらに高速な処理が可能です。
コンポーネントエクスポート
生成したデザインを、そのままのHTML/CSS、単一のフレームワークコンポーネント、または全フレームワークをまとめたバンドルとしてダウンロードできます。
React（JSX/TSX）、Vue 3 SFC、Svelte 5、Angular Standaloneに対応し、ZIPバンドルとメールクライアントテストのオプションも利用できます。
CSSフレームワーク出力
CSSは、Vanilla、Tailwind、Bootstrap、Bulma、Materialize、Pico CSSの6種類のスタイルから選んで生成できます。
Vanilla、Tailwind、Bootstrapはすべてのプランで利用できます。Bulma、Materialize、Pico CSSの利用には有料プランが必要です。
出力モード
Standard Web Page（Flexbox/Gridへの直接変換）、Responsive Layout（複数画面に対応する流動的なレイアウト）、Email Template（Gmail、Outlook、Apple Mail向けのインラインCSSテーブル）から選べます。
Email Templateモードでは、回転、非標準のブレンドモード、シャドウ/ぼかし効果は再現できません — これらは簡略化されるか、画像としてラスタライズされます。
Templates
自分のプロジェクトを再利用可能なTemplateとしてマークし、Workspace内の検索可能なギャラリーに表示できます。
Figmaからコードへのワークフロー
デザインの準備から変換、確認までの一連の流れを説明します。
整ったFigmaから、きれいなコードが生まれる
これは単なる心構えの話ではなく、エンジンの動作原理そのものです。セマンティックなHTMLタグ、アクセシブルなラベル、見出しレベルは、Figmaのレイヤー名とAuto Layoutの構造から直接推測されます。わかりやすい名前と一貫したAuto Layoutが使われたファイルは、「Rectangle 4」のようなデフォルト名のままグループ化されていない図形だらけのファイルよりも、明らかに高品質な変換結果になります。
Figmaファイルを準備する
レイヤーには、Figmaが自動生成した名前ではなく、「Header」「Add to Cart Button」「Hero Image」のように、その要素が何であるかがわかる名前を付けてください。可能な限りAuto Layoutを使用しましょう。Auto Layoutフレームは直接CSS Flexboxに変換されますが、Auto Layoutを使用していないフレームは固定サイズのボックスとしてエクスポートされます。個々のフレームは、レイヤー数を約2,000未満、描画面積を120メガピクセル未満に十分収まるよう保ち、大きなデザインは小さなフレームに分割してください。
インポート
エクスポートはFigmaプラグインを通じて行われ、1回のエクスポートにつき1つのフレーム、コンポーネント、またはグループが対象です。現時点では、複数のフレームやページ全体を一度にインポートする方法はありません — 各フレームを個別のMarkupGenプロジェクトとして変換してください。
設定オプション
出力モード（Standard Web Page、Responsive Layout、Email Template）、CSSフレームワーク（Vanilla、Tailwind、Bootstrapはすべてのプランで利用可能。Bulma、Materialize、Pico CSSは有料プランで利用可能）、そしてエクスポートされるアセットの画像形式（Original、PNG、AVIF、WebP、JPG）を選択できます。
生成されたHTMLを確認する
エンジンは、レイヤー名から推測した実際のセマンティックタグ（header、nav、main、footer、aside、article、section）を出力し、見出しレベルはフォントサイズと太さから推測されます。アイコンのみのボタンには実際のARIAラベルが付与され、コンテンツ画像には説明的なalt属性が付き、装飾用やベクター画像には正しく空のaltとaria-hiddenが設定されます。
CSSを確認する
Auto LayoutフレームはFlexboxとなり、gap、padding、alignmentが対応する形で反映されます。Auto Layoutを使用していないフレームは、Figmaファイルにある固定のピクセルサイズと位置をそのまま保持します。
レスポンシブ挙動
基本の変換は、Figmaフレームを1つの固定サイズでそのまま再現するもので、自動的にレスポンシブになるわけではありません。デバイスに応じて適応するレイアウトが必要な場合は、Responsive出力モードを選択するか、AI Responsive Layout Generator（モバイル・デスクトップ方向）を使用してください。
タイポグラフィ、色、余白、画像、アイコン
見出しレベルはフォントサイズと太さから推測されます。色はFigmaのfillから直接読み取られます。余白はAuto Layoutのgap、padding、alignmentに従い、Auto Layoutを使用していない場合は固定位置になります。画像は選択した形式でエクスポートされ、アイコンは可能な限り実際のSVGとして抽出されますが、複雑なfillやマスクを含む場合はPNG合成画像としてラスタライズされます。
コンポーネント、レイアウト、制約
Figmaのコンポーネントやコンポーネントセットはエクスポート時に読み取られますが、MarkupGenは現時点で、Figmaコンポーネントごとに共有・再利用可能な1つのコンポーネント定義を再構築することはしません — 各変換は独立したページまたはフラグメントとして扱われます。レイアウトはAuto Layoutと絶対的なバウンディングボックスから決まり、Figmaの制約設定（左右固定、スケールなど）は現時点では読み取られず、再現もされません。
セマンティックHTML、アクセシビリティ、SEO
セマンティックHTMLとアクセシビリティは実際に実装されている機能で、上記および「主な機能」で説明した通りです。SEO関連の出力は含まれません — MarkupGenは、生成するコードにページタイトル、メタディスクリプション、Open Graphタグ、構造化データを追加しません。これらは、出力結果を自分のプロジェクトに組み込んだ後、ご自身で追加してください。
精度に影響する要素と、最良の出力を得る方法
セマンティックでアクセシブルな出力を左右する最大の要因は、Figmaのレイヤー命名の質です。それに続くのが、Auto Layoutの使用状況、フレームの複雑さ、そして選択した出力モードが再現できるエフェクトをデザインが使用しているかどうかです（特にEmail Templateモードは、回転、ブレンドモード、シャドウを再現できません）。
出力品質
MarkupGenが制御する部分、入力内容に依存する部分、そして測定される内容について説明します。
MarkupGenが制御する部分
- 変換エンジンとセマンティックタグの推測ロジック
- アクセシブルなラベルとalt属性の生成
- AIによるスコアリング、修正、レスポンシブ、JS生成の各機能（有料プラン）
入力内容が左右する部分
- Figmaのレイヤー命名の質
- Auto Layoutの使用状況
- フレームの複雑さとエフェクトの使用状況
精度とビジュアルの再現度
AI Quality Score（有料プラン）により自動的に測定され、Layout、Spacing、Typography、Color、Content、Detailsの各項目で0〜10の評価がつきます。全体を表す単一の精度パーセンテージは存在せず、品質はデザイン内容によって変わります。
HTML構造とセマンティクス
実際のセマンティックタグと見出しレベルが使用されますが、その精度はFigmaのレイヤー名がどれだけわかりやすく付けられているかに左右されます。
CSSの品質と保守性
Auto LayoutフレームはFlexboxベースになり、それ以外は固定位置になります。保守性は、選択したCSSフレームワーク、クラス命名スタイル、レイヤー名によって変わります。
レスポンシブ挙動、アクセシビリティ、SEO対応状況
レスポンシブレイアウトは、Responsive出力モードを選択した場合にのみ適用されます。アクセシビリティには、実際に自動生成されるARIAラベルとalt属性が含まれます。SEOメタデータは含まれないため、エクスポート後にご自身で追加してください。
対応言語
インターフェースは10言語に対応しています。
English、Tiếng Việt、Français、中文（简体）、日本語、हिन्दी、Italiano、Español、ไทย、Русскийに対応しています。デフォルト言語はEnglishで、ブラウザの言語設定に応じて自動的に切り替わることはないため、共有されたリンクは常に意図した言語で開かれます。
言語はSettings → Languageから変更できます。MarkupGenはFigmaのレイヤー内にあるテキストをそのまま変換します — 利用できる機能はインターフェースの言語ではなく、契約しているプランによって決まります。
プランと料金
以下の数値はすべて、実際の課金設定に基づいています。
| 機能 | Free | Starter | Pro | Business |
|---|---|---|---|---|
| 価格 | $0 | $10 / 月 | $20 / 月 | $100 / 月 |
| コード生成回数 | 5回 / 月 | 50回 / 日 | 150回 / 日 | 1,000回 / 日 |
| 新規プロジェクト数 | 10件 / 月 | 100件 / 日 | 300件 / 日 | 2,000件 / 日 |
| 生成速度の上限 | 2リクエスト/分 | 10リクエスト/分 | 20リクエスト/分 | 60リクエスト/分、より高速なAIモデル |
| CSSフレームワーク | Vanilla、Tailwind、Bootstrap | 全6フレームワーク | 全6フレームワーク | 全6フレームワーク |
| Visual Editor | 含まれません | 含まれます | 含まれます | 含まれます |
| AI品質スコアリングと修正 | 含まれません | 含まれます | 含まれます | 含まれます |
| コンポーネントエクスポート | HTML / CSSのみ | 1度に1フレームワーク | 全フレームワーク + Export Studio | 全フレームワーク + Export Studio |
| サポート | コミュニティ | メールサポート | 優先メールサポート | 専任1対1サポート |
すべての有料プランは月払いのみで、年払いのオプションはありません。法律で義務付けられている場合を除き、料金は返金されません。お支払いはStripeまたはLemon Squeezyでのカード決済、あるいはSePayによるベトナム国内銀行振込のQRコード決済（即時）がご利用いただけます。
Freeプラン
製品を試したり、たまに単発で変換したりするのに最適です：月5回のAI支援変換、そのままのHTML/CSSダウンロード、Vanilla、Tailwind、Bootstrap CSSに対応しています。Visual Editor、AI品質スコアリング、フレームワークエクスポートは含まれません。
有料プラン
Starterは個人での制作やフリーランス案件に適しています。Proは、複数のクライアント案件を抱えるプロフェッショナルや小規模な制作会社向けに、Export Studioの全機能バンドルを追加します。Businessはチーム向けに最大の生成量と最速の処理を提供します。生成上限に達したとき、Visual Editorや品質スコアリングが必要なとき、あるいは生のHTMLではなく実際のフレームワークコンポーネントが必要なときにアップグレードをご検討ください。
クレジット、利用状況と制限
MarkupGenはポイント制のクレジットシステムを採用しておらず、プランごとの単純な生成回数でカウントされます。
- カウント方法 — 1回の「Generate Code」操作が、生成クォータの1単位としてカウントされます。
- リセットのタイミング — Freeは暦月ごとに、すべての有料プランは毎日リセットされます。
- 繰り越し — ありません。未使用のクォータは次の期間に持ち越されません。
- 失効 — クォータは期間ごとに単純にリセットされ、期間の途中で失効することはありません。
プロジェクト作成のクォータ
生成クォータとは別に管理され、常に同じ期間内でのプランの生成上限のちょうど2倍に設定されています（例：Freeは10プロジェクト/月、Proは300プロジェクト/日）。上限にちょうど達している場合でも、作業内容が失われないようもう1件だけ保存できますが、そのプロジェクトはQuota Locked状態となり、アップグレードするか期間がリセットされるまでコードを生成できません。プロジェクトを削除しても、その期間のクォータは解放されません。
| エクスポートごとの制限 | |
|---|---|
| Figmaフレームのレイヤー数 | エクスポートあたり約2,000レイヤー |
| Figmaフレームのエクスポート面積 | 約120メガピクセル |
| エクスポートあたりの合計アップロードサイズ | 50 MB |
| プラグインのアップロードタイムアウト | 3分 |
| カスタムAI指示の文字数 | 3,000文字 |
アカウントとサブスクリプション
ご自身で変更できる項目と、課金の仕組みについて説明します。
アカウント設定
Settingsでは、プロフィールの編集、パスワードの変更（Googleで登録した場合でも、ここから初めてパスワードを設定できます）、プランと請求の管理、言語の切り替えが行えます。
アップグレード
アップグレードはPricingページから行えます。アップグレードは即座に適用され、日割り計算で課金されます。
ダウングレード
Settings → Billingから、下位の有料プランへの変更を予約できます。変更は現在の請求期間の終了時に適用され、日割りでの返金はありません。Starterには、それより下位の有料プランが存在しないため、ダウングレードはできません。
解約
サブスクリプションを解約するには、support@markupgen.comまでご連絡ください。ProまたはBusinessをご利用の場合は、その間にSettings → Billingから下位の有料プランへのダウングレードを予約することもできます。
請求と支払い
StripeまたはLemon Squeezyでのカード決済、あるいはSePayによるベトナム国内銀行振込のQRコード決済（有効時間15分）でお支払いいただけます。
返金
法律で義務付けられている場合を除き、料金は返金されません。別途の返金保証制度はありません。
アカウントの削除
現時点では、セルフサービスで「Delete my account」を行うボタンはありません。support@markupgen.comまでメールでご連絡いただければ、いつでもアカウントとそのデータの削除を依頼できます。
セキュリティとプライバシー
MarkupGenのプライバシーポリシー、利用規約、認証設計の内容をまとめたものです。
収集されるデータ
お名前、メールアドレス、アカウント認証情報に加えて、明示的にエクスポートした特定のFigmaフレームのみが収集されます — MarkupGenがFigmaアカウント全体に常時アクセスできることはありません。基本的な技術データ（IPアドレス、ブラウザ、デバイス）はCookieを通じて収集されます。
デザインと生成されたコードについて
インポートしたFigmaデザインおよびそのコンテンツの権利は、お客様に帰属します。MarkupGenは、お客様の非公開デザインを他のお客様向けのAIモデルの学習に使用することはありません。
データの保持と削除
データは、アカウントが有効である間、または法務・会計・セキュリティ上の理由で必要な間、保持されます。support@markupgen.comまでご連絡いただければ、いつでも削除を依頼できます。
アカウントのセキュリティ
パスワードはハッシュ化されて保存されます。ログインと登録の両方でCAPTCHA認証が必要です。ログインに5回連続で失敗すると、アカウントは15分間ロックされます。パスワードを使用するアカウントには、メールアドレスの確認が必要です。二要素認証やアクティブセッションの管理機能は、現時点では提供されていません。
サードパーティサービス
カード決済にはStripeとLemon Squeezy、ベトナム国内銀行振込にはSePay、利用状況の分析にはGoogle Analyticsを使用しています。
トラブルシューティング
問題、考えられる原因、対処法を、カテゴリー別に整理しています。
変換に関する問題
「Generate Code」がグレーアウトしている、または拒否される。
→ プランの生成上限またはプロジェクト作成上限に達しているか、以前の超過によりプロジェクトがQuota Lockedの状態になっています。
次回のリセットを待つか、アップグレードしてください — アップグレードすると、ロックされたプロジェクトはすぐに解除されます。
Figmaプラグインからのエクスポートが失敗する、またはタイムアウトする。
→ フレームがおよそ2,000レイヤーまたは120メガピクセルを超えているか、アップロードが3分の制限を超えています。
フレームをより小さな単位に分割し、それぞれ個別にエクスポートしてください。
出力が汎用的で、単純なdivや役に立たないalt属性になっている。
→ Figmaのレイヤーが「Rectangle 4」や「Group」のようなデフォルト名のままになっています。
レイヤーにわかりやすい名前を付け直し、再度エクスポートしてください。
出力に関する問題
Emailエクスポートで、回転、シャドウ、ブレンド効果が反映されない。
→ メールクライアントではこれらを確実に表示できないため、Email Templateモードでは簡略化またはラスタライズされます。
これらの効果を実際のCSSとして必要な場合は、StandardまたはResponsiveモードを使用してください。
レイアウトが画面サイズに応じて変化しない。
→ 基本の変換は1つの固定サイズをそのまま再現するものです。
代わりにResponsive出力モードを選択してください。
認証に関する問題
ログインできない。
→ 5回連続で失敗するとアカウントが15分間ロックされます。または、メールアドレスがまだ確認されていない可能性があります。
15分待つか、受信トレイ（迷惑メールフォルダも含む）で確認メールを確認してください。
パスワードを忘れた。
ログインページの「Forgot password」を使用してください。リセットリンクの有効期限は1時間です。
支払いに関する問題
SePayでの銀行振込による支払いが「pending」のまま進まない。
→ QRコードは15分で有効期限が切れます。
注文状況ページを確認するか、有効期限が切れている場合は決済をやり直してください。
カード決済が失敗する。
→ カードが拒否されたか、入力内容に誤りがあります。
カード情報を銀行に確認するか、別の決済方法をお試しください。請求されたのにプランが更新されない場合は、サポートまでご連絡ください。
サブスクリプションに関する問題
「Cancel Subscription」ボタンが見当たらない。
→ この操作はまだセルフサービス化されていません。
解約するには、support@markupgen.comまでメールでご連絡ください。
Starterプランにダウングレードのオプションがない。
→ Starterは最も下位の有料プランです。
これは仕様通りの動作です — アプリ内には、それより下位のプランが存在しません。
ダウンロード・エクスポートに関する問題
フレームワークエクスポート（React/Vue/Svelte/Angular）がロックされている。
→ 単一フレームワークのエクスポートには、いずれかの有料プランが必要です。
Starter以上のプランにアップグレードしてください。
Starterでも、Export Studioがロックされている。
→ 全フレームワークのバンドルには、ProまたはBusinessプランが必要です。
Proにアップグレードしてください。
ベストプラクティス
変換品質を確実に高める、具体的な習慣です。
- 可能な限りAuto Layoutを使用してください — これは、流動的なCSSと固定位置のボックスを分ける最大の要因です。
- レイヤーには「Header」「Add to Cart Button」「Hero Image」のように、わかりやすい言葉で名前を付けてください — エンジンはこれらの名前を読み取って、HTMLタグ、ARIAラベル、alt属性を決定します。
- 関連する要素は、自由配置の絶対位置指定された図形のままにせず、1つのAuto Layoutフレーム内にまとめてください。
- 見出しと本文で、一貫性のある意図的なフォントサイズを使用してください — 見出しレベルはこれらから推測されます。
- コンテンツ画像と装飾用アセットは見た目で区別できるようにしてください — MarkupGenは出力時にすでにこれらを異なる方法で扱っています。
- 出力モードは事前に決めておきましょう。Standardモードで変換した後にレスポンシブになることはありません — モバイル対応が必要な場合は、最初からResponsiveモードを選択してください。
- リサイズの挙動をFigmaのconstraintsに頼らないでください — これらは再現されません。代わりにAuto Layoutでその挙動を作り直してください。
- メール向けの出力では、回転、ブレンドモード、シャドウやぼかし効果を避けてください — これらはメールクライアントでの表示に耐えられません。
- エクスポート前には必ずPreviewでDesktop、Tablet、Mobileの表示を確認し、AI Quality Score（有料プラン）を実行して、何を修正すべきかを具体的かつ重み付けされた形で把握してください。
- エクスポート後に、SEO用のメタデータをご自身で追加することを想定しておいてください — MarkupGenはタイトルタグ、メタディスクリプション、構造化データを生成しません。
FAQ
実際に確認された製品の動作に基づいています。
制限事項
MarkupGenが得意とすること、そしてまだ対応していないことをご紹介します。
MarkupGenが得意とすること
構造が整った、Auto Layoutベースのフレームを、迅速かつ予測可能な形で、セマンティックにタグ付けされたきれいなHTML/CSSに変換します。さらに、インタラクティブ性、レスポンシブ対応、品質スコアリング、ワンクリック修正といったオプションのAI機能も利用できます。
対応していないこと
Figmaのプロトタイプやインタラクションデータの自動再構築、Figmaの制約ベースのリサイズ（pin、scale）の反映、複数フレームやページ全体を一度にインポートすること、生成コードへのSEOメタデータの追加、Figmaコンポーネントごとの共有・再利用可能なコンポーネント定義のエクスポートには対応していません。
手動での調整が必要になる場合
汎用的、または名前のないFigmaレイヤーから汎用的なマークアップが生成される場合、Email Templateモードでの複雑なビジュアルエフェクト、AI JS提案機能が認識するパターンを超えるインタラクティブ性が必要な場合などです。
技術的な制限
正確な数値は「クレジット、利用状況と制限」を参照してください — エクスポートあたり約2,000レイヤー、120メガピクセル、50 MB、3分のアップロードタイムアウト、カスタムAI指示は3,000文字までとなっています。
用語集
このガイド全体で使用されている用語です。
- Frame
- Figmaにおけるトップレベルのコンテナで、おおよそ1つの画面やセクションに相当します。MarkupGenは、1回につき1つのフレーム、コンポーネント、またはグループをエクスポートします。
- Auto Layout
- Figmaに組み込まれたレスポンシブなスタッキング機能で、MarkupGenはこれを直接CSS Flexboxに変換します。
- Constraints
- Auto Layoutが登場する以前からある、Figmaのpinおよびscaleによるリサイズルールです。現時点ではMarkupGenによって読み取られません。
- Conversion / Generation
- プロジェクトに対する1回の「Generate Code」の実行を指し、プランのクォータを測定する単位です。
- Project
- ダッシュボードで管理される、1回のFigmaエクスポートを指し、Workspace内であなたが所有します。
- Workspace
- プロジェクトが属する、チームで共有するスペースです。メンバーには権限を制御するロールが割り当てられます。
- Template
- 再利用のためにマークされた、あなた自身のプロジェクトを指し、WorkspaceのTemplatesギャラリーに表示されます。
- Export
- 生成されたコードを、そのままのHTML/CSS、単一のフレームワークコンポーネント、または全フレームワークをまとめたバンドルとしてダウンロードすることです。
- Subscription
- 毎月継続して課金される有料プラン（Starter、Pro、Business）を指します。
- Quota Locked
- プランの作成上限にすでに達した後に作成されたプロジェクトを指します。保存はされますが、アップグレードするか期間がリセットされるまでコードを生成できません。
クイックスタートチートシート
Figmaから本番品質のコードまでの流れです。
- 1Figma CommunityからMarkupGenプラグインをインストールする。
- 2Figmaで、整理されわかりやすい名前が付いたAuto Layoutフレームを1つ選択する。
- 3プラグインから「Export & Send」を実行する（ブラウザで一度ログインする）。
- 4ダッシュボードで新しいプロジェクトを開く。
- 5出力モードとCSSフレームワークを選択し、「Generate Code」をクリックする。
- 6Previewで結果を確認し、AI Quality Score（有料プラン）をチェックする。
- 7Code Editorで手動修正するか、アップグレードしてVisual EditorとSmart 1-Click Fixを利用する。
- 8HTML/CSSとして、または有料プランではフレームワークコンポーネントとしてエクスポートし、自分のプロジェクトに組み込む。
デザインからコードへのワークフローを加速する準備はできましたか？
今すぐ無料で始めるか、アップグレードしてVisual Editor、AI品質スコアリング、フルフレームワークエクスポートをご利用ください。