ディレクション
投稿日:

既存サイトの一部だけ、AIコーディングで依頼できますか

株式会社ファストコーディングで主にWeb制作会社のお客様を担当しています、長谷川です。

サイトの制作相談は、全面リニューアルだけではありません。製品紹介を増やしたい、採用ページだけ作り直したい。今のサイトを使いながら、一部を追加する場面もあります。

そのとき気になるのは、新しいページが作れるかだけではないと思います。既存のヘッダーは変わらないか。管理画面の更新方法は続けられるか。今の担当会社との分担はどうなるか。

当社のAI駆動HTMLコーディング代行では、既存のテーマやテンプレート、命名規則、制作環境を確認して、追加する範囲を相談します。今回は、部分追加を依頼するときの整理方法をお伝えします。(*1)

本サービスは中・大規模サイトが対象です。Auto Layoutを使った編集可能なFigmaでの入稿が必要です。部分追加でも規模や実装内容を確認し、小規模な追加は通常のコーディング代行として対応できる場合もあります。(*1)

最初に、変更するものと残すものを分ける

例えば、既存サイトへ製品一覧と詳細ページを追加する場合を考えます。これは説明用の例です。

一覧と詳細を新しく作るとしても、ヘッダーやフッターまで作り直すとは限りません。既存部品をそのまま使うか、新しいページだけ変えるかで、確認する範囲が変わります。

最初の資料は、細かな指示書でなくても構いません。次のように範囲を書き分けると、相談を始めやすくなります。

対象予定する扱いの例確認したいこと
製品一覧・詳細新規作成代表的な表示と、必要な動作
ヘッダー・フッター既存を利用新規ページにも使えるか
メニュー項目を追加共通部品の変更担当と確認範囲
既存の製品ページ今回は変更しない新旧ページのつながり

この整理があると、新規ページの作成と、既存部分への変更を分けて見積もれます。「一部だけ」の中に、サイト全体へ影響する作業が含まれていないかも確認できます。

CMSと制作環境は、見た目と一緒に確認する

Figmaだけでなく、実装先の条件も必要です。WordPressなら、使っているテーマや、管理画面から更新したい項目を確認します。(*1)

以前の引き継ぎについての記事では、お客様から「管理画面のログイン情報すらわからないのです」と相談を受けたケースを紹介しました。管理情報に加え、前任者のコードを読み解く必要もあります。制作環境と、なぜその実装にしたかという記録が、引き継ぐ側の助けになります。部分追加でも、既存担当の情報を受け取り、同じ環境で作業を続けられるかが大切です。

ご相談時には、次の情報を分かる範囲で揃えてください。

  • 使用中のCMSと、対象となるテーマ・テンプレート
  • 既存CSSの命名規則や、追加時に守るルール
  • ソースコードの管理場所と、確認環境への反映方法
  • 管理画面で更新したい内容と、固定しておきたい部分

情報が揃っていない場合は、誰に確認できるかもお知らせください。既存担当会社の管理範囲を確認し、必要な資料から整理します。認証情報は公開資料へ記載せず、合意した方法で共有してください。

当社では、標準でTailwind CSS+EJSとSass+BEMの2方式に対応しています。既存のCSS規約やフレームワークに合わせる場合は、その条件も確認して進め方を相談します。標準の方式を無条件に既存サイトへ追加する、という進め方ではありません。(*1)

作成・確認・本番反映の担当を分けて決める

新しいページを作る会社と、本番サイトを管理する会社が違う場合は、受け渡しの境界も決めておく必要があります。

例えば、新規ページの作成は当社、確認環境への反映は既存担当会社、内容の確認は発注側という分担も考えられます。これは分担の記入例で、実際の担当は案件ごとに相談します。

作業決めておきたいこと
新規ページの実装対象ページ、共通部品、納品するファイル
既存部分との結合反映担当、必要な権限、既存ルール
表示・動作の確認新規部分と関連する既存ページの確認範囲
本番反映作業担当、実施時期、反映後の確認担当

担当が分かれば、何を渡したら次の作業に進めるかも整理できます。制作が終わった後に、反映担当が決まっていないという状態を避ける準備です。

当社では、合意した範囲の確認と、修正後の再確認までを制作工程に含めます。共通部品を変更する場合は、関連ページへの影響も確認します。(*1)

部分追加の相談には、既存サイトの情報も

部分追加では、作る範囲を小さく切り出しても、確認範囲まで同じ大きさになるとは限りません。共通部品やCMSを通じて、既存部分とつながっているためです。

次の相談では、新規ページのFigmaに加え、残す部分、既存環境、作業の分担を整理してみてください。対応可否や追加で必要な確認を、具体的に相談しやすくなります。

サービスの対応範囲はAI駆動HTMLコーディング代行のサービス内容でご案内しています。一部だけの追加や改修を検討している方は、既存サイトのURLと追加範囲、代表的なFigmaを添えてファストコーディングへご相談ください。

参考情報

*1 AI駆動HTMLコーディング代行 よくある質問