セブンネットショッピング「推し活倶楽部」

株式会社セブンネットショッピング様からアイスリーデザインにご依頼いただいたのは、「セブンネットショッピング」のサイト分析/UI改善。セブンネットショッピングは、本・コミック、雑誌、電子書籍、CDやDVD、アーティストグッズなどの限定商品を取り揃えたエンタメECサイトです。弊社ではサイト分析/UI改善プロジェクトをきっかけに、継続的な支援をさせて頂き、今回「推し活倶楽部」プロジェクトにおいてもデザインから開発まで実施させて頂きました。

UI/UXデザイン
flamingo

株式会社セブンネットショッピング

株式会社セブンネットショッピング営業本部マーケティング＆プロモーション部統括マネージャー村上陽祐さん・スペシャリスト壁巣翔子さん

Overview

概要

プロジェクト概要

2021年の流行語大賞にもノミネートされた「推し活」とは、自分が好きなアイドルやアニメキャラなどを対象に、そのグッズを購入したりライブなどのイベントに参加したりする（＝推す）活動全般を指す言葉です。

株式会社セブンネットショッピングによるエンタメECサイト「セブンネットショッピング」は、同サイト内で推し活をしているユーザーに向けたスペシャルページ「推し活倶楽部」を展開。その一環として、2022年5月からセブンネットショッピングのスマートフォンサイトを自分の好きな「推し色」に変更できる期間限定企画を開始したところ、お客さまから大好評を博してコンバージョンレート（以下、CVR）が向上するという結果に。さらには同年8月からはお客さまからの要望を受け、新色を加えて継続的な機能となりました。アイスリーデザインは「セブンネットショッピング」のUI改善をきっかけとして、現在までグロースプロジェクトとして継続的に関わらせていただき、「推し活倶楽部」においてもデザインや開発を担当いたしました。

株式会社セブンネットショッピング営業本部マーケティング＆プロモーション部から、統括マネージャー村上陽祐さん、スペシャリスト壁巣翔子さんをお迎えして、プロジェクトの概要とアイスリーデザインとの取り組みについての所感を伺いました。

※2022年10月11日時点での情報になります。サービス内容は変更になる場合がございます。

クライアントの課題

ユーザー体験の向上

エンタメ系ECサイトとして、ユーザーが楽しめる体験を提供し、サイトへの訪問理由や滞在時間の向上を図る必要がある。

UI/UXの最適化

競合他社との差別化を図るために、サイトの使いやすさと見た目の魅力を向上させること。

コンバージョンレートの改善

エンターテイメント商品を特色とするセブンネットショッピングでのコンバージョン率向上。

i3DESIGNの解決方法

カスタマイズ可能なUI機能の導入

ユーザーが自分の好みに合わせてサイトの色を「推し色」に変更できる機能を導入し、個々のユーザー体験をパーソナライズ。

デザイン思考に基づいたUI/UX改善

ヒューリスティック評価を用いて、サイトの各要素を洗い出し、ユーザーにとってより使いやすく見た目にも魅力的なデザインへと改善。

データ駆動の改善プロセス

ABテストやユーザー分析ツール「flamingo」を用いて、改善効果を具体的に測定し、継続的なUI/UX改善を行うことで、CVRの向上を実現。

Interview

インタビュー

デザイン思考でのサイト分析/UI改善プロジェクト

「セブンネットショッピング」のキャンペーン企画、WEB広告、SEO、UIUX改善などを実施している村上陽祐さん（左）と壁巣翔子さん（右）

「セブンネットショッピング」のグロースプロジェクトにアイスリーデザインが携わるきっかけは、同サイトのUI改善にありました。そして、お声がけの理由には、株式会社セブン＆アイ・ホールディングスが運営するサイトに、ウェブサイトのUI/UX改善ツール「flamingo」（以下、フラミンゴ）が採用されていたことにあったと言います。

村上さんUI改善にシステム改修が伴ってしまうと、時間もお金もかかってしまい、容易にPDCAが回せなくなってしまう課題がありました。しかし、フラミンゴはシステム改修不要でスピーディーな改修ができる。それがアイスリーデザインさんにお願いする大きな決め手となりました。

アイスリーデザインプロジェクトデザイナー武本（右）、エンジニア内山（中）、UIデザイナー吉尾（左）

「セブンネットショッピング」UI改善プロセス

1.サイト内分析（GA、ユーザーテスト、ヒューリスティック評価など）
2.課題洗い出し
3.ボリュームが大きい画面から順に改善実施
4.検証
5.次の課題洗い出し、改善・検証ループへ

UI改善プロセスにおいて、村上さんと壁巣さんが印象的だったのは「デザイン思考でのサイト分析・課題抽出」だったといいます。

壁巣さん当初は社内のスタッフのみで、他社ECサイトを見ながら改善点を模索していたのですが、なかなかうまく進みませんでした。そこで助けられたのが「ヒューリスティック評価」です。アイスリーデザインのUIデザイナーさんによってサイトの課題を分析いただき、自分たちでは気づけなかった細かな点もあぶり出すことができました。その分析結果に沿って実際に改善を行うと、ほんの少しの差でも一段と見やすくなったり使いやすくなったりすることが多く、勉強になりました。

またフラミンゴが可能にする「ABテスト」は、「セブンネットショッピング」のサイト特性上、大きな効果をもたらしました。

壁巣さんエンタメ系ECサイトという都合上、「UI改善の効果」を確認するのが難しく、大きな悩みとなっていました。例えば、人気アイドルのリリースがあるとそれだけでセッション数もコンバージョンも跳ねてしまいますし、在庫切れがあれば離脱率が跳ね上がります。このようにGA分析での前年比が役立たなくなってしまうんです。しかし今回フラミンゴによって「ABテスト」を導入できたことで、UI以外を同条件とした比較ができるようになって検証がしやすくなりました。

こうして「セブンネットショッピング」はUI改善のPDCAを回すようになり、従来のリスティングやアフィリエイトを中心とした「サイト外からの集客」から、ユーザビリティを高めての「購入促進」へシフト。UI改善以外にも、SEOとサイト内分析もそれぞれ専門会社と連携しながら、サイト全体の最適化を図り続けています。

そんな新フェーズの取り組みとして実施されたのが「推し活倶楽部」における「推し色を用いたサイトカラー変更」です。

「推し活倶楽部」の原動力は、数字ではなく「お客さまに喜んでいただきたい」という想い

「推し活をする人をもっと応援していきたい」という想いのもと始まった「推し活倶楽部」。その期間限定キャンペーンとしての「推し色を用いた『セブンネットショッピング』のサイトカラー変更」には、売上やアクセスといった数字ではなく「セブンネットに来たくなる理由」「他社にはないエンタメサイトとしてのUX構築」といった価値の創出が目標としてありました。

壁巣さんきっかけは、SNS上で購入完了画面のスクリーンショットを使って推しグッズの購入報告を行う文化があるという情報をアイスリーデザインのプロジェクトデザイナーである武本さんから共有いただいたことになりました。UI改善を通して、2022年の目標である「サイトの基礎的な見直し」がひと段落していたので、次のステップとしてお客さまに喜んでいただける施策を行いたいと思っていたところでした。

そこで壁巣さんが着目したのは「推し色」。推し活をしている方の多くは、推しメンバーやキャラクターのテーマカラーである「推し色」を生活の中に取り入れているという文化を「セブンネットショッピング」にも活用できないかと考えました。

サイトカラーの変更はこちらからお試しいただけます。※スマートフォン限定

そうして実装されたのが「推し色を用いたサイトカラー変更」。この実現に一役買ったのがまたもやフラミンゴでした。アイスリーデザインのエンジニアである内山は次のように語ります。

内山セブンネットショッピング様のご要望を確認して検証したところ、フラミンゴを使うことで実現可能だということがわかりました。しかし、各ユーザーのサイトカラーを変更するためには、その人の推し情報をどこかに持っておかなければいけません。ログイン情報に紐づいていれば簡単ですがそこの改修は簡単にできませんし、フラミンゴの中に持たせることも難しい。そこでちょっとした工夫を行い、端末側に情報を持たせる手法を採用して実現することができました。

そして推し色は全9色（現在は全10色）が用意されましたが、このセレクトにもUIUXデザインの視点が取り入れられています。同じくアイスリーデザインのUIデザイナー吉尾はユーザビリティにこだわったと語ります。

吉尾サイトのテーマカラーとして使う以上はユーザビリティの確保が大前提となります。もし色がストレスになったら離脱されてしまいますからね。背景色に使えるトーンは抑えないといけないので、背景色自体は淡めにして、注目キーワードやボタンの色で推しの色をハッキリと出すよう調整しました。

予想外の効果、CVRが107％改善。多くの好評の声を得て継続的なサービスへ

こうして実装された「推し色を用いたサイトカラー変更」。その結果、直接購買に紐づかない施策であったにも関わらず、大きな効果を得ることができました。

壁巣さんCVRが107％改善し、直帰率・平均セッション時間などの数値改善にも繋がっていました。これは「どうしたらお客さまに楽しんでいただけるか？喜んでいただけるか？」「どうしたら満足していただけるか？」を考えての施策に、自然と数字もついてきた結果です。このことから、お客さま目線に立って業務を行うことの大切さを実感することができました。

もちろん得られた結果は数字だけではありません。実際にサイトを利用しているお客さまからのポジティブな感想も多数寄せられています。

壁巣さんSNSでの反応も好評で、サイトカラーを変更したスクリーンショット付きで好意的なご意見を投稿してくださったお客さまが沢山いらっしゃいました。また、アンケートでも「サイトを見る度、ワクワク感が増して、楽しかった」「推し色に変わった瞬間にキュンとなりました」などリアルに喜んでいただいている声が届いています。中でも「期間限定ではなくて、ずっと続けて欲しい」というご意見も頂けたのはとても嬉しかったです。

そうした好評を受けて、8月17日から新色の「レインボー」を追加した全10色展開で第2弾がスタート。さらに期間限定ではなく「セブンネットショッピング」のデフォルト機能として搭載されることになりました。

壁巣さんお客さまアンケートで「箱推し（個別メンバーではなくグループ全体を推すこと）なのでレインボーにしてほしい」「推しが複数いるから何色を選択すればいいかわからない」という意見をたくさんいただいたので、レインボーを追加することにしました。これまで紫を使われている方が多かったのですが、今ではその2倍ほどのお客さまがレインボーを選択されています。今後もお客さまと一緒にサイトを作り上げていきたいです。

担当者からのコメント

「セブンネットショッピング」が競合のエンタメ系ECサイトに対して持つ強みは明確で、予約商品が店舗でいち早く手に取れるという点にあります。UI改善においては、その強みをきちんと活かせるUIを構築することを目標に取り組みました。今後は「推し色を用いたサイトカラー変更」のような施策も含め、「セブンネットショッピングで買いたい」「セブンネットショッピングを使いたい」という、顧客体験を最大化していくサイトにしたいと考えています。エンタメの世界では毎日のように新しい商品が発売されますし、お客さまの反応もどんどん変わっていきます。そうした変化をキャッチアップしながら、スピード重視かつ丁寧に今後も取り組んでいきたいと考えています。