Figma to Code向けCSSフレームワーク6選:メリット・デメリットと使い分け

Figmaのデザインをコードに変換することは、意思決定の半分でしかありません。もう半分は、そのコードを何でスタイリングするかという問題です。手書きのVanilla CSSで出力するのか?Tailwindのユーティリティクラスを使うのか?それともBootstrapやBulmaのようなコンポーネントライブラリにするのか?MarkupGenならこれらすべての形式でデザインをエクスポートできますが、ファイルサイズ、カスタマイズの自由度、そして元のFigmaデザインとの見た目の近さという点で、それぞれ異なるトレードオフがあります。ここでは6つすべてを実践的な視点で比較します。

なぜMarkupGenに組み込まれているのか

ほとんどのFigma to Codeツールは、出力を1つのCSSアプローチに固定してしまうため、後から変更するには手作業での作り直しが必要になります。MarkupGenでは、CSSフレームワークは一度きりの決定ではなく、プロジェクトの設定項目です —— 設定パネルからVanilla CSS、Tailwind、Bootstrap、Bulma、Materialize、Picoのいずれかを選択でき、AI変換は1つの固定された出力を強制するのではなく、Figmaのレイアウトをそのフレームワークのグリッド、スペーシング、コンポーネントの規約に合わせて再マッピングします。プロジェクトの途中で気が変わっても、再生成すればライブプレビューの結果が即座に更新されます。

Vanilla CSS

依存関係もビルドステップも不要 —— すべてのクラスは手書き、またはデザインと一対一で対応するように生成されます。

メリット:

• 出力されるCSSには、デザインに実際に必要なスタイルしか含まれず、無駄なバイトが一切ない
• フレームワーク特有の「見た目」と戦う必要がない —— 生成されるマークアップはFigmaのレイアウトをそのまま忠実に再現する
• 学習や設定が一切不要。バンドラーなしの静的HTMLを含め、どこでもそのまま動作する
• サードパーティのスタイルシートとの詳細度(specificity)の衝突が起きるリスクがない

デメリット:

• デザイントークンやリセットCSSが標準では用意されていない —— スペーシング、カラー、ブレークポイントはすべて生成されたファイル自体に記述される
• 再利用できる共有ユーティリティ層がないため、デザインが大きくなるほどスタイルシートも大きくなる
• CSSに詳しくない場合、エクスポート後に手作業で編集するのが難しい

向いている用途:単一のランディングページ、メールテンプレートなど、ランタイム依存ゼロで可能な限り軽量な出力を求める場面。

Tailwind CSS

ユーティリティファーストのクラス(flex、p-4、text-slate-600)を、別のスタイルシートを用意する代わりに直接マークアップに適用します。

メリット:

• Figmaとの視覚的な一致度が非常に高い —— スペーシング、カラー、タイポグラフィのスケールがTailwindのユーティリティスケールとほぼ一対一で対応する
• クラス名を考える必要がない。すべてのスタイルがすでに要素にスコープされている
• ページ全体でレスポンシブやステートのバリアント(md:、hover:、dark:)を一貫して適用できる
• 巨大なエコシステム —— エクスポート後にReactやVueのコードベースへ組み込む場合とも相性が良い

デメリット:

• マークアップに長いユーティリティクラスの羅列が並び、セマンティックなクラス名に慣れていると「ごちゃごちゃ」して見える
• 最良の結果を得るには本番環境でCDNを直接使うのではなく、ビルドステップ(PostCSS/CLI)を前提とする
• チームがutility-firstのフレームワークを使ったことがない場合、多少の学習コストがある

向いている用途:ピクセル単位の忠実な再現が必要で、エクスポート後も進化し続けるプロダクトUIやデザインシステム。

Bootstrap

この中で最も歴史のあるフレームワークです —— MarkupGenはBootstrap 5.3.3を基準にエクスポートし、おなじみの12カラムグリッドとフルセットのコンポーネント群を備えています。

メリット:

• あらかじめ用意されたコンポーネント(navbar、モーダル、カード、フォームコントロール)により、単なる静的スタイリングではなく、動くページをすぐに用意できる
• 巨大なコミュニティ、充実したドキュメント、予測可能なブラウザサポート
• ほぼすべてのフロントエンド開発者にとっておなじみで、チームへの引き渡しもスムーズ

デメリット:

• 特徴的なデフォルトの見た目 —— 「いかにもBootstrapらしい」印象から離れるには意図的なオーバーライドが必要
• 使わないコンポーネントのCSSも含まれるため、スコープを絞ったエクスポートに比べて重くなる
• 組み込みクラスをオーバーライドする際、カスタムスタイルのスコープを慎重に管理しないと詳細度の衝突が起きやすい

向いている用途:独自のビジュアルアイデンティティよりも、動作するアクセシブルなUIが重視される社内ツール、管理ダッシュボード、MVP。

Bulma

モダンでクラスのみのフレームワーク(MarkupGenはBulma 1.0.2を使用)—— JavaScriptは不要で、スタイリングはすべてCSSクラスによって行われます。

メリット:

• クリーンでモダンなデフォルトの見た目で、Bootstrapほどオーバーライドしなくても独自性を出しやすい
• Flexboxベースのグリッドは、生成されたマークアップの中でも読みやすく理解しやすい
• JS依存が一切ないため、インタラクティブなコンポーネントが不要であればエクスポートは軽量なまま

デメリット:

• BootstrapやTailwindに比べてエコシステムやコミュニティが小さく、既製のプラグインやスニペットも少ない
• クラスのみのフレームワークであるため、ドロップダウンやモーダルなどのインタラクティブなコンポーネントは自分でJSを実装する必要がある
• ページで実際に使う量にかかわらず、フルセットのスタイルシートが読み込まれる

向いている用途:クリーンでモダンなデフォルトの見た目を重視しつつ、コンポーネントライブラリに構造を支配されたくないマーケティングサイトやコンテンツページ。

Materialize CSS

GoogleのMaterial DesignをCSS/JSフレームワークとして落とし込んだもの(MarkupGenはMaterialize 1.0.0を基準にエクスポート)。

メリット:

• 見慣れた、実績のあるMaterial Designのパターン —— カード、チップ、波紋エフェクト、エレベーションシャドウなど —— が標準で用意されている
• 静的なスタイリングだけでなく、よく使うインタラクティブなコンポーネント用の専用JSも同梱されている
• ビジュアルの階層構造について明確な方針があり、専任のデザイナーがいないチームでも意思決定を速められる

デメリット:

• Material Designは非常に特徴的な見た目のため、Figmaデザインがその規約に沿っていない場合には相性が悪い
• TailwindやBootstrapに比べて更新頻度が低く、プラグインのエコシステムも小さい
• CSSとJSの両方を同梱しているため、BulmaやPicoのようなクラスのみのフレームワークに比べてペイロードが重い

向いている用途:Material Designの言語がすでにUIの標準規約として期待されているダッシュボードや社内アプリ。

Pico CSS

クラスレスファーストのフレームワーク(MarkupGenはPico v2を基準にエクスポート)で、セマンティックなHTMLを直接スタイリングします —— 基本的な用途にユーティリティクラスは不要です。

メリット:

• このリストの中でコンポーネント系フレームワークとしては最小のフットプリント —— <button>、<article>、<nav>のようなセマンティックタグを自動でスタイリングする
• 追加設定なしでライト/ダークテーマに標準対応
• マークアップがすでにセマンティックなHTMLであれば、クリーンでアクセシブルなベースラインを最速で手に入れられる

デメリット:

• コンポーネントのカバー範囲が限定的 —— クラスレススタイリングで表現できる範囲を超えるグリッドシステムや複雑なコンポーネントはない
• 細かい制御よりも適切なデフォルト値を優先するため、非常にカスタムなFigmaデザインをピクセル単位で再現するのは難しい
• BootstrapやTailwindに比べてほとんどのチームにとってなじみが薄く、オンボーディングにやや時間がかかる

向いている用途:セマンティックなHTMLと最小限のCSSで十分な、ドキュメントサイト、プロトタイプ、コンテンツ中心のページ。

比較早見表

選び方

• エクスポートをFigmaファイルとピクセル単位で完全に一致させたいですか? TailwindまたはVanilla CSS。
• 動くUIを素早く用意したく、おなじみのデフォルトの見た目でも構いませんか? Bootstrap。
• フルセットのコンポーネントライブラリを導入せずに、クリーンでモダンなサイトを作りたいですか? Bulma。
• Material Designの規約を土台に構築していますか? Materialize。
• スタイリングのオーバーヘッドをほとんどかけずに、クリーンでアクセシブルなセマンティックHTMLだけが必要ですか? Pico。

あらゆる場面において普遍的に「最良」と言える選択肢は存在しません —— 最適なフレームワークは、エクスポート後にプロジェクトがどれだけ発展していくか、そして出力が元のデザインとどれだけ近い必要があるかによって決まります。MarkupGenはこの6つすべてに対応しているため、すべてのプロジェクトを1つのスタックで固定するのではなく、プロジェクトごとに最適なものを選ぶことができます。自分のFigmaファイルで試してみて、CSSを一行も書く前にどのフレームワークが合うか確かめてみましょう。