株式会社ファストコーディングで主にWeb制作会社のお客様を担当しています、長谷川です。
以前の記事(*3)で、お客様からの「速くなるのはわかった。でも品質は大丈夫なの？」という質問をご紹介しました。今回は、その品質を保つために、相談の段階でどのような条件を共有するとよいかを整理します。
コーディングを外注するとき、まずページ数を伝える方は多いと思います。見積もりの入口として必要な情報ですが、それだけでは制作の進め方までは決まりません。
同じページ数でも、共通の構成を繰り返すサイトと、ページごとに見た目も動きも変わるサイトがあります。既存サイトへ追加する場合は、今あるルールに合わせる作業も必要です。
当社のAI駆動HTMLコーディング代行は、中・大規模サイトを対象にしています。ただし、向いているかどうかは規模だけで判断しません。今回は、御社の案件を相談するときに整理したい三つの観点をお伝えします。
ページ数の次に、共通する構成を見る
AIを使って制作する場合も、最初にサイト構成と共通部品を整理します。共通部品とは、ヘッダーやカードなど、複数のページで繰り返し使うまとまりです。
説明用の例として、次の二つを比べてみます。特定のお客様の案件を示したものではありません。
| 確認すること | 同じ構成の紹介ページが多いサイト | ページごとに構成が異なるサイト |
|---|---|---|
| 繰り返す部分 | 見出し、画像、本文の並びを展開する | 共通部分と固有部分を一つずつ分ける |
| 動作 | 共通のメニューや問い合わせ導線 | ページ固有の操作や表示条件がある |
| 最初に相談する内容 | 代表ページと差し替える情報 | 特殊ページの一覧と、それぞれの仕様 |
前者では、代表ページで決めた基準を後続へ展開する計画を立てやすくなります。後者では、共通化できる範囲を確認し、個別に設計する部分を見積もりへ含める必要があります。
後者だから依頼できない、という意味ではありません。ページ一覧に「同じ構成で展開するページ」と「個別確認が必要なページ」を書き分けると、相談の焦点が具体的になります。
当社の工程でも、AIが反復実装を進める前に、コーダーが共通化の範囲や例外を判断します。似ている部分を全部同じ部品として扱うのではなく、使う情報と動作も含めて整理します。(*1)
既存環境の指定は、最初に共有する
新しく作るサイトと、運用中のサイトへの追加では、合わせるべき条件が違います。
例えば、既存テーマを使うWordPressサイトに新しい一覧ページを追加する場合です。デザインだけでなく、どの情報を管理画面から更新するか、既存の共通部品を使うかも確認します。
ご相談時には、次の内容を分かる範囲で共有してください。
- 使用中のCMSと、追加・変更する範囲
- 既存CSSの命名規則や、守る必要がある実装ルール
- 共通のヘッダーやフッターを、どこまで変更してよいか
- ソースコードと制作環境を、誰が管理しているか
これらが分かると、新規部分だけで進められるか、既存部分の確認も必要かを整理できます。現在の担当会社が管理している内容は、確認先も合わせてお知らせください。
当社では、標準でTailwind CSS＋EJSとSass＋BEMの2方式に対応しています。納品後の運用体制や既存環境に合わせて、方式を選びます。既存の規約やCMSの指定がある場合も、その条件を確認したうえで対応範囲をご案内します。(*1 *2)
指定があることを理由に、ご相談前に諦める必要はありません。一方、標準構成でそのまま進められると決めず、最初に環境を見せていただくことが大切です。
未確定の仕様は、決まっている部分と分ける
デザインが完成していても、動作の条件が残っていることがあります。検索結果が0件のときや、画像がないときの表示は、その一例です。
未確定なことがある場合は、仕様が揃ったように見せるより、確認事項として分けてください。AIにも制作担当にも、推測で埋めさせないためです。
次は、相談資料への記入例です。御社の案件に合わせて項目を置き換えて使えます。
| 項目 | 決定済みの内容の例 | 相談したい内容の例 |
|---|---|---|
| 商品一覧 | PC版の代表デザイン | SP版の並び順と0件時の表示 |
| 商品詳細 | 基本の掲載項目 | 画像なし・長い商品名の扱い |
| デザイン入稿 | 代表ページの共有日 | 後続ページの共有予定 |
| 更新業務 | 商品情報をCMSで管理 | 更新可能にする項目の範囲 |
このように分けると、実装を始める前に決めるものと、後続ページと並行して整理するものを相談できます。納期への影響がある項目も見つけやすくなります。
全ページのFigmaが完成するまで、相談を待つ必要はありません。当社では、Auto Layoutを使った編集可能なFigmaの代表ページや共通部品を確認し、入稿予定と合わせて進め方を整理します。(*2)
実績の規模を、そのまま御社の条件に当てはめない
当社には、数万点の商品を扱うECサイトのフロントエンド構築で、工数が従来の半分となり、納品後のお客様からのバグ指摘がゼロだった実績があります。(*4)
ただ、その結果を見て「同じ商品数なら同じ工数になる」とは判断できません。比較したいのは商品数だけでなく、テンプレート、共通部品、動作、確認する状態です。
確認範囲や制作条件が異なれば、必要な工程も変わります。実績は相談の手掛かりとして使いながら、御社のページ一覧と仕様を基に、進め方を確認していただければと思います。
相談前には、案件の違いが見える資料を
AIコーディングに向くか迷ったときは、ページ数だけで結論を出す必要はありません。最初に、次の三つを整理してみてください。
- 共通の構成で展開するページと、個別に確認するページを分ける
- 既存のCMS、CSS、制作環境の指定を共有する
- 決まっている仕様と、相談したい内容を分ける
ここまで揃うと、制作側も追加で何を確認すべきかを具体的にお伝えできます。小規模サイトについては、通常のコーディング代行で対応できる場合もあります。(*2)
対象範囲はAI駆動HTMLコーディング代行のサービスページでもご案内しています。御社の案件に合う方法を検討する際は、ページ一覧と代表的なFigma、既存環境の条件を添えてファストコーディングへご相談ください。
