タッチ操作できる商品詳細ページを作る

最近のネット利用率はスマートフォンの方が多いんだそうで、ネットショップもスマートフォン重視で対応を考えていく必要があります。

具体的にはタッチ操作で使いやすいユーザーインターフェースをカラーミーショップの商品詳細ページに実装します。スワイプ(画像送り)、ピンチアウト・ピンチイン(画像の拡大縮小)で操作できるようになります。

以下の二つのプラグインを利用しています。
・bxSlider(サムネイル、大画像)
・PhotoSwipe(タップ時に画像拡大)

タッチ操作デモページのQRコード

デモページのQRコード(スマートフォンで閲覧してください)。
bxSlider+PhotoSwipeデモ

スマホ閲覧時のデモ画面と簡単な説明

bxSliderで実装した商品画像bxSliderでサムネイル画像とスライドショーを実装しています。
スワイプで画像送りが可能になります。
他のECサイトやスマートフォンアプリなどをみていると、矢印ボタンやサムネイル画像は非表示にしているところも多いです。画面が狭いこともあって邪魔になるという判断でしょう。これらはショップごとに検討していただいて調整可能です。
デモでは縦長画像を正方形で切り抜く表示方法にしています。
大画像をタップすると、PhotoSwipeに移行します(画像の拡大・縮小機能)。

PhotoSwipeで実装した商品画像PhotoSwipeでは、ピンチアウト・ピンチインで画像の拡大・縮小ができます。タップしたりスワイプしたりもできます。挙動は一般的なタッチ操作そのものなので戸惑うことはありません。
それに加えて、右上のアイコンで拡大・縮小、SNSシェア機能、閉じるボタンがついています。
機能も十分で、操作感もとても良い印象を受けました。

実装
・デモページはHTMLですが、カラーミーショップ(Smartyのループ内)にも置けます
・ファイルを置くためのWebサーバーが必要です。

制作物用のお問い合わせボタン

えいじ@naeco.jp この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら

関連記事