MarkupGen vs. Framer：コードエクスポート vs. ホスト型ウェブサイトビルダー

FramerとMarkupGenはどちらもFigmaデザインを出発点としますが、行き着く先は大きく異なります。Framerは自社のホスティングプラットフォーム上で編集可能なウェブサイトを公開します。MarkupGenは、完全に所有し、どこにでもデプロイできるスタンドアロンのコードファイルを渡します。どちらが合うかは、完成したホスト型サイトが欲しいのか、それとも移植可能なコードが欲しいのかによります。

簡単な答え： Figmaのインポートからそのまま公開できる、高速で編集可能、SEOに配慮したサイトをホスティング込みで欲しいですか？ Framerはまさにそのために作られています。自分で所有し、どんなホストにでもデプロイできる自己完結型のHTML、CSS、Reactファイルが欲しいですか？ MarkupGenがより直接的な選択肢です。

Framerが得意なこと

Framerは独自のFigmaプラグインを通じてFigmaのレイヤーをインポートし、Framerのキャンバス上で編集可能なウェブサイトに変換します——テキスト、画像、余白、レイアウト、コンポーネント、インタラクション、ブレークポイントの挙動はすべてインポート後も編集可能なまま残り、Auto Layout、階層構造、塗りのプロパティは自動的に引き継がれます。そこから先、Framerは完全なホスト型ウェブサイトビルダーとして機能します。ブログなど繰り返し使うコンテンツ向けのCMSコレクション、組み込みのSEOコントロール、カスタムドメイン、そして有料プランではブランチとプレビュー付きのステージング環境まで備えています。

これは、コードベースに一切触れることなく、Figmaデザインから公開済みのプロフェッショナルにホストされたサイトへ直行したいチームにとって強力な選択肢です。

トレードオフとなるのは移植性です。Framerには、公開したサイトを自分でホストできるHTML/CSSとしてエクスポートするネイティブな方法がありません——Framer自身のヘルプドキュメントでも、公開とパフォーマンスはFramer自体のインフラで処理され、組み込みのエクスポート機能はないことが確認されています。稼働中のFramerサイトをスクレイピングしてHTML/CSS/JSバンドルにする非公式のサードパーティツールは存在しますが、それはFramerがサポートする機能セットの外にある回避策であり、プラットフォーム自体が提供するものではありません。

MarkupGenが異なる点

MarkupGenは正反対の前提のもとに作られています。出力はあなたが所有するものです。プラグインでFigmaのフレームをエクスポートすると、AIがデザインの実際の構造からHTML、CSS、そして（任意で）Reactを生成し、アプリ内エディターで視覚的に調整した後、6種類のCSS形式——Vanilla CSS、Tailwind CSS、Bootstrap、Bulma、Materialize、Pico CSS——のいずれかで自己完結型のコードパッケージとしてエクスポートし、好きな場所にホストできます。

Auto Layoutは直接Flexboxにマッピングされ、レスポンシブなブレークポイントはデザイン自体のリサイズ制約から生まれ、すべてのエクスポートには使う前に自動品質スコアが付きます。CMSもホスティングも組み込まれていません——これは意図的なものです。目的は導入すべきプラットフォームではなく、移植可能なファイルだからです。

それぞれが向いている場面

コードを書かずにFigmaのインポートから公開済みのホスト型ウェブサイトへ直行したいなら、Framerはまさにそのために作られています。所有し、編集し、どんなホストにでもデプロイできるスタンドアロンのHTML、CSS、Reactファイルが具体的に必要なら、MarkupGenの無料プランがより直接的な道です。

主要なFigma-to-codeツールの全体像を知りたい場合は、Best Figma to Code Tools in 2026をご覧ください。