メリット・デメリット比較ボックス【配布/Lazy Blocks Pro】

アフィリエイト広告を利用しています

2026年5月15日2026年8月12日

このメリット・デメリット比較ボックスは、Lazy Blocks Proのコントロールを組んで作っています。初めての方はLazy Blocks使い方完全ガイドで無料版の基本を押さえてから読み進めるのがおすすめです。

「商品の良さと悪さを分かりやすく伝えたい…」
「テーマ標準のリストやボックス機能ではデザインが地味で弱い…」
「比較表を作るために重いショートコードプラグインは避けたい…」

プラグインを増やさずに済むよう、比較ボックスをブロックとして組みました。

Index

【完成デモと機能紹介】読者の決断を後押しする視覚的アプローチ

今回作成したカスタムブロックは、商品やサービスの「メリット」と「デメリット」を直感的に比較できる、洗練されたデザインのボックスです。

Lazy Blocks PROの「リピーター機能」を活用することで、項目数がいくつでも柔軟に追加・削除できるよう設計されています。

項目が3つでも7つでも、表が崩れる心配はありません。

メリット

価格が安い
知名度が高い
アップデートの頻度が多い

デメリット

操作性がよくない
機能が少ない
マニュアルが英語

1. スクロールに合わせたリッチなフェードインアニメーション

実装にはJavaScriptのIntersectionObserverを使っています。中身はこれだけです。

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-revealed');
      obs.unobserve(entry.target); // 一度発火したら監視をやめる
    }
  });
}, { threshold: 0.15 });

ポイントはthreshold: 0.15とobs.unobserve()の2つです。

threshold: 0.15は「ボックスが画面内に15%入った時点で発火する」という意味です。
0（少しでも見えたら）や1（完全に見えたら）だと感覚的に早すぎたり遅すぎたりしたので、実際に何度もスクロールして試した上でこの数値に落ち着きました。

unobserve()を呼んでいるのは、一度表示されたボックスに何度もイベントを発火させないための省エネ対策です。
スクロールのたびに判定するscrollイベント監視より、この書き方のほうが動作が軽いというのも採用した理由です。

2. リピーター機能で項目を無限に追加可能（実は無料版のLazy Blocksだけで動きます）

「リピーター（Repeater）」コントロールを使用しています。メリットやデメリットの数が3つでも5つでも、ブロックエディタ上から「＋」ボタンをクリックするだけで簡単に行を追加でき、コーディングの知識は一切不要です。

正直に書いておくと、このブロックが使っているコントロールはPanel・Repeater・Rich Text・Textの4種類だけです。
ただし、このうちPanelはPro版限定のコントロールでした。

以前ここに「このブロック単体を動かすだけならPro版のライセンスは不要です」と書いていました。これは誤りでした。訂正します。

理由は2つあります。ひとつは上のPanel。
もうひとつは、このボックスの配色やレイアウトを決めているCSSを、ブロック定義の「Styles & Scripts」欄に置いていることです。

無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあるものの、ページへ出力する処理は無料版に存在しませんでした。
つまり無料版で読み込むと、箇条書きが2つ並ぶだけの見た目になります。

導入のハードルを実際より高く見せたくない、という気持ちで前回書き換えたのですが、確認が足りていませんでした。
正確には、このJSONをそのまま使うにはPro版が必要です。

（条件分岐やパネルでの整理など、Pro版があると編集画面まわりが快適になる話はLazy Blocks使い方完全ガイドにまとめています）

もう1つ、デモ画面だけでは気づきにくい仕様があります。

実はこのブロックにはbox_title（ボックス全体の見出し）・pros_label（メリット列の見出し文言）・cons_label（デメリット列の見出し文言）という3つのTextコントロールも用意されています。
デフォルトでは「メリット」「デメリット」という文言ですが、投稿編集画面の右サイドバー（インスペクター）からここを書き換えるだけで、「良い点」「気になる点」のように自分の言葉に変更できます。

3. スマホ対応（レスポンシブ）と洗練されたグラデーションUI

PCでは左右に並ぶ2カラムですが、スマートフォン（画面幅767px以下）では自動で縦並びに切り替わるようCSSで調整しています。

ヘッダーとアイコンにはグラデーションを使い、マウスを乗せたときの動き（transform: translateX(8px)）も入れてあります。

「既存プラグイン」との差別化

既存のテーマに備わっている標準ブロックや無料の装飾プラグインでは、メリットとデメリットを並べる際に「カラムブロック」と「リストブロック」を組み合わせる必要があり、余白の微調整やスマホでのレイアウト崩れが起きやすいという難点があります。

しかし、Lazy Blocks PROで作成したこのカスタムブロックなら、専用の入力欄にテキストを打ち込むだけで、SVGアイコン付きの美しいリストが自動生成されます。

さらにRich Textコントロールを採用しているため、リスト内の一部の単語だけ太字にするといった文字装飾も自由自在です。

実際のコードを覗いてみる

ダウンロードしたJSONをインポートすれば動きますが、中身がブラックボックスのままだと不安な方もいると思うので、フロント出力に使っているPHPコードをそのまま載せておきます。

<?php
$title      = $attributes['box_title'] ?? '';
$pros       = $attributes['pros_list'] ?? [];
$cons       = $attributes['cons_list'] ?? [];
$pros_label = !empty($attributes['pros_label']) ? $attributes['pros_label'] : 'メリット';
$cons_label = !empty($attributes['cons_label']) ? $attributes['cons_label'] : 'デメリット';
?>

<div class="pcb-box pcb-reveal-hook">
    <?php if ( !empty($title) ) : ?>
        <div class="pcb-title"><?php echo esc_html($title); ?></div>
    <?php endif; ?>

    <div class="pcb-card">
        <div class="pcb-header">
            <div class="pcb-h-item"><?php echo esc_html($pros_label); ?></div>
            <div class="pcb-h-item"><?php echo esc_html($cons_label); ?></div>
        </div>
        <!-- pros/cons それぞれ foreach でリピーターの行を回してliを出力 -->
    </div>
</div>

見ての通り、特別な仕掛けはありません。

$attributes['box_title']のように、Controlsタブで設定したコントロールのnameが、そのまま連想配列のキーになって渡ってくるだけです。
ここが分かっていると、Lazy Blocksで自作ブロックを作るときの取っ掛かりになると思います。

コントロールの型ごとの詳しい仕様はLazy Blocks使い方完全ガイドにまとめています。

配色を自分のブログに合わせて変える

ヘッダーとカード背景のグラデーションは、CSSに直書きした固定値です。
編集画面から色を選ぶUIは用意していません。

変えたい場合は、Lazy Blocks管理画面でこのブロックを開き、「Style (Block)」タブ内の次の2箇所を書き換えてください。

.pcb-header { background: linear-gradient(90deg, #61b28f 0%, #61b28f 35%, #e07a7a 65%, #e07a7a 100%); }
.pcb-body { background: linear-gradient(90deg, #f0f9f6 0%, #f0f9f6 35%, #fff5f5 65%, #fff5f5 100%); }

#61b28f（緑寄り＝メリット側）と#e07a7a（赤寄り＝デメリット側）の2色を、サイトのテーマカラーに合わせて置き換えるだけです。

.pcb-body側は、同じ位置に薄い色（背景用）を置くのがコツです。
ここだけ濃い色にすると文字が読みにくくなるので注意してください。

試しに、緑・赤の配色を青×紫のグラデーションに変えてみたのが以下です。

CSSの2行を書き換えるだけで、雰囲気がここまで変わります。

現状の制限・非対応な点

良い面ばかり書いても参考にならないので、使ってみて分かった制限も正直に書いておきます。

列数は2列固定です。「メリット・デメリット・注意点」のような3列構成にしたい場合は、PHPのpcb-body内にもう1列分のマークアップを追記し、CSSの.pcb-header・.pcb-bodyのグラデーション区切り位置（35%/65%の数値）も3等分に調整し直す必要があります。
アイコンの形（チェック/バツ）は固定です。インラインSVGで直書きしているため、形を変えたい場合はPHPコード内のSVGタグそのものを書き換える必要があります。
フェードインアニメーションは1回きりです。先述の通り一度表示されたらunobserve()で監視を止めるため、ページ内を上下にスクロールし直しても再アニメーションはしません（意図的な仕様です）。

配布用JSONファイルダウンロード

以下のリンクから、今回作成した「メリット・デメリット比較ボックス」の設計図（JSONファイル）をダウンロードしてください。

pros-cons-box ダウンロード

※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください

記事が見つかりませんでした。

なお、当サイトのリンク経由で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 を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

Yuu|WP歴7年

個人でWordPressブログを運営しています。WordPress歴7年。実際に契約・利用しているConoHa WINGとSWELLを中心に、ブログの開設、表示・編集環境の改善、SEO、アフィリエイト、AIを使った制作効率化を検証しています。

公式情報を確認するだけでなく、実機で試した結果、うまくいかなかった点、向かないケースも含めて共有します。読者が遠回りせず、自分のブログで次の一手を選べる情報を届けることが目標です。