セルフBリニューアル

https://www.afi-b.com/selfb/login/

制約の中での戦略転換とCVR改善

  • 役割:UI/UXデザイナー
  • 期間:2024/4 - 2025/2
  • 主な取組:制約の中での戦略転換+数値成果
  • チーム:デザイナー(藤巻)・ビジネスサイド担当者・開発側事業部長・フロントエンド未経験エンジニア
  • 担当範囲:情報設計・導線設計・UIデザイン・プロトタイプ作成・ロゴリニューアル・フロントエンド実装(一部)・運用改善まで独力で担当。デザインスプリントのファシリテーションも担う
セルフBリニューアル メインビジュアル

新規拡大が構造的に難しいという制約の中、既存ユーザーの利用率向上とメインサービス側からの新規誘導という2軸で改善を推進。CVR41%増・リピートユーザー42%増を達成した。

課題

セルフBはアフィリエイター向けサービス「afb(アフィビー)」内サービスであり、利用するにはafbを登録する際の審査が必要となる。アフィリエイト目的で登録した人しか利用できないため、新規ユーザーの拡大が構造的に難しい。この前提の中で、新規獲得に頼らず売上を増大させる戦略の設計が課題だった。

アプローチ

新規獲得に頼らない2軸の戦略を設計した。

1つ目は、既存ユーザーの利用率向上。セルフB利用文脈を強化し、サービスサイトへの遷移導線を拡大。afb内で利用しているバナーのリニューアルやサービス全体デザインのモダン化により、継続利用しやすいUI・体験へ改善した。

2つ目は、afb新規ユーザー向け導線を拡大。デザインスプリントのショートバージョンを実施した結果、新規ユーザーに対してセルフBを「アフィリエイトの最初の一歩」として自然に誘導する専用ページの設計を決定。「なぜこのサービスを使うべきか」という利用理由をUI上で明確に伝える構成とした。

1. デザインスプリント(ショートバージョン)

セルフBの改善にあたって、ビジネス要件と技術的制約の両面を踏まえた方向性を導き出すには、関係者の知見を引き出す場が必要だと考えた。Googleのセミナーでデザインスプリントを活用した検証手法を知り、ビジネスサイド担当者や開発側事業部長の意見も引き出しながら多角的に修正案を出し合う形が理想だと判断。ただしフォーイットの体制でフルのスプリントを回すのは難しかったため、一部をアレンジし短時間で実施できる形にした。

当日はビジネスサイド担当者・事業部長(開発)・デザイナー・エンジニアが参加。ビジネス側の要求だけでなく、エンジニアが実装可能かをその場で確認しながらプロトタイプを作成したことで、より現実に近い修正案を導き出せた。ビジネスサイド担当者自身もプロトタイプ作成に参加したことで、ユーザー視点で多角的に考える機会になった。

TOPページのデザインスプリント
TOPページのデザインスプリント
afb登録後ページのデザインスプリント
afb登録後ページのデザインスプリント

2. 導線の再設計と誘導クリエイティブ

afbからセルフBへの遷移率の低さと、セルフB内での案件ページの露出不足が主な課題だった。限られた導線の中で効果を最大化するため、各タッチポイントに応じた誘導クリエイティブを制作した。

afb管理画面内バナーでは、既存の静止バナーに加え、動画バナーを新たに制作(下部に掲載)。管理画面内のバナー設置面は限られており、静止バナーだけではユーザーの目に留まりにくい状態だった。動画化によって視線を引きつけ、セルフBへの遷移を促す設計とした。

afb管理画面内バナー設置イメージ
afb管理画面内バナー設置イメージ
ヘッダーバナー(動画バナー)

新規登録者向け誘導ページでは、afb登録後のSMS認証完了直後に表示される既存ページを修正し、セルフBへの誘導を組み込んだ。管理画面に入る前の最初の接点であり、新規ユーザーに「なぜセルフBを使うべきか」を自然に伝える構成とした。

登録完了後の誘導ページ
登録完了後の誘導ページ

LINE公式アカウント向けバナーでは、公式アカウントをフォローしたメンバー向けにセルフB利用を促すバナーを配信。

LINE公式アカウント内での表示イメージ
LINE公式アカウント内での表示イメージ

サービスTOPの案件の露出については、他社の類似サービスや通販・動画サービスを比較調査した結果、案件をタイル状に多数並べる構成が課題解決に有効と判断し、UIを再設計した。

Before / After
Before / After

リスティング広告用LPは、セルフBの新規ユーザー獲得を目的とした実験的な施策として制作した。副業に関心のある層をターゲットに、セルフバックの仕組みと価値を段階的に伝える構成で設計。FVでは具体的な金額を打ち出して興味を喚起し、利用ステップの説明からafbの信頼性訴求へとつなげる流れとした。広告の特性上マッチングの難しさがあり、CVの獲得には至らなかったが、外部チャネルからの誘致可能性を検証する取り組みとなった。

リスティング広告用LP(スマホモックアップ)
リスティング広告用LP

3. フロントエンド実装(緊急対応)

担当エンジニアがフロントエンド未経験であったうえ、途中で体調不良により離脱するという事態が発生。実装の進捗が不明な状態から、プッシュされていたコードを読み解き、サービスとして運用できるレベルまでCSSを修正・補完した。

4. ロゴリニューアル

セルフBがこれから成長・収益化していくというイメージを込め、afbのイメージキャラクターであるマー君の葉っぱのモチーフを流用。テキストにはポップ寄りのつぶてんフォントを採用し、ユーザーがセルフバックを利用する際にワクワク感を感じられるブランドトーンを設計した。

セルフB ロゴ
ロゴ
  • CVR:前年比41%増
  • リピートユーザー:前年比42%増
  • 案件ページアクセス:前年比49%増(2クリック以内)
  • AUビュー数:前年比50%増
  • AU平均エンゲージメント時間:前年比52%増

学び

制約を正しく見極めたうえで戦略を設計し、数値として成果を出せたことが大きな学びだった。新規獲得が難しい構造であっても、既存ユーザーの行動文脈を丁寧に設計すれば利用率は伸ばせる。この経験は、成熟したプロダクトや閉じたエコシステムの中で成果を出す際にも応用できると考えている。