ヘッドレスCMS/ヘッドレスコマースの技術でOnsen*公式サイトをリニューアルしました
2021年9月、入浴を通して、毎日を豊かにするヘルスケアブランド「Onsen*」は公式サイトのリニューアルを行いました。
商品の購入や、ブランドサイトとしての告知、カスタマーサポートなど、あらゆるコミュニケーションの起点として公式サイト(ECサイト)はとても重要です。私たちも今後の更なるサービス展開に向け、当時抱えていた課題を解決しながら、更に体験価値を高め、より柔軟なサービス展開に対応し、さらには拡張性を備えるサイトの形を１から見直し、この度リリースすることができました。
リニューアルのポイントとなった「ヘッドレス」という概念を軸に、プロダクトマネージャーとして本プロジェクトに携わる中で考えていた、リニューアルの課題感や経緯、そして簡易的ではありますが技術内容を踏まえた実際のリニューアル内容などをまとめられたらと思います。
私たちの事業について、どんなことしてるの？
「Onsen*」は入浴を通して毎日を豊かにするためのデジタルサービスの提供と、合わせて使える浴室製品を提供しています。
主なプロダクト・サービスとしては3点。
1. 医師監修、自宅でずっと眠りにつく入浴体験が実践できる入浴ナビゲートアプリ(iOS専用)の提供
2. 芯から身体を温める、別府発温泉タイプ入浴剤「薬用入浴剤 デイリーミネラル」の販売
3. 銭湯様のマーケティング支援・業務用入浴剤の販売
サービスの詳細については以下も参照してもらえると嬉しいです。
Onsen*公式サイトを取り巻く当時の課題
1. コンテンツの分散。入浴剤の販売情報や、アプリ関連の告知情報、入浴に関わるノウハウ知識などのコンテンツなど多数の情報のベクトルがアプリ・Webを跨いだサービスドメイン内に混在していた。さらにそれらの編集元も分散されており、コンテンツ管理・運用のコストが肥大化していた。
2. サイトの読み込み速度。提供しているiOSアプリ内では、公式Webサイトをブラウザで読み込む形で商品の購入機能を提供していた。しかし従来のサイトではサイトの読み込み速度が満足いくものではなく、ネイティブアプリと比較した際にスムーズな購入体験とは言えなかった。
「サービスに関わるあらゆる情報やコンテンツサービスが一元的に取得できる場」
「ネイティブアプリと変わらないサイトスピードを提供し、アクセスした際にストレスなくスムーズに製品を購入できる場」
「製品を知ってもらい、お客様と継続的コミュニケーションを行うマーケティングの場」
Onsen*が掲げる "入浴を通して、毎日を豊かにする" その今後の体験を考えた時に、公式サイトはこうした一連の体験を全て融和してお届けできる、包括的な場でありたい。そのような想いからバックエンド・フロンドエンドの設計を見直し、「ヘッドレス」設計の思想を取り入れたサイトとしてリニューアルすることを決めました。
行ったことと結果
まずは、ぜひリニューアルされた公式サイトをご覧ください。
この度のリニューアルにおいて、Onsen*公式サイトはユーザーの目に触れる「コンテンツ表示」の要素とユーザーの目に触れない「コンテンツ管理」の部分を完全に分離し、ヘッドレスなサイトとして生まれ変わりました。
ユーザーの目に触れる「コンテンツ表示」の部分は、Reactベースのサイト生成フレームワーク"Gatsby"を採用することで、ネイティブアプリに匹敵する高品質かつ高速なページを実現することができました。また内蔵されるGraphQLというシステムを使うことで、外部に置かれたデータを柔軟にAPIを通して取得でき、拡張性を持ったサイトを構築することができます。その軽快な動作とは裏腹に、ユーザーや検索エンジンに実際に提供されるのは静的なサイトであることから、SEOにも強いサイト構築フレームワークです。
そして、ユーザーの目に触れない「コンテンツ管理」の部分は、2つのシステムを利用しています。
その1つ目が国産のAPIベースの日本製ヘッドレスCMS"microCMS"です。こちらには主にOnsen*からユーザー様へ発信する記事コンテンツやお知らせなど文章や画像をメインに管理しています。このシステムが担う役割はあくまで文章情報や画像情報の管理のみであり、それらをどう見せるか、という"ビュー"をある種全く考慮しないことで、開発的な実装がシンプルになるとともに、運用としても「ユーザーに何を伝えるか」という中身の部分に集中できることで、コンテンツの品質向上へと繋がりました。
そして2つ目がeコマースプラットフォームの"Shopify"です。これは国産のネットショップ作成プラットフォームBASEやSTORESなどと同様に、eコマースサイトを簡単に作れるサービスです。
リニューアル前のOnsen*公式サイトは、このShopifyに垂直統合する形で「公式サイト+EC機能+コンテンツ配信機能」を提供していました。
しかし、今回のリニューアルにてOnsen*サイトは、Shopifyが持つ注文受注・配送通知などECの要となるバックエンドの機能だけを部分的にAPIで利用します。（この一群はStorefrontAPIと呼ばれShopify公式より提供されています。）これまで利用していたサイト構築部分やコンテンツ配信部分は先述のように、Shopifyの機能を利用するのではなく自分たちで1から最適な技術を選び、それらを組み合わせた理想のサイトを作り上げました。
餅は餅屋ではないですが、EC運営に伴う大事な顧客情報や決済管理は専用のプラットフォームの力を部分的にお借りしながら、サービス運営に最適なサイトの形は自分たちのスタイルで独自に構築していくことで、高速なフレームワークの利用や、複数のコンテンツCMSとの統合が可能となり顧客の体験をより高めていくことができます。
このECに関するフロントエンドとバックエンドを切り離すような概念は「ヘッドレスコマース」と呼ばれており、今後Webの概念/スピードが加速していく世界において重要となってくるものです。この新しい概念の理解にはShopify公式が提供している記事がとても参考になりました。
所感
今回のリニューアルによって、目標としていた以下３点の公式ブランドサイトとしてのベースを無事整えることができました。
・「サービスに関わるあらゆる情報やコンテンツサービスが一元的に取得できる場」
・ 「ネイティブアプリと変わらないサイトスピードを提供し、アクセスした際にストレスなくスムーズに製品を購入できる場」
・「製品を知ってもらい、お客様と継続的コミュニケーションを行うマーケティングの場」
特に、サイトスピードとそれによる購入体験は分かりやすく向上させることができたので、ぜひ見てもらえると嬉しいです。
そして、リニューアルにより"ビュー"から切り離されヘッドレス化された商品情報やコンテンツは、リアル・デジタル問わず、あらゆる生活のタッチポイントに応じて最適に形を整えて利用していくことができるようになりました。
これを分かりやすく言葉で例えるならば「どこでも提供できるeコマース」です。再利用可能な状態でカプセル化された情報は様々なプラットフォームやタッチポイントに融和していきます。その拡張性やカスタマイズ性、運用簡易性は、今後の事業展開に拡がりをもたらしてくれると感じています。今後のOnsen*の展開もぜひお楽しみに。
一方で、概念としても新しいものである通り、特に「ヘッドレスコマース」の構築においてはまだまだ手法は確立されていません。特にShopifyとの連携においては本来のオールインワンプラットフォームから離れることになるので、柔軟性と引き換えに便利なプラグインが使えなくなったり、購入体験を損なわないための独自の調整が必要になったりします。それについてはまた別の機会に...
お読みいただき、ありがとうございました。