ECサイトのキャッチコピーを嫌味じゃない”点滅”で目立たせてみる
も・く・じ
物品販売ページなどで、ページ先頭にキャッチコピーなどを設置しているサイトは多いかと思います。
けれどそのキャッチコピーをお客さんが必ず見てくれるとは限りませんよね。
そんな時、多少の動きを付ければちょっとは目立つのではないかと思い、嫌味じゃない程度の実装方法を調べてみました。
小手先でもなんでも試してみる
今回のはあくまで小手先の手法ですが、それなりに目立つとは思います。
サンプルを作ってみました。
画像点滅サンプル
ページが開くと同時に、下のサンプルキャッチコピー（※画像）が点滅したかと思います。
※点滅がわからなかった場合は、上の画像を表示させたままブラウザをリロード（再読み込み・F5）してみてください。
いかがでしょう。
嫌味じゃない程度の点滅になっていたんじゃないかと思うんですが。
実装に先立って
今回の実装で一番悩んだのは、お客さんのマウス操作等で動きがスタートするのではなく、ページが開いた時に自動でアクションする、しかも1度きりというものでした。
お客さんは販売ページを開いた時、そのページをもっと見てみようかそれとも離れるかを瞬時に判断します。
したがってキャッチコピーの出来不出来では離脱率が大きく変わる場合もあります。
キャッチコピーを目立たせるには、フォントを変える、色を付ける、画像にするなどいろいろ工夫があります。
今回の目的はそれらの延長線上のモノであり、離脱率を少しでも減らそうという小手先のテクニックですので、必要なければ読み飛ばしてください。
実装自体は簡単です。
実装方法
実装にはjQueryが必要です。
ない人は以下を記述するのが最も簡単です。
（書き方はほかにもありますがここでは割愛します）
|
0 1 2 |
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> |
次に『クリック動作を省いて2回点滅に限定』などのカスタマイズをしたサンプル画像用のコードが以下になります。
|
0 1 2 3 4 5 6 7 8 9 |
<script> $( function() { $( '.catch' ) . fadeTo( 1000, 0.1 ) . fadeTo( 500, 1 ) . fadeTo( 500, 0.1 ) . fadeTo( 1000, 1 ) } ) </script> |
上記コードは<head>間に直接書き込んでもいいし、点滅をさせたいキャッチコピーのあるページのみへの指定でもいいでしょう。
数値に関しては詳細に説明するとかなり大変なので、実装の際に一つ一つ数値を変えてみて具体的にどう動きが変わるのか、ご自身で試してみた方がわかりやすいと思います。
最後に、点滅させたい画像やテキストの入った<div>ブロックを投稿内に記述します。
（※サンプルは画像なのでimg指定してあげます）
|
0 1 2 |
<div class="catch"><img src=（画像パス）" alt="" title="" /></div> |
注意点としては、jsコード3行目に指定してあるクラス名と上記divに指定したクラス名を一致させることです。
以上です。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓