全国のサロンに独自コンテンツを配信する仕組みをmicroCMSで実現。初心者でも使いやすく管理しやすいCMS

サロン専用のヘアケア製品やヘアカラー剤などを製造・販売する株式会社ミルボンでは、サロンでの新たなヘアケア購入体験を提供する「Smart Salon®（※以下、スマートサロン）を展開。同社では、利用者が商品情報などをサロン店内のタブレットで閲覧できる「Smart Salon Viewer（スマートサロンビューア）」にmicroCMSを活用しています。

今回は、株式会社ミルボン 経営戦略本部 事業開発部 スマートサロン推進室の神田英司さん、佐藤美夢さん、開発を担当した株式会社GNUSのプロジェクトマネジャーの渡部哲也さんに、microCMSの導入背景から活用状況、今後の展望をお聞きしました。

※Smart Salonは、株式会社ミルボンの登録商標です。

導入の背景：スマートサロン戦略への挑戦

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

-神田さん
弊社では2023年1月にスマートサロンの展開を開始しました。私たちの理念に共鳴していただけるサロンオーナーと協働展開し、お客様ご自身が“探す”、“試す”、“発見する”、“選ぶ”楽しさを感じられるサロン体験を提供しています。

そこで、併せてリリースしたのが「スマートサロンビューア」です。サロンの店内に設置したタブレット端末から、そのサロン専用のページを閲覧していただけます。美容師さんとお客様がコミュニケーションを取る手段や、お客様が気になる商品を自由に探していただけるサービスとして利用されています。

サロンでヘアケア商品を購入されるお客様は15％程度でお客様の「買いづらさ」があると私たちは考えました。商品の価格や効能、香りなどがわからないといった情報不足を解消し、美容師さんとお客様の間での情報伝達をスムーズにするためのツールとしてスマートサロンビューアを開発しました。

弊社としては、サロンを起点として情報発信するWebサービスを提供するのは初めての取り組みです。そのため、私たちのやりたいことを実現する方法についてはGNUSさんに協力いただき、議論を重ね開発しました。

導入の決め手は何だったのでしょうか？

-GNUS・渡部さん
開発面と運用面の両方を考慮してmicroCMSを選びました。主な理由は3つあり、日本語のドキュメントが充実していること、日本語のサポートが受けられること、エンジニアでなくても使いやすいインターフェースであることです。他の海外製CMSなども検討しましたが、実際に使用する皆さんの使いやすさを考えると日本語の情報が充実しているmicroCMSが最適だと判断しました。

実はプロジェクトの企画が動き始めてからローンチまでが数か月しかなく、かなりタイトなスケジュールだったんです。そのため、技術選定にはあまり時間をかけられなかったのですが、microCMSのHobbyプランに登録し、実際にプロトタイプを作成してみて、これならできそうだという感触をつかみました。 

活用の状況：全国70店舗以上の独自コンテンツを一元管理

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

-佐藤さん
スマートサロンビューアのすべてのコンテンツをmicroCMSで管理しています。ビューアの画面上部には「NEWS」「CATALOG」など合計6つのタブがあり、タブごとに独自コンテンツが表示されています。

NEWSタブでは、当社が発信するお知らせに加え、サロンの独自情報も自由にカスタマイズして表示が可能です。CATALOGタブは商品画像が一覧で表示されていて、画像をタップすると商品ごとの詳細情報を見られるページ構成です。画面をスクロールしていくと「カウンセリング」という項目があり、ここでは美容師さんがお客様と会話しながら髪質や悩みをもとに商品を選んでいただけます。

スマートサロンは2025年4月時点で全国に72軒あり、それぞれのサロンごとに専用のURLを発行しています。美容師さんのおすすめアイテムや、季節のヘアケア情報などの独自コンテンツを各サロンで作成していただき、専用ページに情報を出し分けてサロンのタブレット端末に表示する仕組みです。

その他、スマートサロンビューアの特徴として動画コンテンツを配信している点も挙げられます。これまでもデジタルサイネージ等で表示しているサロンはありましたが、タブレット端末を利用することで、より多くのお客様に動画でも情報をお届けできるようになりました。

 -神田さん
新しい商品に興味を持っていただくには、メーカー発信の情報よりもお客様が信頼している美容師さんたちから発信された情報が効果的です。そこで、各サロンでそれぞれ独自コンテンツを配信できるような仕組みにしました。

具体的なシステム構成を教えてください。

-GNUS・渡部さん
Vue.jsのフレームワークであるNuxtを使用し、AWSのS3とCloudFrontでホスティング・配信をしています。開発後に運用を引き渡す可能性も見据えて、多くのエンジニアが触れるメジャーな技術であることを意識しました。バックエンドは特に設けず、フロントエンドからmicroCMSのAPIを直接呼び出す構成です。コンテンツの即時反映を優先するため、CloudFrontのキャッシュも無効化しています。 

サロンごとのコンテンツ出し分けはmicroCMSで付与されているコンテンツIDをもとに実現しています。また、使用しているタブレット端末を別のサロンで流用できないように、WAF（Web Application Firewall）でIP制限をしてその場所でなければサロンのURLにアクセスできないように設計を工夫しました。

導入の効果：初心者でも使いやすいシンプルなCMS

microCMSの使い勝手はいかがですか？ 

-佐藤さん
私はこれまでWeb管理業務の経験がなく、他のCMSを使ったこともないので比較はできないのですが、前任者から1時間ほどレクチャーを受けただけですぐに慣れて問題なく使えるようになりました。

-神田さん
GNUSさんにはサービス開始以降もさまざまな追加要望を実現していただいているので、非常に助かっています。管理画面の見た目なども使いやすくブラッシュアップしていただいて、安心して使えていますね。

-GNUS・渡部さん
microCMSはシンプルで柔軟性があり、それが開発スピードや使いやすさにつながっていると思います。 

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

-佐藤さん
サービス開始からこれまでは、事務局ですべて統括管理していました。当社には独自の取り組みとして、サロンごとに「フィールドパーソン」と呼ばれる営業や教育の担当者を配置しています。コンテンツ反映の依頼は、まずサロンからフィールドパーソンに伝えられ、そこから事務局に集約されて、データの格納や反映作業を行ってきました。

今後は事務局での一括管理による運用を変更し、各地のフィールドパーソンにmicroCMSの操作権限を移譲していく予定です。 

CMSの管理権限を現場担当者に移譲し、スピードアップを目指す

運用体制の転換について詳しく教えてください。

-神田さん
運用変更の主な理由は、サロンと密にコミュニケーションを取っているフィールドパーソンが直接microCMSを管理することで、サロン独自のコンテンツをすみやかに配信できるようにするためです。

ただ、ほとんどのフィールドパーソンは、CMSを業務で扱った経験はありません。GNUSさんと相談しながらロール管理を設計し、詳細な操作マニュアルを作成しました。 

-佐藤さん
操作マニュアルの作成時に、管理画面上のいくつかの説明テキストを理解しやすい文言に変更しています。事務局が管理している時には問題なくても、慣れない人が操作するときには混乱やミスの原因になりそうだと感じたためです。お客様に表示される部分だけでなく、裏側の管理画面についても直感的に調整しやすかったのでとても助かりました。

権限移譲にあたって、懸念はありませんでしたか？

-神田さん
スマートサロンビューアでは顧客情報などを扱わないように仕組みをつくっているので、セキュリティ的な不安はほとんどありません。お客様にすぐに情報を届けることの必要性がわかってきたので、サロンが出したいタイミングでなるべく早く情報を反映させることを重視し、権限移譲を進めました。メンバー数は従量課金によって増やしていけるので、多数のフィールドパーソンに権限を付与しても基本のプランを変更せずに柔軟に対応できるのでありがたいですね。

今後、microCMSに期待することはありますか？

-佐藤さん
全国のフィールドパーソンで同時に管理画面を操作するので、同時編集がやりやすくなるといいですね。同時に編集画面を開いていた場合は、最後に更新された情報ですべて上書きされることになると思いますが、それぞれの作業データがどこかに保存されるなどの対策があれば嬉しいです。

-神田さん
PVレポートやランキングなどで、サロンごとにどのコンテンツが人気なのか確認できるような機能があると、現場のモチベーション向上につながると思います。コンテンツの視聴回数などをmicroCMSの管理画面上でも分析できると、使い勝手がさらによくなりそうですね。 

-GNUS・渡部さん
入力フィールドをコンテンツの種類によって動的に変化させられる機能があればいいなと思います。たとえば、編集画面で挿入するメディアに画像タイプを選択したときは画像のURLだけが表示されるようなイメージです。実運用するフィールドパーソンの入力ミスや苦手意識を少しでも減らせるのではないかと思います。

取材協力：エディット合同会社（ライター：藤井亮一　撮影：藤原葉子）