QUALITY

品質への取り組み

2倍のスピードでも、品質工程は省略しません

Figmaと仕様の分析、サイト構造と共通部品の定義、ブラウザ表示との比較、コード監査、コーダーによる修正、専任QC、修正後の再確認までを、AIMES上で省略できないワークフローとして制作工程に組み込んでいます。

APPROACH

品質は、制作工程全体で管理します

大規模サイトでは、一つの画面を再現するだけでは品質を揃えられません。ページ間の関係、共通部品、画面幅、例外状態まで含めて、分析から納品までを一つの工程として管理します。

QUALITYSTANDARD

案件開始時に、デザイン、仕様、対応環境、実装ルール、検査範囲を確認し、何を満たせば完了とするかを整理します。

すべての案件へ同じ検査を機械的に適用するのではなく、
案件の仕様とリスクに応じて必要な工程を定めます。

ANALYSIS｜QUALITY - 01

大規模サイトで増えるのは、コード量だけではありません。ページ、共通部品、画面幅、例外状態の関係が増え、生成後の修正では影響範囲を追えなくなります。

FigmaをAIエージェントが分析し、同一要素の関係と画面幅ごとの変化を整理します。プロジェクト定義とデザイン分析レポートを人が確認し、例外や中間幅の方針を補正してから実装します。

ANALYSIS｜QUALITY - 02

ページごとにAIへ指示すると、同じ部品が別実装になり、共通化の粒度もばらつきます。後から構造を直すと、修正対象がサイト全体へ広がります。

サイトマップ、Figma、案件仕様を基に、ページ、セクション、レイアウト、パーツ、モジュール、見出し構造を先に整理します。確認後に基本構造を生成し、AIは定義済みの部品を参照して実装します。

大量ページの構造やレスポンシブ方針を含め、案件条件に合わせて確認します。

COMPARISON｜QUALITY - 03

Figma上の数値をコードへ置き換えても、フォント描画、改行、行間、可変幅、ブラウザのレンダリングによって差異が生まれます。生成しただけでは、実際の表示との差に気づけません。

実装ページをブラウザへ表示し、AIエージェントがPC・SP・タブレットの画面を取得してFigmaと比較します。コーダーが差異を修正し、専任QCが標準端末でも再確認します。

AI・人・AIMESの役割: AIが画面比較を行い、コーダーが差異の原因を判断して調整します。専任QCが実機で確認し、AIMESが差異・修正・再確認を追跡します。
完了条件: 各画面幅の表示確認、Figmaとの差異修正、文字切れ・重なり・横スクロール・画像欠落の解消、修正後の再確認が完了していること。

REVIEW｜QUALITY - 04