AIによるHTMLウェブサイト移行

MSAD/MSIDには、旧式のデザインからモダンなUIへ移行すべきHTMLページが700ページ以上ありました。手作業で行えば、大人数のチームと6か月以上を要する仕事です。私たちはこのプロジェクトを約2週間で完了しました。

課題

この規模の移行は、スタイルの差し替えだけでは済みません。レガシーページはそれぞれ固有のコンテンツ構造・レイアウト・コンポーネントを持ち、その一つひとつを、内容を壊さずに新しいデザインシステムへ正確にマッピングする必要があります。手作業の移行では時間がかかりすぎます。繰り返し作業は膨大で、一貫性を保つのも困難です。

進め方

この仕事のために、AIエージェントワークフローを構築しました。各レガシーページを読み取ってコンテンツとコンポーネントの構造を把握し、新しいStorybookJSデザインシステムから最も近いコンポーネントを探し出して、新しい標準に沿ってページを組み直します。

• 再利用可能な移行手順はClaude Skillsが担い、ページごとの解析・変換・検証はClaude Agentsが行います。
• カスタムのマッピングスクリプトが、旧コンポーネントを新コンポーネントへ変換する明確なルールをエージェントに与えます。
• 自動チェックが書式やマッピングの問題を検出し、すべてのページはレビューと検証を経てから新サイトに加わります。
• プロンプトは継続的に調整しました。精度を高め、特殊なレイアウトに対応し、トークン消費を抑えるためです。

成果

700ページ超のすべてが、コンポーネントの一貫性を保ったまま新デザインへ移行——通常のおよそ10分の1の期間でした。ワークフローは再利用できるため、次の大規模移行をゼロから始める必要はありません。