Figma-to-HTML出力はSEOに対応しているか:確認すべきポイント

簡単な答え： 見た目の正確さとSEO対応は別の問題です。エクスポートがスタイル付きの<div>ではなくセマンティックなHTMLを使っているか、見出しの順序が論理的か、画像に実際のalt属性があるか、そしてページレベルのmetaタイトル/descriptionを自分で追加したかを確認しましょう——Figma-to-codeのエクスポートが与えてくれるのはマークアップであって、ページのSEOメタデータではありません。

「見た目が正しい」と「SEOに対応している」は同じではない理由

Figma-to-codeのアプローチの中には——特にスクリーンショットベースや画像ベースのものは——絶対配置された要素や、セマンティックな意味を持たない一般的な<div>スープを使って、デザインをピクセル単位で正確に再現できるものがあります。見た目はデザインと同一にレンダリングされます。しかしそれは同時に、検索エンジンにページの構造を理解させる手がかりをほとんど与えません。追うべき見出しの階層もなく、ランドマーク要素もなく、何がナビゲーションで、何がメインコンテンツで、何がフッターなのかというシグナルもありません。視覚的な忠実度とクローラーが読み取れる構造は別の問題であり、ツールは一方を解決しても、もう一方を解決しないことがあります。

実際に確認すべきこと

div スープではなく、セマンティックな要素になっているか。 エクスポートされたHTMLを開いて、コンテンツの役割に合った場所に<header>、<nav>、<main>、<article>、<section>、<footer>があるかを確認しましょう——ラベルのない<div>だけで組み立てられたページではなく。これが、「見た目が同じ」と「クローラーにとって同じ意味を持つ」の間にある、最大の構造的な違いです。

論理的な見出しの順序になっているか。 ページごとに<h1>はひとつだけであり、見出しはデザイン上のフォントサイズが「それらしく見えたか」ではなく、順番に段階を追って下がっていくべきです（あるセクション内の<h3>より前に、そのセクションの<h2>がある、など）。Figmaには見出しレベルというネイティブな概念がなく、大きく見えるようにスタイルされたテキストレイヤーが自動的に<h1>になるわけではありません。そのため、どのツールがマークアップを生成したかにかかわらず、手動でのチェックが必要です。

画像にalt属性が付いているか。 エクスポートされた画像には、空文字列やファイル名ではなく、意味のあるalt属性が必要です。これはデザイン自体が必ずしも持っているとは限らない文脈から判断する必要があり（装飾的な背景画像が何のためにあるのかは、フレームだけからは必ずしも明らかではありません）、ここも手動でのチェックが必要な部分として計画しておきましょう。

ページレベルのmetaタイトルとdescriptionがあるか。 これははっきり言っておく価値があります。Figma-to-codeのエクスポートが生成するのは、セクションやページのコンテンツのマークアップであり、それが公開されたときにそのURLにどんな<title>やmeta descriptionを持たせたいかは知りません。手作業でコーディングしたページと同じように、これらは公開作業の一部として自分で追加しましょう。

必要であれば構造化データも。 商品ページ、記事、FAQは、JSON-LD（Product、Article、FAQPageなど）の恩恵を受けますが、これはそのページの具体的なコンテンツのために自分で追加するマークアップです。汎用的なFigmaエクスポートがそれを自動で推測することはできません。実際のデータ（価格、在庫状況、公開日）に依存するものであり、デザインにはそれが含まれていないからです。

ページの重量。 フレームワークに依存しない、プレーンなHTML/CSSエクスポートは、フルフレームワークのスタイルシートをベースにしたものより軽い状態からスタートします。ページ速度（実際のランキングシグナルです）がそのページにとって重要であれば、考慮に入れる価値があります。

MarkupGenがデフォルトで役立つ部分

出力はオプトイン設定としてではなく、デフォルトでネストした<div>よりもセマンティックなHTML要素を優先します——これが具体的に何を意味するかは、Figma to Semantic HTMLを参照してください。Auto Layoutの構造は、絶対配置された断片ではなく、論理的なDOMの順序として引き継がれます。これこそが、そもそも理にかなった見出し階層を可能にする土台のほとんどです。MarkupGenがしないこと——そしてどのデザイン-to-codeツールも合理的にはできないこと——は、ページのターゲットキーワードを知ったり、meta descriptionを書いたり、データモデルを持たないコンテンツに対してどのJSON-LDタイプが合うかを判断したりすることです。それらは公開作業における、意図的で手作業のステップのまま残ります。

自分のデザインで試してみる

Figma-to-codeツールを比較していて、SEO出力の品質が判断材料のひとつになっているなら、その構造的な違いはエクスポートされたHTMLを開いた瞬間に見えてきます。MarkupGenを無料で試すか、エンドツーエンドのワークフローについてはFigma-to-HTML変換ガイドの全編をお読みください。