Next.jsとWordPressで構築されたWebサイトをノーコードWeb制作ツールSTUDIOに移行

概要

Next.jsとWordPressで構築されていたWebサイトを、ノーコードWeb制作ツール「STUDIO」に移行するプロジェクトを担当しました。

依頼主企業様のビジネス

• BtoCビジネス
• Webサイトから予約を受け付け、店舗でサービスを提供する形

対象のシステム

• CMSあり（WordPress）
• WordPressをヘッドレスCMSとして使い、フロントエンドをNext.jsで構築したJAMStack構成
• ページ数：15ページ

受注形態

依頼主企業様とは継続的に取引させていただいており、準委任契約の中で柔軟に複数のプロジェクトに横断的に関わらせていただく形を取っていました。今回のプロジェクトは、月々の予算の範囲内で、他のプロジェクトを圧迫しない範囲で進行しました。

実施作業

1. STUDIOで既存サイトと同等のUIを構築
   • 既存のWebサイトと可能な限り同じ見た目・挙動になるように移行しました。
   • 完璧に移行しようとすると工数が膨らんだり、実装が複雑化する可能性がある箇所は、STUDIOでしやしやすい形に調整しまやすい形に調整しました。
2. GTMのセットアップ
   • Google Tag Managerを設置しました。
   • 移行前のサイトで既に運用していたので、Google Analytics等の設定はそのまま使い続けることができました。
3. 社内担当者への技術支援
   • 依頼主企業様内で新たにWebサイト運用を担当することになった方向けに、手順書の作成や口頭での説明を行いました。

依頼主企業様との連携方法

1. 先方のSlackにアカウントを作っていただいて常駐する形
2. 打ち合わせは必要に応じて設定し、Google Meetを使ってオンラインで実施

システムの構成

着手前のシステムは、WordPressをヘッドレスCMSとして使い、フロントエンドをNext.jsで構築するJAMStack構成となっていました。

クリックして拡大表示タップして拡大表示

依頼主企業様内の社員が直接事業責任者と連携してWebサイトを更新できた方が事業の進行スピードをより上げられそうと考えられる点と、現状のWebサイトの仕様がSTUDIOでほぼ満たせそうだった点から、STUDIOへの移行を決めました。

クリックして拡大表示タップして拡大表示