毎日更新が必要なキャンペーン・バナー掲載がミスなくスムーズに!フロントエンドの開発に注力可能な体制も構築

毎日更新が必要なキャンペーン・バナー掲載がミスなくスムーズに!フロントエンドの開発に注力可能な体制も構築
導入前の課題
  • 以前使っていたCMSの仕組みでは、サイトの更新が1日に1回に制限され、急なキャンペーンなど即時更新に対応できなかった
  • Next.jsで作成したパーツ資産を活かせず、PHPで作り直す「二重工数」が発生していた
  • バナー1枚の掲載に大がかりな作業が必要だったほか、パーツの並び替えにも細かな手間が発生していた
導入後の効果
  • 1〜2週間を要していたバックエンド開発がゼロになり、開発のスピード感が向上
  • キャンペーンページやバナーの運用工数を2分の1程度まで圧縮できた
  • 即時更新が可能になり、売上につながる施策をタイムリーに実行できるようになった
目次

電子書籍ストア「Reader Store(運営:株式会社ソニー・ミュージックエンタテインメント)」の企画・開発・運営を、包括的にサポートしている株式会社ブックリスタ。同社は、従来使っていたCMSのサポート終了を機に、ストアの段階的リニューアルプロジェクトを立ち上げ、新しい基盤としてmicroCMSを採用しています。 

今回は、プロダクト事業本部 プロダクト開発部でチームリーダーを務める葉山健介さん、同部ソフトウェアエンジニアの有末理美さん、そして電子書籍事業本部 Reader Store事業部で、ストアの運用を担当する片岡望さんに、microCMSを導入した背景から導入後の効果まで、詳しくお聞きしました。

導入の背景:旧CMSにおける課題解決と、Next.jsの資産を活かすのにヘッドレスCMSが適していた

microCMSを導入した背景を教えてください。 

-葉山さん
従来使用していたCMSパッケージ製品のサポートが終了することが大きなきっかけでした。それだけでなく、microCMSを導入することでもともと抱えていた技術的な課題も解消できると考えたんです。

我々は、例えばキャンペーン情報を紹介する「特集ページ」や、電子書籍ストア上で“書籍を並べる”パーツなどをNext.jsで作っていました。ですが、元のCMSはPHPでできていたため、このパーツもPHPで作り直さなければならず、開発工数が二重にかかってしまっていたんです。せっかく作ったNext.jsの資産をうまく活用して、効率化を図りたいという意図もありました。

数あるヘッドレスCMSの中で、microCMSを導入した決め手は何でしょうか?

-葉山さん
正直、コストだけだともう少し安い製品もありました。ただ、我々が特集ページなどで制作している多くのパーツを柔軟に配置して自由なレイアウトを作るためには、microCMSが最も使いやすいと判断しました。具体的には対応しているフィールドの多さ、フィールドのカスタマイズ性の部分になります。 

導入にあたって参考にした事例はありましたか? 

-葉山さん
ZOZOTOWNさんの導入事例が大いに参考になりました。特に「キャンペーンページ」の作り方を見て、当社でも同様の仕組みを実現できると確信しました。 

運用面で、導入前に解消したかった最大の課題は何でしたか?

-有末さん
以前のCMSは、「1日に何度も更新できない」という点が最大の課題でした。

当時の仕組みは、運用担当が変更したものを即時に公開するのではなく、その日の変更データすべてを集約し、1日に1回のみサイトに公開する形式だったんです。そのため、「今すぐ更新する」という対応ができず、急ぎの場合は個別に調整する必要がありました。

導入までのプロセス:複雑な構成を解きほぐす、3年がかりの段階的リニューアル

現在はまだリニューアルが完了しておらず、3年がかりで段階的に実施するそうですが、最初から長期計画だったのでしょうか?

-有末さん
はい、長期計画であることは初めから決めていました。というのも、コンテンツも膨大でかつリニューアル前のサイトはかなり複雑な構成だったため、それを一つひとつ解きほぐす必要があったのです。「今の不満を解消するにはどういう画面にすれば運用がやりやすくなるか」を運用チームと話し合いながら、まず「お知らせページ」のような小さな機能から始めていきました。 

microCMSの導入を進める中で、何か想定外の課題はありましたか?

-有末さん

導入初期の段階では特にありませんでした。ただ、後にアクセスが多いトップバナーなどで課題が出ました。キャッシュ戦略を適切に設計しないと、アクセス量が想定以上に増加し、コストにも影響を及ぼすため、より一層の注意が必要だと認識しました(※)。

(※キャッシュ戦略については、ブックリスタ様のテックブログにて詳しく解説されています。)

活用の状況:分業体制で「特集ページ」を毎日更新。開発チームが“専任不要”で支える運用フローに

microCMSを利用しているサイトと利用箇所について教えてください。

-葉山さん
電子書籍ストア「Reader Store」の特集ページで、主にキャンペーン情報のコンテンツ管理などに使っています。他にはニュースやメンテナンス情報などを伝える「お知らせページ」などでも使用しています。

特集ページでキャンペーン情報を柔軟に掲載したいという社内での要望があり、これまではバナー1枚掲載するのにも、ページそのものに対して大がかりな作業が必要でしたが、導入後は管理画面上での設定をベースに柔軟に対応できるようになりました。

 「特集ページ」「お知らせページ」の運用フローについて教えてください。

-片岡さん
私が所属している「編成チーム」が担当しています。チーム内でキャンペーンを立案する「企画担当」と「CMS設定担当」で分業しており、クーポンや値引きといった特集ページの種類ごとに、3〜4名の担当者がページを作っています。

導入の効果:開発工数、運用工数ともに削減。即時更新が可能となり、売上に繋がる施策の実行とコスト削減を両立

開発面では具体的な改善や効果が見られましたか?

-有末さん
導入の効果を最も感じたのは、以前は必須だったバックエンド開発が不要になったことです。これまで、PHPでの対応やテストに最大で2週間ほどかかっていた作業がゼロになり、「まず作成してから検討する」という迅速な対応が可能になりました。

例えば、機能を追加するときも、以前はAPIの中身を変更して影響の有無をテストしていましたが、今はカスタムフィールド(=入力項目を複数組み合わせたりレイアウトを調整して管理画面からの入稿を行いやすくする機能)を設定する程度で済むため、開発工数は劇的に削減されましたね。 

カスタムフィールドの一例(特集ページで本を紹介する際に使用するパーツ)
カスタムフィールドのレイアウト設定画面

運用面で具体的な改善効果は出ていますか?

-片岡さん
電子書籍ストアは、自社が企画するキャンペーンと出版社さんが企画するキャンペーンで、毎日のようにバナーの掲載設定が発生します。microCMSの導入で、設定がシンプルでわかりやすくなり、「時短とミス削減につながった」とチーム全体で感じています。作業工数は約半分になったと思いますね。

以前はページにパーツを足す際、希望の場所に一度で挿入できず、ページの一番下に追加してから一つひとつ上に移動させる作業が必要でした。バナーの掲載設定が反映されないことをチェックする手間も発生しており、このような細かな手間が解消されたことは大きな成果です。

以前のサイトと異なり、即時反映ができるようになりました。その点はいかがでしょうか?

-片岡さん
以前は、サイトの更新が1日に1回だけでしたが、現在は、特定のバナーのみを即時に掲載する更新が可能です。 

そのため「この書籍が売れているから、このバナーを一番上に掲載したい」といった売上につながる施策もタイムリーに実行できるようになり、大きな効果を感じています。 

また、特集ページで使えるパーツが増えたことで、「くじ」機能を使った施策も行えるようになり、施策の幅が広がりました。

管理画面の使い勝手はいかがでしょうか?

-片岡さん
管理画面が見やすく、ページのプレビューも実際の表示に近い状態で見ることができます。非常に使いやすく、新しいメンバーも開発チームが作ってくれたマニュアルを参照することで速やかに操作方法を習得できるのも大きいですね。 

以前のCMSは複雑だったので、新しいメンバーに教えてもすぐに理解してもらうことが難しかったんです。また「更新したくないものまで反映されてしまう」といった問題があったため、確認のやり取りも多く発生していましたmicroCMSの導入により、これらのコミュニケーションコストも削減できています。

今後の展望と要望:リニューアルの先に見据える、さらなる柔軟性の追求

今後は、microCMSをどのように使っていきたいですか?

-葉山さん
今後はmicroCMSを活用して、ストア全体をより柔軟に運用できるようにしたいですね。具体的には、バナーの表示設定をCMS上で簡単に変えられるようにすることを検討しています。 

microCMSへのご要望があればお聞かせください。

-片岡さん
更新スケジュールの予約機能をよく利用しているのですが、現状では予約できる枠が1つだけです。トップバナーの設定も同様です。 

この予約枠が複数持てるようになると、できることの幅がさらに広がると社内で話しています。 例えば、「日替わり施策」を1つのURLのまま、事前に翌日以降のコンテンツを全て設定しておく、といったことが可能になるので、ぜひお願いしたいです。

 -有末さん
複数項目間でのバリデーション機能は欲しいですね。例えば、公開日とは別にキャンペーンの有効期間などを設定する際に、「終了日時」が「開始日時」よりも前になっていたらエラーを出すなどの前後関係をチェックできると、作業ミスが減らせると思います。

また、環境を増やせる機能も重宝しているのですが、ロール(権限)をより細かく設定できたり、ロールの切り替えが柔軟にできるようになったりすると、さらに使いやすくなるなと思いますね。


取材協力:エディット合同会社(ライター:成重敏夫 撮影:関口佳代)

毎日更新が必要なキャンペーン・バナー掲載がミスなくスムーズに!フロントエンドの開発に注力可能な体制も構築
株式会社ブックリスタ様
エンタメ・サービス業 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週間要していた記事公開が“即時公開”できるように。エンジニアの負担を大幅に削減し、マーケティング施策を高速化
コンテンツページのアクセス数が30%増加。microCMSでECサイト運用を最適化
株式会社カインズ様
卸売・小売 Next.jsReact
コンテンツページのアクセス数が30%増加。microCMSでECサイト運用を最適化
サイト15周年のリニューアルでmicroCMSに移行し、表示速度が大幅向上
Webクリエイターボックス株式会社様
サイト制作 Next.jsReact
サイト15周年のリニューアルでmicroCMSに移行し、表示速度が大幅向上

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

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

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

目次

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

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

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