25. 9月 2012 · [jQuery] 広告をギャラリー的に見せるために最適なカルーセルプラグイン はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

企業サイト等ではトップページでキャンペーンや特長を大きなイメージで表示したい場合があります。
広告というよりかは、「アイキャッチ」とか「メインイメージ」とか…いろんな呼び方がありますが(主流はなんて言うんでしょ)、それがひとつに限らない時はランダムで表示するより、スライドして表示させるのが主流になってますね。

困ったときのjQueryを使用するのは確定していたので、山のようなプラグインから選ぶことにしました。
選定基準と理由は下記。

1.自動でスクロールする

閲覧者の操作を必要としなくても、ある程度自動で表示させるため。
デメリットとしてはクリックしようかなと思う頃には次に移ってしまうことがアリ。
これについてはユーザビリティーテストや解析結果を確認するといい。

2.キャプションやコメントは必要ない

ギャラリーサイトでは写真のタイトルとして出すんだろうけど、今回のような場合は画像だけで完結するので必要なし。あってもいいけどカスタマイズすれば綺麗に取れるものが理想。

3.サムネイル(大きなイメージを変えるためのボタン的画像)が使える

提供側としては優先順位はあるにしてもすべて見て欲しいものなので、よくある ●●●○● と下にあるだけだと、訴求力に欠ける。すべての人が最初から興味を持って訪れるわけではないので、サムネイルかボタンなどで、どんなスライドがあるかすぐに分かるほうがいい。

4.サムネイルはいくつでも置ける

メインイメージの幅や高さの範囲でしか置けないものも多いので、こっちも自動でスクロールするなどしていくつでも置ける必要がある。表示順序は表示前のプログラムである程度制御できるから、いつも隠れて見えないものがないように配慮。
ついでに、最後まで行ったら違和感なく最初に戻って欲しいな。

ちなみに、「カルーセル」というのは「回転木馬」の意味で、カルーセルパネル=横にスライドして端まで行ってもループして表示するパネルのこと。探してたのはズバリこれでした。
そういう点じゃ、端まで行って戻れないのはカルーセルとは言えないわけで・・・

via: カルーセルパネルとは – IT用語辞典 Weblio辞書

そんな条件付きで探したjQueryライブラリ!

次点:jQuery and WordPress Image Gallery

表示がすごく綺麗。あと、表示が速い??(キャッシュ効いてるのか、サーバのレスポンスがいいのか・・・)

トランジションも滑らかだし、下のサムネイルのカーソル追従もキモチイイ。

だがしかし、説明文は使わないのでスペース的に難あり。そして使用するには登録が必要。
無償のFree版と有償のPro版があって、ただ使うだけならFreeで十分。高機能を活かしたいならProで。
比較については下記にあります。

Comparison table | jQuery and WordPress Image Gallery

本命:GalleryView | spaceforaname

使うのは無料だけど自己責任で使ってね、とのこと。リスクはあるけどこの表示は私が求めていたもの・・・!

デモは下記。

ポチポチ選ぶだけでプロパティ設定をしてくれたら、期待通りになった!!


Comments closed