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

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

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

コープ共済マイページコープ共済マイページコープ共済マイページコープ共済マイページ

Overview

概要

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

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

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

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

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を構築することを目標に取り組みました。今後は「推し色を用いたサイトカラー変更」のような施策も含め、「セブンネットショッピングで買いたい」「セブンネットショッピングを使いたい」という、顧客体験を最大化していくサイトにしたいと考えています。エンタメの世界では毎日のように新しい商品が発売されますし、お客さまの反応もどんどん変わっていきます。そうした変化をキャッチアップしながら、スピード重視かつ丁寧に今後も取り組んでいきたいと考えています。

Case Materials

事業詳細資料

case materials

【事例】セブンネットショッピング 推し活倶楽部

上記事例は、PDFでもご覧いただけます。

Language/Frameworks

開発言語

LanguageFramework1

Service Image

サービスイメージ

サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)

Service Image

サービスイメージ

サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)
サービスイメージ(7net)

Case Study

関連事例

  • オムロン ソーシアルソリューションズ株式会社様

    地域共生型MaaS 「meemo(ミーモ)」

    オムロン ソーシアルソリューションズ株式会社様

  • 日本コープ共済生活協同組合連合会様

    共済マイページ

    日本コープ共済生活協同組合連合会様

Contact

さまざまな企業のDX・新規事業の支援を行っています。
まずはご相談ください。