AI による画像からの UI 実装：差分フィードバックでずれをなくす試み

上の 2 枚の画像は、両方ともデザイン画像と AI が実装した画面を重ねあわせたものです。何も工夫せずに AI に任せた実装（ハーネスなし）にはずれが残っていますが、ハーネスありでは、文字の輪郭などに小さな差は残るものの、各要素の位置のずれは 1px 以内に収まっています。

この記事では、デザインファイルがなく画像しかない状態から、AI の実装をピクセル単位でデザインに近づけるために用意した仕組みと、その検証結果を紹介します。

はじめに

こんにちは。フロントエンドエンジニアの金城です。

AI によるコード生成の精度は日々向上しています。しかし、デザイン画像を渡して「この通りに作って」と指示した場合、最終的には人間が手作業で微修正するケースがまだ多いのが現状かと思います。1 〜 2px のわずかな余白のずれや行間の違い、アイコンの位置の偏りなどは、一つひとつは小さくても、画面全体に積み重なると全体の印象や統一感を損なう要因になりえます。

現在では Figma と AI を直接連携させる手法（Figma MCP など）も登場していますが、実務では次のようなケースもよく見られます。

• デザインデータが残っていない古いサイトの改修
• 既存の画面の一部分だけ、差し替え用の画像をもとに実装を進めるケース
• アカウント権限や API の利用制限により、デザインツールとの直接連携が難しい環境

デザインデータが存在しない場合でも、完成イメージの画像から精度高く実装できれば、AI を活用できる業務の範囲は広がります。

そこで今回、AI が実装した画面とデザイン画像との差分をプログラムで測定し、基準を満たすまで自律的に修正を繰り返す仕組み（ハーネス）を検証しました。

まずは、この基準をどのように決めたのかから説明します。

合格基準の設定

AI に「デザイン通りに作って」と頼んでも、AI は何をもって合格とするかを知りません。そこで今回は、機械が客観的に判定できるよう、「配置」 と 「画素」 の 2 つの軸で合格ラインを設定しました。

画素だけでなく配置も測定する理由

画素の差分だけで判定すると、局所的なずれを見逃してしまうことがあります。たとえば、画面全体の中で 1 行のテキストが数ピクセルずれていても、画面全体に占める面積比としては 2% 未満に収まり、合格と誤認されてしまいます。

そのため、画素差分で全体のスタイルや素材の欠落をチェックしつつ、配置判定によってパーツごとの上下左右の境界を 1px 単位で測定する構成にしました。

ブラウザによる端数の丸め処理（12.5px を 13px として描画するなど）を考慮し、配置のずれは 1px まで許容としています。また、OS 間でのフォント周りの描画の差を吸収するため、今回は暫定的に画素差分 2% 以下を許容範囲としました。

ハーネスなしでの検証結果

まず、今回のハーネスを適用せず通常の実装手順で精度を測定しました。

検証の条件

検証には、Claude Opus 5.5 と Claude Sonnet 5.5 の 2 つのモデルを使用しました。

• 変えた条件：
  • モデル（Opus 5.5 / Sonnet 5.5）
  • ハーネスの有無（各モデル「なし 5回」「あり 5回」の計20回）
• 揃えた条件：
  • 題材：カード型のコンポーネント 1 つ（モバイル幅 375px / デスクトップ幅 1440px）
  • 開発環境：React Router + Tailwind CSS
  • 指示内容：画像の配置場所、画面幅、フォント、使用素材をまとめた GitHub Issue を用意し、一律「#1 を実装して」とだけ指示
• 実行と採点：
  • 実行順によるバイアスを避けるため、実行順はランダム・並行で実施
  • 全実装の完了後、ハーネスの差分チェック機能を使って、すべての実装を改めて採点（実装中に得られた差分チェックの値は最終採点には使用していません）

結果

ハーネスなしの場合、Opus・Sonnet ともに 5 回すべてで不合格となりました。

画素差分そのものは合格水準（2% 以下）に収まるケースが多いものの、配置には以下のような細かなずれが残る結果となりました。

• ダウンロードの矢印アイコンが上下に 2px ずれる（10 回中 8 回）
• 見出しテキストの位置が 2 〜 3px ずれる（Opus の 5 回中 4 回）
• Sonnet の一部で、本文の行位置が 6 〜 14px ずれる

画像全体の見た目としてはそれらしく出来上がっていても、細部がずれてしまっている状態です。

差分フィードバックの仕組み

上記のようなずれを解消するため、AI が自身の出力を測定し、修正できる仕組み（ハーネス）を用意しました。以下の 3 ステップで動作します。

① デザインと実装の両方を専用プログラムで測定する

プログラムはまず、実装した各要素の上下左右の端をブラウザから取得します。文字の場合は、文字が実際に描かれている範囲の端を使います。次に、デザイン画像の同じ位置の前後 8px 以内で同じ境界を探し、見つかった境界との差をずれとして返します。

ただし、背景が透明な要素の端や、デザインにはあるのに実装にない要素はこの方法では見つけられません。こうしたずれは画素差分で拾っています。

② どこをどう直すべきか、具体的な数値をフィードバックする

単に「ずれています」と返すのではなく、「どのパーツのどの辺が、どちら向きに何 px ずれているか」を具体的に伝えます。これにより、AI は修正箇所を絞り込みやすくなります。

③ 合格するまで作業を終わらせない

AI は途中で「できました」と勝手に作業を切り上げてしまうことがあります。そこで、Claude Code の Stop hook（作業を終了しようとしたときに自動で割り込む仕組み）を使い、以下の条件に当てはまる場合は完了をブロックして作業を差し戻します。

• 差分チェックをまだ実行していない
• 不合格のまま終了しようとした
• 合格後にファイルを変更したのに、再チェックを行っていない

延々と修正し続けることを防ぐため、再試行は原則 3 回までと指示しました。ただし、今回の実装では回数をシステム側で強制しておらず、上限を超えて修正したケースもありました。

ハーネスありの検証結果

このハーネスを導入し、同じ条件で検証を行いました。

結果

ハーネスを導入したところ、Opus は 5 回すべて合格、Sonnet も 5 回中 4 回が合格となり、全体の合格率は 90%（9 / 10 回）となりました。

Sonnet で不合格となった 1 回は、本文の文字が 1px 上にずれたことで画素差分が 3.86% 残り、修正上限の 3 回に達して終了したケースでした。

かかった時間とトークン消費量

ハーネスありでは、自己修復ループを回すため AI の消費トークンが約 1.3〜1.5 倍に増えました。しかし、今回の場合、作業時間はほとんど変わりませんでした。なお、トークン数はキャッシュからの読み込みを含む合計です。

実装上の課題と制限事項

今回の仕組みにはまだ対応できていない点もあります。

まず、現時点では初期表示の画面のみを対象としており、hover やクリック時の変化、自動で動くアニメーションなどには対応していません。

また、画像からフォントの種類を正確に特定するのも難しく、作業環境に対象のフォントが入っていないケースもあります。ここで代わりのフォントに合わせて文字サイズを無理に調整してしまうと、本来のフォントが入った環境で逆にずれが広がってしまいます。そのため、フォントの違いによる差はコード側で無理に埋めようとせず、人間の確認事項として報告する形に留めています。

検証してわかった課題

検証を進める中でいくつかの課題も見えてきました。

まず判定精度の面では、実装の要素を起点に照合するため、デザイン上は 1 行の文字がコード上で 2 つの要素に分かれていると、要素の境目にあたる端をデザイン画像で見つけられず、見た目は問題なくても「ずれ」として誤検知してしまうケースがありました。

また、修正は「3 回まで」と指示していたものの、システム側で回数を厳密に制限していなかったため、AI が 3 回を超えて調整を行ってしまうことがあるといったルールの緩さも残っています。

おわりに

今回の検証では、デザインデータが残っていない、画像しか届かない、といった場面でも、判定と修正を自動で回せれば、手作業での微調整を減らせる見込みがあることがわかりました。

今回は「画像からの見た目の再現」という検証でしたが、今後は同様の考え方でコンポーネントの振る舞いやロジックについてもテストを行い、その結果をもとに AI が自分で直すループをハーネスに組み込んでいけるのではないかと考えています。

「何をもって合格とするか」をコードで定義し、合格するまで AI 自身に見直させる。こうした仕組みを積み重ねていくことで、AI に安心して実装を任せられる環境に近づけていけたらと思っています。

Gaji-Labo Culture Deck