コンテンツページのアクセス数が30%増加。microCMSでECサイト運用を最適化

日本国内のホームセンター事業において売上高1位を獲得している株式会社カインズ。全国に250の実店舗（2025年3月12日時点 ※会員制卸売店舗C'z PROを除く）を展開している同社は、オウンドメディアやECサイトなどのWeb施策にも積極的に取り組んでおり、その中で2024年10月にECサイトをリニューアルした際にmicroCMSを採用しました。 

今回は、CX統括部 次世代開発室 WEBグループ エンジニアの中川陽平さん、佐藤裕也さん、吉野智暁さん、ヤン・ドフンさん、CX統括部 プロダクト開発部 UI・プロダクトデザイングループ UI/UXデザイナーの田中遥乃さん、マーケティング部 クリエイティブグループ デザイナー/クリエイティブ運用の豊田誠士さんに、microCMSの導入背景や利用状況、導入後の効果などをうかがいました。

導入の背景：より柔軟なECサイト運用を見据えリプレイスを決断 

サイトリニューアルでmicroCMSを導入する前には、どんな課題があったのでしょうか？ 

-中川さん
以前はコンテンツ制作に別のシステムを利用していましたが、費用が高い上に自由度が低く、当社の事業モデルや取り扱う商品点数、拡張していきたいサービスとマッチしませんでした。「こういう施策を試したい」と思っても、それに対応しようとするとエンジニアの負担が大きくなりすぎてしまうような状況だったんです。無理を重ねると開発チームが疲弊してしまうし、結果的にビジネスの成長も阻害されかねません。そこで、より自由にカスタマイズできるシステムにしたいと考え、リプレイスを決断しました。

また、新型コロナウイルスの流行も、柔軟なシステムの必要性を感じたきっかけのひとつです。コロナ禍では店舗での販促活動がまったくできなくなった一方で、ECサイトにはマスクを求めるお客さんが急増しました。このような変化に対応できるシステムを作る必要がありましたが、「どういう売り方・紹介の仕方が最適なのか？」といったビジネス的な観点も踏まえながらページの設計ができるシステムを求めていました。

microCMSを選んだ決め手を教えてください。

-中川さん 
複数のヘッドレスCMSを比較検討しましたが、日本語のサポートがあるという安心感、技術的なドキュメントの充実、そして動作のスピードの速さからmicroCMSを選びました。 

特に、日本語のドキュメントが充実している点が大きな決め手でした。開発チームは120名ほどですが、その中にはインドの開発拠点も含まれます。海外も含め大規模なチームで開発を進めていくにあたり、やはり日本側の運用者や開発者がシステムをしっかりと理解することは重要です。その点で、日本製のサービスであるmicroCMSはドキュメントが整っており、非常に助かりました。 

また、実際に触ってみて、使いやすく、動作が速いと感じたこともポイントでした。以前別のサイトでWordPressを使用していましたが、セキュリティの問題や動作の遅さ、管理負担の大きさが課題になっていました。そうした負担を軽減し、よりスムーズに運用できるシステムを求めていたため、microCMSは理想的な選択肢だったと思います。

活用の状況：ECサイトとアプリの一部にmicroCMSを使用。膨大な既存コンテンツを3か月で移行完了

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

-中川さん 
カインズのECサイトでは、ファーストビューの検索窓以外のほぼすべての部分でmicroCMSを活用しています。例えば、シーズンごとに展開する特集ページや、商品に関するお知らせなどもmicroCMS上で管理していますね。

-佐藤さん 
カインズの公式アプリでもmicroCMSを活用しています。バナー表示やリンク先の管理、アプリとの連携、商品レコメンドの仕組みにもmicroCMSを導入しています。例えば、ウェブサイトのトップページに表示される「閲覧急上昇」や「注目のセール」といった情報はmicroCMS上でコンテンツ管理し、ECサイトとアプリの両方に反映される仕組みです。

-中川さん
2024年11月から開始した「CAINZ Pay（カインズペイ）」のランディングページにもmicroCMSを活用しています。CAINZ PayはECサイトとは異なるユーザー層を想定しているため、EC用のテンプレートとは違うUIが必要なんです。そこで、CAINZ Payを担当しているUIチームの方にご協力いただいて、microCMSを利用してページを作成しました。

既存コンテンツの移行はどのように進めていったのでしょうか？ 

-中川さん
はじめに、豊田さんをリーダーとして、従来のシステムにおける運用フローや機能などの利用状況の精査を行いました。その結果、使われていないテンプレートや機能が一定数あることがわかったんです。 

今回のプロジェクトでは、膨大な量のコンテンツを3か月で移行する必要があったため、まずはよく使われている機能に絞ってCMSを開発することにしました。ひとまず必要最低限の機能を備えたCMSを用意し、そちらでコンテンツの移行作業を進めながら、「この機能を追加してほしい」といった現場からの要望に応じて改修を進めていきました。 

テンプレートの作成については、既存コンテンツからいくつかピックアップし、それぞれの型を整理する作業をUXチームが担当しました。その結果をもとに、運用側の目線で「こういうテンプレートがあれば運用しやすい」という方針を決め、進めていきました。  

-田中さん
今回のリプレイスに関しては、特集ページの構築に使用しているUI要素を型化し、運用管理しやすいようにすることをゴールに設定していました。

型化した要素を元に作成したテンプレートのUIを開発側に渡し、それをmicroCMSに組み込んでもらう、という流れで進めていきました。

microCMSとの連携部分の技術構成について教えてください。 

-吉野さん
フロントエンドはフレームワークとしてNext.jsを使用しており、Google CloudのCloud Runにホスティングしています。ちょうどNext.jsに新しいルーティング方式が追加された頃だったので、今後主流になっていくであろうApp Routerを採用しました。 

ページは基本的にサーバーサイドレンダリング（SSR）で生成しつつ、トップページではインクリメンタルな手法（ISR）を活用しています。

（補足）トップページではISR（インクリメンタル・スタティック・リジェネレーション）を活用し、キャッシュを利用することでSSRよりも高速に表示できるよう工夫されています。あらかじめ保存されたデータを使うことで、毎回サーバーで処理をする必要がなく、ページの表示がスムーズになります。また、一定時間ごとに最新の情報へ自動更新されるため、表示速度と最新性を両立できる仕組みになっています。 

-佐藤さん
EC部分はフルスクラッチで開発しました。商品リスト用のAPIを作成し、このAPI内で「閲覧急上昇」や「最近の売れ筋」といったコンテンツを管理しています。表示時にはAPI経由でAWS上のデータベースを参照する仕組みです。

-吉野さん
商品名や商品画像、セールの有無といった情報は、microCMSへの登録タイミングとECサイトでの参照タイミングの間に運用者によって変更される可能性があります。そのため、microCMSには商品コードのみを登録し、商品情報自体は別のAPIで取得する形を採用しました。

例えば「閲覧急上昇」と「最近の売れ筋」は、GoogleのVertex AIと連携し、AIがレコメンドするデータをそのまま利用しています。一方で「注目のセール」は、microCMSに運用者がJANコード（商品IDキー）を入力し、別のAPIを通じて商品データを取得する仕組みです。

アクセス負荷対策はどのように行っていますか？

-ヤンさん
Cloud Runを利用することで、インスタンスのスケーリングが簡単になり、負荷に応じて柔軟に対応できる仕組みになっています。インフラ側でコントロールできるため、負荷が増加しても対応がしやすいのです。 

テレビ放送などアクセス集中が見込まれる場合は、事前にCloud Runのスペックアップを行い、備えています。microCMS側はCDNキャッシュがあるため、特に対応はしていませんが、これまで全く問題なく運用できています。

導入の効果：コンテンツページのアクセス数が30%増加。運用効率も大幅に向上

導入してから、microCMSの良さは感じられたポイントはありますか？

-中川さん
コンテンツページのアクセス数が平均30％増加しました。

当社のECサイトでは商品詳細ページのURLが最も多く、次に成長を牽引しているのがカテゴリーページです。商品が増えるたびにカテゴリーページが強化され、そこが成長のトリガーになっていました。一方、コンテンツページの成長は限定的でした。 

microCMSの導入後にコンテンツページのアクセス数は伸びましたが、従来カテゴリーとして扱っていたセールやキャンペーンなどを特集ページへ移行したこともあり、単なるページ移動による増分かどうかを調査したんです。その結果、コンテンツとしての評価が向上し、自然検索流入の増加にもつながっていることが確認できました。

-豊田さん
運用面においては、microCMSを導入してから動作が格段に軽くなったので、作業の効率が大幅に向上しました。以前使用していたサービスでは、1つのページを修正するたびに更新処理に時間がかかり、変更を反映させるまでに待ち時間が発生していました。そのため、1つの修正ごとに「変更 → 反映待ち → 確認」のプロセスを繰り返す必要があり、作業に時間がかかっていたのです。 

現在は、修正を加えると即時に反映されるため、確認作業がスムーズになり、更新作業全体のスピードが飛躍的に向上しました。

microCMSの活用を通じてリッチコンテンツの内製化と一元管理を目指す

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

-吉野さん
APIのOpenAPI化を期待しています。現状ではチーム内で定義した型を使ってプログラムを構築しています。ここが自動化されると、開発の効率が大きく向上するため、ぜひ実現してほしいですね。 

-佐藤さん
本番環境と検証環境のデータや設定を相互にコピー・移行できる機能があると便利だと感じています。 

また、既存の管理者が持っている権限を、より細分化できると良いですね。自分は管理者権限を持っていますが、記事コンテンツを間違って編集してしまわないようにしたいので、管理者権限のみで可能な操作をロールに付与することができれば、より安心して運用できると思います。

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

-中川さん
今後は、リッチコンテンツをmicroCMS上で制作できるようにしたいと考えています。

運用側から全面HTMLのページを実現したいという要望が出ているのですが、メンテナンスのハードルが高く、開発コストも大きいため、まだ実現には至っていません。自由度が高まると、その分運用ルールの整備が難しくなり、デザインをしっかり作り込まなければ効果的なページにはならないといった課題もあるため、運用体制がある程度整うまでは実装が難しい状況です。

「デザインに投資してどれだけ売上が向上するのか」という議論もありますが、ECサイトにおいても単に商品を売るだけでなく、サービスを楽しんでもらうことが重要です。ユーザーに楽しんでもらうという点において、デザインの力は大きく寄与するのではないでしょうか。

現在は販促目的でリッチコンテンツのランディングページを作成する場合は、サブドメイン上でゼロから制作しています。そのため、各ドメインにコンテンツが分散している状態です。microCMSを活用してこれらを集約し、より活用しやすい形にできたらと考えています。

取材協力：エディット合同会社（ライター：中村英里　撮影：関口佳代）