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

読者の迷いをスパッと解決！メリット・デメリット比較ボックスを実装しよう【Lazy Blocks Pro】

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

そんな悩みを持つブログ運営者のために、今回は Lazy Blocks PRO をフル活用した、メリット・デメリット比較ボックスの実装方法を詳しく紹介します。

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

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

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

あなたのブログにも簡単に導入することが可能です。

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

JavaScriptのIntersectionObserverを活用し、画面にボックスが入った瞬間にふわっと浮かび上がるアニメーション（is-revealedクラスの付与）を実装しています。読者の視線を自然に惹きつけ、精読率を向上させます。

2. Pro版のリピーター機能で項目を無限に追加可能

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

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

PCでは左右に並ぶ見やすい2カラムレイアウトですが、スマートフォン閲覧時（画面幅767px以下）には自動で縦並びになるようCSSで調整されています。また、ヘッダー部分やアイコンには視覚的に美しいグラデーションカラーを採用し、マウスホバー時のなめらかな動き（transform: translateX(8px)）も実装済みです。

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

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

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

さらにリッチテキストを採用しているため、リスト内での文字装飾も自由自在に行えるのが、PRO版ならではの痒い所に手が届く大きな優位性です。

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

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

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

あわせて読みたい

LazyBlocks Proで使えるオリジナルデザイン集 \すべてLazy Blocks Proで実装できます/ お使いのWordPressテーマ関係なく、Lazyblocks Proで実装できるデザインをまとめました。 ※このページはPRを含みます わずか数...

【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」

ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。

一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。

このデザインをあなたのブログで実装するには、Lazy Blocks PRO が必要です。

Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。

STEP 01

プラグインの有効化

1. Go Proをクリック
Lazy Blocks公式サイトのヘッダーまたはページ内にある「Go Pro」ボタンをクリックします。

2. プランを選択して決済
用途に合わせてPersonal ($49)、Freelancer、Agencyから選択し、クレジットカードやPayPalで決済を完了させます。

1サイトだけの運用ならPersonalがおすすめです。

公式サイトへ

1 / 2

STEP 02

ダウンロード & 入手

1.ファイルを入手
決済完了後の画面、または届いたメールのリンクから「lazy-blocks-pro.zip」をダウンロードします。

2.WPへアップロード
WP管理画面「プラグイン ＞ 新規追加 ＞ アップロード」からZIPを選択してインストール・有効化します。

1 / 2

STEP 03

ライセンス有効化

1.Updatesメニューへ
インストール後、管理画面のメニューにある Lazy Blocks ＞ Updates を開きます。

2.キーを入力して完了
購入時のメールに記載されている「License Key」をコピー＆ペーストし、有効化ボタンを押せばPro版の機能が解放されます。

デザインを導入する手順

導入は非常に簡単です。

STEP 01

Updetesを開く

WordPress管理画面から 「Lazy Blocks」＞「Export/Import」 を開きます。

STEP 02

JSONファイルをインポート

「Import」 セクションで、先ほどダウンロードしたJSONファイルを選択、もしくはドラッグ＆ドロップします。

STEP 03

プラグインの有効化

「Import」 ボタンをクリックすれば、ブロック一覧にブロックが追加されます。

「プラグインのじかん」からの提案

「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」

私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。

しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。

当サイト「プラグインのじかん」では、今回紹介したボタン以外にも、成約率を上げるための高品質なカスタムブロックを多数公開しています。 PRO版を1つ持っておくだけで、これらのデザインがすべてあなたのサイトで使い放題になるので、ぜひチェックしてみてください。

他の Lazy Blocks PRO 専用デザインを見てみる

※今後も随時追加していきます。

また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！

• お問い合わせはこちら

さらに詳しく知りたい方へ

Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。

あわせて読みたい

Lazy Blocksの使い方！自作ブロックでHTML埋め込みを効率化 WordPressで記事を執筆していると、どうしても以下のような悩みが出てきます。 大手コーポレートサイトのような、リッチで充実した見た目にしたい。 ありきたりなデザイ...