※ 画像は公式サイトデモより

Eコマースサイトでは数多くの写真を使うが、それだけでは詳細が分かりづらいということは多々ある。そのため、各部を拡大した画像をリストアップして対応しているサイトもあるだろう。だが、それはユーザが本当に希望する場所とは限らない。

ピクチャ 21 10-30-45.png

バイクの画像(左)とその拡大画像(右)

 

そこで画像の拡大をユーザに任せてしまうのはどうだろう。サイト側は極力大きな画像を用意するだけで良い。

今回紹介するフリーウェアはMagic Zoom、JavaScriptによる画像拡大ライブラリだ。個人の非商用利用に限り無料なのでご注意をいただきたい。

Magic Zoomは画像の上にマウスを乗せると、右側に拡大された画像を表示してくれる。マウスを動かせば、拡大される場所も変更される。複数画像を切り替える機能もあり、例えば色違いやパターンが違う商品の表示に使える。

ピクチャ 22 10-30-45.png

複数の画像を切り替える機能も便利だ

 

マウスを動かすことによって変化するダイナミックなものがデフォルトだが、ドラッグで拡大範囲を移動させる機能もある。いずれにせよ、Eコマースサイトをはじめとして商品画像に重点を置くサイトで役立つライブラリだろう。

動きも軽快で、使い勝手が良い(JavaScriptファイルは8KB程度)。商品を手に取ることができないEコマースでは商品の見せ方が売上を左右する。こうしたライブラリを活用することでユーザビリティを向上しよう。

 

JavaScript Image Zoomifier : Magic Zoom (previously LuckyZoom)

 http://magictoolbox.com/magiczoom/