軽量なWordPressブロック拡張プラグイン「Kadence Blocks」の使い方と検証結果

WordPressの標準ブロックエディタ（Gutenberg）だけでは、思い通りのレイアウトや高度なデザインを形にするのが難しいケースがあります。

本記事では、ページビルダー並みの自由度と高いパフォーマンスを両立できるプラグイン「Kadence Blocks」について解説します。特徴や具体的な機能、導入のメリット・デメリットもまとめました。

Kadence Blocksとは？

Kadence Blocksは、WordPress標準エディタに機能を追加するページビルディング用のプラグインです。

Elementorなどの一般的なページビルダープラグインは、導入によってサイトの動作が重くなる傾向があります。

一方でKadence Blocksは、WordPressのブロックエディタ（Gutenberg）の仕組みをベースに構築されています。

そのため、サイトの読み込み速度を維持しながら、ノーコードで自由度の高いレイアウトが可能です。

Kadence Blocks

主な機能・できること

• 高度なレイアウト構造：行や列を細かく制御する「Row Layout」ブロックで、柔軟なレスポンシブデザインを実装できる。
• 動的・機能的ブロック：フォーム・タブ・アコーディオンなどさまざまな種類の動的・機能的ブロックを利用できる。
• デザインライブラリ：プロが作成したページ全体やセクションのテンプレートをワンクリックで挿入できる。
• 詳細なコントロール：ブロックごとの余白（マージン/パディング）、レスポンシブ（Pro版）ごとの表示切り替えなどができる。
• AIアシスタント機能：テキスト生成やセクションデザインの自動提案を利用できる。

ブロック一覧

「Kadence Blocks」に搭載しているブロック一覧です。

※ブロック名の横に付いている「(Adv)」は、Advanced（高度な）の略称です。WordPressの標準ブロックではなく、Kadence独自のブロックであることを示しています。

メリット

• 表示速度を維持しやすい：WordPress標準の機能を拡張する仕組みのため、データが軽く、サイトの動作が重くなりにくい。
• 無料版でも使える機能が多い：無料版でもフォーム、タブ、Lottieアニメーション（動くイラスト）など様々な機能を実装できる。
• レイアウトを細かく調整できる：余白の広さや要素の配置など、標準機能では難しいデザインを柔軟に設定できる。
• プラグインの数を減らせる：フォーム・タブ・スライダーなど、よく使う複数の機能が一つにまとまっている。

デメリット

• 日本語にほとんど対応していない：設定画面やメニューの大半が英語のまま表示されるため、必要に応じて翻訳ツールなどを活用しながら操作を進める必要がある。
• 設定項目が多い：細かいカスタマイズができる反面、画面のどこに何の設定があるか把握するまで少し時間がかかる。
• 一部機能は有料（Pro版）：より高度なアニメーションや、すべてのテンプレートを利用する場合は有料版が必要。
• 利用しているテーマとの相性：利用しているテーマによっては機能が干渉し、不具合や表示の崩れが出る可能性がある（※）。

※今回は、一部のTCDテーマでKadence Blocksを検証しましたが、不具合や表示の崩れは見当たりませんでした。ただし、全てのTCDテーマおよびKadence Blocksの全機能は検証していませんので、事前にテストしてから導入してください。

Kadence Blocksの料金プラン

Kadence Blocksの基本機能は無料で利用できます。以前はPro版プラグインの単体販売もありましたが、現在は「バンドルプラン（年間サブスクリプション）」となっています。

なお、無料版・有料版を問わず、すべてのプランで利用サイト数は無制限です。

出典：Pricing｜Best WordPress Page Builder and Blocks Plugin Software | Kadence

各プランは、以下のような目的や対象者に最適です。

• Free：ブログやシンプルなサイトを構築したい方に最適です。無料でも十分に高速で美しいデザインを作成できます。
• Essentials：本格的なカスタマイズを行いたいクリエイターやブロガー向けです。Kadence Blocks Proによる高度なブロック機能や、プレミアムテンプレートを利用できます。
• Pro：WooCommerceを使用したオンラインストアや、会員制サイトを運営したい方に推奨されるプランです。サイトの運用に必要なセキュリティやバックアップツールも包括されています。
• Elite：複数のクライアントサイトを構築・保守するWeb制作会社やフリーランス向けのプランです。

※永久ライセンス（買い切りプラン）の新規販売は終了しており、すべてのプランが年額制のサブスクリプションとなっています。

Kadence BlocksとElementorの比較

WordPressで直感的なページ構築を行う際、有力な選択肢となるのが「Kadence Blocks」と「Elementor」です。これらは設計思想や動作の仕組みが大きく異なります。

Kadence Blocksが向いているケース

• サイトの表示速度を最優先したい場合：WordPress標準の仕組みに沿って動作するため、余分なコードが生成されにくく、SEOやユーザー体験に有利な高速なサイトを構築できます。
• 標準エディタの操作感を変えたくない場合：通常の投稿作成と同じ画面でレイアウトを拡張できるため、ブログ記事と固定ページの編集をスムーズに行き来できます。

Elementorが向いているケース

• 自由なデザインを求める場合：ヘッダーやフッター、ポップアップなど、サイト全体のあらゆる要素を視覚的にゼロから構築できます。
• 視覚的なわかりやすさを重視する場合：プレビュー画面を見ながら直感的にパーツを配置できるため、デザイン作業を中心に進めたい場合に適しています。

Kadence Blocksの使い方

プラグインのインストールと有効化

1. WordPressの管理画面から「プラグイン」＞「プラグインの追加」を開きます。
2. 検索窓に「Kadence Blocks」と入力します。
3. 該当するプラグインが表示されたら「インストール」をクリックし、完了後に「有効化」します。

デザインライブラリ（Design Library）の活用

Kadence Blocksの「デザインライブラリ」は、あらかじめデザインされたパターン（CTAなどのパーツ）やページのテンプレートをワンクリックで読み込める機能です。

無料版で使えるものもありますが、より多くのパターンやページテンプレートを利用したい場合は、有料版に申し込む必要があります。

編集画面からデザインライブラリを開くには、画面左上のツールバーにある「Design Library」アイコンをクリックします。

ライブラリは、大きく「パターン（Patterns）」と「ページ（Pages）」の2種類に分かれています。

パターン（Patterns）

ページの一部として使えるセクション単位のデザインです。一部のパターンは有料版（Pro）限定です。

無料版でもヒーロー領域（Hero）、料金表（Pricing Table）、タブ、アコーディオンなど、数十種類のカテゴリーが用意されています。

ページ（Pages）

ホーム（Home）、会社概要（About）、お問い合わせ（Contact）など、ページ全体のレイアウトです。

読み込んだ後、テキストと画像を自社のものに差し替えるだけでページが完成します。

ライブラリの検索と編集方法

ライブラリ上部の検索バーやフィルター機能を使用すると、目的に合ったデザインを効率よく探せます。

• Search（検索）：キーワードでパターンやページを検索します。
• Layout（レイアウト）：カラム（列）の数やメディアの配置位置などで絞り込みます。
• Components（コンポーネント）：ボタン、アコーディオン、スライダーなど、特定のブロックが含まれているかで絞り込みます。
• Sort（ソート）：人気、最新、A〜Z順、Z〜A順

利用したいパターンやテンプレートを選択すると、WordPressのエディタ画面上に表示されます。テキストや画像を編集したり、画面右側からより細かい調整を行うことができます。

ブロックの追加と設定方法

ここでは、主要なブロックの設定方法を解説します。各ブロックごとに細かく調整が可能なため、利用したいブロックは公式ドキュメントを翻訳してご確認ください。

▶ Kadence Blocks Help Docs（公式ドキュメント）

フォーム（Form）の検証

お問い合わせやアンケート用のフォームを、外部プラグインなしで構築できます。

項目の追加、必須設定、送信先メールアドレスの構成がブロック上で完結し、レスポンシブ時の表示も自動で最適化されます。

設定するには、設置したい行を選択し、Kadence Blocksの「Form (Adv)」を選択します。

行に表示されたフォームブロックの「Create New（新規作成）」をクリックします。

※「WordPressダッシュボード」＞「Kadence」＞「Forms」から事前に作成して「Select Form」から選択することもできます。

フォームのレイアウトを選択します。右上の「Skip（blank）」を選択すれば空の状態からフォームを作成できますが、フォームのテンプレートを選択したい場合はその下部から選びます。

続いて、スタイルを選択します。Basic（基本）、Dark（ダーク）、infield（入力欄の内側にテキストを配置）、Underline（入力欄をボックスではなく下線にする）から選択できます。

最後に、フォームのタイトルと説明文を入力したら、「Create（作成）」をクリックします。

エディタ画面にフォームが表示され、編集することができます。

ラベルが英語になっていますので、クリックすると日本語に変換することができます。

画面右側では、「ブロック」を選択すると、各種設定を行うことができます。

例えば、「General（一般設定）」＞「Message Setting（メッセージ設定）」＞「Success Message（成功/完了メッセージ）」からユーザーがフォーム送信後に表示されるメッセージを設定できます。

初期設定状態では英語表記ですので、日本語にしておきましょう。

設定が終わったら、右上から「保存」してページを確認するとフォームが表示されます。実際にフォームから送信すると、あらかじめ設定していた完了メッセージが表示されます。

※完了メッセージを設定していない場合は、英語の完了メッセージが表示されます。

ユーザーがフォーム送信後の管理者への受信メールは、シンプルで見やすい構成になっています。

必要に応じ、編集画面に戻って設定やデザイン（入力欄やボタンの色）などを調整してください。もし、メールが受信できない場合は、到達率を上げるSMTPプラグインの導入も検討してください。

タブ（Tabs）の検証

ページ内にタブを付けて、限られたスペースに多くの情報を整理して掲載することができます。

「Tabs」ブロックを選択すると、タブのスタイルを選択することができますので、お好みのデザインを選択します。

初期状態では、「tab1」「tab2」「tab3」…のように英語表記になっています。クリックして日本語のタブ名に変更することができます。

そのタブ内の「＋」や行を選択すると、ブロックを設置することができます。WordPress標準ブロックだけでなく、Kadence Blocks自体のブロックもタブ内に設置できます。

ブロックは一つだけでなく複数選択できますので、通常のページ編集と同じように操作することができます。

右上から「保存」してプレビューすると、タブが表示されます。

タブの切り替え動作は軽快で、レスポンシブでレイアウトが崩れることはなく、見出しとコンテンツの紐付けが行えます。

Lottieアニメーション（Lottie Animations）の検証

Lottie（ロッティー）は、画質が落ちず、読み込み速度への影響が少ない軽量なアニメーション形式です。

「Lottie Animation」ブロックを使うと、動きのあるアイコンやイラストをサイト内に簡単に配置できます。

利用するには、編集画面で「Lottie Animation」ブロックを選択します。

初期状態では、WordPressのロゴマークのアニメーションが設定されています。

これとは別のアニメーションデータを読み込むには、以下の2つの方法があります。

1. 外部のLottie URLを貼り付ける（Lottieアニメーションの素材サイトで取得可能）
2. パソコン内のLottieファイル（JSON形式）をアップロードする

今回の検証では、Lottieアニメーションの素材サイト「LottieFiles（ロッティファイルズ）」から素材をダウンロードしました。

以下の公式サイトから「無料で始める」などのボタンをクリックし、Google・facebook・Github・メールアドレスを選択してアカウントを作成します。

▶ LottieFiles公式サイト

検索や絞り込み機能を使い、無料・有料素材や色を選択します。表示されたアニメーションの中から気に入ったものをクリックします。

選択したLottieアニメーション素材の右上にある「Save animation」をクリックし、「Open」と表示が変わったら続けてクリックします。

別のページに切り替わったら、以下の順で操作します。

1. 埋め込みのアイコン「</>」をクリック
2. 「handoff」をクリック
3. 「Asset link」をコピー

WordPressのエディタ画面に戻り、右側のブロック設定パネルにある「Lottie Animation URL」にコピーしたURLを入力すると適用できます。

右側のブロック設定パネルで、再生方法やサイズなどを調整できます。

主な設定項目は以下の通りです。

• 再生のきっかけ（Playback Control）: 自動再生、クリック時、ホバー（カーソルを合わせた時）、スクロールに合わせて再生などを指定できます。
• 再生速度（Playback Speed）: アニメーションの動く速さを変更できます。
• ループ（Loop Settings）: アニメーションを繰り返すかどうかを設定します。

プレビューなどで表示すると、ページ上にLottieアニメーションが表示されます。

素材サイトで好みのデザインを探し、URLをコピーして貼り付ける方法が、最も手軽に実装できるためおすすめです。

よくある質問（FAQ）

Q. 無料版でも十分にサイトを作れますか？

はい、作成可能です。無料版でもページの骨組みを作るレイアウト機能や、見出し、ボタン、タブなどの必須ブロックが揃っているため、基本的なサイト構築に支障はありません。

Q. Elementorから乗り換えるメリットは何ですか？

最大のメリットは「サイト表示速度の向上」です。WordPress標準のブロックエディタをベースに動くため、独自のシステムを使うElementorよりもデータが軽く、高速に表示されやすい特徴があります。

Q. ブロック名に付いている「(Adv)」とは何ですか？

「Advanced（高度な）」の略称です。WordPress標準のブロックよりも、余白や色、スマホでの見え方などを細かく調整できるKadence独自のブロックであることを示しています。

初心者の方でも使いやすく、デザインの幅が広がるため、積極的に活用することをおすすめします。

Q. どのWordPressテーマでも正常に動作しますか？

基本的には様々なテーマで利用できますが、テーマ独自の機能と干渉して不具合や表示崩れが生じる可能性はあります。

一部のTCDテーマにて検証を行った範囲では、不具合は確認されませんでした。

ただし、全てのテーマや有料版（Pro版）を含む全機能での動作を保証するものではないため、本格的に導入する前にテスト環境で検証することをおすすめします。

まとめ

Kadence Blocksは、サイトの表示速度を維持しつつ、自由なレイアウトを作成できるWordPressプラグインです。標準のブロックエディタを拡張する仕組みのため、他のページビルダーと比較して動作が軽いという特徴があります。

無料版の時点でもタブやフォームなどの実用的な機能が揃っており、導入するプラグインの数を減らせる点もメリットです。日本語への対応が不十分という注意点はありますが、画面を見ながら直感的に操作できる設計になっています。

サイトの表示速度を改善したい方や、標準のレイアウト機能では物足りないと感じている方は、まずは無料版をテスト環境に導入し、実際の使用感やテーマとの相性を確認してみてください。