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

こんにちは! 吉田です!

 

今日は久しぶりに

コーディングの実演動画です!

 

 

何を作るかというと…

 

 

ズバリ、「ボタンエフェクト!!」

(カタカナだらけになってしまいました…)

 

 

ランディングページにおいて、

ボタンはお問い合わせをするために

不可欠な超重要な要素ですが、

 

意外と「目立たない」という理由で

スルーされて離脱されているケースが

多いんです。

 

 

とくに最近は

どの業種・業態でも

スマホでの閲覧が

メインになりつつあります。

 

 

そのため、目が

スクロールの速さに追いつかず、

画面には映っていても、

ボタンがスルーされることも

増えてきました。

 

 

そんなときにオススメなのが、

今回の「気になるボタンのエフェクト」です。

 

 

ボタンに適度な動きをつけることで、

「目立たなくてスルーされる・離脱される」

という可能性を低くしてくれます。

 

 

ボタンのデザインは一切変えずに、

CSSを追加するだけで

今のランディングページのボタンを

さらに「気になる」ボタンに

変えることができるので、

ぜひ、取り入れてみてください!

 

(あまりエフェクトが強すぎると

「うるさい」印象になってしまいますので

その点だけご注意くださいませ)

 

 

今回ご紹介するパターンは4つです!

 

 

①光るボタン

②点滅するボタン

③拡大縮小するボタン

④ふわふわするボタン

 

 

業種や業態によっても

テイストを分けていただくと、

コンバージョンにも変化があるかもしれません。。

 

 

ぜひお試しあれ!

 

 

 

 

 

今回実際に制作したボタンエフェクトはこちら

↓↓

https://salesdesign-school.jp/sample/coding-button-effect/

 

 

ではでは

今日はこの辺で!

 

 

吉田

 

 

p.s.

ちなみに、

「ボタンの作り方がわからない!」という方は、

まずはこちらをご覧ください。

↓↓

 

これからも役立つ動画を配信していきますので、

いいね・チャンネル登録、ぜひよろしくお願いいたします!

 

 

/ ━━━━━━━━━━━━━━━━ /

 

今日のメルマガを書いた人:

 

 

 

 

吉田 祥太  Yoshida Shota

 

セールスデザイン講座 サポート講師

フロントエンジニア出身の叩き上げセールスデザイナー

 

千葉県生まれ。法政大学法学部卒。

 

27歳で金なし・コネなし・知名度なしにもかかわらず

見切り発車独立。さらに独立して3ヶ月で

「面白そう」という理由で逆プロポーズにされ交際0日で婚約。

もちろん(色々と)窮地に追い込まれるも

しぶとく生き残り、なんとか独立2年目で月商100万を達成。

 

セールスデザイナーとしては5年目。

現場の叩き上げで、売れるデザインを独自に研究・体系化して身につける。

結果、LPのみで年間2億円以上の売上をあげたり、

前年比の問い合わせ数が13倍になったクライアントなど実績多数。

 

フリーランスとしてクライアントに深く関わったことで、

「組織や事業をデザインの力で大きくすること」に興味が生まれ

セールスデザイン講座へ。

 

ノンデザイナー出身でめちゃめちゃ苦労した経験から、

感覚的になりやすいデザインの指導を

理論的かつ再現性ある形で伝えることをモットーにしている。

 

トレードマークは、昔からモサモサになる髪の毛。

「積乱雲」「鳥の巣」「ゲリラ豪雨(?)」と屈強なあだ名が

名を連ねる中、友人に言われた「スチールウール」がドンピシャに秀逸で、個人的には殿堂入り。

 

一方コンプレックスは声が細いことで、改善のために

ひそかに週1でボイストレーニングに通っている。。

 

座右の銘は「それも一興」

投稿者プロフィール

上野 健二
上野 健二セールスデザイン講座 代表講師
中小・個人事業企業の業績アップをデザインでサポートする売れるLP制作所・株式会社ガツンで代表取締役を務める。
年間100本以上ランディングページを制作に携わる現役のセールスデザイナー兼ディレクター。
詳しいプロフィールはこちら