MarkupGen と手動コーディングの比較:Figma から HTML へ

Figmaからコードへの引き渡しは、いつも同じ問いから始まります。自分の手でコーディングするか、それともツールに最初の変換を任せるか。どちらも正当な選択肢であり、どちらが正解かはプロジェクトの内容、納期、そしてデザインがどれほど特殊かによって変わります。ここでは両者を正直に見比べてみます。

手動コーディングの本当の強み

Figmaファイルを見ながら手でコーディングする方法は、今も多くの現場でデフォルトの選択肢です。それには理由があります。ファイルをレイヤーごとに読み込む開発者は、出力結果を完全にコントロールできます。すべてのdiv、すべてのクラス名、すべてのインタラクションが、生成された推測ではなく意図的な判断の結果になります。これが最も重要になるのは、デザインに本当に特殊な要素が含まれている場合です。カスタムのアニメーションシーケンス、通常のドキュメントフローから外れたレイアウト、標準的なコンポーネントにきれいに当てはまらないインタラクションパターンなどです。こうしたエッジケースにおいては、MarkupGenを含めどんな自動化システムも、開発者の判断力を上回ることはできません。手動コーディングにはサードパーティツールへの依存もありません。新たに学ぶことも、対応すべきエクスポート形式も、デザインとコードの間に入るサービスも不要です。

一方でトレードオフも同じくらい現実的です。Figmaのフレームをマークアップに手動で変換する作業は反復的です。ファイルにすでに定義されている間隔を測り直し、Auto Layoutを目視でFlexboxとして再実装し、単一の固定幅でしか存在しないデザインのブレークポイントを推測しなければなりません。この繰り返しの中にこそ、小さな不整合が入り込みます。ある箇所はgapが14px、別の箇所は16px、あるページでは機能するブレークポイントが次のページでは崩れる、といった具合です。そして、すべてのフレームがゼロから再構築されるため、この方法はページ数にほぼ比例して手間が増えていきます。似たようなランディングページが10枚あれば、同じ手動変換作業を10回繰り返すことになります。

MarkupGen の本当の強み

MarkupGen は、この反復的な変換作業をなくすために作られたSaaSプラットフォームと、それに連携するFigmaプラグインです。ワークフローは4つのステップから成ります。プラグインを使ってFigmaからフレームをエクスポートすると、構造・スタイル・画像がそのままワークスペースに取り込まれます。AIはデザインの見た目上の近似ではなく、実際の構造とスタイルに基づいてHTML、CSS、そして任意でReactを生成します。アプリ内のエディタでコンテンツ・フォント・レイアウトをビジュアルに調整し、最終的にVanilla HTML/CSS、Tailwind CSS、Reactのいずれかの形式でコードパッケージをエクスポートします。

主な強みはスピードと一貫性です。FigmaのAuto Layout(方向、gap、padding、配置)は対応するFlexbox構造に自動的にマッピングされるため、目視での作業にありがちなセクション間の間隔のズレが起きません。レスポンシブなブレークポイントや流動的なレイアウトは、推測ではなくデザインのリサイズ制約から自動生成されます。出力コードは標準で整理されており、不要にネストしたdivがなく、見出し階層が適切なセマンティックHTMLになっています。さらに各エクスポートにはAIによる品質スコアが自動的に付与されるため、追加の調整が必要かどうかをひと目で判断できます。生成結果はブラックボックス化された固定的なエクスポートではなく、引き続き完全に編集可能です。

正直な限界: 自動変換は構造とスタイルの変換をうまくこなしますが、開発者の判断の代わりにはなりません。複雑なインタラクション、ビジネスロジック、そしてエクスポートされたマークアップを既存の大きなコードベースに組み込む作業には、依然として開発者によるレビューと調整が必要です。MarkupGenは作業の機械的な部分を取り除くためのものであり、エンジニアの判断が本当に必要な部分を代替するものではありません。

どちらを選ぶべきか

	手動コーディング	MarkupGen
向いている場面	高度にカスタムで特殊なインタラクション	複数ページ・複数プロジェクトにまたがる標準的なレイアウト
速度	遅め、ページ数に比例して増加	最初の変換が速く、その後調整
一貫性	開発者の注意力次第	Auto Layoutのマッピングにより自動的に保たれる
ツールへの依存	なし	Figmaプラグイン + ワークスペース
出力のコントロール	完全な手動制御	編集可能、AIスコア付き、レビュー可能

標準的なものとは似ても似つかないインタラクションを持つ、高度にカスタムなインターフェースを1つ作るのであれば、手動コーディングの方が近道である可能性が高いでしょう。似たようなページを複数変換する場合、デザインシステム上で素早く反復したい場合、あるいは白紙のエディタではなく、構造的に正確できれいな出発点が欲しいだけの場合は、MarkupGenの4ステップのフローを試す価値があります。どちらの方法を選んでも、公開前の開発者によるレビューはおまけではなく、プロセスの一部です。

構造のマッピングが実際にどう動くのか気になる方は、Figmaから HTMLへの手順ガイドで詳しく解説しています。あるいは、自分のFigmaフレームでMarkupGenを無料で試して、出力結果を自分の目で確かめてみてください。