アイキャッチ画像
HOME > ウェブデザイン > ECサイトのキャッチコピーを嫌味じゃない”点滅”で目立たせてみる
公開日:2012.8.3
この記事は約2分で読めます。

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

この記事は最終更新日から6年以上経過しているため現状にそぐわない可能性もあります。

物品販売ページなどで、ページ先頭にキャッチコピーなどを設置しているサイトは多いかと思います。

けれどそのキャッチコピーをお客さんが必ず見てくれるとは限りませんよね。

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

SIRIUSレビューイメージ画像

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

今回のはあくまで小手先の手法ですが、それなりに目立つとは思います。

サンプルを作ってみました。

画像点滅サンプル

ページが開くと同時に、下のサンプルキャッチコピー(※画像)が点滅したかと思います。

キャプチャ画像

※点滅がわからなかった場合は、上の画像を表示させたままブラウザをリロード(再読み込み・F5)してみてください。

 

いかがでしょう。

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

実装に先立って

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

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

したがってキャッチコピーの出来不出来では離脱率が大きく変わる場合もあります。

 

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

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

実装自体は簡単です。

実装方法

実装にはjQueryが必要です。

ない人は以下を記述するのが最も簡単です。

(書き方はほかにもありますがここでは割愛します)

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

上記コードは<head>間に直接書き込んでもいいし、点滅をさせたいキャッチコピーのあるページのみへの指定でもいいでしょう。

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

最後に、点滅させたい画像やテキストの入った<div>ブロックを投稿内に記述します。

(※サンプルは画像なのでimg指定してあげます)

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

以上です。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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