「探しやすい」から「自分に合う服を選べる」へ。ZOZOTOWNの観察から考えたUI/UX改善 (対案)

普段、服を購入するときはJUNのアプリをよく使っています。
今回、ZOZOTOWNのアプリを初めて使用したのですが、全体的に違和感が少なく、使いやすいと感じました。
→(改善案は言うほどあるか？と言う感じです。自分に似合うに特化した目的で対案として提案させていただきます。)

私が確認した商品では、着用写真が基本的に30枚ほどあり、着たときの丈やシルエットを確認できる写真が充実していました。写真の1枚目にモデルの身長と着用サイズが表示されているのも良く、自分が着たらどのくらいの長さになるかを想像する手掛かりになりました。

操作画面で少し気になったのは、子どもを表すマークです。私にはひと目で意味を捉えにくく感じられましたが、それ以外には大きな違和感がなく、使っていて改善したいと思った箇所は、基本的にはこのマークくらいでした。

そのため、後半の改善案(対案)は、実際に使って不便だった点を並べたものではありません。既存の使いやすさを土台に、利用目的を絞って考えた提案です。

1．まずは、操作画面を手で描いて観察する

最初に、商品詳細・ランキング・検索の3画面を描き、写真の大きさ、ボタンの位置、情報のまとまり方を確認しました。

商品詳細では、着用写真からサイズや価格、購入操作へと視線が移ります。ランキングでは複数の商品を一覧で比較でき、検索画面ではカテゴリーやブランドなど、異なる入口から探し始められます。

実際に手を動かすと、「どんな機能があるか」だけでなく、「どの情報を見ながら、次の行動を決めるのか」に注意が向きました。

なお、メモには自分が意味を理解できなかった箇所も残しています。分からなかったことをすぐに欠点とせず、表示の問題なのか、利用経験によるものなのかを分けて考えるようにしました。

2．既存の構成で良いと感じた点

特に良いと感じたのは、着用写真と、着用者の身長・着用サイズを結び付けて確認できることです。

服は、写真だけでは自分が着たときの状態を想像しきれません。同じ服でも、着用する人の身長や選んだサイズによって、丈やゆとりの見え方が変わります。

身長と着用サイズが分かれば、「自分なら丈はどのくらいになるか」「このゆとりは服の形によるものか、サイズによるものか」を考える手掛かりになります。

今回、比較のために別のファッションアプリ(楽天ファッション)でも商品を確認しました。私が見た商品では、着用写真に身長や着用サイズが記載さてておらず、自分に置き換えて考えにくいと感じました。サービス全体についての評価ではありませんが、購入判断に必要な情報を考えるきっかけになりました。

もう一つは、検索の入口が複数あることです。商品名が決まっていれば検索でき、まだ曖昧な段階でもカテゴリーやブランドから探せます。

気になった商品を保存できることも、すぐに購入を決めず、候補を見返して比較する助けになると感じました。

3．行動経済学から、改善の仮説を立てる

1.着用情報は、購入前の不確実性を減らす

服をネットで購入するときには、「サイズが合わなかったらどうしよう」という不安があります。

着用者の身長や着用サイズは、その不確実性を減らす判断材料になると考えました。ただし、身長が同じでも体型は異なるため、それだけでサイズが決まるわけではありません。実寸やフィット感の説明と組み合わせることが必要です。

改善では、購入者の大凡の身長の着用例を探せるようになると、比較しやすくなるのではないかと考えました。

2.割引表示は、比較の基準をつくる

清書画像では、通常価格とクーポン利用時の価格が並んでいます。

通常価格を基準にすると、値引き分に注意が向きやすくなります。これは、判断が比較の基準となる「参照点」に左右されるという見方につながります。

割引は判断材料になりますが、利用者が知りたいのは、最終的にいくら払うのかということでもあります。クーポンの条件、送料、適用後の支払総額を近くで確認できると、価格を理解しやすくなると考えました。

3.ランキングは、選択を助ける一方で注意を集める

ランキングは、何を選べばよいか分からないときの入口になります。一方で、順位を「自分にも合う」「品質が良い」という判断の手掛かりにする可能性もあります。

他者の選択を参考にする社会的証明の観点から、順位の見せ方は探索の方向に影響しうると考えました。

そこで、人気を知る入口を残しながら、色・形・価格・サイズなど、自分の条件でも選び直せることを重視しました。

4.選択肢の数より、比較のしやすさに注目する

商品や検索の入口が多いことは、選べる楽しさにもつながります。選択肢が多ければ必ず迷う、と決め付けることはできません。

今回注目したのは、選択肢の数そのものより、「何を基準に比べればよいか」が分かるかどうかです。

好みや予算を手掛かりに範囲を絞れれば、すべての商品を詳しく確認する負担を減らせるのではないかと考えました。

これらは画面から立てた仮説であり、このアプリで効果を確認したものではありません。

4．対象を「自分の好みを反映して選びたい人」に絞る

今回想定したのは、「好きな雰囲気はあるが、検索語にしたり、候補を絞ったりするのが難しい人」です。

例えば、「ネイビーが好き」「少しゆったりした形が好き」と思っていても、それを毎回検索条件として入力するのは手間になります。また、おすすめされた服を見て「少し違う」と感じても、何が違うのかを伝える手段がなければ、提案を調整しにくくなります。

そこで、目指す体験を次のように整理しました。

好みを伝える → 提案を調整する → 今回の条件で絞る → 納得して購入する

入力を増やすこと自体が目的ではありません。好みの設定は任意にし、商品を見ながら少しずつ調整できる構成を目指しました。

5．好みを反映する仕組みとして考えた4画面

1.好みの選択：言葉で考える前に、写真から選ぶ

最初は、好きなテイスト・色・シルエットを、言葉で選ぶ画面を考えました。しかし、「自分はどのテイストが好きなのか」と聞かれても、すぐには答えにくい場合があります。

そこで、着こなし写真を見て、気になるものを選ぶ方式に変更しました。「シンプル」「きれいめ」などの短い説明も添え、言葉だけでは想像しにくい雰囲気を確認できるようにしています。

狙いは、自分の好みを最初から言語化する負担を減らすことです。複数選択に対応し、選択済みの写真には枠とチェックを表示しました。画像では、利用者が2枚を選んだ状態を示しています。

設定は必須にせず、「あとで」から先に進むこともできます。色・形・予算などの細かな条件は、商品を見ながら必要なときに調整する構成にしました。

ただし、選んだ写真のどこが好きなのかは、写真だけでは分かりません。服の色なのか、形なのか、組み合わせなのかを決め付けず、次の画面で提案を調整できることを重視しました。

2.商品提案：理由を確認し、「少し違う」を伝える

「あなた向け」の画面では、写真の選択を手掛かりにした商品を並べ、「選んだ色・形に近い」などの提案理由を添えました。利用者が、なぜこの商品が表示されたのかを確認できる想定です。

商品への反応は、「好き」と「少し違う」に分けました。「少し違う」を選んだ場合は、色・形・素材・価格など、違うと感じた理由を伝えられます。

その反応をもとに提案を調整し、意図と違った場合には元に戻せるようにしました。最初の写真選択だけで、好みを固定しない設計です。

また、「いつもと違う服も見る」という入口も残しています。普段の好みに近い商品を探すことと、新しい服に出合うことの両方を支えたいと考えました。

3.検索：普段の好みと、今回の条件を分ける

好きな服と、その日に探している服が、いつも同じとは限りません。普段はゆったりした服が好きでも、今回は仕事用のシャツを探しているかもしれません。

そこで、「今回の検索条件」として、カテゴリー・色・形・予算を調整できる画面にしました。「好みは変更されません」と表示し、一時的な検索条件と、登録した好みを区別しています。

「クーポン適用」は、対象商品を絞り込むための条件です。この操作だけで購入時のクーポンが適用されるわけではなく、実際の適用は商品詳細で確認する構成にしました。

4.商品詳細：サイズと支払額を確認して判断する

商品詳細では、商品価格・送料・支払総額をまとめて表示しました。クーポンは未適用の状態とし、適用条件と、適用した場合の金額を確認できるようにしています。

サイズは自動選択せず、「手持ちの服とサイズ比較」「返品・交換条件」を近くに配置しました。また、「保存して検討」も用意し、その場で購入を決めない選択を残しています。

一方、今回の改善画像では、既存画面で良いと感じた、着用者の身長・着用サイズの表示を十分に引き継げていません。次の修正では着用写真と情報を追加し、自分に近い身長の例を探せる構成も検討したいです。

写真から好みを選べることと、自分が着たときの状態を判断できること。その両方を支える画面を目指しています。

6．今後、検証したいこと

今回の改善案(対案)で確かめたいのは、写真から好みを選ぶ仕組みが、服探しの負担を減らし、本人の納得につながるかということです。

まず、言葉でテイストを選ぶ画面と、着こなし写真から選ぶ画面を比較したいです。選ぶまでの時間だけでなく、迷った箇所や「自分の好みを表せた」と感じられたかを確認します。写真のどこに魅力を感じたのかも聞き、服の色や形ではなく、モデルや写真の雰囲気だけに選択が左右されていないかを見たいと考えています。

次に、「少し違う」から提案を調整する操作が、意図どおりに伝わるかを確かめたいです。色・形・素材・価格の選択肢で理由を表せるか、調整後の提案が期待に近づいたかを確認します。好みに近い商品だけが続くことで、探索の幅が狭くならないかも検討したい点です。

商品詳細には、着用写真と「身長165cm／着用サイズL」の表示を反映しました。これらを手掛かりに、自分が着たときの丈やゆとりを想像できるか、モデルの着用サイズと自分が選ぶサイズを混同しないかを確認したいです。必要に応じて、異なる身長の着用例や実寸との比較も検討します。

また、「クーポン対象商品を探す操作」と「購入時にクーポンを適用する操作」が区別できるか、適用前後の支払総額を正しく理解できるかも確かめたいです。

検証では、同じ服探しの課題を使い、操作の迷い、候補にたどり着くまでの時間、選んだ理由を観察する方法を想定しています。実際に購入・着用してもらえる段階では、サイズ理由の返品や、届いた服への満足度も確認したいです。

ZOZOTOWNを使って感じた探しやすさや、着用情報の分かりやすさは、改善案でも大切にしたい部分です。その良さを引き継ぎながら、利用者が好みを伝え、選び直し、自分に合う服を納得して選べる体験になっているかを検討していきたいです。

参考資料について

分析の手掛かりとして、以下の資料を参照しました。

• 参照点と意思決定
  一橋大学「プロスペクト理論」
  人が金額の絶対値だけでなく、比較の基準となる参照点から損得を判断するという考え方を確認しました。(損失回避の特性)

• ランキングや他者の評価が選択に与える影響
  経済産業省掲載・研究会報告「レビューとランキングがオンラインショッピングの消費者選択に与える影響」
  オンラインショッピングで、商品の表示順やレビューが選択に与える影響を考える参考にしました。→逐次サーチ行動のこと

• 選択肢の多さと、選ぶときの負担
  松田憲ほか（2024）「選択のオーバーロード現象に待機列による焦燥感が及ぼす効果」
  選択のオーバーロード現象とは，過剰な商品選択肢は消費者にかえって負担になり，購買意欲を抑制してしまう現象のこと。