「手順を解説しても読者が途中で離脱してしまう…」 「テーマ標準のステップブロックはデザインが地味で物足りない…」 「解説用の画像を複数見せたいが、縦長になりすぎてしまう…」
そんな悩みを持つブログ運営者のために、今回は Lazy Blocks PRO をフル活用した、ステップブロックの実装方法を詳しく紹介します。
【完成デモと機能紹介】スクロール連動アニメーションとスライダー機能を備えた美しい手順解説
今回作成したカスタムブロックは、読者のスクロールに合わせて各ステップがフワッと浮かび上がるリッチなタイムライン型デザインです。
解説用の画像を複数登録すれば自動的にスライダー化されるため、スペースを節約しながら情報量の多いマニュアルやチュートリアルを直感的に伝えることができます。
あなたのブログにも簡単に導入することが可能です。
1. スクロールに連動してハイライトされるアニメーション機能
読者がページをスクロールし、対象のステップが画面内に入ると、自動的にカードが浮き上がり、ノード（丸いアイコン）に色がつくアニメーションを実装しています。現在どの手順を読んでいるのかが視覚的に際立ち、読者の集中力を途切れさせません。 [ディティールでデザイン/画像を挿入]
2. 複数画像は自動でスライダー化！無駄なスクロールを削減
1つのステップ内に複数の画像を登録した場合、自動的に矢印ボタンとカウンター付きのスライダー（カルーセル）に切り替わります。スマホの小さな画面でも、横スワイプでサクサク手順画像を確認できるため、縦に間延びした読みにくい記事になるのを防ぎます。
3. ステップごとのテーマカラー指定＆充実の補足要素
ステップごとにアクセントカラーを自由に変更できるため、警告事項には赤、完了イメージには青など、直感的なデザインが可能です。
さらに、ワンポイントの「アドバイス（補足情報）」や、外部サイトへ誘導する「CTAボタン」もブロックの設定からサクッと追加できます。 [ディティールでデザイン/画像を挿入]
タイトル
「既存プラグイン」との差別化
一般的なテーマ標準のステップブロックは、単なるテキストとアイコンの羅列になりがちです。
また、スライダー機能を追加しようとすると、別途ギャラリープラグインを導入してショートコードを埋め込むなどの手間がかかり、レイアウト崩れの原因にもなります。
Lazy Blocks PROを活用した今回のブロックなら、リピーター機能を使って必要な数だけステップを増減させつつ、その中に「スライダー化するギャラリー機能」や「専用のアドバイス枠」「CTAボタン」を全て内包して出力できます。
軽量なIntersection Observer APIによるスクロール検知やネイティブスクロールを利用したスライダーなど、重い外部ライブラリに依存しないコードで実装されているため、
サイトの表示速度を犠牲にすることなく、専用のSaaSツール顔負けのチュートリアルUIをWordPress上で完結できるのが最大の強みです。
配布用JSONファイルダウンロード
以下のリンクから、今回作成した「ステップブロック」の設計図（JSONファイル）をダウンロードしてください。
※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください
【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」
ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。
一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。
このデザインをあなたのブログで実装するには、Lazy Blocks PRO が必要です。
| プラン名 | ライセンス数 | 価格 (年額) | 主な機能 |
|---|---|---|---|
| Personal | 1 サイト | $49 （税込み$53.90） | すべてのPro機能 1年間の更新 |
| Freelancer | 20 サイト | $99 （税込み$108.90） | |
| Agency | 無制限 | $199 （税込み$218.90） |
Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。
プラグインの有効化
Lazy Blocks公式サイトのヘッダーまたはページ内にある「Go Pro」ボタンをクリックします。
2. プランを選択して決済
用途に合わせてPersonal ($49)、Freelancer、Agencyから選択し、クレジットカードやPayPalで決済を完了させます。
ダウンロード & 入手
決済完了後の画面、または届いたメールのリンクから「lazy-blocks-pro.zip」をダウンロードします。
2.WPへアップロード
WP管理画面「プラグイン ＞ 新規追加 ＞ アップロード」からZIPを選択してインストール・有効化します。
ライセンス有効化
インストール後、管理画面のメニューにある Lazy Blocks ＞ Updates を開きます。
2.キーを入力して完了
購入時のメールに記載されている「License Key」をコピー＆ペーストし、有効化ボタンを押せばPro版の機能が解放されます。
デザインを導入する手順
導入は非常に簡単です。
Updetesを開く
JSONファイルをインポート
プラグインの有効化
「プラグインのじかん」からの提案
「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」
私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。
しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。
当サイト「プラグインのじかん」では、今回紹介したボタン以外にも、成約率を上げるための高品質なカスタムブロックを多数公開しています。 PRO版を1つ持っておくだけで、これらのデザインがすべてあなたのサイトで使い放題になるので、ぜひチェックしてみてください。
他の Lazy Blocks PRO 専用デザインを見てみる
※今後も随時追加していきます。
また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！
さらに詳しく知りたい方へ
Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
