この記事は、当サイトの運営者がOtter Blocksの公式ドキュメント・GitHubリポジトリ・WordPress.org掲載情報を精査した上で執筆しています。公式情報として確認できた内容と、当サイトの見解は本文中で分けて記載しています。
Gutenbergの標準ブロックだけで記事を書いていると、ある日ふと「アコーディオンが欲しい」「ポップアップで告知を出したい」という壁にぶつかります。かといってElementorのような本格的なページビルダーを導入すると、今度は編集画面がガラッと変わってしまい、これまで書いてきた記事の編集感覚まで変わってしまう。「ちょうどいい拡張」を探してOtter Blocksに行き着いた、という方は多いのではないでしょうか。
この記事では、Otter Blocksを実際にインストールして触ってみた前提で、インストール手順から主要ブロックの使い方、Pro版で何が変わるのかまでを解説します。他のGutenberg拡張プラグインとまとめて比較したい場合は、Gutenbergブロック拡張プラグインおすすめ比較2026もあわせてご覧ください。
💡 このページの比較表・ステップ・メリデメ表示・通知・FAQは、すべてLazy Blocks(Pro/Free)で自作したブロックです。 作り方はこちら
Otter Blocksとは何か
Otter Blocksは、Themeisle社が開発しているGutenberg拡張プラグインです。WordPress.org公式ディレクトリでの有効インストール数は30万以上、評価は5点満点中4.7と、拡張プラグインの中でもかなり手堅い実績を持っています(本記事執筆時点でのWordPress.org掲載情報)。
無料版だけで20種類以上のブロックに加えて、パターンライブラリやフルページテンプレートまで使えるのが特徴です。Elementorのように専用のページビルダー画面へ切り替えるのではなく、あくまでGutenbergの延長線上で装飾コンテンツを組み立てられる——ここが他のページビルダー系プラグインとの一番大きな違いです。正直なところ、最初は「また新しいブロックプラグインか」くらいの気持ちで触り始めましたが、投稿一覧からブロックを追加する操作感が普段のGutenbergと全く変わらないのは、地味に大きなポイントだと感じました。編集画面が変わるストレスがないんですよね。
動作要件はWordPress 6.6以上(7.0.2まで動作確認済み・本記事執筆時点)。かなり前のバージョンのまま運用しているサイトでは、先にWordPress本体のアップデートが必要になる場合があります。
インストール手順
-
STEP 01管理画面から検索してインストールするWordPress管理画面の「プラグイン」→「新規追加」で「Otter Blocks」を検索し、インストール・有効化します。
-
STEP 02有効化後にブロック一覧を確認する投稿・固定ページの編集画面でブロック追加メニューを開くと、「Otter」カテゴリの中に新しいブロックがまとまって表示されるようになります。
-
STEP 03パターンライブラリから配置を試すゼロから組み立てる前に、用意されているパターン(完成済みのレイアウト)を挿入し、そこから文言や色を調整していくと迷いにくくなります。
無料版で使える主要ブロック
無料版だけでも、実務で使う頻度の高いブロックはひと通り揃っています。特に使う機会が多いものをピックアップしました。
| ブロック名 | 用途 |
|---|---|
| セクション | 最大6列のレイアウトを組める。背景色・背景画像のカスタマイズも可能 |
| アコーディオン | クリックで開閉するコンテンツ。FAQページなどでよく使う |
| タブ | 水平に並んだタブでコンテンツを切り替え表示 |
| 高度な見出し | 標準の見出しブロックより装飾(フォント・部分強調など)の自由度が高い |
| ポップアップ | クリックやページ離脱時など、条件に応じて表示するオーバーレイ |
| スライダー | 画像のスライドショーを設置 |
| フォーム | 問い合わせフォームを設置。Brevo・Mailchimp・hCaptchaと連携可能 |
実際の管理画面(Otter → Blocks)はこんな見た目です。ブロックごとにON/OFFを切り替えられます。

どのブロックも設定項目はブロック右側のインスペクターパネルに集約されており、コードを一切書かずにマウス操作だけで組み立てられます。個人的には、フォームブロックが最初からBrevo・Mailchimpと連携できる点は、地味ですが助かるポイントだと感じました。
表示条件(Visibility Conditions)で出し分ける
無料版に含まれる機能の中で、意外と知られていないのが表示条件機能です。ブロックごとに「ログイン済みユーザーにだけ表示」「特定の投稿・カテゴリでだけ表示」「指定した日時の間だけ表示」といった条件を設定できます。
こんな場面で使える
期間限定セールのお知らせバナーを、キャンペーン期間中だけ表示したい——という場面。日時を指定するだけで、期間が過ぎれば自動的に非表示になります。プラグインを追加せずにこの粒度の出し分けができるのは、無料版の中でもかなり実用的な機能だと思います。
Pro版で追加される機能
Pro版では、無料版にないブロックと、既存ブロックの機能拡張が追加されます。公式ドキュメントで確認できた主な違いは次の通りです。
管理画面の「Free vs PRO」タブに、実際の比較表が用意されています。

メリット
-
Modal(モーダル)・Business Hours・Review Comparison Table・Add to Cart Buttonなど、Pro版限定のブロックが使える
-
フォームの送信データをメールだけでなくデータベースにも保存できる
-
フォームでファイルアップロード・隠しフィールド・Stripe決済・Webhook連携が使える
-
Dynamic Values/Dynamic ImagesがPost MetaやWooCommerceデータにも対応
-
WooCommerce Builder、ローカルフォント機能が使える
デメリット
-
無料版でも20種類以上のブロック・表示条件・パターンライブラリは使える
-
フォーム送信をメール通知だけで十分な運用なら無料版で足りる
-
ECサイト(WooCommerce)連携が不要なら恩恵は限定的
料金プランは契約前に必ず公式サイトで確認
料金プラン・サイト数の条件は変更される可能性があります。契約を検討する場合は、必ず公式サイトの料金ページ(themeisle.com)で最新情報を確認してください。
Otter Blocksが向いている人・向いていない人
ここまでの内容を踏まえると、Otter Blocksが向いているかどうかは次のように整理できます。
| タイプ | 理由 | 詳細 | ||
|---|---|---|---|---|
|
装飾ブロック・パターンをすぐ使いたい人
|
向いている
|
|
||
|
当サイトの見解
自分専用のオリジナルブロックを作りたい人
|
別の選択肢も検討
|
|
Lazy Blocksの使い方を見る (自分専用のオリジナルブロックを作りたい人・新しいタブで開く) |
補足すると、Otter Blocksと「Lazy Blocksのようなカスタムブロック作成プラグイン」は競合というより役割が違います。Otter Blocksはあらかじめ用意された装飾ブロックをすぐ使いたい人向け、Lazy Blocksは自分で入力項目(Repeaterなど)を設計してオリジナルのブロックを作りたい人向け。実際、このサイトでも両方を併用しています。当サイトの装飾ブロック(比較表やCTAボタンなど)はLazy Blocksで自作していますが、記事内のちょっとしたアコーディオンやポップアップまで全部自作するかというと、そこまではしません。使う場面によって道具を使い分ける、くらいの感覚で十分だと思っています。
導入前に知っておきたい注意点
Otter Blocksに限らず、Gutenbergを拡張するプラグイン全般に言えることですが、他のページビルダー系プラグイン(Elementorなど)と併用すると、ブロックやスタイルの管理が二重になりやすくなります。1サイトにつき、装飾ブロック系のプラグインは基本的に1つに絞って運用するのが安全です。
また、テーマ側のスタイルとOtter Blocksの装飾が干渉して見た目が崩れるケースも起こり得ます。導入直後は本番環境ではなく、まずステージング環境や下書き状態で表示を確認することをおすすめします。
よくある質問
QOtter Blocksは日本語に対応していますか?
Q既存のプラグイン(Arkhe Blocksなど)と併用できますか?
Q無料版だけでランディングページは作れますか?
まとめ
Otter Blocksは、Gutenbergの標準機能だけでは物足りないと感じたときに、無料の範囲でも装飾コンテンツを大きく広げてくれるプラグインです。まずは無料版のブロックとパターンライブラリを触ってみて、フォームのデータベース保存やWooCommerce連携など、具体的に足りない機能が見えてきた段階でPro版を検討する——という進め方が現実的だと思います。
逆に、Otter Blocksに無いブロックを自分で作りたくなったときは、Lazy Blocks使い方完全ガイドが入口になります。
「用意されたものを使う」から「必要なものを作る」へ移るときの話です。

