このアプリストア風レビューボックスは、Lazy Blocksのコントロールを組んで作っています。
実装コードを見返してみると、Posts・Taxonomy・Users・Units・Link・Token Fieldといった分かりやすいPro限定タイプは使っていません。
Text・Textarea・Rich Text・Repeater・Toggle・Number・Color。コントロールの種類だけなら無料版の範囲です。
とはいえ、それで無料版でも動くかというと、動きません。
星の描画も「続きを読む」の開閉も、ブロック定義のCSS/JS欄（Styles & Scripts）に書いてあります。
無料版プラグインのソースを確認したところ、この欄を保存する処理はあっても、ページへ出力する処理は入っていませんでした。出力はPro版の機能です。
加えてこのブロックはPanelと条件分岐（Controls Conditions）も使っていて、こちらもPro版の機能でした。
以前「無料版の範囲で組めるブロックです」と書いていた点を訂正します。
導入がまだの方は先にLazy Blocks使い方完全ガイドで基本を確認しておくとスムーズです。
- 「ただのテキストレビューでは読者の目に留まらない…」
- 「公式サイトのような洗練された口コミデザインを作りたい」
- 「構造化データの設定や長文の折りたたみまで手が回らない…」
レビューに要るものをひととおり詰め込んだボックスを用意しました。
【完成デモと機能紹介】読者の信頼を勝ち取る洗練されたUI
今回作成したカスタムブロックは、アプリストアで見かけるような直感的で美しいレビュー表示を再現したものです。
星評価や認証バッジによる権威性の担保に加え、長文をスマートに格納する「続きを読む」機能や、良い点・悪い点の箇条書きリストまで、レビューに必要な全機能を網羅しています。
レビュー記事の説得力を、レイアウトの側から底上げできます。
下の3枚は、このブロックで実際に何が入力・出力できるかを示すための表示サンプルです。
「WP構築代行屋」「エンジニア」のような肩書きと本文は、Lazy Blocksの各コントロール（星評価・バッジ・良い点/悪い点リストなど）がどう反映されるかを見せるために私が書いたサンプルテキストで、実在する利用者の声ではありません。
あなたのブログで使うときは、実際の利用者から集めた本物の声か、あなた自身の一次情報に差し替えて使ってください。
条件分岐とパネル化で、入力画面が劇的に見やすくなる
2026/05/01例えば「リンクボタンを設置する」にチェックを入れた時だけURL入力欄を表示させたり、大量の入力項目をパネルで折りたたんでグループ化できます。これのおかげで、納品先のクライアントが迷わずに操作できるスッキリした入力フォーム（Inspector）が作れるようになりました。
- Controls Conditionsで不要な入力欄を隠せる
- PanelsやDividersでブロックのサイドバーUIを整理できる
- Pro版の機能はドキュメントが英語のみ
SS/JSの最適化とプレビュー高速化が素晴らしい
2026/05/02また、「Blocks Preloading」機能により、記事の編集画面を開いた瞬間にブロックのプレビューが即座に表示されるため、複雑なカスタムブロックを作ってもGutenbergエディタがサクサク動きます。
- ブロック使用時のみCSS/JSを読み込む自動最適化
- Blocks Preloadingでエディタのプレビュー表示が爆速
- Code Editorコントロール追加でコード入力が快適
- サブスクリプション（年額制）なので継続費用がかかる
関連記事ブロックの自作とSEO連携が強力
2026/05/03さらに、Yoast SEOやRank MathといったSEOプラグインのコンテンツ分析に、カスタムブロック内のテキストを認識させる「SEO Enhancements」機能が備わっているため、検索順位を気にするブロガーやメディア運営には必須の機能が揃っています。
- Postsコントロールで「記事の検索・選択UI」が作れる
- Yoast SEOやRank MathのSEOスコア分析に完全対応
- UnitsコントロールでCSSの単位（px, emなど）が指定可能
- 複数サイトの運営だと費用がかかる
1. 権威性を演出する「認証バッジ」と「星評価」
星の数はCSSのグラデーション塗り分けで表現しています。
<span class="rv-stars-fill" style="color:{{star_color}} !important;">★★★★★</span>★★★★★背景色のグレーの★5個の上に、色付きの★5個を--rating変数の割合分だけ重ねて表示しています。
だから0.5刻みの評価も、画像を用意することなくCSSだけで表現できます。
認証バッジはshow_badgeというToggleコントロール1つで表示・非表示を切り替えます。
バッジのテキストとアイコン（絵文字）は自由入力なので、「✓ 動作確認済み」のように用途に合わせて書き換えられます。
2. 長文もスッキリ収まる「続きを読む」開閉機能
この機能、実は「常に3行で省略する」という単純な作りではありません。
if (text.scrollHeight <= text.offsetHeight + 2) {
btn.classList.add('is-hidden'); // 短文なら「続きを読む」ボタン自体を消す
return;
}CSSで本文を3行にクランプ（-webkit-line-clamp）した上で、JavaScriptが実際の文章の高さ(scrollHeight)と表示上の高さ(offsetHeight)を比較しています。
短い文章で3行に収まっている場合は、そもそも「続きを読む」ボタンごと非表示にする分岐が入っています。
「短いレビューなのに、押しても何も起きないボタンだけがぽつんと残る」という、地味に気になる見た目のバグを防ぐための一手間です。
3. メリット・デメリットを一目で伝える「良い点・悪い点まとめ」
良い点・悪い点のリストは1本のRepeaterコントロールで管理しています。
行ごとに「good」か「bad」かを選ぶSelectコントロールを持たせていて、その値をそのままCSSクラス名(rv-item--good / rv-item--bad)に使っています。
良い点用・悪い点用で別々のRepeaterを2つ用意する作り方もできますが、1本にまとめて種別だけ切り替える方が、後から並び替えたいときに1つのリスト内でドラッグするだけで済んで楽です。
実際に「続きを読む」を押すとこうなります。
「既存プラグイン」との差別化
一般的なテーマの標準ブロックや無料の口コミプラグインでは、デザインがテーマの型に縛られがちです。
このブロックは自分でPHPを書いているので、レイアウトもSchemaの出力内容も自由に決められます。
出典元へのリンクには自動でrel="noopener noreferrer nofollow"を付与しています。
「レビューボックスに貼ったリンクに、うっかりSEO評価を渡してしまう」という事故を防ぐための処理です。
このブロックにはitem_nameを入力するとGoogleのReviewリッチリザルト向けのJSON-LDを自動出力する機能もあります。
ただし実際のユーザーから集めた本物のレビューでない限り、この機能は使わないでください。架空の人物名や自作自演のレビューにReview構造化データを付けるのは、Googleのスパムポリシーで明確に禁止されている「不正なレビュー」に該当します。
この記事のサンプルカードでは、そのリスクを避けるためitem_nameを意図的に空にし、構造化データが出力されない状態にしています。
配布用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 を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
