数万商品のECサイトを、バグ指摘ゼロで納品できた話

おはようございます！株式会社ファストコーディングの働くおかんです。

家族旅行の荷造りって、毎回同じようで、意外と忘れ物が出るんですよね。以前、現地で子どもの水着を買いに走ったことがあって。それからは、先に持ち物を確認して、誰が何を用意するかを決めるようにしました。

仕事でも、準備と確認の順番が結果に響くと感じた案件がありました。数万点の商品を扱うECサイトのフロントエンド構築です。AIを使って制作し、工数は従来の半分。納品後のお客様からのバグ指摘はゼロでした。

「AIで作ったから」という一言では、この結果は説明できません。私がQC側から見て大きかったのは、実装前の整理、制作中の確認、修正後の見直しを、ひと続きで行ったことでした。

商品数だけでは、確認の大変さは分からない

商品がたくさんあるサイトでも、商品詳細のテンプレートが一つなら、同じ構造を繰り返して表示できます。でも、その一つに入る情報は同じではありません。

短い商品名も、長い商品名もあります。画像が揃う商品もあれば、画像がない状態もある。価格、在庫、選択肢の数でも、画面の見え方や動きが変わります。

例えば、短い商品名と通常価格だけで確認した画面がきれいでも、それだけでは安心できません。長い名前と桁数の多い価格が同時に入ったら、どこかが押し出されるかもしれないからです。

私たちはページの枚数だけでなく、テンプレートと、そこで起きる状態を整理しました。全部の商品を一つずつ手作業で開くことと、必要な状態を検証することは、分けて考える必要があります。

この案件では、制作前のワークフロー設計に数日をかけました。テンプレートを整理し、制作と検証の役割、人が確認するタイミングを決めました。

QC側で助かったのは、判断基準が共有されていたことです。Figmaとどこを比較するか。どの画面幅で見るか。どの状態を確認するか。確認する順番が見えていると、作業を始めやすいんです。

例えば、商品詳細なら、通常の表示だけでなく、在庫切れや選択肢が多い場合も確認対象に含めます。仕様にない表示は、AIやQC担当が想像で決めず、確認事項として戻します。

「なんとなく全体を見て、気になるところを探す」だけにしない。何を確認したかが残ることが、大規模な案件では大切だと感じました。

ページが全部できるまで、検証を待つ進め方にはしませんでした。制作チームと検証チームを分け、確認できる単位からチェックを進めました。

共通部品の問題を早い段階で見つけられれば、同じ問題が後続へ広がる前に対応できます。逆に、すべてのページへ展開してから気づくと、修正と再確認の対象が増えてしまいます。

コードの構造を見る確認と、ブラウザで表示や操作を見る確認も、観点が違います。自動で確認できる項目を使いながら、余白や改行、押しにくさといった部分は、人の目と操作で確かめます。

AIが出した「問題なし」と、納品してよいという判断は同じではありません。コーダーの調整と、実装担当とは別の専任QCの確認を、工程としてつなぐ必要があります。

制作中に問題が見つかったら、対象ページだけで話を終わらせません。共通部品の問題なら、同じ部品を使う場所も確認します。ルールの不足が原因なら、共有する情報を更新します。

例えば、商品画像の扱いを修正したら、一覧と詳細、それぞれの画面幅で見直す。既存のページを修正しただけでなく、後から作るページにも同じルールが伝わっているかを確認する、ということです。

共有情報に追記しただけで、すべての問題が自動で消えるわけではありません。修正対象を追い、実際の表示や動作をもう一度見る。ここまで行って初めて、その指摘を閉じられます。

この案件では、納品後のお客様からのバグ指摘がありませんでした。工数も従来の半分になりました。速さと品質を、別々のものとして扱わずに進められたことが、現場にいた私には大きな手応えでした。

ただし、この結果から、どの案件でも不具合が発生しないと保証することはできません。商品数、テンプレート、仕様、確認範囲が変われば、必要な工程も変わります。

ほかの案件でも活かしたいのは、数字そのものより、そこへ至る進め方です。確認する状態を決める。別の目で検証する。直した後まで確かめる。この積み重ねが、結果につながったのだと思います。

ECサイトのコーディングを進めるなら、最初に次の三つを整理してみてください。

確認の対象と順番が見えると、発注側も「何を見ればよいか」を共有しやすくなります。大きな案件ほど、作り始める前に検査の進め方まで相談する意味があると思います。

当社のAI駆動HTMLコーディング代行では、こうした工程をAIMES上で管理します。AI、コーダー、専任QCの作業と、検査・修正・再確認の状態をつなぎ、必要な確認が終わった成果物を納品へ進めます。