コンポーネント化とHeadlessCMSを用いた ECプロモーションの効率化

関連

Presentational and Container Components
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化
https://techblog.zozo.com/entry/microcms-zozotown-usecase

任意のテンプレートエンジン(HTML) で React を部分的に用いる際に 便利な createPortal API について https://zenn.dev/takewell/articles/64e6324042610f

Transcript

1. コンポーネント化とHeadlessCMSを用いた
 ECプロモーションの効率化
 
 株式会社ZOZOテクノロジーズ
 ZOZOTOWN本部 ZOZOWEB部 企画チーム　エンジニア
 武井 勇也 Copyright © ZOZO Technologies, Inc. 2021.9.8 〜ZOZO・Quipper・SmartHRのフロントエンド開発効率化〜 MIDAS TECH STUDY #2 

2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 ZOZOTOWN本部 ZOZOWEB部 企画チーム
 エンジニア
 武井　勇也
 2020年4月 新卒入社
 入社してからオフィスへの出社回数は２回
 ランニングやサウナなどアツいことが好きです
 zenn : @takewell
 twitter : @takewell_
 
 2
3. © ZOZO Technologies, Inc. https://zozo.jp/
 3 • 日本最大級のファッション通販サイト
 • 1,400以上のショップ、8,400以上のブランドの取り扱い（ともに2021年6月 末時点）
 • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載
 • コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など

4. © ZOZO Technologies, Inc. 目次
 • ZOZOTOWNのプロモーションページについて • ECサイトはアプリケーション＋プレゼンテーション • 導入した手段 • コンポーネント化 • Headless CMSを用いてコンポーネント駆動なLP作成を実現 • 改善結果 • 今後の展望 • まとめ 
 4
5. © ZOZO Technologies, Inc. プロモーションページの イメージ
 5
6. © ZOZO Technologies, Inc. 背景 : ZOZOTOWNのプロモーションページについて
 6 • お客様に様々なキャンペーンをプロモーションするLPを　　月平均 3,4ページ公開（昨年度）している • 期間限定セール、抽選キャンペーン、新商品、コラボなど内容は 様々。 • シューズやコスメ、ラグジュアリー商品などの注力カテゴリーが広が りプロモーションページの本数ニーズが増加 • zozo.jpは16歳、Classic ASPで構築されており、これらの資産とシー ムレスな連携ができる制約のもと技術的効率化が必要 
 左記の制約のもと、効率化の手段を考案する必要 があり、プロモーションページの作成を、　コンポー ネント化とCMSの導入により効率化することとしまし た。
7. © ZOZO Technologies, Inc. 背景 : ECサイトはアプリケーション＋プレゼンテーション
 • アプリケーション • 目的 : お買い物機能の提供 • ページ : 検索・商品詳細・カート・お気に入り • 要求 : 動的、複雑な機能を素早く変えられる堅牢な設計 • プレゼンテーション • 目的 : 商品訴求、マーケティングのための情報伝達 • ページ : キャンペーン・セール (いわゆるLP) • 要求 : 静的、素早い開発、アニメーションなどの演出効果 
 7 アプリケーションとプレゼンテーションは 要求が異なるため、作り方も異なる。 アプリケーションはコンポーネントベースのライブラ リ(e.g React,Vue)を用いて宣言的にUIを記述。コ ンポーネント化して再利用性や保守性を重視して 実装する。 一方、プレゼンテーションはDOM操作 (e.g DOM API, jQuery, CSS)を駆使して、　ページ 固有の演出を実現。 モジュール化、再利用性などはあまり考慮せずス ピード優先で実装する。 フロントと言っても上記の使い分けが合理的。
8. © ZOZO Technologies, Inc. 8 例えば左記の商品リストの場合、 動的な状態を制御したいニーズがある。 - API通信中のローディング表現 - 性別(ALL,MEN,WOMEN,KIDS)によって商品 を切り替える - ソート順 : 新着順・人気順・おすすめ順 - 価格タイプ : すべて・通常価格・セール価格 - 販売タイプ : 通常・予約 - クーポン対象商品の絞り込みの有無 - アプリ内WebViewの場合は遷移先をURL ス キームにする インタラクション要素はないが、動的で複雑なもの。 しかし、プレゼンテーションページ(LP)にも動的で複雑なものは含まれる

9. © ZOZO Technologies, Inc. 取り込み１ : 商品リストのReactコンポーネント化
 9 • 商品APIの状態遷移ロジック扱うContainer Components • 任意の商品（商品にタグを付与して制御） • 売れ筋セール商品ランキング • ユーザーのお気に入りブランドからセール商品 • 商品のビューを表示するPresentation Components • 横スクロール • タイル • カルーセル 
 見た目と状態ロジックを分離させることで、ひとつのAPIで様々な商 品表示させることができ再利用性が高まる。 より詳しくは React コミッターが執筆した Presentational and Container Components Dan Abramov Midium が参考 になります
10. © ZOZO Technologies, Inc. React コンポーネント化のメリット
 10 • 過去に開発したものは都度開発する必要がなく再利用できる • Reactを用いてコンポーネントを実装するエンジニアとプレゼンテーションの効果を実装するエンジニアで 並行して作業ができる • 上記によりアニメーションなどのプレゼンテーション演出開発により注力できるようになる LPの場合Reactコンポーネント化するものは複雑なものから慎重に選定し、 すべてをReactで記述することを目指さないのがポイント
11. © ZOZO Technologies, Inc. 11 さらにUIコンポーネントを増やし、 UIコンポーネントだけを組み合わせるだけで 作れるページに関してはエンジニアを介さずに ページを公開できるようにしたい！
12. © ZOZO Technologies, Inc. 取り組み 2 : CMSを用いてコンポーネント駆動なLP作成を実現
 12 管理ツールの実装しておらず、 UI部分の実装をプレビュー表示で 確認できるようにしただけで、追加 の実装コストが少しな点がポイント です。
13. © ZOZO Technologies, Inc. Headless CMS について
 13 • Headless CMS (Headless Contents Management System) • Headless CMSを一言でいうと管理画面つき Web API（head = 公開されるWebページのビュー） • 本質的には単なるWeb APIのため様々なクライアントアプリケーションと接続できる • ビューはzozo.jpと同じWebサーバー(Classic ASP)の環境で動作させたかったため、
 別サーバーで動作するWordPressなどではなくAPIで連携できるHeadless CMSが妥当 • 代表的な Headless CMS : Contentful, Storapi, microCMS, etc. • ZOZOTOWNではmicroCMSを採用 • 管理画面は日本語表示としたい ▪ 海外のHeadless CMSは、その殆どが選択肢から外れる ▪ microCMSは純国産のHeadless CMSで、管理画面が日本語表示に対応している • コンポーネントと相性が抜群にいいカスタムフィールドと繰り返しフィールドの機能を持つ 

14. © ZOZO Technologies, Inc. カスタムフィールドと繰り返しフィールド
 14 • カスタムフィールドとは、自由にフィールドを作成できる機能 • フィールドの要素には数字・テキスト・真偽値・画像・日時などの設定が可能 • テキストには正規表現でのバリデーションや字数制限が可能 • 繰り返しフィールドとは、カスタムフィールドを複数選択し、好きな順序で入力を繰り返 すことのできる機能 • ドラッグ&ドロップでコンテンツを入れ替えすることも可能 繰り返しフィールドはカスタムフィールドの配列として提供される、　カスタム フィールドには繰り返しフィールドも指定できるため HTML の入れ子構造との相性が良い
15. © ZOZO Technologies, Inc. 繰り返しフィールドとカスタムフィールドを使ったページ作成のイメージ
 15 取得できるJSON 繰り返しフィールドを扱う
16. © ZOZO Technologies, Inc. TypeScript・React を用いたコンポーネント駆動開発とも相性が良い
 16 コンポーネント駆動とはUI開発をコンポーネントから始めて、コンポーネントを徐々に組み合わせてページを作り上げて いくボトムアップな開発プロセス
 2.型定義 1.カスタムフィールドを定義 3. React Components を実装
17. © ZOZO Technologies, Inc. 改善結果 : コンポーネントとシステムを導入後 LP はどれくらい作成できるようになったのか
 17 • 月平均4ページ公開 (昨年度) に対して、 microCMSを使ったLPは月平均5, その他のLPも 3ページ公開できるようになった（2倍） • 短期間に複数のページを公開することは困難だったが、CMSであればその課題も解決された (連続キャンペーンが実施可能になった) • CMS上で編集しながらプレビュー確認が行えるようになったため、デザイナーの工数が削減され、手戻りも発 生しづらくなった 

18. © ZOZO Technologies, Inc. 今後の展望 / 解決したい課題
 18 • Web Front基盤をClassic ASP/jQueryから今世代のWebフレームワークにリプレイス • オンプレ => クラウド • CI/CD • Core Web Vitalsなどのパフォーマンス指標の改善 • 上記のためSSG・CSR・SSR・ISRなどの適したレンダリング手法を選択可能に
19. © ZOZO Technologies, Inc. まとめ
 19 • プレゼンテーションが目的の主なLPでもAPIとUI Componentsをモジュール化してコンポーネント 駆動開発をすることで効率化できる • HeadlessCMSはサイトに部分的に導入することができるため、既存システムにも簡単に導入でき、 コンテンツ編集を非エンジニアでも可能にできる • microCMSはコンポーネント駆動ページ作成と相性が良い機能が備わっている
20. © ZOZO Technologies, Inc. ZOZOTOWN の Web フロントをさらに躍進させませんか？ 20 • 募集職種名 : ZOZOTOWN フロントエンドエンジニア • 業務内容 • ZOZOTOWNのサイト改善 / 改修におけるUI / インタラクション / LPなどの開発 • 新サービス開発プロジェクトにおけるUI / インタラクション / LPなどの開発 • 備考 • フルフレックス制 • 全国どこでも勤務可能 その他の職種の方も適切な方にルーティング可能だと思うので カジュアルにTwitter @takewell_に DM などいただければ幸いです！
21. © ZOZO Technologies, Inc. 21 Appendix 1 : ページに部分的に React コンポーネントを用いる際に ReactDOM.createPortal API を使う
 UI Components HTML の data 属性に変数を渡す TypeScript より詳しくはこちらの記事をご覧ください 
 任意のテンプレートエンジン(HTML) で React を部分的に用いる際に便利な createPortal API について 描画したい箇所に記述
22. © ZOZO Technologies, Inc. Appendix 2 : CMS を用いてコンポーネント駆動 な LP 作成を実現
 22 実際のシステム導入は追加でサイトジェネ レーターを作るなど手間がかかりました。 Next.js など SSG に対応したフレーム ワークを利用できる場合は非常に簡単に headless CMS を導入できるでしょう。 より詳しくはこちらの記事をご覧ください 
 React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO Technologies TECH BLOG