「映えるボタン」を組み込もう！
デザインエンジニアのりょーたです🐧
本記事では、「映える」ボタンをプロダクトに組み込んでみませんか？というお話をします。
「映える」って?
ひときわ美しく目立って見えるさま、他と比べても特に際立っているさま、周囲から引き立つように見栄え（見映え）がするさま、などを指す意味で用いられる表現。
引用：https://www.weblio.jp/content/映える
「映える」というワードの説明にあるように、ビュー全体で特に目立っているもの、他のパーツとは異なるものを本記事では「映えるボタン」と表現しています。
では、奇抜な見た目であれば「映える」と言ってもいいのでしょうか？
答えはNOです。次に、私の考える映えるボタンの条件を紹介します。
映えるボタンの条件
- デザインシステムで定義される、プライマリーボタンとUIが異なる
- ユーザーのアクションを必要としない
- プロダクトにおける重要な指標に関わる
補足
「2. ユーザーのアクションを必要としない」は、例えば、ホバーやアクティブ時のみアニメーションがあるボタンは含みません。ユーザーが受動的に情報を受け取った結果、違いを認識できるものに限定します。
「3. プロダクトにおける重要な指標に関わる」は、他と比べて目立たせるUIにする意味を持ち合わせていることを指しています。例えば、CVに影響のないボタンであれば、特に目立たせる必要性がないと思うので、その場合は対象外とします。
事例紹介
簡単に事例を紹介します。
Framer
Framerはノーコードデザイン作成ツールです。
キャプチャはLPのファーストビューですが、「Start with AI」ボタンの周りに常時アニメーションでキラキラした装飾が回っています。
「押したくなるボタン」はまさにこういうのを指すんだなーとそこそこ長い時間見入ってしまいました😅
bento
bentoは様々なサービスのリンクをウィジェットのようにして、まとめて表示することのできるツールです。上記は、私が作成したプロフィールページをログインせずに見た状態になります。
bentoはその性質上、ウィジェットに多くのボタンが表示されます。そのため、bentoでは、プロダクトにおいて重要なアクションのボタンを常時アニメーションするようにしています。
最後に
いかがでしたか？映えるボタンの必要性を感じていただけたかなと思います！
皆さんも色々なプロダクトで「映える」ボタンを探してみてくださいね！
弊社プロダクトであるMusubiteでも映えるボタンを実装しています。
こちらから確認してみてください🔍
▼ もし興味を持っていただいた方はぜひお気軽に話しましょう！
Discussion