グリーエックス株式会社は、グリーホールディングスのDX事業を担う100%子会社です。クライアント企業のDXに関するコンサルティングとソリューションの提供により、事業の発展に取り組んでいる企業です。同社の運営する複数のメディアでは、microCMSが活用されています。

今回は、グリーエックス株式会社でメディア事業を担当されている、サービス統括本部 開発部の岡﨑俊樹さんに、microCMSの導入経緯や利用状況などをお聞きしました。

導入の背景：メディア規模の拡大にともなって生じた課題

導入前にはどのような課題がありましたか？

-岡﨑さん

当社で運営しているメディアの規模が大きくなるにつれて、いくつか課題が出てきました。たとえば、CMSの管理画面の使い勝手の問題です。導入前に使用していたCMSでは、たくさんの画像を入れると管理画面の動作が不安定になり、入稿作業を行うライターの業務効率に影響が出ていました。

機能開発要望に応えづらいことも課題になっていました。「記事内に登場するアプリの情報を細かい条件で検索する機能がほしい」といった要望が社内メンバーから上がってきても、既存の構成では柔軟な対応は難しかったのです。

また、ページの表示速度が遅くなりやすいことも改善したいポイントでした。ゲームアプリなどの画像をたくさん扱うメディアでは、表示の遅さは致命的です。

当時運営していたメディアは基本的にはどれも同じ構成で、同様の課題を抱えていました。こうした課題をまとめて解決するために、ヘッドレスCMSを利用したJamstackな構成へのリニューアルを検討しました。 

microCMSを選んだ決め手はなんですか？

-岡﨑さん

いくつかのヘッドレスCMSを検討しましたが、microCMSはシンプルでわかりやすい日本語のUIであることが決め手でした。運用メンバーもターゲット読者も日本人なので、CMSの中身やサポートが日本語である点は大きなメリットに感じました。

検討段階で特に気に入ったのが「APIプレビュー機能」です。管理画面上でクエリを送信すれば、どのようなJSONデータが返ってくるのか簡単に確認できます。開発段階でAPIの挙動をテストしやすいため、フロントエンドエンジニアはとても便利な機能ですね。

料金的にはもっとも低価格な選択というわけではなかったのですが、保守管理のための人的コストなどを考慮すると、料金に見合ったサービス内容だと感じました。

活用の状況：2つのメディアで段階的に導入し、ほぼすべてのコンテンツをmicroCMSで管理

現在はmicroCMSをどのように利用されていますか？

-岡﨑さん

現在、2つのメディアでmicroCMSを利用しています。1つ目は2024年7月から運用を開始している「GREEニュースグルメ」です。おすすめのグルメ情報を紹介する新規メディアで、立ち上げ段階からmicroCMSで構築しました。現在3名程度のライターで運用しています。

2つ目は「ゲームギフトナビ」で、こちらではゲームアプリのおすすめ情報を紹介しています。2023年4月のスタート時は別のCMSで構築・運用していましたが、2024年9月にmicroCMSへ移行しました。関わっているメンバーの人数も多く、更新も毎日50か所前後に上ります。

どちらのメディアでも、記事コンテンツと画像コンテンツ、キーワードやカテゴリなど、ほぼすべてのコンテンツをmicroCMSで管理しています。 

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

-岡﨑さん

フレームワークはNext.jsを、ホスティングにはVercelを使っていて、2つのメディアはほぼ同じ構成です。GREEニュースグルメは記事の更新頻度がそれほど高くないため静的サイト生成（SSG）を採用しましたが、ゲームギフトナビの方はゲームアプリの情報やイベント情報などの更新が頻繁にあるため、インクリメンタル静的再生成（ISR）※を採用しています。

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

新しい構成への移行はどのように進められたのでしょうか？

-岡﨑さん

まずはGREEニュースグルメの新規立ち上げを通じて、microCMS、Next.js、Vercelによる構成を検証しました。技術選定の段階でベストな構成だと考えていましたが、実際に運用してもギャップがないかどうか確認しておきたかったんです。

GREEニュースグルメの立ち上げに成功し、運用上での不満の声などもなかったのでゲームギフトナビのリニューアルに踏み切ることにしました。

データの移行に関しては、既存のCMSからデータをエクスポートして、microCMSに合う形式にパースする作業がなかなか大変でしたね。複数のライターでメディアを運用していることもあってHTMLの書き方などが統一されておらず、例外パターンを洗い出していくのに時間がかかりました。

結局、記事のIDやタイトルなどの固定的な情報を一括で取得したあと、記事本文と画像データは手作業で移行しています。決してスマートな方法とは言えないかもしれませんが（苦笑）、コンテンツの量的にロジックを組むよりも手動のほうが早いと判断しました。

導入の効果：パフォーマンスと運用効率の大幅改善、作業時間を最大10分の1に短縮

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

-岡﨑さん

更新作業の効率がよくなり、ライターの入稿作業は以前の4分の1から5分の1程度まで短縮されました。特にゲームギフトナビでは、コンテンツ参照機能をうまく活用したことで、作業工数を10分の1程度まで短縮できた部分もあります。

ゲームギフトナビでは、ゲームアプリのランキング記事などを頻繁に更新しています。アプリの期間限定情報などを反映させるために、細かい更新作業が発生しやすいんです。以前のCMSでは、あるアプリの情報を変更するときは、同じ情報が記載されている全ての記事を1つずつ探して修正していく必要がありました。

そこでmicroCMSを導入してからは、APIスキーマの設計段階で「アプリ情報」を独立したAPIとして定義し、各記事からはその「アプリ情報」をコンテンツ参照フィールドで参照するようにしました。これにより、「アプリ情報」の項目を更新するだけで、それを参照している全ての記事に自動的に反映される仕組みが実現できたのです。ランキング記事内での順位の入れ替えもドラッグ＆ドロップで簡単に行えるようになり、記事の更新作業が大幅に効率化されています。

権限（ロール）の管理が柔軟にできることも嬉しいですね。現在も「エンジニア」「ライター」「事業責任者」というロールを使用しています。一般的なサービスだと、「支払い管理もコード編集もなんでもできる管理者」のようなロールが多いと思いますが、microCMSはロールを細かくチューニングできるので、運用実態に合わせた権限が設定できるのがありがたいですね。

課題のひとつだった表示速度の問題は解決できましたか？

-岡﨑さん

以前のゲームギフトナビでは、Lighthouseのスコアの「パフォーマンス」「アクセシビリティ」「ベストプラクティス」がそれぞれ70点前後の「要改善」だったのですが、リニューアル後はすべて90点以上となり、大幅に改善しています。社内の他チームのエンジニアからも「すごく速くなりましたね！」と高く評価してもらえました。

開発で工夫した点を教えてください。

-岡﨑さん

特にゲームギフトナビは画像ファイルの多いメディアで、アプリのスクリーンショットを何十枚も掲載しますし、300MB近いGIF動画を扱うこともあります。

最初はVercelのImage Optimizationを利用したのですが、データ転送量が想定していたよりも多く、リリース直後からVercelの定額プランの上限を超えてしまいました。

これに対しては、microCMSの画像APIをNext.jsのImageコンポーネントにカスタムローダーとして設定することで対応しました。現状は、Vercel側の画像最適化機能に頼らずに転送量を抑えられています。その他にも、画像サイズをできるだけ切り詰めたり、画像APIを呼び出すパラメータも細かく見直したりと工夫しながら運用しています。

移行の自動化ノウハウを活かし、社内での横展開へ

microCMSの今後の活用計画はありますか？

-岡﨑さん

「GREEニュースプラス」という別のメディアでもリニューアルを予定しています。前回の移行作業での経験を活かして、コンテンツの移行のほとんどを自動化できる仕組みを整備しました。

具体的には、XML形式でエクスポートした既存のコンテンツをパースしてmicroCMS用のJSONファイルを生成する際に、様々な例外パターンに対応できるよう、正規表現のパターンを充実させています。以前は手作業での確認が必要だった問題にも自動的に検出・修正できるようになりました。

当社の従来の技術スタックとは異なるJamstackな構成を積極的に採用したことで、社内の他プロジェクトからも注目してもらっています。この成功事例をもとに、さらなる展開をしていければと考えています。 

microCMSに期待していることはありますか？

-岡﨑さん

カスタムWebhook通知の機能をより充実させていただけると嬉しいです。現在は、記事が公開されたときに社内のSlackへ通知を送るように設定しているのですが、URLやタイトルだけでなく記事を公開したユーザーの情報も含めて通知できると、運用がより円滑になると考えています。ぜひ、実装していただきたいですね。

取材協力：エディット合同会社（ライター：藤井亮一　撮影：関口佳代）