ANYCOLOR株式会社
ANYCOLOR MAGAZINE

上場エンタメ企業ANYCOLORが明かす、世界観もセキュリティも妥協しないCMS選定の裏側

梅田さん
技術本部 Web プロダクト部 部長
Yさん
技術本部 Web プロダクト部 サイトデザイン課 課長
『ANYCOLOR MAGAZINE』は、ANYCOLOR株式会社が2024年に立ち上げたオウンドメディアです。同社は「にじさんじ」をはじめとするバーチャルYouTuber(VTuber)事業を展開し、エンターテインメント業界を牽引しています。 同メディアが対象とするのは、ファンだけではなく、まだ見ぬ未来の社員やステークホルダー。情報発信の目的は「会社の内側にある思いや熱量を届けること」だといいます。 そのシステム基盤には、ヘッドレスCMS「NILTO(ニルト)」が採用されています。 既存の運用ルールやレガシーなシステムに縛られない「数年ぶりの新規プロダクト」という挑戦の中で、数あるCMSの中からなぜNILTOを選んだのか──。 技術本部 Web プロダクト部 部長の梅田さんと、サイトデザイン課 課長のYさんにじっくり話を伺いました。

導入前の課題

  • 対話形式やカバーストーリーなど求めるリッチな表現を実現できなかった
  • AWS環境と相性が悪く脆弱性リスクを抱える従来型CMSは、上場エンタメ企業の運用方針と合わなかった
  • 150名を超えるタレントのイメージカラーを直書きで管理しており、変更のたびに運用崩壊のリスクがあった

導入後の効果

  • フレキシブルテキストによって、対話・吹き出し・埋め込みなど求めていたリッチな表現を直感的に運用可能に
  • 可変文字色機能で、効率的にイメージカラーの反映が可能に
  • NILTOチームとの伴走により、要望が素早く機能としてプロダクトに反映される体制

ANYCOLOR MAGAZINEとは

──まずは『ANYCOLOR MAGAZINE』がどのようなメディアか教えてください。

梅田:『ANYCOLOR MAGAZINE』は、「にじさんじ」「NIJISANJI EN」のタレントやプロジェクトの裏側を、対話形式の記事として届けるオウンドメディアです。
プレスリリースやニュースとは違って、タレント本人やスタッフの思い、試行錯誤のプロセスといった、ファンの皆さんからは見えづらい部分をじっくり読んでもらえる形で届けたい。その思いから企画が立ち上がりました。

発信しているコンテンツは、所属タレントの紹介にとどまりません。普段は表に出ることのないスタジオスタッフや技術メンバーなど、社内の多様なプロフェッショナルへのインタビューも数多く掲載しています。

Y:2024年4月に企画が動き始めて、同年8月にNILTOのエンタープライズプランを契約しました。そこからデザイン・実装を進めて、10月21日に公開しました。公開から1年半ほど経って、現在は約130本(※取材時点)の記事を公開しています。月間PVは平均25万前後、最大38万弱で、安定して推移しています。

既存サイトでは実現できなかった、リッチな記事構成

──メディアを立ち上げるにあたって、システム面や表現面でどのような課題があったのでしょうか?

梅田:メディアの企画当初、開発チームが直面したのは「表現力」の壁でした。これまでの公式サイトやプレスリリースのような「タイトル・画像・テキスト」を上から順番に並べるだけの構造では、このメディアが求めるものを表現できないことが分かっていたからです。

具体的には、以下のようなリッチな表現が不可欠でした。

  • カバーストーリー:雑誌の表紙のように、月替わりで更新するメインビジュアル。特集テーマに沿って制作された新規ビジュアルを、トップページに大きく配置する
  • 会話・吹き出し形式:スタッフ・タレントの発言を視覚的に分かりやすく見せたいときに使う構造
  • 埋め込み:記事の途中に、YouTube動画や画像を自由度の高いレイアウトで挟み込む
  • タレントプロフィール:インタビュー記事の横など最適な位置に、シームレスにタレント情報を配置する

特に、スタッフ・タレントの発言を視覚的に分かりやすく見せるという構造は、CMSの選定を始める前から決定していました。これらをウェブ上でストレスなく、かつ自由自在に表現できる仕組みが、システム選定に際しての絶対条件でした。

タレント同士の掛け合いを表現する会話吹き出し形式のデザイン
©ANYCOLOR, Inc.
タレントの発言を一目で判別できる会話吹き出し形式のデザイン

なぜ従来型CMSを選ばなかったのか?
理想の技術スタックを追求した背景

──オウンドメディアを立ち上げる際の選択肢として、従来型のCMSが広く普及していると思います。そうしたシステムは選択肢に入らなかったのでしょうか?

Y:弊社のシステム運用方針、そして何よりセキュリティの観点から、WordPressをはじめとした従来型のCMSの採用は難しかったというのが結論です。

まず運用方針ですが、弊社は基本的にインフラをAWS(Amazon Web Services)で構築しています。従来型のCMSですと、EC2といった専用のサーバーを立てて管理する必要があります。これは、保守コストの面から見て最適ではありませんでした。

そしてもう1つの理由が、セキュリティです。従来型のCMSは、そのシェアの高さやシステムの構造上、どうしても脆弱性を突いた攻撃の対象になりやすい性質があります。エンタメ企業である弊社にとって、公開前の情報が外部に漏洩することは絶対に許されません。
厳しいセキュリティ基準を重視する中で、サーバー管理や脆弱性対応のコストが膨らみがちな従来型CMSを使うのは、あまり現実的ではなかったのです。

──従来型CMSが選択肢から外れた一方で、今回「ヘッドレスCMS」という新しい選択肢にかじを切ったのはなぜでしょうか?

Y:実は、弊社の最も初期の公式サイトは従来型のCMSで構築されていました。
ですがこのメディアの選定時は、それもすでにAWS環境へ移行し、フロントエンドをモダンな構成に作り変えていたタイミングだったんです。

梅田:また、『ANYCOLOR MAGAZINE』は、私が入社して以来、初めて一から自社で立ち上げる新規プロダクトでした。それまでは既存サイトの改修やリニューアルが中心で、どうしても過去の仕様に影響されがちだったんです。
しかし、今回はそうしたレガシーな負債を一切考慮せず、完全に独立した環境で作れる。今の時代に最適な技術スタックを自分たちで選べる、という前向きな環境が、新しいCMS選びを後押ししてくれました。

理想の記事表現と、迷わず使える入稿画面の両立

──そこからどのようにして「NILTO」と出合われたのでしょうか?

梅田:社内の別部門のメンバーが、とある展示会でNILTOのブースに立ち寄ったことがきっかけです。「開発チームが好きそうな、新しくて面白いCMSがあったよ」と情報を持ってきてくれたことが最初の接点でした。

当時、開発チームが求めていた要件は、AWS環境との相性が良くセキュリティに優れたヘッドレスCMSであること。すでに社内の他サイトで導入実績のあった、他社製ヘッドレスCMSなども比較対象にしましたが、最終的な決断は一瞬でした。

単純なコストだけで言えば、既存サイトで使っているCMSの方が安価ではありました。しかし、私たちが実現したかった、自由度の高いリッチな記事構成という要件をクリアできるCMSはNILTOしかなかったんです。正直なところ、悩むまでもなくNILTOの一択でしたね。

──具体的に、NILTOのどこが決定打となったのでしょうか?

梅田:選定の最大の決定打となったのが、NILTOのコア機能である「フレキシブルテキスト(※)」でした。

【※フレキシブルテキストとは】
一般的なリッチテキスト(文字装飾や単純な画像挿入)の枠を超え、文章の途中にスライダー、YouTube動画、任意のカスタムコンポーネント(吹き出しやプロフィール等)をブロック単位で自由自在に、かつ直感的に埋め込むことができるNILTO独自の強力なエディタ機能

従来のCMSでは、エディタ部分の自由度を上げようとするとマークダウンの知識が必要になったり、入稿画面が複雑化してエンジニア以外の人が扱いにくくなったりする課題がありました。しかしNILTOは、やりたい表現を100%叶えられる自由度を持ちながら、実際に記事を執筆するライターが直感的に触れるUIを備えていました。

さらに、将来的には複数のウェブサイトを立ち上げる可能性も見据えていました。そのため、1つのプラットフォームで複数サイトのコンテンツや権限を包括的に管理できる構造は、先々の大きな安心につながりました。

シンプルなAPIと充実したドキュメントが支えるスムーズな実装

──『ANYCOLOR MAGAZINE』の技術スタックと、実装フェーズのプロセスについて教えてください。

Y:フロントエンドにはNext.js、ホスティングにはAWSを採用し、ヘッドレスCMSとしてNILTOを組み込んでいます。
レンダリング方式は、表示速度とコンテンツのリアルタイム更新を両立させるため、当時はSSR(サーバーサイドレンダリング)で構築しました。しかし、直近ではISR(Incremental Static Regeneration)への移行や、キャッシュ周りの最適化を進めています。

──運用フローにおける外部連携などはどのように組まれていますか?

Y:NILTOのWebhook(※)機能を活用しています。

【※Webhookとは】
Webhookとは、ウェブアプリケーションで特定のイベントが発生した際に、指定したURLへ自動で通知する仕組みです。 Webhookを活用することで外部サービスとの連携を自動化し、手動での作業を削減します。

運用の担当者がNILTO上で記事を公開・更新したタイミングでWebhookが走り、Slackへの自動通知やフロントエンドの自動ビルド(再生成)がトリガーされる仕組みを構築しています。

──初めて触るCMSとして、実装時に迷う部分はありましたか?

Y:正直なところ迷う部分はなく、最初から使いやすいなと感じていました。
NILTOのAPIは非常にシンプルで、叩けばほしいデータがそのままきれいな形で落ちてくるからです。

また、最初期の段階からAPIリファレンスやドキュメントがほぼ完璧にそろっていたため、作業中に困らずに実装を進められました。これはエンジニアにとって非常にありがたいポイントでしたね。

密な連携で実現する、サイトを共に育てるサイクル

──NILTOチームとの、コミュニケーションのスピード感はいかがでしたか?

梅田:一般的なCMSですと、プロダクトに関する問い合わせはメールでやり取りするため、回答までに時間がかかることが少なくありません。しかしNILTOの開発チームは、契約直後からSlackチャンネルを立ててくださり、そこで連絡を取り合ってきました。

何か要望やバグの報告を上げると、すぐにチーム内で連携して、スピーディーに対応や修正をしてくれる。まさに、ANYCOLORと「二人三脚でプロダクトを良くしてきた」という実感があります。

Y:エンジニア視点からも、アドバイスやサポートがかなり丁寧で的確なので、非常に連携しやすく、いつも助けられています。

──『ANYCOLOR MAGAZINE』の裏側には、御社の要望から生まれた機能もあるとお聞きしました。

梅田:はい、その象徴が「可変文字色要素」の実装です。
にじさんじに所属するタレントたちは、それぞれ固有の「イメージカラー」を持っています。記事内で会話の吹き出しを表現する際、誰が喋っているかを明確に伝えるため、テキストや枠線にそれぞれのカラーコードを適用する必要がありました。

当初は、一人一人のイメージカラーをCMSのカスタムスタイルで登録していました。
しかし、国内だけでも150名を超える所属タレントがいる弊社では、それだけの数のカスタムスタイルの登録が必要です。さらにタレント本人の希望やデフォルト衣装の変更に伴い、イメージカラーが途中でアップデートされることもあり、設定管理の限界を感じていました。
もともと、これほど大量のカスタムスタイルを登録することは想定されていなかったのだと思います。

そこでNILTOの開発チームに相談したところ、カラーコードを設定できる機能を新たに実装してくださったんです。この機能のおかげで、より効率的にイメージカラーを反映できるようになり、運用の負担が大幅に軽減されました。


©ANYCOLOR, Inc.
可変文字色要素を使用して表現されたタレントごとのイメージカラー

──グローバル展開されている御社ならではの、多言語周りの要望もあったのでしょうか?

梅田:はい。英語圏を中心に活動する「NIJISANJI EN」の所属タレントを取り上げるにあたって必要だった「言語ごとの公開制御機能」も、弊社がフィードバックした内容を基にして改善された機能です。英語記事の場合には、URL構造を切り替えつつ、日本時間の日中(他の国/地域の夜間)に同時公開する、といった高度な運用を支えています。

社内ガバナンスを容易にする、柔軟な権限切り分け

──大規模なIP(知的財産)を取り扱う上場企業として、セキュリティ要件はどのようにクリアしたのでしょうか?

梅田:セキュリティは弊社にとって「クリアしていて当然」の絶対防衛ラインです。
CMSを選定するにあたっては、大きく2つの要件を重視しました。

第一に評価したのが、内部ユーザーの閲覧・編集権限の柔軟な切り分けです。弊社は、エンタメを扱うということもあり、情報の管理・運用には細心の注意を払っています。
NILTOでは「このメンバーには全体を見てほしいが、このライターには特定のコンテンツのみを編集させたい」といった、社内ガバナンスに沿った権限統制が容易にできました。

第二に、外部からの不正アクセスや意図しない情報漏洩への対策です。ヘッドレスCMSによっては、APIのレスポンスの中に、フロント側で必要のない(公開前の)データまで一緒に落ちてきてしまう仕様のものがあります。
そうすると、ブラウザのデベロッパーツールなどでソースコードをのぞかれた際に、未公開の情報が漏洩してしまうリスクにつながります。

NILTOはその点、こちらがAPIで指定した通りのクリーンなデータ構造だけでレスポンスを返してくれるため、不要なデータが付いてくることがありません。こうした細かい設計が、私たちの求める厳格なセキュリティ基準を満たしていました。

世界観とクオリティを追求する組織に、NILTOが最適な理由

──NILTOはどのような組織や会社に向いているCMSだと感じますか?

梅田:NILTOは「テンプレートを使って、今すぐ簡単なホームページを作りたい」というニーズには向いていないと思っています。

どちらかというと、自社のブランドやコンテンツそのものが生命線であるような企業。表現したい世界観や必要な要件をじっくりと精査し、それに合わせて管理画面や記事構成をカスタマイズして、本当にクオリティの高いものを世に出していきたい。
そんな思いを持つ組織にこそ、NILTOは最高のパフォーマンスを発揮してくれるはずです。

Y:エンジニアが最初の設計さえしっかりと作り込んでおけば、運用の担当者はプログラムの知識がなくても問題ありません。記事を執筆するライターであっても、簡単かつ直感的にリッチなコンテンツを作ることができます。開発と運用の双方にストレスがない、よくできたシステムだと感じています。

導入を検討している担当者の皆さまへ

──運用開始から現在に至るまでの成果と、今後の展望を教えてください。

梅田:現場のやりたいことを何ひとつ妥協せず実現できて、トラブルなく安定して運用できている。そのこと自体が、NILTOを選んで本当に大正解だったなと感じる点ですね。
現在は、当初思い描いていた、リッチな会話表現や月替わりのカバーストーリーを内包した運用体制が完璧に構築されています。初期の時点で欲しかった機能は一通り実装できました。

今後の展望としては、記事数がさらに数百、数千と積み重なり、データ量が増加していったとしても、純粋なスケーリングに耐えうる運用を維持していくことです。

──ありがとうございます。それでは最後に、CMS選びに悩み、現状の運用に疲弊している企業の担当者へメッセージをお願いします。

梅田:今や、ヘッドレスCMSはウェブ開発の主流になり、数多くの選択肢が生まれています。その中でもNILTOは、先発サービスの課題をきれいにクリアしつつ、現場が求める「先進的な機能」を備えている、今まさに最有力候補となるCMSです。
開発と運用、どちらも妥協したくないチームなら、きっと双方の要求を高いレベルで叶えることができると思います。

そう言い切れるのは、NILTOチーム(フェンリル)が、ベンダーの枠を超えて、圧倒的なスピード感でプロダクトをアップデートしてくれるパートナーだからです。システム開発に際して、これほどまでに密に、かつ的確に連携し、こちらの要望を即座にプロダクトに反映してくれる会社は、今までありませんでした。

Y:私たちのような、大規模なエンターテインメントのプラットフォームで、これだけ本格的にNILTOを使い込んでいるのは自分たちだけである、という自負もありますし、強い親近感を持っています。
これからも、お互いに刺激し合いながら、一緒にこのシステムをより良くしていきたいですね。

NILTOについてご不明な点は、お気軽にお問い合わせください。

導入事例