WordPress製WebサイトをNext.jsを使ったJAMStack構成に移行

概要

Webサイトの開発・運用を丸ごと引き継ぐ形で関わらせていただきました。依頼主企業様からいただいた要望や、運用中のWebサイトの問題点を診断した結果を取りまとめて整理し、それを元に使用技術を含めたWebサイト全体をリニューアルしました。継続的に運用して、訪問者のデータやお客様とのやり取りから見えた課題を適用していくための土台作りを重視しました。

依頼主企業様のビジネスと対象のシステム

• BtoCビジネス
• Webサイトから問い合わせがあった方に対して商談を行い、契約後サービスを提供する形
• WebサイトにはCMSがあり、管理画面から記事を作成することができる
• Webサイトに存在する、CMSで作成した記事以外のページ：15ページ
• Webサイトに存在する、CMSで作成された記事：約240記事

受注形態

準委任契約にて、こまめに依頼主企業様の担当者の方と打ち合わせさせていただく形で作るべきものを一緒に具体化していくような進め方を取らせていただきました。

実施作業

1. 事業の理解
   • 依頼主企業様が展開している事業の内容をヒアリングして把握しました。
   • ヒアリングした内容を元にKPIツリーを作成しました。
2. 既存サイトの状況の調査
   • Webサイトの主要な指標（PV数・問い合わせ数・平均検索順位等）を調査して把握しました。
   • 運用中のWebサイトに含まれる全ページの洗い出しを行いました。
   • Webサイトのアーキテクチャーを調査し、利用しているSaaS等へのログインや、サーバーへのSSH体制を整備しました。
3. 既存の問題点や展望のヒアリング
   • これまでの開発・運用の状況や、改善したい点などをヒアリングしました。
4. 一時的な対応の適用
   • 緊急時に既存のサイトを迅速に、安全に変更できるようにCDパイプラインを構築しました。
   • 移行期限が迫っているGoogle AnalyticsのUniversal Analyticsプロパティを利用しており、GA4への移行が済んでいなかったため導入しました。
   • 問い合わせ送信時にGA4にコンバージョンを記録する設定も適用しました。
   • GA4やGoogle広告のタグを効率的に管理するための基盤として、Google Tag Managerも導入しました。
5. 要件定義
   • ヒアリングや調査を通じて得られた情報を元に、今回のプロジェクトを通して既存のシステムから変更する点を決定しました。
   • 機能する単位で順次リリースし、より早く成果物を公開していくために、開発・リリースのフェーズを設計しました。
6. UI/UXデザイン
   • 要件を満たすようなサイト構造の設計や、叩きとなるデザイン案の作成を行いました。
   • 各ページについては、依頼主企業様内の方に担当させたいということでしたので、デザインの作成方法や含めるべき要素などを支援しました。
   • 依頼主企業様内に発足したプロジェクトチームとの定例ミーティングに参加し、制作者観点からの提案を行いました。
7. 静的解析体制の構築
   • システムの品質を効率的に保つため、ソースコードを自動的に解析し、不備を検知したり、記述スタイルを統一したりできる体制を構築しました。
8. CI/CDの構築
   • 効率的にシステムの品質を確認し、リリースしていくための自動テスト・自動リリース体制を構築しました。
9. システムのエラー監視体制の構築
   • システムで発生したエラーを検知するSaaSを導入し、万が一システムに不備があったり、関連サービスに障害が発生した場合にも早期に検知できるようにしました。
10. コーディング
    • 仕上がったデザイン案に沿ってコーディングを行いました。
    • 基本的なSEO対策・SNS対策を施したコーディングを行いました。
11. 利用サービスの契約・設定
    • ホスティングサービスやドメインの設定を行いました。
12. 分析体制の整備
    • Webサイト訪問者の行動の分析を効率的に行うため、ヒートマップツールを導入しました。
    • より詳細な分析を行うため、GA4プロパティにてBigQueryへのデータエクスポートを設定しました。
13. 既存の投稿データの移行
    • 既存のシステム（WordPress）からデータを出力し、新システムに移行しました。
14. リリース作業
    • 仕上がったWebサイトを公開しました。
15. Google広告の設定
    • Google広告のコンバージョン設定を、新サイトでのコンバージョンに合わせて更新しました。

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

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

システムの構成

着手前のシステムは、以前発注されていた開発ベンダーがHTML・PHP・CSSで構築した部分と、依頼主企業様の開発担当者が後から追加したWordPress部分から成っていました。

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

継続的なコンテンツマーケティングを行っていきたいという要望や、先方の担当者様が既にWordPressを使い慣れていることから、CMSはWordPressを使い続けることにしました。一方、Webサイトの構成も継続的に改善をしたいという要望や、全体のパフォーマンスを上げたいという要求を満たすため、フロントエンドを分離してNext.jsで構築し、JAMStack構成としました。

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