WordPressで記事を執筆していると、どうしても以下のような悩みが出てきます。
- 大手コーポレートサイトのような、リッチで充実した見た目にしたい。
- ありきたりなデザインではなく、読者の目を惹く独自のデザインを導入したい。
これらは自己満足の側面もありますが、一番の目的は「読者を飽きさせず、記事の離脱を防ぐこと」ですよね。
しかし、これを実現するためにはHTMLとCSSの実装が避けて通れません。 今の時代、生成AIにお願いすれば、以下のようなカウントダウンタイマーのHTMLコードも一瞬で作成してくれます。
Yuu今の時代、生成AIにHTMLコードを作成してもらうのも一瞬です。このカウントダウンも生成AIに作成してもらいました。
問題は、「作ってもらった後の編集」です。 変更するたびにいちいちHTMLコードを開いて対象箇所の数値を打ち直すのは…正直、非常に面倒で非効率ですよね。
そこで本記事では、複雑なHTMLデザインをシンプルな「入力フォーム」に変換し、いつでもWordPressのブロックとして呼び出せる神プラグイン「Lazy Blocks」をご紹介します。
Lazy Blocksの概要
Lazy Blocks
| 開発元 | Devoice LLC |
|---|---|
| 価格 | 無料または$49~$299/年 |
| 公式サイト | https://www.lazyblocks.com/ |
- ◯ HTMLのデザインテンプレートをフォームで入力できる。
- ◯ デザインのカスタマイズにほかのプラグインが必要なくなる。
- × サイト内データと連動や条件分岐などの機能が有料プランのみ
- × 無料版はHTMLコードのエディタのみ
検証結果スコア
詳細な検証結果
Lazy Blocksはこんな人におすすめ！
- ✓HTMLデザインをフォーム化したい方
- ✓WordPressのエディター機能を拡張をしたい方
こちらもLazy Blocksを使って作成しています。
＼ 無料お試し ／
Lazy Blocks最大のメリットはコードの「入力フォーム化」
- HTMLコードのデザインを「入力フォーム化」する。
-
Lazy Blocksを導入する最大のメリットは、HTMLコードを「入力フォーム化」できることです。
一度テンプレートを作ってしまえば、あとは文字や数値をフォームに入力するだけ。誤ってHTMLタグを消して表示が崩れる心配も、コードの羅列に目を凝らすストレスもゼロになります。
作成したフォームは、独自のカスタムブロックとして投稿画面に配置されます。 普段お使いのブロック群のなかに、自分専用のオリジナルブロックを並べることができます。
【図解】3ステップで完了！Lazy Blocksの基本設定と使い方
ここからは、Lazy Blocksの具体的な設定方法を解説します。
今回は例として、項目付きの「レビュースター」ブロックを作成してみましょう。
「Add Block」→「Basic」→「Continue」をクリックし、ブロックの基本情報を設定します。
- Title: （管理用のブロック名です）
- Category: どのブロック群に配置するか指定します（よく使うカテゴリでOK）
- Keywords: ショートカット検索で呼び出すキーワードを設定します
- Description: 説明文（空欄でも問題ありません）
次に「Contents control」から、入力させたい項目（コントロール）を追加します。 今回は「評価項目の名前」と「星の数（スコア）」を入力できるように設定します。
- Label（ラベル）
-
投稿画面に表示される案内名
（例：「評価項目」「スコア」） - Name（ネーム）
-
コード内で使う識別子。半角英数字で設定します
（例：label_name、star_score） - Type（タイプ）
-
入力形式（例：星評価なら「Number」など、目的に合わせて選択）
複数の項目を作成したい場合は、この工程を繰り返してコントロールを増やしていきます。
最後に「Code」タブに切り替え、読者が見る表側の画面（フロントエンド）での見え方を設定します。 PHPの複雑な知識は不要です。HTMLの中に {{設定したName}} を入れるだけで、フォームの入力内容が反映されます。
block.html記載コード
<style>
/* --- スター専用ブロック：ベースデザイン --- */
.lb-star-box {
background: #fff;
border: 2px solid #f0f8ff;
border-radius: 8px;
padding: 25px 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
margin-bottom: 2em;
max-width: 450px; /* 広がりすぎないよう幅を制限 */
font-family: sans-serif;
}
.lb-s-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
font-size: 1.05rem;
font-weight: bold;
--star-color: #ffc107; /* デフォルトの色（イエロー） */
}
.lb-s-row:last-child { margin-bottom: 0; }
.lb-s-label { flex: 1; color: #444; }
/* ====================================================
★条件分岐：スコアが4以上の時だけパッションピンクに変更★
==================================================== */
/* data-scoreが4か5で始まる（4, 4.0, 4.5, 5, 5.0）時に発動 */
.lb-s-row[data-score^="4"],
.lb-s-row[data-score^="5"] {
--star-color: #ff1493; /* パッションピンク */
}
/* ==================================================== */
/* 星と数値をまとめるラッパー */
.lb-s-icon-wrap {
display: flex;
align-items: center;
}
/* 星アイコン（小数対応のグラデーション） */
.lb-s-icon {
--percent: calc(var(--rating) / 5 * 100%);
position: relative;
display: inline-block;
font-size: 1.4rem;
line-height: 1;
letter-spacing: 2px;
background: linear-gradient(90deg, var(--star-color) var(--percent), #e4e5e9 var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 2;
}
.lb-s-icon::before { content: '★★★★★'; }
/* ====================================================
★アニメーション：4以上の時だけ波紋（リップル）を発生★
==================================================== */
@keyframes star-ripple {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
/* 星の裏側に複製した星を配置し、拡大させながら消すことで波紋を表現 */
.lb-s-row[data-score^="4"] .lb-s-icon::after,
.lb-s-row[data-score^="5"] .lb-s-icon::after {
content: '★★★★★';
position: absolute;
left: 0;
top: 0;
background: inherit; /* 表の星と同じグラデーションを継承 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: -1;
animation: star-ripple 1.5s infinite ease-out;
pointer-events: none;
}
/* ==================================================== */
/* 数値テキスト（星の色と自動連動します） */
.lb-s-num {
width: 45px;
text-align: right;
color: var(--star-color);
margin-left: 12px;
font-size: 1.15rem;
font-weight: 900;
}
/* スマホ用最適化 */
@media (max-width: 650px) {
.lb-star-box { max-width: 100%; padding: 20px; }
.lb-s-icon { font-size: 1.3rem; letter-spacing: 1px; }
}
</style>
<div class="lb-star-box">
{{#if label_1}}
<div class="lb-s-row" data-score="{{score_1}}">
<span class="lb-s-label">{{label_1}}</span>
<div class="lb-s-icon-wrap">
<span class="lb-s-icon" style="--rating: {{score_1}};"></span>
<span class="lb-s-num">{{score_1}}</span>
</div>
</div>
{{/if}}
{{#if label_2}}
<div class="lb-s-row" data-score="{{score_2}}">
<span class="lb-s-label">{{label_2}}</span>
<div class="lb-s-icon-wrap">
<span class="lb-s-icon" style="--rating: {{score_2}};"></span>
<span class="lb-s-num">{{score_2}}</span>
</div>
</div>
{{/if}}
{{#if label_3}}
<div class="lb-s-row" data-score="{{score_3}}">
<span class="lb-s-label">{{label_3}}</span>
<div class="lb-s-icon-wrap">
<span class="lb-s-icon" style="--rating: {{score_3}};"></span>
<span class="lb-s-num">{{score_3}}</span>
</div>
</div>
{{/if}}
{{#if label_4}}
<div class="lb-s-row" data-score="{{score_4}}">
<span class="lb-s-label">{{label_4}}</span>
<div class="lb-s-icon-wrap">
<span class="lb-s-icon" style="--rating: {{score_4}};"></span>
<span class="lb-s-num">{{score_4}}</span>
</div>
</div>
{{/if}}
{{#if label_5}}
<div class="lb-s-row" data-score="{{score_5}}">
<span class="lb-s-label">{{label_5}}</span>
<div class="lb-s-icon-wrap">
<span class="lb-s-icon" style="--rating: {{score_5}};"></span>
<span class="lb-s-num">{{score_5}}</span>
</div>
</div>
{{/if}}
</div>画面右上の保存ボタンをクリックして保存します。
これで準備完了です！投稿編集画面を開き、作成した「review stars」ブロックを呼び出してみてください。フォームに入力するだけで、見事にデザインが反映されるはずです。
Freeプランと有料プラン（Pro）の比較：どちらを選ぶべきか？
無料版でも「オリジナルブロックを作る」という基本目的は十分に達成できます。
しかし、年額$49（約7,500円 / 月額換算で約600円程度）を投資してPro版にアップグレードすることで、「サイトの表示速度（SEO評価）」と「毎日の執筆スピード」を極限まで高めるための強力な環境が手に入ります。
では、具体的にPro版の機能がどう優れているのか。その前に、まずは「無料版に潜む致命的な落とし穴」についてお話しさせてください。
無料プランで作り込む前に知るべき「重大な落とし穴」
「基本機能がこれだけ使えるなら、まずは無料でガシガシ作っていこう」 そう考えた方、少しだけお待ちください。
実は、無料プランのまま凝ったデザインブロックを量産してしまうと、後々サイトに致命的なダメージを与え、取り返しのつかない修正地獄に陥る可能性があります。
弱点：CSSの重複読み込みが「サイトスピード」を遅くする
無料プラン最大のネックは、デザインを整えるCSSを、HTMLと一緒に出力エリアへ「直書き（混在）」しなければならない点です。
例えば作成したカスタムブロックを1つの記事内で3回使ったとします。すると、全く同じCSSコードが3回繰り返し読み込まれてしまいます。
これはブラウザに無駄な処理を強要し、ページ表示の大幅な遅延を引き起こします。表示速度の低下は読者の離脱を招くだけでなく、SEOにおいても致命的なマイナス評価を受けてしまうのです。
後からのプラン切り替えは「地獄の手作業」に…
「とりあえず無料で始めて、サイトが重くなってきたら有料版に切り替えればいいや」と思うかもしれませんが、ここに最大の落とし穴があります。
大量にブロックを作った後にPro版へ移行すると、「過去に作った全ブロックの設定を開き、直書きしたCSSを一つひとつ手作業で切り離して専用エリアに移し替える」という果てしない修正作業が発生します。
本気でサイトのデザインを構築し、長期的な資産として育てていくなら、無駄な修正時間をゼロにするためにも最初からProプランで運用することを強く推奨します。
あくまでもFreeプランは操作性やできることの確認にとどめておきましょう！
投資価値あり！Lazy Blocks Pro版を選ぶべき「5つの決定的理由」
本格的にオリジナルブロックを運用するなら、Pro版（年額$49〜）への投資は一瞬で回収できます。無料版にはない、圧倒的な5つのメリットを解説します。
1. 【最重要】サイトスピードを守る「CSS / JSの分離」
これがPro版にする最大の理由にして、必須の機能です。Pro版ならCSSとHTMLを入力するエリアを明確に分けられます。
CSSを専用エリアに分離することで、同じページ内で何度ブロックを使っても、CSSの読み込みは「最初の1回だけ」で済みます。無駄なコードの重複がなくなり、SEOに直結するサイトスピードを最速のまま維持できます。
2. 入力画面が圧倒的にスマートになる「条件分岐」
「特定の項目にチェックを入れた時だけ、次の詳細入力欄を表示させる」といった、賢い条件分岐が設定できるようになります。入力画面が無駄に縦に長くならず、毎日の記事執筆にかかるストレスが激減します。
3. 内部リンク作業が捗る「過去記事・カテゴリー連携」
「おすすめ記事カード」を作る際など、Pro版なら入力項目から直接「サイト内の過去記事」や「カテゴリー」を検索して呼び出せます。いちいち別タブを開いてURLを探し、コピペする面倒な手間から完全に解放されます。
4. 執筆画面がごちゃつかない「UI整理機能」
こだわりのブロックを作るほど設定項目（入力欄）は増えていきます。Pro版なら、右側のインスペクターに「区切り線」を入れたり、開閉できる「アコーディオンパネル」でスッキリ整理可能です。 外注ライターさんに執筆を依頼する際も、マニュアル不要で迷わず使ってもらえる美しい操作画面を作れます。
5. 自作ブロックも正確に評価される「SEOプラグイン連携」
Rank MathやYoast SEOといった有名なSEOプラグインを使っている場合、無料版で作ったテキストはSEOの文字数カウント等にうまく反映されないことがあります。 Pro版には連携機能が備わっているため、自作ブロック内のテキストもしっかりとSEO評価の対象として正確に解析してくれます。
＼ 自作ブロックを作成 ／
なぜ数ある中から「Lazy Blocks」なのか？生成AIとの最強タッグ
WordPressでカスタムブロックを追加できるプラグインは他にもあります。例えば「Useful Blocks」なども素晴らしいプラグインですが、「あともう少しデザインを変えたい」「独自の入力項目を追加したい」と思った時に、プラグイン側の仕様に制限されてしまうことも少なくありません。
「ここがこうだったらもっと使いやすいのに」という細かい理想やこだわりを、100%そのまま形にして実現できるのが「Lazy Blocks」最大の魅力です。
「生成AI × Lazy Blocks」で高額な外注費をゼロに！
「でも、HTMLやCSSなんて書けないし…」と不安に思うかもしれません。しかし、今は生成AIが当たり前のように使える時代です。
ChatGPTやClaudeに「こんなデザインのブロックを作りたいからコードを書いて」と指示を出せば、必要なコードは一瞬で生成してくれます。 あとはそれをLazy Blocksにコピペし、入力フォーム化するだけ。
従来なら、こだわりの独自ブロックを作ろうとすれば数万円の料金を支払ってWebデザイナーやコーダーに外注するしかありませんでした。 しかし今の時代なら、「AIのサポート」と「Lazy Blocks」を掛け合わせることで、外注費用を一切かけずにプロ並みのオリジナルブロックを自作できるのです。
まとめ：年額49ドルの投資価値は十分にあるか？
Lazy BlocksのPro版は、1サイトで利用できる「Personalプラン」が年額$49（月に換算すると約4ドル強）です。
毎年のランニングコストにはなりますが、以下のメリットが得られると考えればどうでしょうか。
- サイトの表示速度を維持し、SEOのマイナス評価を完全に防ぐ
- 「CSS切り離し」という後々の地獄の修正作業を回避する
- 日々の記事作成・装飾にかかる時間を劇的に短縮する
- 生成AIとの組み合わせで、数十万円分の外注費をゼロにする
外注費の削減効果や、今後の運用・執筆にかかる「時間」を考えれば、ブログで収益化を目指す上で非常にコストパフォーマンスの高い、賢い投資であると断言できます。
すべてのProプランには「14日間の全額返金保証」がついています。 もし使ってみて自分の環境に合わなかった場合はリスクなしでキャンセルできるので、まずはPro版の「圧倒的な執筆の快適さ」を実際に体感してみてください。
ぜひLazy Blocksを導入して、読者にもGoogleにも評価される、快適で魅力的なブログを作り上げましょう！
