E-commerce：商品コンポーネントの統合設計
Client
Leading Company in Apparel Industry
Team
PM
Designer (me)
Engineer x1
Development Vendor（India）
Platform
Web
Mobile APP
Tool
Figma
Adobe CC
Jira
Confluence
Teams
Timeline
2023.12 - 2024.2
Overview
大手アパレル企業のデザインシステムプロジェクトにおいて、ECサイトのリニューアルを機に、乱立していた商品関連Componentの整理と統合を担当しました。
私は担当デザイナーとして、要素や構造が類似する複数のコンポーネントを精査し、1つの Componentに再設計。UIの一貫性だけでなく、運用・開発の効率化にもつながる設計を実現しました。
Background
リニューアル前のECサイトでは、商品画像のサイズがページごとに異なっており、ブランド全体としての統一感を欠いていました。その結果、ユーザーに対して一貫した購買体験を提供できていない状態でした。
リニューアルを機に、サイト全体の視覚言語を統一し、商品画像はすべて4:3の比率に統一しました。その変更に伴い、該当するComponent群の再設計・改修も求められることとなりました。
Design Process
私は本プロジェクトにおけるデザイン全般を担当しました。
過去の高速な機能開発により、商品関連のComponentは多数存在しており、整合性のない状態が長く続いていました。今回のリニューアルを機に、画像比率の統一と合わせて構造も見直すべきだと判断し、PM・エンジニアと調整の上、商品関連Componentの統合に着手しました。
Research
関連Componentの精査
既存の関連Componentをすべて洗い出しました。特に以下の3点に着目し、各Componentの状態を整理しました：
構造の類似性（要素構成、レイアウト）
使用されているページ
挙動の差分
DSユーザーの声
Design Systemの利用者（PM・デザイナー・エンジニア）に対して、以前より実施していたアンケート結果の中で、商品画像に関するComponentの使い分けやUIの不統一に関する悩みが多数挙げられていました。これらの課題は、日々の運用の中でも継続的に感じられており、改善の必要性が高まっていました。
DSメンバー
見た目も機能も似ているComponentが多いため、DSチーム内でも使い分けが明確に把握できず、特定のページでしか使えない状況が多発していました。
Function Designer
Componentの見分けがつきにくく、それぞれの用途がわからないため、毎回DS チームに確認を取る必要がありました。
Function Developer
Componentの見た目が似ていて判別が難しく、開発時に誤って異なるものを使ってしまい、コード上でデザイン通りに実装されていない箇所が多数発生していました。
Approach
これらの課題に対しては、エンジニアやPMと何度も議論と試作を重ねながら、構造と実装の両面から検討を行い、最終的な設計方針にたどり着きました。
構造を統合し、リニューアルのトンマナに合わせてデザインする
コンポーネントの統合にあたっては、各パターンの類似点と差異を分析し、リニューアルのトンマナに合わせてデザインを提案しました。
議論と検討を重ねた結果、1つのComponentに4つのバリエーションを持たせ、拡張性がある構成にたどり着きました。
１Component、４バリエーションに統合
複雑な挙動を切り離せる
実際の使用例のリサーチ結果によると、使用箇所によって挙動も違います。主に３パータンがありました：
挙動なし、もしくは入れ子Componentの挙動に依存する
全体がLinkとして機能する
一部の要素のみがLinkになる
これらの挙動を1つのComponentで統一的に対応しようとすると、構造が複雑化し運用・開発両面でのリスクが増すため、「Product Component自体には挙動を持たせない」という方針を採用しました。なお、画像だけLinkするパターンはComponentに「Img link」のプロパティをつけます。
全体的にLinkが必要なケースでは、外部からLink処理を付与する設計とし、特に複雑な「一部Linkあり」パターンでは、下記のように、Componentを組み合わせる方式に設計しました。
Before
全ての挙動は一個のComponentに集約
After
Product Component、Link挙動、Button Componentの組み合わせにする
Achivement
本プロジェクトでは、以下の3つの観点で成果を得ることができました：
ユーザー体験の向上
商品画像の比率を統一し、デザインのトンマナが揃えることで、購買体験における視覚的一貫性が大幅に向上しました。
Design Systemの整合性向上
類似構造のComponentを統合・再設計したことで、Design System内の構造重複や要素のばらつきを解消。将来的な拡張性も担保できました。
Design System利用者の課題解消
統合設計により、「どのComponentを使えばよいか分からない」といったDesign System利用者の悩みを解消。デザイナー・開発者ともに選定や実装の迷いが減り、実際のプロジェクトでもスムーズな運用が実現されています。
