フロントエンド開発者のためのMarkupGen

「引き継ぎ税」を払い続けていませんか

デザイナーがFigmaファイルを完成させると、次はあなたの番です。

実際の機能ロジックを書き始める前に、間隔をひとつずつ測り直し、ブレークポイントを推測し、どこかに既に存在するレイアウトをピクセル単位で再現する。難しい作業ではありません。ただひたすら地味で反復的で、本来なら状態管理やデータ、インタラクションに使いたい時間を奪っていきます。

MarkupGenは、この「引き継ぎ税」をなくすために作られました。

ワークフローへの組み込み方

MarkupGenは、すでに開いているFigmaプラグインと連携して動きます。流れはシンプルです。

1. フレームをエクスポートする。 Figma上でプラグインを実行するだけで、構造・スタイル・画像がそのままMarkupGenのワークスペースに取り込まれます。手作業での再現は不要です。
2. AIにマークアップを生成させる。 デザインの実際の構造とスタイルを読み取り、対応するHTML/CSSを自動生成します。
3. 見た目を調整する。 コードエディタを開く前に、アプリ内エディタでコンテンツやフォント、レイアウトを微調整できます。
4. コードパッケージを書き出す。 最終的なコードをプロジェクトに取り込み、そのまま開発を続けられます。

Auto LayoutのフレームはFlexboxに直接マッピングされます。方向、gap、padding、alignmentがそのまま反映されるため、生成されるCSSはデザインの「推測」ではなく構造的な一致です。ブレークポイントやフルイドレイアウトも、Figmaのリサイズ制約から自動生成されるので、静的なフレームからメディアクエリを手書きする必要はありません。

自分のスタックに合わせて出力形式を選べる

ツールに合わせるのではなく、自分で形式を選びます。

• HTML/CSS(素の形式) — 既存のテンプレートやCMSに組み込む場合。
• Tailwind CSS — チームが普段からこの書き方を使っている場合。
• Reactコンポーネント — そのままアプリに組み込みたい場合。

誰かの独自ルールに沿ったボイラープレートをプロジェクトに合わせて調整する必要はありません。出力は最初から行き先に合わせて作られています。

PRを出す前の品質チェック

すべてのエクスポートには自動でAIによる品質スコアが付与されます。マークアップが本番投入に近い状態か、もう一手間必要かをひと目で判断できます。レビュアーに指摘される前に、プルリクエストを開く前に確認できるのがポイントです。

コード自体もクリーンに作られています。不要なラッパーdivはなく、見出しの階層も適切なセマンティックHTMLです。デフォルトでSEOにも対応しているため、後から誰かに「直しておいて」と頼まれる心配もありません。

MarkupGenがやらないこと

MarkupGenが担うのは、デザインをマークアップに変換する機械的な部分です。API呼び出しの実装や状態管理の設計、どのボタンがモーダルを開くべきかページ遷移すべきかといった判断まではしてくれません。そうした判断と最終レビューは、依然としてあなたの仕事です。反復作業の8割をMarkupGenに任せることで、エンジニアの判断が本当に必要な残り2割に集中できると考えてください。

次の引き継ぎで試してみる

次にFigmaのリンクが届いたら、寸法の測り直しはもうやめましょう。無料で始めるを選べば、数分で最初のフレームをエクスポートできます。まずは全体の流れを確認したい方は、Figma to HTMLガイドもあわせてご覧ください。