「実物を見られない」というECサイトの根本的な悩みを、最新の画像ズーム技術が解決します。
売上直結の4つの具体的な効果：
✔️ アパレル製品：生地の質感、縫製の精密さ、デザインの細部
✔️ ジュエリー：宝石のカット、繊細な装飾、職人技
✔️ 家電製品：インターフェースの詳細、端子配置、精密な設計
✔️ コスメ製品：色味の正確な再現、テクスチャーの質感
MagicZoomは、商品ページの画像を拡大表示できる人気のJavaScriptライブラリです。ユーザーが画像をホバーした際に、拡大された部分を表示することで、商品の細部を確認しやすくなります。
MagicZoomは有料版と無料トライアル版があり、公式サイトからダウンロードできます。
公式サイト：MagicZoom
有料版の最小プランは1サイト29ユーロ（約4,600円:執筆当時）です。各種機能が揃ってのこの価格はお得だと思います。
まず、MagicZoomのCSSとJavaScriptをHTMLに追加します。
<head>
<link rel="stylesheet" href="magiczoom/magiczoom.css">
<script src="magiczoom/magiczoom.js"></script>
</head>
<a href="images/product-large.jpg" class="MagicZoom" data-options="zoomMode: magnifier">
<img src="images/product-thumb.jpg" alt="商品画像">
</a>| ライブラリ | 特徴 | 価格 |
|---|---|---|
| MagicZoom | 高機能、使いやすい | 有料 |
| CloudZoom | シンプルな機能 | 無料 |
| ElevateZoom | オプション豊富 | 無料 |
| Lightbox系 | ポップアップ型 | 様々 |
aタグとdata-optionsで簡単に調整zoomModeをカスタマイズMagicZoomを活用することで、商品ページのUX向上・売上改善が期待できます。特にECサイトでは、画像の見やすさが購買意欲に大きく影響するため、ズーム機能の導入はおすすめです。
a タグと data-options で簡単にできるzoomMode を調整MagicZoomを導入し、ユーザーにとって快適な商品ページを作成しましょう！
MagicZoomを使用した商品画像表示のカスタマイズについて解説しました。
お一人でこれらの実装が大変だ！という場合には弊社までご連絡ください。Webサイトの運用をサポートいたします。