ユーザーを邪魔せずクリック率を3倍に上げた秘密の画面構造

ユーザーの主要なタスクを妨げずに、必要な提案を自然かつ目立つように見せることは、すべてのプロダクト開発者にとって長年の課題です。Toss Bankの画面において、資産管理レポート機能は元々入出金領域の下部にバナー形式で配置されていましたが、クリック率はわずか2%に留まっていました。「自分の状況にぴったり合った有用なおすすめなのに、なぜ人はタップしてくれないのだろう」という疑問から、このプロジェクトは始まりました。情報が溢れる複雑な環境の中で、周囲の要素と区別がつかず見過ごされてしまうという仮説を立てました。そこで、レポートが目立ちやすく、かつパーソナライズされた提案であることが一目で伝わるようにすることを目標に定めました。これから、表現方法を超えて根本的な構造を変え、クリック率を3倍まで引き上げた詳細について見ていきましょう。この記事を通じて、皆さんもユーザー体験を損なうことなく注目度を高める知恵を得られるでしょう。

=

ユーザーを邪魔せずクリック率を3倍に上げた秘密の画面構造

1. 有用なおすすめなのに、なぜタップしないのか

Toss Bankの初期画面の入出金領域の下に位置する資産管理レポートは、顧客の資産状況を綿密に分析し、カスタマイズされた商品を提案する非常に有用な機能でした。しかし、企画者の期待に反し、実際のクリック率はわずか2%程度に留まるという歯痒い状況が続いていました。確かに顧客一人ひとりの具体的な財務状況に基づいたパーソナライズされたおすすめにもかかわらず、なぜ誰もタップしてくれないのか疑問が湧きました。様々な可能性を視野に入れ原因を分析した結果、ホーム画面に情報が混在しすぎていることに気づきました。口座情報や入出金明細など数多くの情報の中で、レポートのバナーは周囲の情報と十分に区別されず埋もれてしまっていたのです。結局、顧客は画面をスクロールしながら無意識に見過ごすことが多く、存在自体に気づかないケースが大半でした。この問題を解決するため、単に目立つ色を使うのではなく、「自分の状況に合ったカスタマイズされた提案」であることが明確に際立つようにすることを決意しました。最初は視覚的な注目度を高めるため、単に文言や表現方法を変える試みから軽く始めてみました。親しみやすい口調で直接話しかけるような吹き出し形式を導入し、親近感を高めるよう努めました。また、ユーザーの現在の資産状況をまず簡潔に表示し、それにぴったり合った商品を自然に提案する順序も考案しました。こうして直接話しかけるような表現に変えれば、おすすめがより心に響くだろうと純粋に信じていました。しかし、これらの努力にもかかわらず、画面全体の複雑さは全く改善されず、同じ限界が見られました。それぞれが明確な目的を持って訪れる複雑な画面の中に、単なる読み物として一つ追加する構造自体が変わっていなかったからです。問題は、口座情報と新しいおすすめが正確に同じ場所で限られた視線を分け合い、競合している点にあったのです。

2. 口座と提案が衝突する構造上の限界

口座情報は顧客が自発的に確認したい必須情報である一方、レポートは運営側が新たに提示する一方的な提案という本質的な違いが存在します。役割が全く異なる二つの情報が混在しているため、レポートは口座情報を素早く確認する過程で自然に一緒に見過ごされがちでした。しかし、レポート領域だけを無闇に大きくしたり、華やかに強調したりすることもできないという板挟みの状況でした。直ちに自分の口座残高を確認しようとする人の目にレポートが過度に先立って見えてしまうと、本来必要な情報が隠れてしまうリスクが大きかったからです。結局、顧客がしようとしていた重要な仕事を決して妨げずに、レポートを自然に発見させる知恵のある方法を模索する必要がありました。口座情報とレポートが同じ場所で消耗戦を繰り広げる方式から完全に脱却する必要があったのです。二つの情報を全く異なる空間と次元で表示すれば、この複雑な問題をすっきりと解決できるというインスピレーションを得ました。従来の狭い画面の中で無理に場所を争わせる代わりに、全く新しい視覚的な位置について考え始めました。長い検討の末、ウェブサイトではマウスカーソルを乗せた際に自然に表示される小さなツールチップのような構造を思い浮かべました。ツールチップは、既存の背景画面を全く隠さずに、必要な追加情報をその上に軽く重ねて表示するという優れた利点があります。この独創的な構造をモバイル画面環境にそのまま持ち込んで適用してみたらどうだろうというアイデアが閃きました。口座情報が含まれる基本画面は元の姿のまま静かに保ち、資産状態に関する提案はその上に少し浮いているカードとして分離しました。これにより、同じ画面内でも口座情報とパーソナライズされたおすすめが完全に異なる層に置かれるため、視線が衝突しません。

3. 邪魔者らしくない第一印象の作り方

画面の上にふわふわと浮いているようなカードは、下手をするとユーザーの流れを遮る厄介なポップアップ広告と非常に似て見える危険性がありました。内容を正しく読む前に広告と誤解され、眉をひそめさせたり、内容を確認する前に閉じるボタンを探してしまうのではないかと心配でした。そのため、フローティング形式のカードが顧客に拒絶感なく自然に受け入れられるための具体的な基準を一つずつ丁寧に設けていきました。まず、広告と通常の機能が顧客の目にどう異なって映るかを比較するため、アプリ内部の様々なバナーを細かく分析しました。ほとんどの広告は大きなグラフィックと過度に目立つ原色を使用して、無理やり視線を引きつける方式を取っていました。一方、有用な機能は落ち着いたテキストと直感的なボタンを中心に情報の階層を整え、内容を落ち着いて伝えています。レポートが広告ではなく真の機能として感じられるためには、華やかなグラフィックよりも内容と情報が先に目に留まるべきだという結論に至りました。不要なグラフィックや刺激的なカラーを大胆に削り、内容自体に視線が先に留まるようシンプルに構成しました。代わりに、小さなディテールを繊細に埋め込み、製品としての完成度と奥行きを一つずつ積み重ねていきました。カードの角には柔らかなコーナースムージング処理を適用し、淡い半透明の質感を加え、背景画面と自然に調和するようにしました。ボタンの上には非常に微細なグラデーションを重ね、視覚的な密度を高め、高級感を醸し出すよう細かく調整しました。こうした小さなデザイン要素が集まり、顧客にとって見知らぬ邪魔者ではなく、精緻で有用な機能として認識される基盤となりました。どんなに良い提案でも、第一印象が広告のように感じられれば心の扉を閉ざしてしまうため、視覚的な重さを下げる作業が何より重要でした。

4. 行動に応じて柔軟に変化するサイズ

レポートカードを偶然発見して読んだ後も、引き続き画面を占拠して視線を要求すれば、顧客はかなりの疲労感と負担を感じる 수밖에ありません。顧客は今すぐおすすめの内容を読みたい場合もあれば、自分の口座や他の必要な情報を先に確認したい場合もあります。そこで、顧客が画面でスクロール動作を開始するやいなや、レポートカードが自然かつ滑らかに小さくなるよう細かく設計しました。ユーザーが本格的に画面を見回し始めると、カードが自ら場所を譲り、他のコンテンツをより快適に見られるよう配慮したのです。画面の隅に小さくなったカードは、顧客がふと疑問を感じた際にいつでも気軽に再度開いて見られる入口として 훌륭に残ります。レポートがどれほど目立たなければならないかを固定した状態にせず、顧客のリアルタイムな行動の流れに応じて柔軟に変化するようにしました。こうした柔軟な変化は、顧客が情報を一方的に押し付けられているという感覚から抜け出し、主体的に画面を探検しているという印象を植え付けます。最初にホーム画面に入る瞬間には、レポートが閉じた状態から始まり、自然で優雅に展開されるよう演出しました。背景画面がまず目に快適に入ってきてから、カードが滑らかに開かれることで、今自分の資産状態を見て温かく提案しているように感じられます。いつでも望む時に再度閉じられるという安心感を与えるため、カードが開閉する動きの質感を数多く修正しました。あまりに速くポンと飛び出す動きは慌ただしい負担感を与え、あまりに遅い動きはシステムがカクついているようなもどかしさを与えました。結局、軽すぎず重すぎない最適な動きの速度を見つけ出し、顧客が自然で快適な体験を楽しめるよう完成させました。

5. 動きのディテールで完成させる自然さ

カードが開閉する動きの速度を決定する過程は、ユーザー体験の品格を決定する非常に厳しく重要な関門でした。あまりに速く飛び出す動きは、まるで警告ウィンドウのようにポンと現れる感じを与え、顧客に心理的な負担を強いました。逆に、過度に遅く弱い反動がある動きは滑らかではあるものの、画面システムが遅く反応しているように誤解を招きました。しかし、反動が過度に大きい動きを与えると軽快ではあるものの、重要な資産情報を真剣に表示するにはやや散漫な感じが強すぎました。数多くのテストを経て、ついに最も理想的な動きの式を見つけ出し、適用することができました。それは、速く始まって滑らかに減速し、最後の端に非常にわずかな反動を加える方式でした。この繊細な動きは、滑らかなフィニッシュを通じて顧客の心理的負担を大きく軽減すると同時に、小さな反動を通じて画面に活力を吹き込みました。さらに、位置移動とサイズ変化を意味する二つのモーションの開始タイミングを微妙にずらす技法を使いました。もし二つのモーションが同時に始まれば、単に粗雑にサイズが変わりながら移動しているように見えますが、開始点を少しずらすと美しい曲線を描きます。まるで生きた有機体のように滑らかに曲線を描いて動く微細なディテールのおかげで、フローティングカードはさらに完成度の高い姿を備えました。技術的な実装を超えて感情的な満足感まで配慮したこうした動きのディテールは、結局、顧客の心を解きほぐす決定的な鍵となりました。

6. 表現ではなく構造が生んだ驚異的な成果

既存のフラットな画面内での表現方法を変えた中間案と、構造を完全に刷新したフローティング案を用いて、実際の顧客を対象とした実験を実施しました。単に文言や表現方法だけを変えた中間案は、クリック率がわずか1.1倍に上がるにとどまり、微々たる変化しか示しませんでした。しかし、情報の階層と空間構造自体を革新的に変えたフローティング案は、クリック率と転換率が同時に驚異の3倍に跳ね上がる奇跡のような成果を記録しました。特に、単なる関心の表れであるクリックだけでなく、実際の行動につながる比率である転換率も同時に急増した点が最も励みになりました。もし目立つだけで不便だったら、クリックが少し増えるだけで離脱したでしょうが、構造的な革新は真に必要としている顧客の心を掴んだのです。邪魔をせず、かつ自然かつ確実に目立つことができる唯一の道は、外見の華やかさではなく、根本的な構造の再設計にあったのです。これからも私たちは、目の前の華やかなグラフィックや刺激的な表現だけに依存する過ちを犯さず、顧客の行動の流れを深く尊重していきます。顧客が自分の業務を快適に遂行することを妨げずに、適切なタイミングで必要な価値を伝える知恵のある構造を絶えず模索していきます。今回の資産管理レポート刷新の経験は、デザインが単に見栄えの良い殻を作る仕事ではないことを改めて深く実感させてくれました。複雑な問題を明快に解きほぐす力は、常に顧客の実際の行動文脈を深く理解し、盤面を新しく組み直すことから生まれます。これから直面する数多くのプロダクト課題の中でも、邪魔をせず自然に浸透する「目立ち方」の美学を忘れずに実践していく所存です。読者の皆さんも、目の前の華やかさよりも根本的な構造を変える知恵を通じて、日常と業務の中で素晴らしい成長の転機を築いてみてください。

よくある質問