「気になるボタン」４つのボタンエフェクトをコーディングしてみよう！

こんにちは！　吉田です！

今日は久しぶりに
コーディングの実演動画です！

何を作るかというと…

ズバリ、「ボタンエフェクト！！」
（カタカナだらけになってしまいました…）

ランディングページにおいて、
ボタンはお問い合わせをするために
不可欠な超重要な要素ですが、

意外と「目立たない」という理由で
スルーされて離脱されているケースが
多いんです。

とくに最近は
どの業種・業態でも
スマホでの閲覧が
メインになりつつあります。

そのため、目が
スクロールの速さに追いつかず、
画面には映っていても、
ボタンがスルーされることも
増えてきました。

そんなときにオススメなのが、
今回の「気になるボタンのエフェクト」です。

ボタンに適度な動きをつけることで、
「目立たなくてスルーされる・離脱される」
という可能性を低くしてくれます。

ボタンのデザインは一切変えずに、
CSSを追加するだけで
今のランディングページのボタンを
さらに「気になる」ボタンに
変えることができるので、
ぜひ、取り入れてみてください！

（あまりエフェクトが強すぎると
「うるさい」印象になってしまいますので
その点だけご注意くださいませ）

今回ご紹介するパターンは４つです！

①光るボタン
②点滅するボタン
③拡大縮小するボタン
④ふわふわするボタン

業種や業態によっても
テイストを分けていただくと、
コンバージョンにも変化があるかもしれません。。

ぜひお試しあれ！

今回実際に制作したボタンエフェクトはこちら
↓↓
https://salesdesign-school.jp/sample/coding-button-effect/

ではでは
今日はこの辺で！

吉田

p.s.
ちなみに、
「ボタンの作り方がわからない！」という方は、
まずはこちらをご覧ください。
↓↓
https://www.youtube.com/watch?v=_KB4JILytV8&t=1s

これからも役立つ動画を配信していきますので、
いいね・チャンネル登録、ぜひよろしくお願いいたします！