Oisix Creator's Blog(オイシックスクリエイターズブログ)

オイシックス株式会社のエンジニア・デザイナーが執筆している公式ブログです。

負債解消Prjにおけるナビ運用CMS化の取り組み

負債解消Prjにおけるナビ運用CMS化の取り組み

はじめに

Oisixエンジニアリング部バックエンドセクションの栗崎です。 Oisixエンジニアリング部では、ECサイト「Oisix」のサービス開発を行っています。

OisixのECサイトは、2000年の創業から約25年にわたり、多くのデザインや運用を踏襲・改善しながら歩んできました。 しかし、その長い歴史の中で成長とともに、さまざまな技術負債が蓄積されてきました。 この技術負債は新たなサービスの迅速な展開や柔軟な運用の障害となることが少なくありません。

この課題を解決するため、負債解消Prjが2023年度より本格的に始動しました。 この記事では負債解消Prjにおける「ナビ運用CMS化」の取り組みについて紹介します。

負債解消Prjはいくつかのフェーズに分かれており、ナビ運用CMS化は1つ目のPh0に位置付けられます。 現在計画されているものを以下にあげます。(今後大幅に見直される可能性はあります。)

  • Ph0:ナビ運用CMS化
  • Ph1:売り場ページCMS化(ページ丸ごとCMS化)

また、このプロジェクトはコードネームとして「Oisix REBORN(略して"おリボン")」という名前がついていますが全然浸透していません。 "おリボン"の浸透を促すため、本記事では以降負債解消Prjを"おリボン"と呼称します。

ナビ運用とは

Oisixでは、毎週の定期宅配サービス(定期ボックス)に向けて、バナー等の販促ナビゲーション(以降ナビと呼称)を作成・更新しています。

ナビ例)メインビジュアル画像

ナビ例)メインビジュアル画像

ナビ例)グローバルナビゲーション

ナビ例)グローバルナビゲーション

毎週のナビ運用はスプレッドシートを使用して人力で管理・運用されていました。 その基本的な流れは次の通りです。

  1. 企画者がスプレッドシートに販促計画を記入
  2. デザイナーが企画者の指示の元、デザイン画像を作成
  3. コーダーが販促計画、デザイン画像をコードに反映
  4. 実行環境へデプロイし表示確認 という流れです。 関連者を図示すると次のようになります。

販促ラフ運用の関連図

販促ラフ運用の関連図

また、ナビには特定の条件に当てはまるお客様にのみお見せしたいバナーなどもあります。たとえば、入会から2週間以内のお客様に対してOisixの代表的な商品を紹介するチュートリアルの位置づけの表示などです。

これらを実現するための販促計画の策定および実装のプロセス全体を「ナビ運用」と呼びます。

CMS化の目的

従来、毎週のナビ運用はほぼ人力で行われていたため、毎週30~40時間ほどの運用コストがかかっていました。 CMS化の目的は、このコスト削減と、属人化したあいまいな仕様の明確化です。

CMS化後の関連図は次のようになります。 CMS化前と比べると登場人物が減り、関係がシンプルになっていることがわかります。 コーダーを介さず、企画者のみで完結するフローとなることで効率化が図られました。

CMS化の関連図

CMS化の関連図

システムアーキテクチャ

おリボン発足当初に構想していたアーキテクチャとはだいぶ異なりますが、Ph0時点でのアーキテクチャは次のとおりです。

システムアーキテクチャ

システムアーキテクチャ

簡単に説明をします。

  • レガシーシステム(Java+JSP)
    • 古から現存するOisixシステム群
  • 第三世代アーキテクチャ1(EKS)
    • BFFとバックエンドAPI群
    • Java+SpringBootで実装
  • Kintone
    • スプレッドシートの代わりとなるCMSツールの位置づけ
    • 企画者の方たちは普段から利用しているためKintoneを採用
  • フロントエンド
    • 特集バナー等のCMS化したナビをReactで実装
    • ビルドしたJavaScriptファイルをJSPに組み込む

バックエンドチームにおける取り組み

バックエンドチームのスローガンは「走りながら考える」でした。 具体的に決まっているのは納期くらいで、何をどう作るのか?決まるのを待っていても何も進みません。 「これでいいよね?」でガンガン推進するアクションを取りました。2 しかし、新たな負債が積み上がってしまうことは避けなければなりません。

そこで意識したのは次の点です。

  • 現状の技術選定の理由や背景をドキュメントに残す
  • なぜその判断をしたのか、その根拠を明確にする
  • 将来の状況を予想しすぎず、現状の最善を積み上げる

作るものが決まれば爆発的なスピードで実装できるのがこのチームの特徴のようでした。

バックエンドチームでの開発の進め方は別の記事で詳しく紹介する予定です。

CMS化の効果

運用面では、目標のコスト削減にはまだ至っていません。 その理由はCMS化できていないナビがまだ半分ほど残っているためです。 CMS化できたナビ部分は確実に成果がでているはずですが、現時点での具体的な成果は評価中です。

今後の計画

前述の通りCMS化できていないナビがまだ半分ほど残っています。 やりやすいところから着手したため、大きな課題を抱えるナビが残ってしまっています。 当面はこれらのCMS化を目指すことになります。

We are hiring!

ナビ運用のCMS化を通じた負債解消とコスト削減の取り組みを紹介しました。 まだまだOisixには巨大な負債が残っており、これらを適切に返済すべく前向きに取り組んでいく仲間を募集しています。 少しでも興味のある方はカジュアルにお話できればと思います。 お気軽にお問い合わせください。


  1. レガシーシステムを第一世代、第三世代とは別のEKS上で動作するアプリケーション群を第二世代と呼びます。ナビ運用CMS化では第二世代のアーキテクチャは登場せず、Ph1以降で登場する予定です。
  2. もちろんチーム内での合意は取った上で進めています。

Oisix Creator's Blogはオイシックス株式会社のエンジニア・デザイナーが執筆している公式ブログです。

オイシックス株式会社では一緒に働く仲間を募集しています