![見出し画像](https://assets.st-note.com/production/uploads/images/79328224/rectangle_large_type_2_b83fbaa1c1bdb8e34a8a91e9d94cc88e.png?width=1200)
追従ボタンをやめたらCVRが上がった話
クラウドファンディングサービスCAMPFIREでデザイナーをしている、塩月(@oshiokeiko)です。
ここ最近、私はCAMPFIREでプロジェクトを実施する方(プロジェクトオーナーさん)向けの施策に取り組んでいます。
その中で、小さな変更だけど面白い結果が出たな。と思ったことを記事にしてみました。UIを担当していてCVR向上のため画面改善を検討している方などのお役に立てれば幸いです。
追従ボタンとは?
画面をスクロールしても常に表示されているボタンのことです。LPなどではCVボタンが追従になっていることも多いですよね。
![画像3](https://assets.st-note.com/production/uploads/images/79397044/picture_pc_e0f4cf6e1358d7405dcb9072eb2fb49c.jpg?width=1200)
今回お話しする追従ボタンはこちら。
![画像4](https://assets.st-note.com/production/uploads/images/79397123/picture_pc_6476dda5941e15c356566fd2d85cec62.jpg?width=1200)
CAMPFIREには、クラウドファンディングのプロジェクトページを作る編集画面というものがあります。この画面には、ページ作りに悩んだ時に見れるヒントを設けています。今回はこのボタンを変更しました。
変更したところ
![画像5](https://assets.st-note.com/production/uploads/images/79404476/picture_pc_25bb43539ce4c6047ac86d10558f2229.jpg?width=1200)
①追従を廃止
ヒントはプラットフォーム側からすると読んでもらいたいものですが、最優先事項ではありません。重要な入力フォームに追従がある(しかも赤色)と集中力が妨げられるため追従をやめヘッダーに入れることにしました。(ヘッダーは追従してません。)
②赤色を廃止。
赤色はPrimaryボタンの『保存する』ボタンよりも目立ってしまっているため、色味を抑えた表現にしました。
簡単に言うと、
動かなくなり、目立たなくなる。
ということです。
デザインチームでもよく話すのですが、機能を追加する、目立たせる施策はやりやすいのですが、目立たなくさせる、あったものを削る施策はとても慎重に進めることが求められます。
今回もネガティブなことが起きないか、テストを実施し数値を取ることにしました。
事実と考察
今回はABテストとGoogleアナリティクスでクリック率を見ることにしました。
![](https://assets.st-note.com/img/1653874977221-uosEPJKvXx.png?width=1200)
![](https://assets.st-note.com/img/1654044416744-E9Pjva5xKK.png?width=1200)
新規パターン(header)ではCVRが107.42%改善
新規パターン(header)のクリック率は3分の1程度に低下
これらの内容から以下のような考察をしました。
①重要性が相対的に低いパーツの画面占有率が下がり、視認性が改善され誤タップが減った。
②本来必要とする人だけが意志を持ってヒントを開くようになり、きちんとヘルプを読むユーザーさんが増えた。それによりCVRが上がった。
教訓
私がこの施策から学んだ教訓はこちら
何でもかんでも目立たせればいいってもんじゃない!
重要度に対して存在感が大きすぎる要素は、 誤タップや視覚的なストレスを生み離脱に繋がります。
デザイナーなら「当たり前じゃん?」と思う事かもしれませんが、今回数値として把握できたことで、より確信が持てるようになりました。
デザインを担当していると、あれもこれも目立たせたい!という依頼を受けることがありますよね。
でもすべてを目立たせるということは、最終目的とするCVRが下がる可能性があるということ。。。そのあたりをデザイナーは説明できる必要があります。
でも依頼に対して「無理ですよ!」と説明しろというわけではないです。(言う必要がある時もあるとは思いますっ!)
「こうすればできるんじゃない?」という提案をできるようになればベストだと思います。
今回のテスト&変更も、大きな施策をやる前にヒント位置調整しないと大きな施策自体の目的が達成できない可能性あるな。という流れから実施したものでした。これを先に整理しないと、追加するこの施策には無理があるよね。と示せる。そしてそれを解決する案を提示できる。そういうスキルが必要なのだと思います。
偉そうに語りましたが、私もまだまだです😭
チームメンバーの力を借りながら思考を整理することも多いです。
この記事が、少しでもみなさんのUI設計に活かせることがあれば幸いです。
CAMPFIREでは、デザイナーたちが普段考えていることや、デザインにおける取り組みについて綴っている記事をまとめたマガジンがあります。ご興味ある方はぜひフォローお願いします^^
CAMPFIRE公式ノートもあるのでそちらもぜひ✨