FigmaからPico CSSへ:実践的な変換ガイド

PicoはMarkupGenが対応するフレームワークの中で最も小さく、最も思想の少ないものです。クラスレスファーストのスタイルシートで、セマンティックなHTMLタグ(<button>、<article>、<nav>、<form>)に直接スタイルを適用し、ユーティリティクラスもコンポーネントライブラリも学ぶ必要がありません。そのため変換後の確認作業はどのフレームワークよりも速く済みますが、その分、変換の品質がすべて一つのことにかかっています。それは、出力されるマークアップが見た目だけでなく本当にセマンティックであるかどうかです。

手作業でFigmaからPicoへ変換すると遅い理由

Picoは他のフレームワークが要求するクラス選びの作業をなくしますが、その分、難しい部分が工程のより早い段階——マークアップそのもの——に移動します。

• すべての要素に正しいセマンティックタグを選ぶ。 Picoには誤った選択を覆い隠す代替クラスがないため、カードが<article>ではなく汎用の<div>になってしまうと、単にPicoのスタイルが適用されません。
• フォームを正しく構造化する。 Picoは<label>、<input>、<fieldset>、<select>に自動でスタイルを適用しますが、それは素のHTMLが期待する通りにネストされ、対応付けられている場合に限ります。これは手作業での変換でよくあるミスの原因です。
• オーバーライド用のクラスがほとんどない状態でスペーシングを正しく仕上げる。 Picoの思想は、細かいユーティリティによる制御ではなく、理にかなったデフォルト値だからです。標準的でないスペーシングを持つデザインには、素早いユーティリティクラスではなく、意図的で最小限のCSSを上乗せする必要があります。
• ライト/ダークテーマの挙動を検証する。 Picoはセマンティックな構造に基づいて自動でこれを処理しますが、実際のマークアップが存在してテストできて初めて、正しいか壊れているかがわかります。

一つひとつは単純ですが、「これはカードのように見えるべき」と示すクラス名が存在しない中でページ全体を扱うと、細かなミスが起こりやすくなります。

MarkupGenが実際のデザインからPico出力を生成する仕組み

MarkupGenは、他のどの出力フォーマットよりもPicoにとって重要な、基盤となるマークアップを正しく作ることを軸に構築されています。ワークフローはどのターゲットでも同じです。

1. MarkupGenプラグインでFigmaからフレームを書き出す。 構造・スタイル・画像をまとめて取り込みます。
2. AIが実際のデザインの構造からマークアップを構築する。 汎用的にネストされた<div>ではなく、意味のあるセマンティックタグを優先します。
3. 内蔵エディタでコンテンツ・フォント・レイアウトを調整する。 何かを確定させる前に行います。
4. 最終的なコードパッケージをPico v2として書き出す。

Picoは正しくスタイリングされるためにセマンティックなHTMLに完全に依存しているため、MarkupGenがデフォルトでクリーンでセマンティックなマークアップを優先する方針が、ここで直接効いてきます。カードのようなフレームは<article>になり、フォームのフレームは正しくネストされた<form>/<label>/<input>構造になり、ナビゲーションは<nav>になります。そのため、Picoに組み込まれたスタイルはクラスを一切必要とせずに適用されます。

MarkupGenの出力フォーマットの中でのPicoの位置づけ

Picoは、素のCSS、Tailwind、Bootstrap、Bulma、Materializeと並ぶ、MarkupGenの6つのCSSターゲットの1つで、アカウント全体で固定するのではなくプロジェクトごとに選択できます。ドキュメントサイトやプロトタイプ、コンテンツ中心のページに適しており、そこでは非常にカスタムなデザインへのピクセル単位の精密な制御よりも、クリーンでアクセシブルな土台の方が重要です。他の5つとの比較はFigma-to-Code向け6つのCSSフレームワークをご覧ください。

公開前に生成されたマークアップを確認する

Picoでは確認すべきクラスのリストがほとんど存在しないため、チェックリストは構造と挙動に重点が移ります。

• カード・フォーム・ナビゲーションが正しいセマンティックタグを使っているか確認する。 これがPicoのスタイルが適用されるかどうかを左右する最大の要因です。
• ライトテーマとダークテーマの両方をテストする。 Picoは自動で切り替わるため、構造上のミスが一方のテーマでは問題なく見えても、もう一方では崩れることがあります。
• フォームフィールドが正しくラベル付けされ、ネストされているか確認する。 それがPicoの入力欄のスタイルを発動させる条件だからです。
• 内蔵エディタを使う。 書き出したマークアップを手で編集するのではなく、内容やレイアウトの調整はエディタで行い、その後再度書き出します。

すべての書き出しには自動のAI品質スコアも付与され、公開前の準備状況をすぐに把握できます。

自分のデザインで試す

CSSの保守がほとんど不要な、可能な限り軽量な出力が欲しいなら、実際のデザインからセマンティックに正しく書き出された結果が、手作業での変換とどう違うか試してみる価値があります。MarkupGenを無料で試す——自分のフレームの1つで試すか、Figma to Pico CSSコンバーターページで標準で得られる内容を確認してください。