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


© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 ZOZOTOWN本部 ZOZOWEB部 企画チーム
 エンジニア
 武井　勇也
 2020年4月 新卒入社
 入社してからオフィスへの出社回数は２回
 ランニングやサウナなどアツいことが好きです
 zenn : @takewell
 twitter : @takewell_
 
 2

© ZOZO Technologies, Inc. https://zozo.jp/
 3 ● 日本最大級のファッション通販サイト
 ● 1,400以上のショップ、8,400以上のブランドの取り扱い（ともに2021年6月 末時点）
 ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載
 ● コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 ● 即日配送サービス
 ● ギフトラッピングサービス
 ● ツケ払い など


© ZOZO Technologies, Inc. 目次
 ● ZOZOTOWNのプロモーションページについて ● ECサイトはアプリケーション＋プレゼンテーション ● 導入した手段 ● コンポーネント化 ● Headless CMSを用いてコンポーネント駆動なLP作成を実現 ● 改善結果 ● 今後の展望 ● まとめ 
 4

© ZOZO Technologies, Inc. プロモーションページの イメージ
 5

© ZOZO Technologies, Inc. 背景 : ZOZOTOWNのプロモーションページについて
 6 ● お客様に様々なキャンペーンをプロモーションするLPを　　月平均 3,4ページ公開（昨年度）している ● 期間限定セール、抽選キャンペーン、新商品、コラボなど内容は 様々。 ● シューズやコスメ、ラグジュアリー商品などの注力カテゴリーが広が りプロモーションページの本数ニーズが増加 ● zozo.jpは16歳、Classic ASPで構築されており、これらの資産とシー ムレスな連携ができる制約のもと技術的効率化が必要 
 左記の制約のもと、効率化の手段を考案する必要 があり、プロモーションページの作成を、　コンポー ネント化とCMSの導入により効率化することとしまし た。

© ZOZO Technologies, Inc. 背景 : ECサイトはアプリケーション＋プレゼンテーション
 ● アプリケーション ● 目的 : お買い物機能の提供 ● ページ : 検索・商品詳細・カート・お気に入り ● 要求 : 動的、複雑な機能を素早く変えられる堅牢な設計 ● プレゼンテーション ● 目的 : 商品訴求、マーケティングのための情報伝達 ● ページ : キャンペーン・セール (いわゆるLP) ● 要求 : 静的、素早い開発、アニメーションなどの演出効果 
 7 アプリケーションとプレゼンテーションは 要求が異なるため、作り方も異なる。 アプリケーションはコンポーネントベースのライブラ リ(e.g React,Vue)を用いて宣言的にUIを記述。コ ンポーネント化して再利用性や保守性を重視して 実装する。 一方、プレゼンテーションはDOM操作 (e.g DOM API, jQuery, CSS)を駆使して、　ページ 固有の演出を実現。 モジュール化、再利用性などはあまり考慮せずス ピード優先で実装する。 フロントと言っても上記の使い分けが合理的。

© ZOZO Technologies, Inc. 8 例えば左記の商品リストの場合、 動的な状態を制御したいニーズがある。 - API通信中のローディング表現 - 性別(ALL,MEN,WOMEN,KIDS)によって商品 を切り替える - ソート順 : 新着順・人気順・おすすめ順 - 価格タイプ : すべて・通常価格・セール価格 - 販売タイプ : 通常・予約 - クーポン対象商品の絞り込みの有無 - アプリ内WebViewの場合は遷移先をURL ス キームにする インタラクション要素はないが、動的で複雑なもの。 しかし、プレゼンテーションページ(LP)にも動的で複雑なものは含まれる


© ZOZO Technologies, Inc. 取り込み１ : 商品リストのReactコンポーネント化
 9 ● 商品APIの状態遷移ロジック扱うContainer Components ● 任意の商品（商品にタグを付与して制御） ● 売れ筋セール商品ランキング ● ユーザーのお気に入りブランドからセール商品 ● 商品のビューを表示するPresentation Components ● 横スクロール ● タイル ● カルーセル 
 見た目と状態ロジックを分離させることで、ひとつのAPIで様々な商 品表示させることができ再利用性が高まる。 より詳しくは React コミッターが執筆した Presentational and Container Components Dan Abramov Midium が参考 になります

© ZOZO Technologies, Inc. React コンポーネント化のメリット
 10 ● 過去に開発したものは都度開発する必要がなく再利用できる ● Reactを用いてコンポーネントを実装するエンジニアとプレゼンテーションの効果を実装するエンジニアで 並行して作業ができる ● 上記によりアニメーションなどのプレゼンテーション演出開発により注力できるようになる LPの場合Reactコンポーネント化するものは複雑なものから慎重に選定し、 すべてをReactで記述することを目指さないのがポイント

© ZOZO Technologies, Inc. 11 さらにUIコンポーネントを増やし、 UIコンポーネントだけを組み合わせるだけで 作れるページに関してはエンジニアを介さずに ページを公開できるようにしたい！

© ZOZO Technologies, Inc. 取り組み 2 : CMSを用いてコンポーネント駆動なLP作成を実現
 12 管理ツールの実装しておらず、 UI部分の実装をプレビュー表示で 確認できるようにしただけで、追加 の実装コストが少しな点がポイント です。

© 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で、管理画面が日本語表示に対応している ● コンポーネントと相性が抜群にいいカスタムフィールドと繰り返しフィールドの機能を持つ 


© ZOZO Technologies, Inc. カスタムフィールドと繰り返しフィールド
 14 ● カスタムフィールドとは、自由にフィールドを作成できる機能 ● フィールドの要素には数字・テキスト・真偽値・画像・日時などの設定が可能 ● テキストには正規表現でのバリデーションや字数制限が可能 ● 繰り返しフィールドとは、カスタムフィールドを複数選択し、好きな順序で入力を繰り返 すことのできる機能 ● ドラッグ&ドロップでコンテンツを入れ替えすることも可能 繰り返しフィールドはカスタムフィールドの配列として提供される、　カスタム フィールドには繰り返しフィールドも指定できるため HTML の入れ子構造との相性が良い

© ZOZO Technologies, Inc. 繰り返しフィールドとカスタムフィールドを使ったページ作成のイメージ
 15 取得できるJSON 繰り返しフィールドを扱う

© ZOZO Technologies, Inc. TypeScript・React を用いたコンポーネント駆動開発とも相性が良い
 16 コンポーネント駆動とはUI開発をコンポーネントから始めて、コンポーネントを徐々に組み合わせてページを作り上げて いくボトムアップな開発プロセス
 2.型定義 1.カスタムフィールドを定義 3. React Components を実装

© ZOZO Technologies, Inc. 改善結果 : コンポーネントとシステムを導入後 LP はどれくらい作成できるようになったのか
 17 ● 月平均4ページ公開 (昨年度) に対して、 microCMSを使ったLPは月平均5, その他のLPも 3ページ公開できるようになった（2倍） ● 短期間に複数のページを公開することは困難だったが、CMSであればその課題も解決された (連続キャンペーンが実施可能になった) ● CMS上で編集しながらプレビュー確認が行えるようになったため、デザイナーの工数が削減され、手戻りも発 生しづらくなった 


© ZOZO Technologies, Inc. 今後の展望 / 解決したい課題
 18 ● Web Front基盤をClassic ASP/jQueryから今世代のWebフレームワークにリプレイス ● オンプレ => クラウド ● CI/CD ● Core Web Vitalsなどのパフォーマンス指標の改善 ● 上記のためSSG・CSR・SSR・ISRなどの適したレンダリング手法を選択可能に

© ZOZO Technologies, Inc. まとめ
 19 ● プレゼンテーションが目的の主なLPでもAPIとUI Componentsをモジュール化してコンポーネント 駆動開発をすることで効率化できる ● HeadlessCMSはサイトに部分的に導入することができるため、既存システムにも簡単に導入でき、 コンテンツ編集を非エンジニアでも可能にできる ● microCMSはコンポーネント駆動ページ作成と相性が良い機能が備わっている

© ZOZO Technologies, Inc. ZOZOTOWN の Web フロントをさらに躍進させませんか？ 20 ● 募集職種名 : ZOZOTOWN フロントエンドエンジニア ● 業務内容 ● ZOZOTOWNのサイト改善 / 改修におけるUI / インタラクション / LPなどの開発 ● 新サービス開発プロジェクトにおけるUI / インタラクション / LPなどの開発 ● 備考 ● フルフレックス制 ● 全国どこでも勤務可能 その他の職種の方も適切な方にルーティング可能だと思うので カジュアルにTwitter @takewell_に DM などいただければ幸いです！

© ZOZO Technologies, Inc. 21 Appendix 1 : ページに部分的に React コンポーネントを用いる際に ReactDOM.createPortal API を使う
 UI Components HTML の data 属性に変数を渡す TypeScript より詳しくはこちらの記事をご覧ください 
 任意のテンプレートエンジン(HTML) で React を部分的に用いる際に便利な createPortal API について 描画したい箇所に記述

© ZOZO Technologies, Inc. Appendix 2 : CMS を用いてコンポーネント駆動 な LP 作成を実現
 22 実際のシステム導入は追加でサイトジェネ レーターを作るなど手間がかかりました。 Next.js など SSG に対応したフレーム ワークを利用できる場合は非常に簡単に headless CMS を導入できるでしょう。 より詳しくはこちらの記事をご覧ください 
 React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO Technologies TECH BLOG
 


23