QualityConsistency

AIで1画面は作れても、
サイト全体の品質は揃わない

一つの画面をそれらしく再現できても、ページ間、画面幅、状態、共通部品の関係までは自動的に理解できません。

PROBLEM

このページで扱う問題

1画面の再現と、サイト全体の品質は別の問題です

一画面を高い精度で作れても、それをページ数分だけ繰り返せば、品質の揃ったサイトになるわけではありません。実案件では、各画面の見た目だけでなく、ページを横断する関係と、画面に描かれていない状態まで扱う必要があります。

一画面だけを見たAI

見えている画面を、局所的に再現します。

AIが一画面から判断できるのは、その画面に配置された要素と、そこに設定されたデザイン情報です。画面単位では自然に見えても、別ページや別の画面幅と比較すると、同じ役割の要素が異なる構造で実装されることがあります。

画面ごとにHTML・CSSを生成できる
色、文字、画像、余白をコードへ置き換えられる
その画面のレイアウトを再現できる
指示された範囲の動作を実装できる

1画面の完成度は高くても、サイト全体の一貫性までは保証しません

サイト全体で必要になる情報

品質を揃えるには、画面の外にある関係が必要です。

サイト全体で品質を揃えるには、各ページを独立した画面として扱うのではなく、ページ、部品、画面幅、状態の関係を先に整理する必要があります。さらに、生成した結果をブラウザで検証し、ページ間の構造と表示を同じ基準で確認しなければなりません。

PC・SP・タブレットで、同じ要素がどう変化するか
複数ページで、どの部品を共通化するか
通常、0件、エラー、画像なし等をどう表示するか
Figmaとブラウザ表示の差異をどう検証するか

1画面を作る技術と、サイト全体の品質を揃える技術は別のものです。

CAUSE

問題が起きる原因

1画面だけを見て、ページごとに調整する方法では足りません

POINT 01

AIが読み取れるのは、画面に現れている情報

AIは、Figma上にあるテキスト、画像、色、サイズ、余白、配置をもとにコードを生成します。
POINT 02

デザインに描かれていない状態は判断できない

0件、画像なし、入力エラー、読み込み中、要素数の増減、クリック後の動作などは、初期画面だけでは判断できません。仕様として与えられていない内容をAIへ推測させると、ページごとに異なる実装や、想定していない挙動が生まれます。
POINT 03

画面ごとのプロンプト調整では、AIの速さを活かしきれない

画面ごとにプロンプトを書き換え、生成結果を確認しながら何度も指示を調整する方法では、ページ数に比例して作業が増えていきます。AIが短時間でコードを生成できても、その前後の指示と修正に時間がかかれば、サイト全体の制作期間は短縮できません。
POINT 04

コード生成だけでは、ブラウザ上の差異を見つけられない

Figmaの数値をコードへ置き換えても、フォント描画、改行、可変幅、ブラウザのレンダリングによって、実際の表示には差が生じます。ブラウザへ表示し、Figmaと比較して検証しなければ、見た目のずれや中間画面幅の崩れは残ります。

SOLUTION

私たちの解決方法

サイト全体のルールと品質工程をWorkflow化し、その中でAIを動かす

サイト構造、共通部品、画面幅ごとの変化、例外状態、検査方法を案件全体のルールとして整理します。AIへ画面ごとに一から指示するのではなく、これらを組み込んだAIMES上のWorkflowでAIを動かし、必要な箇所をコーダーと専任QCが確認します。実装、検査、修正、再確認が終わっていないページは完了にせず、ページをまたいだ品質を揃えます。

AIMESで実行する品質工程を見る

NAVIGATION