公開前にAI生成HTMLを評価する方法

簡単な答え： AI生成のHTMLを、ひとつのスクリーンショットの一致だけで判断してはいけません。複数のブレークポイントにわたる視覚的な忠実度、セマンティックなマークアップ（divスープではない）、ブラウザをリサイズしたときの実際のレスポンシブな挙動、基本的なアクセシビリティ（alt属性、コントラスト、キーボードフォーカス）、そしてページの重量を確認しましょう。自動化された視覚スコアは有用な最初のシグナルであり、これらの代わりにはなりません。

「見た目が正しい」だけでは不十分な理由

AIによるFigma-to-codeツールは、実際に何を最適化しようとしているかが大きく異なります。何よりもピクセル単位の完璧な一致を優先するものもあり、その場合、内部のマークアップは絶対配置された<div>の山で、たまたまある特定の幅でデザインと同じようにレンダリングされているだけ、ということがあります。見た目は完成しているように見えます。しかし実際には完成していません。再現可能なチェックリストがあれば、プレビューをちらっと見ただけでは気づけない問題を捉えられます。

チェックリスト

1. 複数の幅にわたる視覚的な忠実度。 フレームの実際のサイズでレンダリングされた出力をデザインと比較し、その後ブラウザを両方向にそのサイズを大きく超えてリサイズしてみましょう。ちょうど1440px幅のときにしか一致しないレイアウトはレスポンシブではありません——たまたま一度だけチェックされた固定レイアウトです。

2. セマンティックな正しさ。 実際のHTMLを開いてみましょう。コンテンツの役割に合った本物の<header>、<nav>、<main>、<section>、<footer>要素になっているか、それとも一般的な<div>だけで組み立てられたページか。これはアクセシビリティ、SEO、そして次にそのコードに触れる人にとっての保守性に影響します——この観点でのより詳しいチェックリストは、Is Figma-to-HTML Output SEO-Ready?を参照してください。

3. 見出しの階層。 <h1>はひとつだけであり、見出しはフォントサイズに基づいて飛び飛びになるのではなく、論理的な順序で段階を追って下がっていくべきです。これは、AIツールが最も間違えやすい細部のひとつです。なぜなら、単なる視覚的なレイアウトではなく、コンテンツの構造を理解する必要があるからです。

4. 単なるブレークポイントの有無ではなく、実際のレスポンシブな挙動。 モバイルとデスクトップのスクリーンショットだけを確認するのではなく、その全範囲をゆっくりとリサイズしてみましょう。その2つの端点の間でのコンテンツの再フロー、テキストの折り返し、間隔こそ、レイアウトが最も崩れやすい部分です。

5. アクセシビリティの基本。 意味のある画像には（空やファイル名ベースではない）alt属性があるか、テキストの色コントラストは十分か、インタラクティブな要素にフォーカス状態が見えるか。これらはどれもスクリーンショットの比較だけでは検証できません。マークアップを開き、できればページをタブキーでたどってみる必要があります。

6. コードの重量とクリーンさ。 あちこちに散らばったインラインスタイル、フレームワークから引き継がれた未使用のCSS、過剰なラッパー要素は、いずれも視覚的には何も加えないまま重量だけを増やします。ページが正しく見えていても、確認する価値があります。

自動スコアが当てはまる部分——そして実際の限界

MarkupGenは、ライブプレビューのスクリーンショットを元のデザインと比較し、1〜10のスケールで一致点とズレの内訳とともに、すべてのエクスポートを自動でスコアリングします。これは上記の項目1にとって本当に有用な最初のシグナルです——視覚的なズレを素早く捉え、低いスコアは「出荷前にここを見て」という明確なフラグになります。しかしこれは明示的に視覚的な一致のスコアであり、セマンティクス、見出し構造、アクセシビリティ、コードの重量を監査するものではありません。それらはスクリーンショットの比較では見えないものだからです。これはこのチェックリストの最初のステップとして扱い、全体の代わりにはしないでください——項目2から6は、依然として人の目によるチェックが必要です。

エクスポートのスコアは問題ないのに、間隔や色、位置合わせなど、何かがまだ視覚的におかしい場合、MarkupGenの評価画面ではデザインとライブプレビューを並べて比較し、直したい具体的な内容を記述して、最初からやり直すのではなく、そのフィードバックに基づいて再生成できます。スコアリングと再生成のループ全体の仕組みについては、AI in MarkupGenを参照してください。

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

実際のエクスポートに対して自分自身のチェックリストを実行してみることが、あるツールがすでにどこまでこれらを正しくこなせているかを見極める一番早い方法です。MarkupGenを無料で試すか、セマンティック優先の出力が具体的にどのようなものかはFigma to Semantic HTMLをご覧ください。