画像スライダーの落とし穴

こんにちは！

10月インターン生のOigamiです

実習も残すところあとわずかとなってきました。なんとか現在製作中のサイトを公開出来れば、、、と考えております。

今回は画像スライダーのお話

Jqueryによる画像スライダー

bxslider、nibosliderなど、簡単にMainvisualの画像をスライドさせる事ができる

これらのプラグイン。思わず使いたくなりますよね。

しかし、このスライダーも良し悪しがあるようです。

Mainvisual

Webサイトにおけるメインビジュアル（キービジュアル）は、

ファーストビューにある大きな画像領域を指します。

メインビジュアルの目的は何をしているサイトなのかを視覚的に伝える、と言う事です。

サイトを閲覧した際、一番最初に目にするため、直帰率に大きな影響を与えます。

人物の社員を表示してユーザーに安心感を与えたり、商品の写真をのせたり、企業の理念を伝えたり、、、

多種多様なメインビジュアルがあります

1.サービスを伝える
2.旬な情報を伝える
3.イメージを伝える

主にこの3点を売りにしているサイトが多いようです。

画像スライダーのメリット

●サイトに動きが出る
●伝えたいイメージを同じ領域内で複数紹介できる

同じ領域内で複数紹介出来るっていうのは、かなり強みだとは思います。

画像スライダーのデメリット

ユーザーの操作を阻害する

「スライド画像の文字見逃した…一個戻りたい..」　良くありますよね。

数秒単位で画像が次々と切り替わるのに、1枚辺りの情報量が多い・・・

この状態ですと、魅力的な内容が表示されていても見落としたり、忘れたりしてしまいます。

情報量にもよりますが、スライダーの速度は6～7秒が良いみたいですね。

クリックされない

メインビジュアルにリンクを貼っていると要注意です。

ユーザーは動くスライドはクリックしません。

クリックしたとしても、最初のスライド画像だけです。

こんなデータもあります

バナーをクリックした割合

訪問者が3,755,297の内の1.07％

クリックしたのはどこか？

1番目　89.1％

2番目　3.1％

3番目　2.4％

4番目　2.8％

5番目　2.6％

2番目以降はほぼクリックされないと思っててもいいかもですね。

詳しくはこちらみたいなことを表記すると少しクリック率はあがるみたいです。

ファーストビューを占める

アピールしたい内容を表示するので、画像の高さをとります。ですのでファーストビューに入れられるコンテンツの量が制限されます。

人は動くものに目がいく傾向がありますので、スライド以外の部分への興味が薄れていってしまいます。

Appleもテストをしていたようです

「Appleがトップページで自動送りカルーセルをやめた理由 ?」

iphone6の発売と同時にメインビジュアルのA/Bテストを行い、画像をスライドさせる事を辞めています

理由は、やはり2枚目以降のクリック率が悪かったそうです

まとめ

良し悪しですねー。

自分なりのまとめとしては。

●トップページにコンテンツが多いときはスライドさせない。(他のコンテンツへの興味が薄れるから)

●コンテンツが少なく、イメージを先に伝えたい場合は可。

●リンクを貼る時は｢詳しくはこちら｣のように誘導する。

レスポンシブでは動かないスライダーもありますので、主流では無くなって来ているのかもしれないですねー。

今作ってるサイトで使ってますけどね！笑

ここまで読んでくださってありがとうございます

by　Oigami

 

コメントを残す