Membership Matching App

会員数10万人規模の会員制マッチングアプリ（iOS / Android / Web）で、デザイン責任者を担当しました。PdM 4名・エンジニア 5名・デザイナー 2名のチームで、施策のUI/UXデザインやデザインシステムの運用に加え、PdMと並走して施策の優先順位づけ・PRD作成・KPI設定まで関わっています。

※ 社名・アプリ名は非公開です。画面は架空のブランドとダミーの人物・データで再構成しています。

課題

施策がスプリントごとに並行して進み、価格・ポイント・決済・ビジュアルの変更が同じ時期に重なることもある。デザイナーは少人数。画面を作るだけでなく、変更が数字にどう効いたのかを読み解き、次の施策の優先順位を決める議論に入る必要がありました。

PdMと並走して、施策を回す

デザインだけでなく、施策の優先順位づけとロードマップ作成、PRD・仕様書の作成、KPIの設定にも入りました。スプリントの計画とチケットの進行を管理し、経営層やビジネス側への提案・報告も担当しています。画面を作る役割にとどまらず、何を作るかを決める議論の当事者として関わりました。

課金率の急落を、データで切り分ける

ある月、新規ユーザーの24時間以内の課金率が急に落ちました。直前の1週間に変更が集中していて、どれが原因か誰にも分からない状態でした。まず社内で複数あった「課金率」の定義をそろえ、原因の候補を7つの仮説に分けて、AIエージェントにSQLの集計を依頼しながら1本ずつ検証しました。

分かったのは、仕様とデザインの掛け算でした。ポイントの仕様変更で課金につながる体験をする新規ユーザーがほぼいなくなり、同じ時期のビジュアル変更で、その導線に出る画面から訴求が消えていた。この分析をもとにPdMが切り戻しを判断し、新規の課金率は変更前の水準まで回復しました。残りの差を埋めるため、課金導線の改善施策を起票しています。

届いた「いいね」を、課金の入口にする

起動時に出す有料会員の案内を、「有料会員になりませんか」ではなく、すでに届いているいいねを起点にした内容にしました。届いた相手が1人か複数かで見せ方を分け、マッチに有料会員登録が必要なことはボタンの直前に明記しています。

通知は、切れても伝わる順番で

マッチが解除される前に届くPush通知は、残り時間と相手の人数で4パターンに出し分けました。Androidの折りたたみ表示は1行だけなので、一番大事な残り時間をタイトルの先頭に置いています。1行に入る文字数は、エンジニアと一緒に主要端末の画面幅で実際に描画して決めました。

デザインシステムを組み直す

色を Primitive（素材）と Semantic（用途）の2層のトークンに再編し、テキストスタイルを12種に整理。コンポーネントは役割で命名し直して、チームのライブラリとして公開しました。画面はSemanticのトークンだけを参照するので、色の変更が1か所で済みます。

実データで、デザインの前提を決める

想定する端末やダミーの名前を、手元の機種や感覚ではなく本番のデータで決めました。利用端末の画面幅とニックネームの文字数を集計し、「どの幅で作り、どの幅で確かめるか」「名前は何字で作り、何字まで検証するか」をルールにしています。

運用をAIで自動化する

並行する施策の画面をFigma上の本番デザインに反映する作業は、Claude Code × Figma MCP でスキル化しました。施策の立ち上げ、本番への反映、構造の点検を同じ手順で回し、本番デザインページの構造上の逸脱をゼロに保っています。詳しくは Design Workflow にまとめています。

使っているツール

Figma（Variables / Library / Prototype）、Claude Code、Codex、Figma MCP、Devin（SQL集計）、GitHub Projects