ここで紹介するソート機能付き比較ボックスは、Lazy Blocksのコントロールを組み合わせて作っています。
実装コードを見返した限り、ソート機能・横スクロール・1列目固定のいずれもPro限定のコントロールには依存していません。
とはいえ、それらを動かしているJSとCSSは、ブロック定義の「Styles & Scripts」欄にあります。
この欄をページへ出力するのはPro版の機能で、無料版には出力処理そのものがありません。
配布JSONを無料版に読み込むと、ソートも固定も効かない素の表になります。そのまま使うにはPro版が必要です。
まだLazy Blocksを使ったことがない方はLazy Blocks使い方完全ガイドから始めてみてください。
- 「複数の商品を比較して魅力を伝えきれない…」
- 「スマホで見ると表が崩れて読みにくい…」
- 「読者が知りたい順に並び替え（ソート）機能が欲しい…」
スマホでも崩れず、読者が自分で並べ替えられる比較表を作りました。
【完成デモと機能紹介】読者を迷わせない圧倒的な比較体験
今回作成したカスタムブロックは、商品の魅力を最大限に引き出すソート機能付きの比較表です。横スクロール対応でスマホでも見やすく、目を引くバッジや光るボタンアニメーションにより、読者のクリック意欲を強力に後押しします。
「どれが一番安いか」を読者自身に確かめてもらえるので、途中で離脱されにくくなります。
| アイテム / 製品 | 主要機能・特徴 | 詳細・チェック | ||
|---|---|---|---|---|
|
おすすめ第1位
架空プラグインA
|
無料
基本機能は
すべて無料 |
|
公式サイトへ （架空プラグインA・新しいタブで開く） | |
|
コスパ最強
架空プラグインB
|
¥9,800
買い切り型
追加費用なし |
|
詳細を見る （架空プラグインB・新しいタブで開く） | |
|
注目機能あり
架空プラグインC
|
¥500 / 月
いつでも解約可能なサブスク
|
|
無料体験する （架空プラグインC・新しいタブで開く） |
1. 読者が自由に並び替えできる「ソート機能」
評価順や価格順など、読者が求める基準で瞬時に比較表を並び替えることが可能です。
JavaScriptを内蔵しており、見出しをクリックするだけでシームレスにソートされるため、ユーザーの離脱を防ぎ、比較検討をスムーズに促します。
2. スマホ対応＆1列目固定の「ユーザビリティ」
情報量が多くなりがちな比較表ですが、横スクロールに対応し、さらに1列目のアイテム名と画像をSticky機能で常に固定表示させています。
スマホから閲覧するユーザーでも「今どの商品を見ているか」を見失わず、ストレスフリーな比較体験を提供します。
3. クリック率を底上げする「装飾やアニメーション」
「おすすめ第1位」などを直感的にアピールできる3種類のバッジ（リボン、プライスタグ、グラス）や、自動で光るシャインアニメーション付きのCTAボタンを標準搭載。
また、読者の現在位置を明確にする「ホバーインジケーター」機能も搭載。
アフィリエイトリンクへの誘導を視覚的に強化し、成約率の最大化に直結します。
「既存プラグイン」との差別化
テーマに標準搭載されている比較表ブロックや無料プラグインでは、「スマホでの1列目固定」や「読者が操作できる動的なソート機能」まで実装されていることは極めて稀です。
ソート処理の中身を見ると、地味に丁寧な作りになっています。
const aVal = parseFloat(aCol.getAttribute('data-sort-value')) || 0;
const bVal = parseFloat(bCol.getAttribute('data-sort-value')) || 0;
rows.sort((a, b) => (aVal > bVal ? 1 : -1) * direction);
rows.forEach(row => tbody.appendChild(row)); // 既存の行をそのまま並び替える「¥9,800」のような表示用の文字列をそのまま比較すると、桁数の違いで正しく並び替えられません。
このブロックは表示用テキストとは別にdata-sort-valueという数値専用の属性を持たせていて、そちらを基準にソートしています。
実際に「価格」の見出しをクリックすると、無料→¥500→¥9,800の順にきちんと並び替わります。
見出しはrole="button"とtabindexを付与し、Enterキーやスペースキーでも操作できるようにしてあります。
マウスを使わないユーザーにも配慮した作りです。
「横にスクロールできます」というヒント表示も、常に出すのではなくtable.scrollWidth > container.clientWidthを毎回チェックして、実際にはみ出しているときだけ表示する仕組みです。
配布用JSONファイルダウンロード
以下のリンクから、今回作成した「リッチ比較ボックス」の設計図（JSONファイル）をダウンロードしてください。
※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください
記事が見つかりませんでした。
なお、当サイトのリンク経由でPro版を購入された方には、Pro版で動くブロックをまとめた限定ページをお渡ししています。
【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」
ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。
一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。
当サイトのこのシリーズで配布しているブロックは、いずれもLazy Blocks Proが必要です。
コントロールの種類自体は無料版の範囲のものが中心なのですが、見た目と動きを作っているCSS・JSをブロック定義の「Styles & Scripts」欄に置いており、この欄をページへ出力できるのがPro版だけだからです。
無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあっても、出力する処理そのものが入っていませんでした。
無料版で読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。
CSSとJSはどちらも素のコードなので、テーマの「追加CSS」やフッターへ手で移し替えれば無料版でも再現はできます。
ただ「JSONを読み込むだけ」で済ませたいなら、Pro版が前提になります。
Pro版を買うほどではない、という場合はLazyblocks 無料版で使えるブロックテンプレート集をどうぞ。
あちらはCSS・JSをブロック本体に直接埋め込んであるので、無料版のままで動きます。
Pro版があると、条件分岐(Controls Conditions)でこの記事のような複雑なブロックの編集画面を整理できたり、CSSとJSをブロックごとに分離できたりします。
1つのブロックのためだけでなく、今後も自作ブロックを増やしていく予定なら検討する価値があります。
| プラン名 | ライセンス数 | 価格 (年額) | 主な機能 |
|---|---|---|---|
| Personal | 1 サイト | $49 （税込み$53.90） | すべてのPro機能 1年間の更新 |
| Freelancer | 20 サイト | $169 （税込み$185.90） | |
| Agency | 無制限 | $299 （税込み$328.90） |
Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。
デザインを導入する手順
導入は非常に簡単です。
「プラグインのじかん」からの提案
「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」
私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。
しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。
当サイト「プラグインのじかん」では、この記事のブロック以外にもカスタムブロックを作り続けています。
記事を1本ずつ回って集めなくても、Pro版で動くブロック36種を1か所にまとめてあります。
このページのリンク経由でPro版を購入された方に、そこを開くパスワードをお渡しする形です。
しかも渡して終わりではありません。新しく作ったブロックは同じ場所に追加していくので、一度受け取れば、あとから増えたぶんも追加料金なしで取りに来られます。
※今後も随時追加していきます。
また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！
さらに詳しく知りたい方へ
Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
