ECサイトのキャッチコピーを嫌味じゃない点滅で目立たせてみる

Total 231 views
この記事の所要時間は約 3分です。

物品販売ページなどで
ページ先頭にキャッチコピーなどを設置しているサイトも多いかと思いますが
キャッチコピーを必ずお客さんが見てくれるとは限りません。

そんな時、多少の動きを付ければちょっとは目立つのではないかと思い
嫌味じゃない程度の実装方法を調べてみました。

スポンサーリンク


 

イメージ画像

 

小手先でもなんでも試してみる

今回のはあくまで小手先の手法ですが、それなりに目立つとは思います。
サンプルを作ってみました。

サンプル

ページを開いた途端に下のサンプルキャッチコピーの動きがすでに目に留まったかと思いますが
今回は点滅にしてみました。

キャプチャ画像

 

いかがでしょう。
嫌味じゃない程度の点滅になっていたんじゃないかとは思うんですが。

見れなかった方は F5キーを押すかブラウザのリロードボタンをクリックしてください。

 

実装に先立って

今回の実装で一番悩んだのは
お客さんのマウス操作等で動きがスタートするのではなく、
ページが開いた時に自動でアクションする、しかも1度きりというものでした。

お客さんは販売ページを開いた時
そのページをもっと見てみようかそれとも離れるかを瞬時に判断します。

したがってキャッチコピーの出来不出来で離脱率が大きく変わります。
コピー自体が訪問者の目に留まらなければその努力は無駄なものになってしまいますね。

キャッチコピーを目立たせるには
フォントを変える、色を付ける、画像にする……などいろいろ工夫があります。

今回の目的はそれらの延長線上のモノであり
離脱率を少しでも減らそうという小手先のテクニックですので
必要なければ読み飛ばしてください。

実装自体は簡単です。

実装方法

実装には jQueryが必要ですので
ない人は以下を記述するのが最も簡単です。(書き方はいろいろありますがここでは割愛)

次に『クリック動作を省いて 2回点滅に限定』などのカスタマイズをしたサンプル画像用のコードが以下になります。

上記コードは headに直接書き込んでもいいし
点滅をさせたいキャッチコピーのあるページのみへの指定でもいいでしょう。
この詳細は説明すると長くなるので割愛します。

この数値を詳細に説明するとかなり大変なので
実装の際一つ一つ数値を変えてみて実際にどう動きが変わるのか、
ご自身で試してみた方がわかりやすいと思います。

最後に、点滅させたい画像やテキストの入った divブロックを HTMLに記述します。
サンプルは画像なので img指定してあげます。

注意点としては、jsコード2行目に指定してあるクラス名と上記 divに指定したクラス名を一致させることです。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)