導入事例インタビュー【株式会社グロービス様】大規模なオンライン学習サービスのサイトリニューアルをmicroCMSで実現。APIを活用した独自運用基盤により、SEO改善の効率も向上｜microCMS

以前の「GLOBIS 学び放題」のWebサイトは、会員がログインして利用するページと非会員向けランディングページとしての機能が一体になっていました。そのため、トップページの構成を変更したくてもエンジニアチームに依頼しなければならず、結局2〜3年間もトップページが変わらない状態でした。また、アクセス時の表示速度が遅いという課題もあったため、会員向けと非会員向けのサイトを切り離してリニューアルしていくことになりました。

microCMSを選定した理由を教えてください。

-角谷さん（TAM）

グロービスさんからは、サイト運用のしやすさと表示パフォーマンスを両立させたいという要望をいただいていました。WordPressとmicroCMSを比較検討した結果、機能要件としてはどちらでも満たせると判断しましたが、今回は会員ログインなどのバックエンド機能を持たせる必要がなかったため、ヘッドレスCMSを前提とした構成を採用しています。

セキュリティやパフォーマンスの観点からも、microCMSをNuxtと組み合わせる構成が合理的だと考えました。また、弊社は2021年からmicroCMSの公式パートナーとして連携してきた実績があり、ノウハウが蓄積されていたこともあって提案しました。

-蛯名さん

社内ではWordPressに対する懸念もありましたね。オウンドメディアの「GLOBIS 知見録」でWordPressを利用していたのですが、10年近くサイトを運用し、担当者も代替わりしていく中でプラグインを管理しきれない程になってしまい、バージョンアップの手間やリスクなどの保守コストがかさんでいました。microCMSは費用感的にも現実的で、運用面の不安も少なかったので、社内承認は比較的スムーズに進みました。

導入までのプロセス：段階的に行われたサイトリニューアル

サイト制作のプロセスを教えてください。

-蛯名さん

大きなプロジェクトになるため、すべてを一度に構築するのではなく段階的に実施しました。会員向けと非会員向けのサイトの切り離しを行ったのが2022年の夏です。その後、microCMSを使ってコンテンツを管理できるようにしました。最終的には「GLOBIS 学び放題」と「GLOBIS 知見録」の2サイトを統合し、2024年2月に「GLOBIS 学び放題×知見録」としてリリースしました。

技術構成を教えてください。

-知念さん（TAM）

フロントエンドはNuxtで構築し、全ページを静的サイト生成（SSG）したうえで、AWS S3とCDNを組み合わせて配信しています。ただ、コンテンツ量が増加すればするほどコンテンツ生成の負荷が高くなりビルド時間も長くなってしまうため、今後はVercelでのホスティングに切り替えて、インクリメンタル静的再生成（ISR）※を活用する構成に移行する予定です。

※ISR（Incremental Static Regeneration）：ページの一部分だけを必要に応じて再生成する仕組みで、静的サイトのメリットを保ちながら動的な更新を可能にする技術

活用の状況：1万件を超えるコンテンツをmicroCMSで管理

microCMSをどのように活用されていますか？

-稲垣さん

「GLOBIS 学び放題×知見録」のほとんどの部分はmicroCMSで管理しています。動画の個別ページや記事ページも基本的にmicroCMSで管理しており、特集バナーなどもmicroCMSでテキストや画像を編集できる仕様です。

導入時に苦労した点はありましたか？

-知念さん（TAM）

学習コースのページ実装方法を検証していた際、当時は約3,000ページの静的ファイルを生成するのに1時間以上かかり、タイムアウトによってSSGが失敗する状況でした。ビルド時間を短縮するため、Nuxtの実装方法を見直して構築を進めました。ビルド時に必要なデータのみをJSONファイルとして事前に生成し、それをインポートする形にすることで、microCMSへのリクエストを削減し、ビルド時間を大幅に短縮しました。現在では、2万ページ以上のSSGでも20分台で完了しています。

-角谷さん（TAM）

「GLOBIS 知見録」のデータ移行作業にも苦労しましたね。もとのWordPressには8,000〜9,000件の記事があり、タグや執筆者・監修者情報などを含めると移行するコンテンツは1万件以上あったんです。WordPressからデータを抽出し、microCMSのAPI形式に合わせてフィールドを整えたうえで書き込むためのプログラムをPHPで作成したのですが、データ量が多いこともあって想定以上の時間がかかりました。

まず、WordPressから投稿データを抽出するためのプラグインを作成しました。そこから取得したCSVをmicroCMSのAPI形式に合わせて整形し、書き込み用のプログラムをPHPで作成しています。1万件以上のコンテンツを自動で移行できるようになりましたが、APIの書き込み制限もあり、1日では移行が完了しませんでした。そのため、移行処理を一時停止し、翌日に持ち越して再開できる仕組みに調整しました。手入力では数週間かかるような量のコンテンツ移行も、プログラムを組むことで解決しています。

現在の運用フローを教えてください。

-小栗さん

テキスト記事は、WordやGoogleドキュメントなどで作成した完成原稿をもとにmicroCMSに入稿しています。既存記事のSEO対策として、記事タイトルやディスクリプションの改善なども日々行っています。

-新実さん

動画記事については、撮影編集を経て完成した動画をYouTubeにアップロードし、URLからコンテンツIDを抽出してmicroCMSの専用フィールドに入力することで記事を公開しています。公開前には、プレビュー用URLを社内で共有してダブルチェックを行っています。

-蛯名さん

動画記事とは別に、会員向けのコース動画を制作するチームもあるのですが、そちらのチームではCMSのことは意識しないでデータベースに登録してもらっています。コース動画の情報は、1日1回API経由でmicroCMSに自動連携されています。

導入の効果：PDCAを回しやすくなり、コンバージョンが改善

microCMSの導入で、どのような効果が得られましたか？

-稲垣さん

トップページのPDCAを回せるようになり、ビジネスのトレンドや学びのニーズ変化に合わせた試作を打てるようになりました。受講を検討される方が「今必要としている学び」を届けやすくなった結果、コンバージョンは確実に改善しましたね。非常に運用性の高いサイトになり、社内のエンジニアチームのリソースを気にする必要がなくなりました。

-角谷さん（TAM）

以前は2〜3年間トップページが変わっていなかったとのことですが、microCMSの導入以降は年数回のペースで大幅なレイアウト変更が行われていますね。グロービスさんがさまざまな施策を細かく実施されているのが伝わってきます。

-小栗さん

WordPressで「GLOBIS 知見録」を運用していた際は、記事更新作業時の動作の重さが気になりましたが、microCMSになってからはスムーズになりました。

運用改善の具体的な事例を教えてください。

-稲垣さん

記事のタイトルやディスクリプションを、後からまとめて調整できる仕組みを独自に実装しました。microCMSのAPIを活用しつつ、社内で開発した管理画面から一括更新できるようにしており、100件単位でのSEO改善を効率的に行えます。

-蛯名さん

コースなどの情報は、受講画面側のデータベースから毎日1回microCMSに連携しているため、microCMS上のデータを単純に書き換えるだけでは、次の連携時に上書きされてしまいます。そこで、コースの情報とは別に、SEO用のタイトルやディスクリプションを管理するためのAPIを用意して、フロントエンド側ではそちらを参照する設計にしました。microCMS単体では一括更新は難しかったのですが、API経由でmicroCMSに反映する仕組みを作ることができたので、大量の記事に対しても効率的なSEO施策を進められるようになりました。