【事例】Eコマースプラットフォームのモダナイゼーション

概要

本記事では、アパレル業界のお客様が運営するEコマースプラットフォームのモダナイゼーション（近代化）をご支援した事例についてご紹介します。従来の動的なサーバーサイドレンダリング（SSR）ベースのシステムから、Jamstackアーキテクチャへと移行することで、サイトパフォーマンスの大幅な向上と運用コストの削減を同時に実現しました。

お客様の課題

• パフォーマンスの低下: サイトの成長に伴い、ページの表示速度が著しく低下。特にモバイルユーザーの直帰率の高さがビジネス上の大きな課題となっていました。GoogleのLighthouseスコアは、平均で40点台に留まっていました。
• 運用・開発コストの増大: 古いフレームワークで構築されたシステムは、機能追加やデザイン変更のたびに多大な工数を要し、マーケティング施策のボトルネックとなっていました。
• コンテンツ更新の属人性: 商品情報やキャンペーンページの更新作業がエンジニアにしかできず、非エンジニアの担当者が迅速にコンテンツを更新できる仕組みが求められていました。

提案した解決策：Jamstackアーキテクチャへの移行

我々は、これらの課題を解決するため、静的サイトジェネレーター（SSG）であるAstroと、ヘッドレスCMSであるmicroCMSを組み合わせたJamstackアーキテクチャへの移行を提案しました。

graph TD
    subgraph datasource[データソース]
        A[microCMS
商品・ブログ情報]
        B[Markdownファイル
特集ページ]
    end

    subgraph build[ビルドプロセス]
        C(Astro)
    end

    subgraph deploy[デプロイ先]
        D[CDN
Cloudflare Pages]
    end

    subgraph users[ユーザー]
        E[ブラウザ]
    end

    A --> C
    B --> C
    C -- ビルド時にHTML/CSS/JSを生成 --> D
    E -- 高速に配信される静的ファイルにアクセス --> D

1. Astroによる静的サイト生成: サーバーサイドで動的にページを生成するのではなく、ビルド時にすべてのページを静的なHTMLファイルとして事前に生成します。これにより、ユーザーからのリクエストに対して、サーバーは完成したHTMLを返すだけとなり、圧倒的な表示速度を実現します。
2. microCMSによるコンテンツ管理: 商品情報、ブログ記事、キャンペーン情報といった更新頻度の高いコンテンツは、日本の商習慣に強く、直感的なUIを持つヘッドレスCMS「microCMS」で管理。これにより、マーケティング担当者がエンジニアの手を借りずに、リアルタイムでコンテンツを更新できるようになりました。
3. Cloudflare Pagesへのデプロイ: 生成された静的サイトは、CDN（コンテンツデリバリーネットワーク）であるCloudflare Pagesにデプロイ。世界中のエッジサーバーにコンテンツがキャッシュされるため、どこからアクセスしても常に高速なレスポンスを返します。

プロジェクトの成果

• Lighthouseスコアの劇的な改善: サイトの平均Lighthouse（パフォーマンス）スコアが、40点台から95点以上へと向上しました。特に、モバイルでの体感速度が大幅に改善され、直帰率が20%改善しました。
• 開発・運用効率の向上: フロントエンドとバックエンド（コンテンツ管理）が完全に分離されたことで、並行して開発を進められるようになりました。また、静的サイトであるため、サーバー管理の必要がなくなり、インフラの運用コストを60%削減できました。
• マーケティング施策の迅速化: コンテンツ更新がmicroCMS経由で誰でも簡単に行えるようになり、これまで数日かかっていたキャンペーンページの公開が、数時間で完了するようになりました。

まとめ

Jamstackアーキテクチャ、特にAstroとヘッドレスCMSの組み合わせは、パフォーマンスと運用効率を両立させるための非常に強力なソリューションです。従来のECサイトが抱える課題に対し、本プロジェクトは技術的な刷新がいかにビジネス価値に直結するかを示す好例となりました。