事業の急成長を支えるWebサイトの基盤をmicroCMSで構築。エンジニアがより本質的な開発に集中できる運用と、最短1ヶ月での新サイト立ち上げが可能に

事業の急成長を支えるWebサイトの基盤をmicroCMSで構築。エンジニアがより本質的な開発に集中できる運用と、最短1ヶ月での新サイト立ち上げが可能に
導入前の課題
  • WordPress構成によるセキュリティリスクとインフラ管理コストに課題があった
  • Next.jsとAWSを中心としたフロントエンドに合った基盤が必要だった
  • 事業成長に伴うコンテンツ増加に対応できる体制を準備したかった
導入後の効果
  • 約30名のメンバーが自律的にコンテンツ更新できる体制を構築し、エンジニアがより本質的な開発に集中できるようになった
  • 新規サイトを最短1ヶ月で制作できるようになった
  • 月4TB超のトラフィックもSSR構成で安定

多種多様なインフルエンサーが所属するVTuber/バーチャルライバーグル-プ「にじさんじ」「NIJISANJI EN」を運営し、コンテンツIPを活用したグッズ・デジタルコンテンツ販売など幅広い事業を展開するANYCOLOR株式会社。「にじさんじ」公式サイトコーポレートサイトなどでmicroCMSを活用しています。

今回は、技術本部 Webプロダクト部 部長の梅田さん、同部エンジニアのYさんに、導入の背景から効果、今後の展望についてお聞きしました。

導入の背景:WordPressによる運用課題を解消し、フロントエンド技術と親和性の高い構成へ刷新

microCMSを導入した背景をお聞かせください。

-梅田さん

以前のWebサイトはWordPressで運用していましたが、セキュリティリスクへの対応や運用コストの面で課題がありました。2021年に弊社が社名を変更した際に、コーポレートサイトのリニューアルも併せて実施し、microCMSを利用した構成へと刷新しました。さらに2022年には「にじさんじ」の公式サイトもmicroCMSでの運用へ移行しました。

microCMSを選んだ決め手はなんでしたか? 

-梅田さん

当時からチームメンバーはTypeScriptやJavaScriptを用いたフロントエンド開発に習熟しており、Next.jsとヘッドレスCMSの組み合わせは自然な選択肢でした。

WordPressを運用するにはPHPが稼働するサーバーが必要ですが、それをAWS上に構築するには手間がかかります。Next.jsとヘッドレスCMSの構成であればAWSのサーバーレス環境で運用できるため、インフラの管理コストを大幅に抑えられます。2021年当時はヘッドレスCMSを提供するサービス自体が多くなかったこともあり、国産ヘッドレスCMSであるmicroCMSを選定しました。 

導入時の体制と進め方を教えてください。 

-梅田さん

「にじさんじ」公式サイトのリニューアルは、フロントエンドとサーバーサイドを合わせて社内チームで内製しました。当時はWebサイトを担当するメンバーが非常に少なく、別プロダクトの開発も並行していたため、少人数体制で導入まで進めていきました。 

microCMSの公式ブログには、Jamstackな構成を構築するためのハンズオン記事などが充実しているので、今でも新サイトの立ち上げ時には参考にしています。

活用の状況:11サイトでmicroCMSを活用。細やかな権限設計を行い、非エンジニア約30名でサイト運用

どのようにmicroCMSを活用していますか?

-梅田さん

更新を停止しているものも含めて11サイトでmicroCMSを利用しています。「にじさんじ」公式サイトやコーポレートサイトに加え、ライバーが所属するユニットのサイトや、イベントサイトでも活用しています。 

microCMSで管理しているコンテンツは、ニュース、ライバーのプロフィール、カレンダーなど多岐にわたります。配信スケジュールについてはYouTubeのAPIと連動した自動反映ですが、その他のコンテンツはほぼすべてmicroCMSで更新しています。

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

-Yさん

フレームワークにはNext.jsを利用しています。ホスティングはAWSです。レンダリング方式はサイト特性に応じて使い分けており、「にじさんじ」公式サイトやコーポレートサイトのように更新頻度が高いサイトはSSR(Server Side Rendering)を採用しています。一方、ユニットのサイトなど更新頻度が比較的低いものについては、SSG(Static Site Generation)による静的配信としています。

コンテンツの運用フローを教えてください。 

-梅田さん

ニュースやプレスリリースは広報担当者が更新し、ライバーのプロフィール情報などはマネジメント部のデスクワーク担当者が管理しています。

microCMSの運用に関わっている非エンジニアメンバーは約30名です。ロール機能を活用し、日常的なコンテンツ更新を行う担当者には必要な範囲の編集権限のみを付与し、意図しないスキーマの変更などが発生しないよう調整しています。

運用のためのドキュメントを整え、エンジニアが都度対応するのではなく、事業側の担当者が直接コンテンツを扱える体制を整えました。「便りがないのは良い便り」といいますが、運用担当者からのヘルプはほとんどなく、問題なく運用できていると思っています。

-Yさん

ニュースに関しては、複数のサイトで同じAPIを参照する構成にしています。コーポレートサイト、採用サイト、「にじさんじ」公式サイトの3つで共通のニュースデータを利用しており、採用ページでは採用関連記事のみを抽出して掲載しています。これによって同じ情報をそれぞれのサイトに個別登録する必要がなくなり、コンテンツの重複管理を解消しています。

情報公開のタイミング管理は、どのように運用されていますか。 

-Yさん

イベント告知などは公開タイミングがとてもシビアです。そのため、公開日時の予約機能を活用し、イベントのランディングページ公開に合わせてニュース一覧にも同時掲載されるよう設定しています。さらにWebhookを利用してAWS側と連携し、イベントサイトの公開と同時にmicroCMSのコンテンツも自動更新される仕組みを構築しています。

導入の効果:運用体制を確立し、社内にナレッジが蓄積。横展開もスムーズに 

microCMSを導入して、どのような効果がありましたか? 

-梅田さん

エンジニアチームが介在しなくてもサイト運用が回っている点は、microCMS導入の大きな成果だと感じています。2019年頃は所属ライバーが毎月3名ほどのペースで増えていく時期で、それ以降もコンスタントにデビューが続いたため、プロフィール情報の追加・修正も急増していました。VTuberにとってビジュアルイメージは重要な要素です。こうした情報更新は迅速に反映する必要があるため、マネジメント部のデスクワーク担当者が直接CMSを操作できる体制を整えられたことは非常に大きかったです。

-Yさん

ユニットのWebサイトを新規に立ち上げる際には、担当者から「microCMSのようなCMSで管理できるようにしてほしい」と指定されることもあります。「にじさんじ」公式サイトの運用を通して社内にナレッジが蓄積されており、担当者の学習コストがあまり発生しない点もメリットです。立ち上げの際には、既存サイトで使ったセットアップを流用できる部分も多く、個別デザインなどの実装に開発リソースを集中できています。 

-梅田さん

用途や更新頻度に応じてプランを選択できる点も、複数サイトを運用する際のメリットですね。厳密な権限管理が求められるサイトには機能が豊富なプランを、更新頻度が比較的低いユニットサイトなどにはシンプルな構成のプランを選ぶなど、段階的に拡張していける柔軟性があると思います。

アクセスが集中するケースも多いと思いますが、負荷対策はどのように行っていますか。 

-梅田さん

ライバーのデビュー時などはアクセスが集中しますが、インフラ側でスケール対応しているため大きな問題はありません。また、画像APIを活用して画像をWebP形式へ変換することで転送量を抑制しています。にじさんじ公式サイトとコーポレートサイトを合算した転送量は4TB/月を超える規模になりますが、SSR構成でもmicroCMSは安定して稼働しています。

今後の展望:サイト制作を高速化し、より柔軟なコンテンツ管理へ

今後のmicroCMS活用についての展望を教えてください。 

-梅田さん

今後も新しいサイトを立ち上げる機会は増えていくので、引き続きmicroCMSを活用していく方針です。シンプルな構成のサイトであれば、最短1ヶ月ほどで公開まで進められています。

サイト制作においては、スクリーンショットやデザイン資料を見てもらうよりも、実際に動くものを提示した方が具体的なフィードバックを得られますよね。短期間でサイトを立ち上げられることはビジネススピードの向上にも直結しています。

microCMSに期待する機能や改善要望があれば教えてください。 

-梅田さん

契約管理の観点では、複数サイトの契約情報や支払い情報を横断的に管理できると助かります。現在はサイトごとに個別管理となっているため、サイト数が増えるほど管理の手間がかかってしまいます。 

-Yさん

複数のAPIで共通のカテゴリーを扱う際の管理方法について、別の仕組みがあると使い勝手がよさそうだと感じています。たとえば「ニュース」で設定しているカテゴリー群を、「アーティスト情報」など別のAPIでも利用したい場合、現状ではAPIごとに同じ定義を個別に作成するか、カテゴリー専用のAPIを新たに用意して参照する必要があります。 

共通のカテゴリーやステータス情報をマスターのように一元管理できる仕組みがあれば、APIをまたいだ運用がよりシンプルになり、管理負荷も軽減できるように思います。


取材協力:エディット合同会社(ライター:藤井亮一 撮影:落合由夏)

事業の急成長を支えるWebサイトの基盤をmicroCMSで構築。エンジニアがより本質的な開発に集中できる運用と、最短1ヶ月での新サイト立ち上げが可能に
ANYCOLOR株式会社様
広告・メディア AWSNext.js
事業の急成長を支えるWebサイトの基盤をmicroCMSで構築。エンジニアがより本質的な開発に集中できる運用と、最短1ヶ月での新サイト立ち上げが可能に
外部委託コストを半減。WordPressからmicroCMSへ移行し、更新スピードとセキュリティを同時改善
株式会社Looop様
自治体・公共・組合 Next.jsAWS
外部委託コストを半減。WordPressからmicroCMSへ移行し、更新スピードとセキュリティを同時改善
毎日更新が必要なキャンペーン・バナー掲載がミスなくスムーズに!フロントエンドの開発に注力可能な体制も構築
株式会社ブックリスタ様
エンタメ・サービス業 AWSReact
毎日更新が必要なキャンペーン・バナー掲載がミスなくスムーズに!フロントエンドの開発に注力可能な体制も構築
microCMSでWebサイト運営を内製化。ノウハウが社内に蓄積し、新規サイトの立ち上げもスムーズに
株式会社USEN ICT Solutions様
IT・システム開発 AstroNode.js
microCMSでWebサイト運営を内製化。ノウハウが社内に蓄積し、新規サイトの立ち上げもスムーズに
全国のサロンに独自コンテンツを配信する仕組みをmicroCMSで実現。初心者でも使いやすく管理しやすいCMS
株式会社ミルボン様
メーカー AWSNuxt.js
全国のサロンに独自コンテンツを配信する仕組みをmicroCMSで実現。初心者でも使いやすく管理しやすいCMS
グループ全体の20サイトをmicroCMSで統一管理。約300店舗が自らコンテンツを更新し運用も効率化
遠州鉄道株式会社様
卸売・小売 AzureCloudflare
グループ全体の20サイトをmicroCMSで統一管理。約300店舗が自らコンテンツを更新し運用も効率化
記事作成時間が大幅に短縮!microCMSで実現した非エンジニア運用とモダンな技術への転換
株式会社コロプラ様
エンタメ・サービス業 Next.jsReact
記事作成時間が大幅に短縮!microCMSで実現した非エンジニア運用とモダンな技術への転換
1週間要していた記事公開が“即時公開”できるように。エンジニアの負担を大幅に削減し、マーケティング施策を高速化
株式会社IVRy様
IT・システム開発 AWSNext.js
1週間要していた記事公開が“即時公開”できるように。エンジニアの負担を大幅に削減し、マーケティング施策を高速化

導入事例集 - 課題・ケース別編

microCMSを導入いただいた企業の事例を課題やケース別にまとめた資料です。microCMS導入前に抱えていた課題、microCMS導入後の効果をご覧いただけます。

導入事例集 - 課題・ケース別編
導入事例集 - 課題・ケース別編 導入事例集 - 課題・ケース別編

目次

  1. 表示速度などのパフォーマンス改善
  2. 保守・運用コスト削減
  3. 工数削減
  4. 開発面における柔軟性
  5. 管理画面などの利便性
  6. セキュリティの高さ
  7. 充実のサポート
  8. WordPressからの移行
  9. Movable Typeからの移行

こんなことを知りたい方におすすめ

  • どんな課題をもつ企業がmicroCMSを導入しているのか
  • microCMS導入前に抱えていた課題、microCMS導入後の効果がどのようなものか