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