Otter Blocksの使い方完全ガイド|インストールから主要ブロック・Pro版の違いまで

この記事は、当サイトの運営者がOtter Blocksの公式ドキュメント・GitHubリポジトリ・WordPress.org掲載情報を精査した上で執筆しています。公式情報として確認できた内容と、当サイトの見解は本文中で分けて記載しています。

Gutenbergの標準ブロックだけで記事を書いていると、ある日ふと「アコーディオンが欲しい」「ポップアップで告知を出したい」という壁にぶつかります。かといってElementorのような本格的なページビルダーを導入すると、今度は編集画面がガラッと変わってしまい、これまで書いてきた記事の編集感覚まで変わってしまう。「ちょうどいい拡張」を探してOtter Blocksに行き着いた、という方は多いのではないでしょうか。

この記事では、Otter Blocksを実際にインストールして触ってみた前提で、インストール手順から主要ブロックの使い方、Pro版で何が変わるのかまでを解説します。他のGutenberg拡張プラグインとまとめて比較したい場合は、Gutenbergブロック拡張プラグインおすすめ比較2026もあわせてご覧ください。

💡 このページの比較表・ステップ・メリデメ表示・通知・FAQは、すべてLazy Blocks(Pro/Free)で自作したブロックです。 作り方はこちら

Index

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本体のアップデートが必要になる場合があります。

インストール手順

  1. STEP 01
    管理画面から検索してインストールする
    WordPress管理画面の「プラグイン」→「新規追加」で「Otter Blocks」を検索し、インストール・有効化します。
  2. STEP 02
    有効化後にブロック一覧を確認する
    投稿・固定ページの編集画面でブロック追加メニューを開くと、「Otter」カテゴリの中に新しいブロックがまとまって表示されるようになります。
  3. STEP 03
    パターンライブラリから配置を試す
    ゼロから組み立てる前に、用意されているパターン(完成済みのレイアウト)を挿入し、そこから文言や色を調整していくと迷いにくくなります。

無料版で使える主要ブロック

無料版だけでも、実務で使う頻度の高いブロックはひと通り揃っています。特に使う機会が多いものをピックアップしました。

ブロック名用途
セクション最大6列のレイアウトを組める。背景色・背景画像のカスタマイズも可能
アコーディオンクリックで開閉するコンテンツ。FAQページなどでよく使う
タブ水平に並んだタブでコンテンツを切り替え表示
高度な見出し標準の見出しブロックより装飾(フォント・部分強調など)の自由度が高い
ポップアップクリックやページ離脱時など、条件に応じて表示するオーバーレイ
スライダー画像のスライドショーを設置
フォーム問い合わせフォームを設置。Brevo・Mailchimp・hCaptchaと連携可能

実際の管理画面(Otter → Blocks)はこんな見た目です。ブロックごとにON/OFFを切り替えられます。

Otter管理画面のBlocksタブ。無料版で使えるブロック一覧とON/OFF切り替えトグル

どのブロックも設定項目はブロック右側のインスペクターパネルに集約されており、コードを一切書かずにマウス操作だけで組み立てられます。個人的には、フォームブロックが最初からBrevo・Mailchimpと連携できる点は、地味ですが助かるポイントだと感じました。

表示条件(Visibility Conditions)で出し分ける

無料版に含まれる機能の中で、意外と知られていないのが表示条件機能です。ブロックごとに「ログイン済みユーザーにだけ表示」「特定の投稿・カテゴリでだけ表示」「指定した日時の間だけ表示」といった条件を設定できます。

こんな場面で使える

期間限定セールのお知らせバナーを、キャンペーン期間中だけ表示したい——という場面。日時を指定するだけで、期間が過ぎれば自動的に非表示になります。プラグインを追加せずにこの粒度の出し分けができるのは、無料版の中でもかなり実用的な機能だと思います。

Pro版で追加される機能

Pro版では、無料版にないブロックと、既存ブロックの機能拡張が追加されます。公式ドキュメントで確認できた主な違いは次の通りです。

管理画面の「Free vs PRO」タブに、実際の比較表が用意されています。

Otter管理画面の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が向いているかどうかは次のように整理できます。

比較表。評価と価格の見出しを押すと並び替えられます。
タイプ 理由 詳細
装飾ブロック・パターンをすぐ使いたい人
4.5 点(5点満点)
向いている
  • アコーディオン・タブ・ポップアップ等が既製品として揃っている
  • パターンから配置するだけで見た目が整う
  • コードを書かずに運用したい人向け
当サイトの見解
自分専用のオリジナルブロックを作りたい人
3 点(5点満点)
別の選択肢も検討
  • 既製ブロックの組み合わせではなく、繰り返しフィールドを伴う独自パーツを設計したい
  • Lazy Blocksのようなカスタムブロック作成系プラグインが候補になる
  • 両者は競合ではなく、用途の異なる補完関係
Lazy Blocksの使い方を見る (自分専用のオリジナルブロックを作りたい人・新しいタブで開く)

補足すると、Otter Blocksと「Lazy Blocksのようなカスタムブロック作成プラグイン」は競合というより役割が違います。Otter Blocksはあらかじめ用意された装飾ブロックをすぐ使いたい人向け、Lazy Blocksは自分で入力項目(Repeaterなど)を設計してオリジナルのブロックを作りたい人向け。実際、このサイトでも両方を併用しています。当サイトの装飾ブロック(比較表やCTAボタンなど)はLazy Blocksで自作していますが、記事内のちょっとしたアコーディオンやポップアップまで全部自作するかというと、そこまではしません。使う場面によって道具を使い分ける、くらいの感覚で十分だと思っています。

導入前に知っておきたい注意点

注意:
装飾ブロック系プラグインは1サイト1つに絞る

Otter Blocksに限らず、Gutenbergを拡張するプラグイン全般に言えることですが、他のページビルダー系プラグイン(Elementorなど)と併用すると、ブロックやスタイルの管理が二重になりやすくなります。1サイトにつき、装飾ブロック系のプラグインは基本的に1つに絞って運用するのが安全です。

また、テーマ側のスタイルとOtter Blocksの装飾が干渉して見た目が崩れるケースも起こり得ます。導入直後は本番環境ではなく、まずステージング環境や下書き状態で表示を確認することをおすすめします。

よくある質問

QOtter Blocksは日本語に対応していますか?
A管理画面・ブロック名の表示は翻訳ファイルの整備状況によって一部英語表記が残ることがありますが、基本的な操作は日本語環境でも問題なく行えます。
Q既存のプラグイン(Arkhe Blocksなど)と併用できますか?
A技術的には併用できますが、同じ用途のブロックが複数のプラグインに存在すると管理が煩雑になります。表示崩れや重複を避けるため、装飾ブロック系のプラグインは1つに絞ることをおすすめします。
Q無料版だけでランディングページは作れますか?
Aパターンライブラリとセクション・ボタン・スライダーなどを組み合わせれば、無料版の範囲でも十分作成できます。フォームのデータベース保存やWooCommerce連携が必要になった段階でPro版を検討すれば問題ありません。

まとめ

Otter Blocksは、Gutenbergの標準機能だけでは物足りないと感じたときに、無料の範囲でも装飾コンテンツを大きく広げてくれるプラグインです。まずは無料版のブロックとパターンライブラリを触ってみて、フォームのデータベース保存やWooCommerce連携など、具体的に足りない機能が見えてきた段階でPro版を検討する——という進め方が現実的だと思います。

逆に、Otter Blocksに無いブロックを自分で作りたくなったときは、Lazy Blocks使い方完全ガイドが入口になります。
「用意されたものを使う」から「必要なものを作る」へ移るときの話です。

無料でリピーター機能を確かめる

自分専用のオリジナルブロックを設計したい場合は、Lazy Blocksの無料版から試せます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

個人でWordPressブログを運営しています。WordPress歴7年。実際に契約・利用しているConoHa WINGとSWELLを中心に、ブログの開設、表示・編集環境の改善、SEO、アフィリエイト、AIを使った制作効率化を検証しています。

公式情報を確認するだけでなく、実機で試した結果、うまくいかなかった点、向かないケースも含めて共有します。読者が遠回りせず、自分のブログで次の一手を選べる情報を届けることが目標です。

Index