おはようございます！株式会社ファストコーディングの働くおかんです。
うちの上の子が自由研究で作った「石の図鑑」。キャンプで拾った石を並べていたときは家族にしか分からなかったんですが、名前と特徴をまとめたら、ほかの人にも伝わるようになりました。中身は同じでも、順番と説明があると分かりやすいんですよね。
コーディングの仕事も、作る側には当たり前の流れが、お客様には見えにくいことがあります。「Figmaを渡したら、次は完成を待つだけ？」と思うかもしれません。でも、途中で一緒に決めたいことがあるんです。
今回は、AIを使うコーディングで、どのタイミングに何を確認するのか。現場で見る順番に沿ってお話しします。
最初に確認するのは、ページの枚数だけではありません
Figmaをお預かりしたら、デザインとサイトマップを見比べます。同じ形を使うページ、共通のヘッダーやボタン、そのページだけに必要な動きを整理していきます。
例えば、商品一覧と商品詳細に同じカードがあっても、使う情報や表示幅が違うことがあります。見た目が似ているから全部同じ部品でよい、とは限らないんです。
PCとスマートフォンで何を変えるかも確認します。要素の順番や、表示しない情報、タブレットの中間幅での見せ方まで、実装前に方針を揃えます。
ここで曖昧なまま進むと、後から複数ページを直すことになります。作り始める前の確認は地味ですが、後の作業に効いてきます。
1．代表ページで、後続ページの基準を決める
最初から全部を一度に確認するのは大変です。まず代表ページと共通部品を見て、後続ページへ展開する基準を決めます。
例えば、見出しの余白、ボタンの大きさ、カードの画像比率。どのページでも同じ役割なら、同じ基準を使えるようにします。画面幅で変わるところも、ここで確認します。
この段階で見ていただきたいのは、細部だけではありません。「この部品をほかのページでも使ってよいか」「スマートフォンではこの順番でよいか」という、サイト全体へ影響する部分です。
基準が揃うと、後から作るページの確認もしやすくなります。家族に図鑑を見せるときも、最初の1ページで読み方が分かると、続きが見やすいのと似ています。
2．デザインにない状態は、人に戻して決める
初期画面がきれいでも、それだけでは確認が終わりません。フォームの入力エラー、検索結果が0件のとき、画像が届いていないとき。実際のサイトでは、いろいろな状態が出てきます。
例えば、商品名が長くなったら何行まで表示するか。在庫切れのときにボタンをどう見せるか。Figmaや仕様にないことは、確認事項として整理します。AIに想像で決めてもらうところではありません。
こうした質問は、影響するページや共通部品と一緒にお伝えします。変更が広がる内容なら、納期や費用への影響も確認してから進めます。
「まだ決まっていません」と言っていただいて大丈夫です。未確定だと分かること自体が、勝手な実装を防ぐために大事なんです。
3．直したあとまで確認して、納品へ進む
私がQC側で気にしたいのは、「修正した」と「確認した」が別になっているかです。修正の報告だけで終わると、別の画面幅やページに影響が残ることがあります。
例えば、共通カードの高さを変えた場合。そのページだけでなく、カードを使っている関連ページと、合意した画面幅で表示を見直します。問題が見つかったら、修正してもう一度確認します。
当社では、AIが分析や反復実装を進め、コーダーが設計判断と表示調整を担当します。実装担当とは別の専任QCが、案件で決めた範囲の表示や動作を確認します。
その担当と検査結果、差し戻し、修正、再確認をつなぐのがAIMESです。文書に手順を書くだけでなく、必要な工程がどこまで終わったかを管理します。人が判断するところも、工程の中で分かるようにしています。
Figmaが全部完成していなくても、相談できます
「全ページが完成するまで頼めない」と思うと、デザインとコーディングの間に待ち時間ができてしまいます。代表ページや共通部品から順に確認できれば、後続デザインと並行して進められる範囲を検討できます。
本サービスでは、Auto Layoutを使った編集可能なFigmaデータが必要です。コンポーネント化や命名などは推奨事項なので、どこまで準備できているかを共有してください。
ご相談のときに、次の三つが分かると進め方を整理しやすくなります。
- 代表ページと共通部品は、いつ確認できるか
- 後続ページの入稿予定と、希望する納期はいつか
- CMSや動作など、決まっている仕様と未確定の仕様は何か
全部を完成させてから渡すより、どこが決まっていて、どこを相談したいかが見えるほうが助かる場面もあります。先に確認するものを揃えることが、待ち時間や手戻りを減らす準備になります。
次に確認することが見えると、頼みやすくなる
AIコーディングでも、発注側が確認する場面はあります。代表ページの基準、デザインにない状態、変更内容、最終的な表示や動作。どこで何を見ればよいかが分かると、社内の確認担当にも予定を伝えやすいと思います。
当社の具体的な流れは、AI駆動HTMLコーディング代行のご依頼の流れにまとめています。「この段階のFigmaでも大丈夫かな？」と思ったら、代表ページとサイトマップを添えてファストコーディングへご相談ください。作る前の整理から、一緒に確認していきます。
