ヘッドレス CMS の導入で運用コストを95％以上削減！オウンドメディアの Kuroco 移行支援株式会社バンダイナムコアミューズメント様のクラウドを活用した導入事例

https://bandainamco-am.co.jp

掲載日：2024年7月29日

株式会社バンダイナムコアミューズメント様（以下、バンダイナムコアミューズメント様）が運用するオウンドメディア「ASOBITO」の運用効率を高めることを目的とした、ヘッドレス CMS「Kuroco」の導入をアイレットが支援させていただきました。

制作会社に依頼していたコンテンツ更新をヘッドレス CMS 導入で内製化し、コストとリードタイム削減を目指す

バンダイナムコアミューズメント様は、バンダイナムコグループの一員として、ゲームセンターやテーマパークの運営、業務用ゲーム機の企画・販売などを展開しています。

同社は様々な形で“アソビ”を生み出す社員たちが、仕事に対する熱い思いやこだわりを語るオウンドメディア「ASOBITO」を運営しています。しかし、同サイトは静的ページで運用しており CMS に対応していないため、コンテンツの追加や変更を行なう場合は制作会社に作業を依頼する必要があり、コストとリードタイムが発生していました。

そこでアイレットは、ヘッドレス CMS「Kuroco」の活用をご提案し、導入作業とそれに伴う開発を担当させていただきました。

SSG と GitHub Actions で静的ページを自動デプロイする仕組みを構築。ユーザー体験の向上と SEO 対策を実現する

ヘッドレス CMS とは、コンテンツをウェブページ上（「ヘッド」と呼ばれる部分）に表示させるフロントエンドの機能を持たないコンテンツ管理システムで、コンテンツ管理のためのバックエンド機能に特化した CMS です。また、従来の CMS と比較して高スペックなサーバーを用意する必要がないため、開発コストおよび運用コストの削減が期待できるシステムとして注目を集めています。

今回ご提案した Kuroco は株式会社ディバータ様が提供する国内産のヘッドレス CMS で、豊富な機能と拡張性に優れている点が特徴となっています。

通常、既存の Web サイトから Kuroco 環境に移行する際は大幅な改修が必要となりますが、今回は HTML や CSS の大部分を流用し、動的に表示すべきページを見極めながら作業することで、開発コストや開発期間を削減しています。なお、ヘッダーの書き換えなど一部特殊な処理で対応しているソースも一つひとつ読み解き、Kuroco 環境に最適化。フロントエンドの UI は既存 Web サイトから変えずに、モダンフロントエンドフレームワークの Nuxt 3 に移行しています。

また、Nuxt 3 の SSG （Static Site Generator：静的サイトジェネレーター）機能を導入することで、CMS でコンテンツを入稿すると GitHub Actions と連携し自動的に Kuroco の CDN 機能である Kuroco Front へのデプロイを実行し、静的ページが書き出される仕組みを構築。動的ページと比較して Web サイトの表示速度が早いためユーザー体験の向上につながるだけでなく、SEO 対策への効果も期待できます。さらに、SSG を実行するときのみ Kuroco の API を利用するためコスト削減にもなり、Kuroco のバックエンド側で障害が発生した際も影響を受けないというメリットがあります。

ヘッドレス CMS 環境に移行したことで、対応前にかかっていたコストが95％以上削減され、コンテンツ更新を社内で完結できるため対応スピードも大幅に向上しました。その結果、Web サイトの更新頻度が上がり、より充実したコンテンツを楽しめるオウンドメディアへと進化しています。

今後もアイレットは、ヘッドレス CMS の導入をはじめ、Web サイトの構築・デザイン・運用を支援するプロフェッショナルとして、お客様に寄り添い、さらなるビジネス発展に貢献してまいります。

システム構成図

使用プロダクト

・Kuroco
・Elastic Load Balancing（ELB）
・Amazon EC2
・Nuxt 3
・GitHub
・GitHub Actions

案件名	ヘッドレス CMS の導入で運用コストを95％以上削減！オウンドメディアの Kuroco 移行支援
クライアント	株式会社バンダイナムコアミューズメント様