Yahoo! ショッピング
サービス統合に合わせた
ブランド・UIリニューアル
Yahoo! Shopping Brand & UI Renewal
ROLE
Lead Designer / UX・UI
PROJECT DURATION
4ヶ月
TEAM
Design, PM, Marketing
PLATFORM
Web, App
OVERVIEW
Yahoo!ショッピングのサービス統合に合わせ、ブランドとUIを全面的にリニューアルしました。リードデザイナーとして、UXの課題整理からデザイン方針の策定、UI設計、ブランドの再定義までを担当しています。
Brand Identity → Visual Identity → UIの順に整理し、経営層との合意を経て、ホーム・検索・商品詳細を中心にサイト全体を刷新。30人規模のデザインチームのディレクションも担当しました。
Process
Research
Brand Identity
Alignment
UI Design
Launch
PROBLEM
サービス統合で、体験とブランドにばらつきが出ていた。
サービス統合を重ねた結果、画面ごとにUIや情報設計が異なり、体験にばらつきが出ていました。また、ブランドとして何を大切にするのかも曖昧になっていました。まずユーザー調査と既存画面の分析から始め、UIだけでなくサービス全体を整理し直しました。
競合比較とユーザー行動から、課題を整理
競合サービスとの比較に加え、ユーザーの印象を調査しました。検索や配送では他社に劣る一方、最も多かった回答は「特に印象がない」（32%）。価格や機能以前に、Yahoo!ショッピングとしての印象が残っていませんでした。
ジャーニーで、迷うポイントを洗い出す
「探す」「比較する」「買う」までの流れを分解し、各場面での迷いや不満を整理しました。特に大きかったのが検索と比較。似た商品が並ぶ中で目的の商品を探しにくく、見つけた後もどこで買うべきか判断しづらい状態でした。優先して直す場所は、ここから決めています。
KEY INSIGHT
ユーザーが欲しいのは、選択肢の多さではなく、違いがすぐに分かること。そして、気になった商品をその場で詳しく見られること。
この考え方を、ブランドからUIまで一貫した判断基準にしました。
DESIGN
UIを、3つの方針から見直す
商品を探す、比較する、買う。この流れが迷わず進むことを軸に、情報量と導線を整理しました。ホーム・検索・商品詳細を中心に、3つの方針で見直しています。
PRODUCT POLICY
All in one second
探す・比べる・決めるを、できるだけ短く。
商品を探すところから購入を決めるまで、迷ったり行き来したりする時間を減らす。
その考え方を、3つの設計基準に落とし込みました。
01 ｜ FINDABILITY
欲しいものを、すぐ見つけられる
探し始めてから商品にたどり着くまでの手間を減らす。情報の順番や絞り込みの位置を見直し、探したいものにすぐたどり着けるようにしました。
02 ｜ CLARITY
お得さが分かり、安心して選べる
キャンペーンやポイントが重なるほど、どれくらいお得なのか分かりにくくなります。自分にとってのメリットがひと目で分かるようにしました。
03 ｜ SIMPLICITY
迷わず使える、シンプルな画面に
必要な情報を残しながら、使わない要素は減らす。画面ごとの見た目や操作も揃え、迷いにくいUIにしました。
ホーム
情報を詰め込むのではなく、最初に見る情報を絞りました。カテゴリや特集の優先順位を整理し、商品を探し始めやすい構成にしています。
検索
商品画像と価格を中心に並びを揃え、一覧の中で比較しやすくしました。情報の強弱をつけ、商品を見比べることに集中できるUIにしています。絞り込みもすぐ使える位置に置きました。
商品詳細
購入判断に必要な情報を上から順に整理し、購入ボタンまで迷わず進める構成にしました。「何を見せるか」より「どの順番で見せるか」を重視しています。
SERVICE IDENTITY
UIだけでなく、Yahoo!ショッピングらしさも見直す
UIを揃えるだけでは、サービス全体の印象は揃いません。Yahoo!ショッピングがユーザーにどう見えてほしいかを整理し、Brand IdentityとVisual Identityの2つに分けて言語化しました。
BRAND IDENTITY
Yahoo!ショッピングが大切にすること
Yahoo!ショッピングらしさを言葉にし、誰が見ても同じ方向を向けるように整理しました。コアバリュー「『！』なお買い物体験を」と、それを支える「安心 / 快適 / にぎやか」の3つのキーワード、ターゲット像まで決めています。
VISUAL IDENTITY
担当者が変わっても、同じ判断ができるようにする
決めた考え方を、ロゴ・タイポグラフィ・写真・カラー・イラストの5つのルールに落とし込みました。文字サイズや余白、イラストの使い方まで言語化し、担当者が変わっても同じ判断ができる状態にしています。
ALIGNMENT
見た目ではなく、判断基準を揃える
画面ごとのデザインレビューだけでは、判断が人によって変わります。色や余白のルールだけでなく、「何を優先するか」までチームで共通認識にしました。経営層への提案でも、画面の見た目ではなくリサーチから整理したIdentityを軸に話し、好みではなく基準で議論できるようにしています。
数回の提案と修正を経て承認を得て、その後の実装でもこの基準を使って判断できる状態をつくりました。
IMPACT
リニューアル後、NPSは改善
リニューアル後はNPSが改善し、その後も上昇しました。既存ユーザーの離脱を招くことなく、サイト全体のリニューアルを完了できたことも大きな成果でした。
もうひとつの成果は、ここで決めたBrand / Visual Identityが、その後の施策でも判断基準として使われ続けていることです。画面や施策が増えても、Yahoo!ショッピングらしさを保てる状態になりました。
LEARNING
30人で、同じ基準を持ってデザインする
30人規模になると、画面をレビューするだけでは品質は揃いません。完成形を細かく指定するより、「何を良しとするか」を共通言語にすることが、リードデザイナーとして一番重要でした。一方で、ドキュメントにまとめるだけでは時間が経つと解釈がずれていきます。今後は、この考え方をコンポーネントやレビューのプロセスにも組み込みたいと考えています。