大規模Webサイト

大規模WebサイトのCMS移行・リニューアル

数万ページ規模の既存Webサイトを運用しながら、Astroを用いた静的サイトの構築、ヘッドレスCMSへの移行、デザイン刷新を進めたリニューアルプロジェクト。

プロジェクト概要

既存サイトの運用と並行して、新しいCMSへの移行とフロントエンド基盤の刷新を進めました。

対象は数万ページに及ぶWebサイトです。既存サイトの運用と次期サイトの開発を並行して進めるため、新旧CMSの仕様差分や既存の運用ルール、長期運用を見据えた更新方法まで整理する必要がありました。

現行システムの運用経験を生かし、既存仕様を開発チームへ共有しながら、Astroを用いたフロントエンド開発を推進しました。

Astroのテンプレート基盤の設計・実装に加え、メンバー支援、レビュー、進捗管理を担当しました。

公式ドキュメントを参照し、実装を重ねながらAstroへの理解を深め、テンプレート基盤の設計とベース実装を進めました。

開発体制の拡張時には、新規参画者4名の開発環境構築と実装を支援し、タスクの割り振り、進捗確認、コードレビューも行いました。

複数の開発者が一貫した設計方針で実装できるよう、再利用可能なテンプレート基盤を構築しました。

複数メンバーで開発するため、画面ごとに個別の実装を繰り返すと、担当者によって構造や品質にばらつきが生じるため、共通化できるレイアウトやコンポーネントをテンプレートとして整備しました。

また、新旧CMSのエディターでHTMLの自動補正の挙動が異なることを確認し、既存コンテンツの意図しない変更を防ぐために設定を見直しました。チーム内で解決できないCMSの仕様や不具合はベンダーへ問い合わせ、確認結果をもとに対応方針を検討しました。

Astroによるテンプレート開発と、ヘッドレスCMSとのデータ連携を実装しました。

HTMLモックを基にAstroテンプレートを作成し、ヘッドレスCMSから取得したデータを表示するフロントエンドを実装しました。

GitHub Copilotは、HTMLモックからAstroコンポーネントを作成する際のドラフト生成や、リファクタリング、テストケース作成の補助に活用しました。生成内容を確認し、必要な修正を加えたうえで実装に反映しました。

自動テストで品質を確認できる基盤を整えました。

ビジネスロジックを対象としたVitestの単体テストと、axe-coreを利用したアクセシビリティ自動テストを導入し、担当者の目視確認だけに依存しない検証基盤を整えました。

体制拡張後も開発を進められる基盤を整え、仕様差分に伴うCMS移行のリスクを事前に検知しました。

共通テンプレートのベース実装と開発方法を共有し、複数メンバーが個別ページへ展開できる状態を整えました。また、新規参画者4名の環境構築と実装を支援し、タスク管理とコードレビューを担当しました。

現行運用で得た知識を基に、新旧CMSの仕様差分や更新手順を確認しました。特に、HTMLの自動補正など移行後の表示に影響する差分を事前に検知し、関係者と対策を進めました。