Product comparison

JavaScript

製品などの比較に役立つjQueryプラグイン「Product comparison」

Product comparisonは、いくつかの種類のものを比較する時に役に立つjQueryプラグインです。例えば、製品や写真などのデザイン、サービスの比較などです。また、比較の対象は、テキストではなく画像などの視覚的に行うものに向いています。なお、デモページではスマートフォンのデザインの比較が表現されています。このように、製品の比較に最も活用できるプラグインです。では、実装方法について見ていきましょう。

Product comparison

デモ

  • 1. 製品の一覧画面のマークアップ
  • 2. 選択項目のプレビューパネルの作成
  • 3. 比較結果を表示させる部分の作成(ポップアップウィンドウの作成)

1について、表示する項目の画像をそれぞれ「img」要素でマークアップします。項目名(製品名)は、テキスト入力で表示できます。(具体的なマークアップはプラグイン配布ページへ)

2のプレビューパネルは、選択した項目をプレビューさせるために作成します。プレビュー画面には最大3つの項目を同時に選択でき、表示してくれます。こちらも具体的なマークアップは、プラグイン配布サイトで丁寧に記載されています。

3について、プレビュー画面で2つ以上の項目を選択すると、「Compare」というボタンが現れます。それをクリックすると、比較結果についての詳細画面がポップアップウィンドウで表示されます。マウスオン時の効果も指定されており、デザイン性が高いポップアップになっています。

Product comparisonを使用すると、比較前は画像のみの表示ですっきりとしたページになります。製品のデザインのみが目に飛び込んでくるので、ユーザーに視覚的に呼びかけることができます。また、比較したい製品のみを任意で選択できるので、情報の整理には画期的なプラグインだと思います。

購入画面の一歩手前で、このような比較ページを設けると、ユーザーに合った製品選び、しいては購買欲の促進に役立てることができるのではないでしょうか。

Product comparison

関連記事

  1. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  2. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  3. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  4. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  5. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  6. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP