スポーツ用品業

e-コマースにモダンアーキテクチャを採用し商材単位でのUI/UX制御

ECにおいて商品ごとに最適なUI/UXを既存プラットフォーム内で可変制御し、非エンジニアによる柔軟な運用を可能にする支援を行いました。

従来のECでは商品を掲載する際にフラットなUIがベースになっており、20万円の商品と100万円の商品それぞれに最適なUIや画像の枚数などのメリハリをつけた出し分けには、個々の大規模開発が必要でした。本事例では、Server Driven UI(SDUI)の適用により、商品ごとのメリハリや強く押したい商品群を既存Platform内で可変させる仕組みを構築しました。

課題

フラットなUIによる商品掲載(商品ごとに最適なUIの出し分けには個々の大規模開発が必要)
SKU増加への対応(選択肢が多い場合や在庫等の奥行きに合わせたUI/UX連動が困難)

SDUIとは

Server Driven UI(SDUI)とは、画面構成やUI要素の定義をサーバー側で管理・配信し、フロントエンドは受け取った定義を描画することに徹するアーキテクチャです。従来のECフロントエンドでは、商品ごとにUIを変えようとするとフロントエンドの個別改修・開発が必要で、変更のたびに開発・リリースのサイクルを回さなければなりませんでした。

SDUIでは、UIの定義をサーバー側で切り替えるだけで画面の構成を変えられるため、商品単位・商品群単位のUI出し分けを、個別開発なしに運用の中で制御できます。本事例の商材単位でのUI/UX可変制御は、このSDUIをECプラットフォームのフロントエンドに適用することで実現しています。

SDUIはECのWebフロントエンドに限らず、AppleやGoogleの審査により更新が制約されるMobile Appでも、システムアップデートなしにUI変更・パーソナライゼーションを行える技術として適用が進んでいます。

取り組み

商材単位のUI/UX可変制御

SDUIにより、商品ごとのメリハリや強く押したい商品群を既存Platform内で可変。SKUが増加し顧客に対して選択肢が多い場合や、在庫等の奥行きに合わせたUI/UX連動に有効な手法として採用が増えてきている技術です。有効な適応箇所はECプラットフォームのフロントエンドです。

更新環境のセキュアな切り分け

コマースチームとマーケティングチームでのセキュアな更新環境の切り分けにより、トランザクションや出品などの情報に触れずに、キャンペーンや商品アセット、マーケティングアセットのみをマーケティングチームが柔軟に更新・追加可能になります。

適用例：グローバルスポーツ用品メーカーのEC

グローバルスポーツ用品メーカーのECサイトでは、通常商品はカテゴリからの一覧性を重視した従来型のUIを維持する一方、フラッグシップの目玉商品には、動画を用いたリッチなヒーロー表現、カラーバリエーションの訴求、同一シリーズのグレード別比較カード、技術仕様・ジオメトリーやマニュアルダウンロードまで含めた詳細コンテンツなど、高価格帯商品にふさわしい情報量と世界観のUIを適用。商材の価格帯・重要度に応じた出し分けを同一Platform内で実現しています。

これらのUI可変は非エンジニアによるWeb可変運用として行われ、目玉商品のUIUX向上によるCVR向上に繋がっています。差別化が難しいECやWebアプリにおいて、AI駆動型での運用で競争優位を創出しています。