ECコンサル アラタナはeコマースを中心とした「新たな○○を創造する」会社です!

jQuery(JavaScript)でユニークなネットショップの構築を

 

こんにちは、アラタナの山本です。

ネットショップ事業に参入する企業様が増えるに従い、競合との差別化や独自性のある販売方法を実現させるために、jQuery(JavaScript)を活用したユニークなネットショップが増えています。

 

しかし、その一方でjQuery(JavaScript)はユニークなネットショップを構築するためには便利なテクニックですが、「出来上がってきた動きがイメージしていた物のと違う・・・」や、「ソースコードの組み方次第ではセキュリティーリスクになってしまう」などの課題もあります。

 

そこで、このページでは、jQuery(JavaScript)を活用したユニークなネットショップ事例と共に、jQuery(JavaScript)が抱える課題と、解決策をご紹介したいと思います。

それでは、「出来上がってきた動きがイメージしていた物のと違う・・・」から、お話したいと思います。

 

jQuery(JavaScript)は手段であって目的ではない

「出来上がってきた動きがイメージしていた物のと違う・・・」といったトラブルは、jQuery(JavaScript)の「動き方」を重視し過ぎている場合に起きやすくなります。

動き事体は重要ではないとはいうわけではありませんが、もっと大切な事があると考えています。

 

それは、「なぜこの部分に、jQuery(JavaScript)を使うのか?」という根本的な解です。

 

jQuery(JavaScript)を使いたい理由は、「PCやスマフォの画面が一定の大きさなので、その画面内で最大限の表現をしたい」という課題を解決するためです。

 

例えば、「ブランド訴求をしたい」が目的の場合は、トップに大きなキービジュアルをどーーんと配置して、緩やかにスライドさせるのが、狙いと解決手段(表現)がマッチしているといえます。

また、「特集ページを多く作成しているので、それが伝わるように」が目的の場合は、キービジュアルを配置しつつも、サムネイル(小さなバナー)も配置して、特集が沢山あることの視認性を高める表現が、狙いと表現がマッチしているといえます。

 

ブランド訴求をしたい

1

jetslow4wear.com

 

特集ページを多く作成しているので、それが伝わるようにしたい

2

www.herz-bag.jp

 

ご紹介した、狙いと表現のマッチの事例は極端な話かとは思いますが、詳細ページの商品画像の見せ方をjQuery(JavaScript)で工夫する際などにも、同じ考え方を活用できます。

 

「●●な動きが好きなので●●のjQuery(JavaScript)を真似したい」といった要望は、手段を目的にしてしまっているので考え直す方がいいでしょう。

 

「狙いがあって」→「デザインに落とし込まれて」→「実現させるためのjQuery(JavaScript)」であるべきかなと思います。

狙いが明確であれば、動きの遅い早いは、そこまで問題にならないでしょう。

特に「売上にインパクトがあるのか?ないのか?」でいえば、微々たる影響なのではと思います。

 

目的別jQuery(JavaScript)事例

ブランドのイメージを伝えたい

3

store.honeyee.com

 

トップページをプロモーションの場として最大限活用している事例です。

YouTubeを活用するサイトも多くなっていますが、ここまでjQuery(JavaScript)を多用しているサイトも少ないのではないでしょうか。

「サイトの世界観を伝え」→「ファン化を促進して」→「高単価の商品を購入して頂く」といった、狙いと表現がマッチしている事例です。

 

商品の細かな点までしっかりと伝えたい

4

store.50910.jp

 

アパレルサイトなどで要望の高い課題になるかとは思いますが、単価が高い商品の購入率(CVR)を高めるためには、商品の質感なども含めてしっかり伝えることが必要です。

しかし、閲覧者にページ遷移を多くさせてしまうと、ストレスを感じて離脱する可能性高まります。

また、必然的に画像点数も増えますので、PCの画面からサムネイル画像が外れて、視認性も低下する問題もあるでしょう。

 

そこで、上記事例の様なjQuery(JavaScript)が解決策になります。

商品の拡大もjQuery(JavaScript)を活用して、ページ遷移をまったく伴わない方法で、表現することが可能になります。

 

特殊な売り方を実現したい

5

walpa.jp

 

jQuery(JavaScript)の活用は、表面的な見せ方の改善に留まりません。

 

上記事例は、商品(壁紙)の切り抜きをして、切り抜いた情報を購入データに組み込んで購入完了まで行う仕組みになっています。

この仕組みの実現により、リニューアル前まではメールフォームでオーダーが入った後に、見積を返信して・・・購入完了といった作業を自動化しつつ、時間も短縮することができた事例です。

 

オーダー商品を受け付けているサイトなどに、幅広く活用できる好事例だと感じています。

 

PVを伸ばしたい

6

daikoshop.com

 

この事例は、jQuery(JavaScript)ではなく、Flashなのですが非常に参考になる事例だと思いご紹介させて頂きます。

 

初見の感想はブランド感を伝えるための施策と感じたのですが、サイトを見ている間に感じ方が変わりました。

商品詳細ページに遷移した時に、商品がボトボト落ちてくる動きが、クリックを誘います。

つまり、PVがすごく伸びそうな仕組みなのです。

PVが伸びると、比例してついで購入を誘い、購入単価が上がります。

 

「商品との偶然の出会い」は雑誌などの長所ですが、普通のネットショップは短所です。この短所を改善できる仕組みだなと、昔から大好きなサイトでした。

個人的には、この仕組みにレコメンドエンジンを組み合わせてパーソナライズ化すれば、雑誌よりも効果的な売り方もできるのではと感じています。

 

興味ありましたら、ぜひ、お気軽にお問合せください

 

まとめ

jQuery(JavaScript)はユニークなネットショップを構築するためには非常に有効なテクニックです。

むしろ、ユニークなネットショップというより、売上を上げるネットショップへ変えていくこともできるテクニックです。

 

しかし、見た目の斬新さが邪魔をして、本来考えるべき、目的からの逆算思考を止めてしまうこともあります。

また、jQuery(JavaScript)は特殊な技術(だれでもできるわけではない)なので、コストもかかります。

動きの好き嫌いは主観的になるので、他の人には気にならないことも多々あるのではないでしょうか?

 

個人的には、動きの好き嫌いのためにコストをかけるのではなく、同じコストをかけるなら、「課題をどの程度解決していけているのか?」の逆算思考で改善していくことをおすすめしたいと考えています。

この記事を書いた人

EC業界の今

イベント・セミナー情報