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

こんにちは！　吉田です！

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

何を作るかというと…

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

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

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

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

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

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

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

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

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

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

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

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

ぜひお試しあれ！

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

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

吉田

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

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

投稿者プロフィール

吉田 祥太

フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。

ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。

⇒ 詳しいプロフィールはこちら

最新の投稿

この著者の記事一覧

• 記事2023年12月25日【成果続々！】おめでとうございます！
• 記事2023年12月20日「強みがない」デザイナーの生存戦略
• 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
• 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣