Toranoko

Toranokoは、多くのスタートアップが知り尽くした課題を抱えていました。成長が止まっていたのです。

アプリの登録ユーザーは450,000人。しかしアクティブユーザーはわずか150,000人でした。67%もの離脱です。サブスクリプションモデル（月額¥500）では、失ったユーザー1人ひとりが失われた収益を意味しました。それも毎月。

より根深い問題は何だったのか。プロダクトは一度もデザインされていなかったのです。5年間にわたり、事業チームはExcelの表計算で画面のモックアップを作り、そのままエンジニアに渡していました。機能はまとまりのないまま積み上がり、オンボーディングは新規ユーザーを混乱させ、KYCプロセスは登録者を失わせていました。インターフェースはまるで2017年のものでした。

彼らはユーザーに「何をすべきか」を伝えていました。しかし「それをするのがどんな体験か」には関心を払っていませんでした。

彼らに必要だったのはリデザインではなく、デザイナーそのものでした。私は最初の、そして唯一の採用デザイナーでした。

プロダクトに必要だったのは化粧直しではなく、哲学だった

アプリには、統一されたビジョンのないまま5年分の機能が蓄積されていました。私の仕事は、見た目を美しくすることではなく、筋を通すことでした。すべての画面が、ある問いに答える必要がありました。これは、人が自信を持って投資を始める助けになるのか、と。

一貫性こそ、欠けていたプロダクトだった

私自身も投資家として知っていました。投資で最も難しいのは銘柄選びではなく、毎月続けることだと。タイミングを計るよりもドルコスト平均法が勝ります。しかしToranokoには、定期的な投資を自動化する手段がありませんでした。

これはロードマップにはありませんでした。私が提案したのです。UX機能としてではなく、収益エンジンとして。毎月の投資家はアクティブなサブスクライバーになります。アクティブなサブスクライバーは進捗を実感します。進捗が信頼を築き、信頼がリテンションを築くのです。

コンプライアンスは敵ではない。問題は「配置」だった

マーケティングチームは、自分たちのアンケートは必須だと主張していました。まる2ページに及ぶ質問が、KYCフローの真ん中に埋め込まれていたのです。それもプロダクトとは無関係な質問ばかりで、プロダクト自体パーソナライズされてもいませんでした。ユーザーはゴールに辿り着きたい一心で質問を駆け抜け、結果として価値のないデータが集まっていました。

私は彼らの質問を削除しませんでした。移動させたのです。KYCの提出後、ユーザーはプロフィール審査のために約2日間待つことになります。これは「空白の時間」であり、絶好のタイミングでした。私はマーケティングアンケートをこの待機期間に移しました。登録フローを急いで駆け抜けるのではなく、ユーザーがじっくり考えて正直に答える時間のある場所へ。

結果として、マーケティングは「より少ない」データではなく、「より良い」データを得ました。ユーザーはより速く投資にたどり着けるようになりました。そして8ステップだったKYCプロセスは5ステップになりました。削るのではなく、組み立て直すことによって。

KYCの効率化 — 交渉の技術

コンプライアンス、事業、マーケティングの各チームとの部門横断的な交渉を通じて、本人確認フローを8ステップから5ステップへ削減しました。鍵となったのは、ファンドの選択と銀行口座の連携をKYCフローの中に統合したことです。これにより、本人確認を完了した時点ですぐに投資ができる状態になり、別のプロセスを新たに始める必要がなくなりました。

• 部門横断の交渉
• 8 → 5ステップ
• 完了率 +21.2%

UIの全面刷新

iOS、Android、Webにわたるすべての画面を再デザインしました。Excelから生まれたインターフェースを、モダンでミニマルなデザインシステムに置き換えました。コンポーネントライブラリを構築し、タイポグラフィとカラートークンを定義し、余白のガイドラインを策定しました。すべてを単独のデザイナーとして。

• デザインシステム
• iOS, Android, Web
• コンポーネントライブラリ
• 単独デザイナー

投資スケジュールの明確化

ユーザーはリアルタイムの取引を期待していました。しかしToranokoは投資をスケジュールに沿って処理します。このギャップが混乱を生み、サポート問い合わせの原因になっていました。私は処理のタイミングを説明するツールチップ付きの、タイムラインベースのスケジュールUIをデザインしました。フラストレーションの原因を、信頼を築く瞬間へと変えたのです。

• タイムラインUI
• ツールチップシステム
• サポート問い合わせ -35%

ポイント投資の簡素化

複数のポイント提携先があり、それぞれに固有の交換ルールがありました。ユーザーは交換レートを理解できずにいました。私はリアルタイムの計算プレビューと、提携先ごとの明確なルール表示を備えたフローに再デザインしました。

• リアルタイム計算
• 複数提携先の統合
• 交換プレビュー

デザインのハンドオフ

明確なドキュメント、デザイン仕様、インタラクティブなプロトタイプを提供することで、エンジニアへの構造化されたスムーズなハンドオフを実現しました。目的は、曖昧さを最小限に抑え、効率を高め、最終的なプロダクトが意図したユーザー体験と一致するようにすることでした。

デザインドキュメントと仕様

• 余白、タイポグラフィ、カラートークン、コンポーネントの状態、そしてKYC・オンボーディング・投資フローのフォームバリデーションルールを含む、詳細なデザイン仕様をFigmaで提供しました。
• インタラクションの挙動、エッジケース、フォールバック状態についての説明を添えた、注釈付きのUI画面を作成しました。
• デバイス間の一貫性を確保するため、レスポンシブデザインのガイドラインを提供しました。

スケーラビリティのためのデザインシステム

• すべてのUI要素にわたる一貫性を確保するため、包括的なデザインシステムを構築しました。
• 再利用可能なUIコンポーネント、アイコン、カラー階層、タイポグラフィ、余白ガイドライン、そしてスケーラビリティのためのオートレイアウト構造を含む、コンポーネントベースのシステムを提供しました。
• 今後の更新と拡張に備え、Figmaで共有コンポーネントライブラリを維持しました。

インタラクティブなプロトタイプ

• ユーザーフロー、マイクロインタラクション、アニメーション、ボタンの状態を示すため、Figmaで高精度のインタラクティブなプロトタイプを構築しました。
• ハンドオフ前にインタラクションを検証するため、ユーザビリティテストでクリック可能なプロトタイプを活用しました。

開発者との協働とハンドオフミーティング

• 複雑なインタラクション、エッジケース、エラー処理、スケーラビリティの考慮事項について、エンジニアに説明するためのハンドオフミーティングを開催しました。
• リアルタイムのQ&Aのために、共有のSlackチャンネルとConfluenceドキュメントを設けました。
• フィードバックループを維持し、技術的な制約に対処し、必要に応じてデザインを調整するため、エンジニアと緊密に連携しました。

ハンドオフ後のサポートとデザインQA

• 不整合を早期に発見するため、開発中にデザインレビューを実施しました。
• 正確な余白、カラー、アセットのために、Figma InspectとZeplinを活用しました。
• ピクセルパーフェクトな実装を確保するため、最終リリース前にステージング環境でUI/UXテストを行いました。

指標	Before	After	変化
オンボーディング完了率	24.1%	32.3%	+34%
オンボーディングから投資への到達率	15.4%	22.1%	+43.5%
KYC完了率	51.8%	62.8%	+21.2%
毎月積立投資のオプトイン率	--	28.2%	新機能
セッション継続時間	3m 12s	4m 01s	+25.5%
タスク完了率	68.4%	76.3%	+11.6%
App Storeの評価	3.4	3.7	+0.3
90日後リテンション（毎月の投資家）	baseline	+17.1%	相対的な改善
スケジュール関連のサポート問い合わせ	baseline	-35%	削減

その場の言葉でデザインを売り込む。 私はユーザーとして毎月積立投資を信じていました。そして収益として売り込みました。同じ機能でも、フレームを変える。アイデアが生き残るのは、そうやってです。

削るのではなく、移動させる。 ステークホルダーは障害ではありません。彼らのニーズは本物です。職人の仕事とは、そのニーズがユーザーと事業の双方に最も役立つ場所を見つけることです。マーケティングアンケートを審査の待機時間へ移したことは、フローを改善しただけではありません。マーケティングに、以前よりも良いデータをもたらしたのです。

透明性は積み重なる。 手数料を最初に提示することは、登録者を失わせました。しかしそれは信頼を獲得しました。信頼はリテンションを生み、リテンションはすべてを生みました。

デザイナー1人でもプロダクトを担える。 システムが十分に強固であれば。デザインシステムは単なる成果物ではありませんでした。それは、私自身を13名のエンジニアと3つのプラットフォームにわたってスケールさせる方法だったのです。