No Photo

Beaver Builder 2.12「Tarbela」徹底解説:Filterモジュール、Design/Codeタブ、新アイコンピッカーで制作ワークフローはどう変わるのか

公開日：2026年11月14日｜最終更新日：2026年11月14日｜

WordPressのページビルダーとして、安定性と扱いやすさで長く支持されているBeaver Builder。その最新メジャーアップデートBeaver Builder 2.12(コードネーム:Tarbela)が公開されました。

今回の目玉は大きく3つです。

  • コンテンツを絞り込み表示できるFilterモジュール
  • 設定パネルを整理するDesign タブと Code タブ
  • 刷新されたアイコンピッカー

どれも派手な機能追加というより、日々の制作作業の小さなストレスを減らすアップデートです。特にクライアントワークでBeaver Builderを使っている制作会社やフリーランスの方には、作業時間や納品品質に効いてくる内容といえます。

この記事では、公式ブログの発表をもとに各機能の概要を紹介します。あわせて、なぜこの機能が重要なのか、実務でどう活かせるのか、日本のサイト制作でどう役立つのかまで掘り下げて解説します。

公式の発表記事はこちらです:Beaver Builder 2.12: Filter Module, Design & Code Tabs, and a New Icon Picker(公式ブログ)

Beaver Builder 2.12「Tarbela」の全体像

Beaver Builderでは、メジャーバージョンごとに世界各地のダムや地名に由来するコードネームが付けられています。今回の2.12は「Tarbela」です。

近年のBeaver Builderは、むやみに機能を増やすのではなく、次のような方向性を一貫して取ってきました。

  • 既存ユーザーの作業効率を上げる
  • 出力されるコードを軽く保つ
  • ブロックエディタ(Gutenberg)時代でも共存できるよう設計する

2.12もこの流れにある、「実用性重視」のアップデートです。今回の3つの新機能は、それぞれ次の層に向けた改善と整理できます。

  • Filterモジュール:サイト訪問者の体験(UX)を高める機能
  • Design/Codeタブ:デザイナーと開発者、両方の編集体験を整理する機能
  • 新アイコンピッカー:日常的な細かい作業を速くする機能

つまり「サイトを見る人」「サイトを作る人」「サイトを保守する人」のすべてに恩恵があるアップデートだといえます。

新機能①:Filterモジュール ― 絞り込み表示をノーコードで

Filterモジュールとは何か

Filterモジュールは、ページ上のコンテンツをカテゴリーや条件で絞り込んで表示するための新しいモジュールです。

ポートフォリオサイトでよく見る、次のようなUIを思い浮かべるとイメージしやすいでしょう。

  • 「すべて」「Webデザイン」「ロゴ」「写真」といったボタンを並べる
  • ボタンをクリックすると、該当する作品だけが表示される

これまでBeaver Builderで同じことをするには、次のいずれかの方法が必要でした。

  • サードパーティのアドオンを使う
  • JavaScriptを自作する
  • 専用のフィルタープラグインと組み合わせる

それが本体の標準機能として使えるようになったことに大きな意味があります。設定項目や対応するコンテンツの種類など、詳しい仕様は公式記事やドキュメントで確認してください。

なぜ「標準機能」であることが重要なのか

WordPressサイトの運用で問題になりやすいのが、プラグインの数が増えすぎることです。プラグインが増えると、次のような負担が積み重なります。

  • 読み込まれるCSSやJavaScriptが増え、表示速度が落ちる
  • プラグイン同士の競合リスクが高まる
  • アップデートの管理対象が増える
  • 脆弱性が見つかったときの影響範囲が広がる

フィルター機能のような「ちょっとした機能」のためにプラグインを1つ追加するのは、長期運用を考えると意外とコストが高い選択です。ビルダー本体に組み込まれていれば、デザインの統一感やアップデートの互換性も本体側でまとめて管理されます。保守のしやすさが格段に上がるのです。

日本のサイトでの活用例

Filterモジュールは、日本のさまざまな業種で活用できます。

  • 制作会社・デザイン事務所の実績ページ:「コーポレートサイト」「ECサイト」「LP」「採用サイト」など、制作種別で絞り込めるようにする。
  • 不動産・住宅会社の施工事例:「新築」「リフォーム」「平屋」「二世帯」といった分類で事例を探しやすくする。
  • 飲食店のメニューページ:「ランチ」「ディナー」「ドリンク」「テイクアウト」を切り替えて表示する。
  • 採用サイトの社員インタビュー:「エンジニア」「営業」「新卒」「中途」など、求職者が自分に近い人を探せるようにする。
  • オウンドメディアの記事一覧:トピック別にサッと切り替えて回遊率を高める。

日本のWebサイトは、1ページに多くの情報を載せる傾向があります。その情報をユーザー自身が必要な分だけ見られるようにする仕組みは、離脱率の低下や問い合わせ率の向上に直結しやすい改善ポイントです。

UX面でのポイント

フィルターUIを設計するときは、次の点を意識すると効果が高まります。

  • カテゴリー数は5〜7個程度に抑える:多すぎると選ぶこと自体が負担になります。
  • 「すべて」ボタンを必ず用意する:絞り込みを解除する導線を明確にします。
  • スマートフォンでの表示を確認する:ボタンが折り返しすぎないか、タップしやすいサイズかをチェックします。
  • キーボード操作でも使えるか確認する:アクセシビリティの観点からも重要です。

新機能②:Design タブ と Code タブ ― 設定パネルの役割分担

何が変わったのか

Beaver Builderの設定パネルは、モジュールごとにいくつかのタブで構成されています。2.12では新たにDesign タブとCode タブが導入され、設定項目の整理が進みました。

名前のとおり、それぞれの役割は次のように分かれています。

  • Design タブ:色、タイポグラフィ、余白、ボーダーといった見た目に関する設定
  • Code タブ:カスタムCSSやコード寄りの設定

具体的にどの項目がどのタブに移ったかは、公式記事のスクリーンショットや解説をあわせて確認するのがおすすめです。

なぜ「タブの整理」が重要なのか

一見地味な変更ですが、ページビルダーの使いやすさは「目的の設定項目にどれだけ早くたどり着けるか」で大きく左右されます。

機能が増えるほど設定パネルは複雑になり、「あの設定はどこだっけ?」と探す時間が積み重なっていきます。1回あたり数秒でも、1日に何百回もモジュールを編集する制作現場では無視できない差になります。

見た目を整えたいときはDesign、コードで細かく調整したいときはCode。このように思考の流れに沿ってタブが分かれていることで、迷う時間が減り、作業に集中しやすくなります。

デザイナーと開発者の協業がスムーズに

日本の制作現場では、ディレクター、デザイナー、コーダー、エンジニアが分業しているケースが多くあります。Design/Codeタブの分離は、こうした体制とも相性が良い変更です。

  • デザイナー:Design タブを中心にビジュアルを調整し、コードに触れずに作業を完結できる。
  • 開発者:Code タブで必要な箇所だけカスタマイズし、変更点を把握しやすくなる。
  • クライアント:納品後に軽微な修正を行う際も、触ってよい場所(Design)と触らない方がよい場所(Code)を説明しやすい。

特に3つ目は見落とされがちですが重要です。納品後の「お客様が更新したらレイアウトが崩れた」というトラブルを防ぐには、編集してよい範囲を分かりやすく伝えることが欠かせません。タブで役割が分かれていれば、マニュアルも作りやすくなります。

CSSを書く人へのヒント

Code タブでカスタムCSSを扱う場合も、次の基本は変わりません。

  • サイト全体に関わるスタイルは、グローバル設定や子テーマに集約する:同じCSSをモジュールごとに書き散らすと、後から修正するときに苦労します。
  • モジュール単位のCSSは「そのモジュールだけの例外」に限定する:何のための指定なのかをコメントで残しておくと、引き継ぎの際に役立ちます。

新機能③:新しいアイコンピッカー ― 小さな改善、大きな時短

アイコン選びは意外と時間を食う作業

サービス紹介、特徴の箇条書き、フッターのSNSリンク、ボタンなど、Webサイトではアイコンを使う場面が数多くあります。

ところが、膨大なアイコンの中から目的のものを探すのは意外と手間がかかります。従来のアイコン選択画面に、もどかしさを感じていた方も多いのではないでしょうか。

2.12では、このアイコンピッカーが刷新されました。目当てのアイコンにより早くたどり着けるよう、操作性の改善が図られています。具体的なUIの変化は公式記事で確認できます。

アイコン活用のトレンドと注意点

近年のWebデザインでは、次のようなアイコンスタイルが主流です。

  • 線の細いアウトラインアイコン
  • 角丸を活かしたやわらかいデザイン
  • ブランドカラー1色でまとめたシンプルなスタイル

アイコンピッカーが使いやすくなれば、サイト全体でテイストを揃えたアイコン選びもしやすくなります。

一方で、次の点には注意しましょう。

  • アイコンだけで意味を伝えない:必ずテキストラベルを併記します。特に高齢者の利用が多い日本のサイトでは、アイコンの意味が伝わらないケースも少なくありません。
  • アイコンフォントの読み込み量を意識する:多数のアイコンセットを読み込むと、ページ表示速度に影響する場合があります。
  • 装飾目的のアイコンはスクリーンリーダーから隠す:アクセシビリティに配慮した実装を心がけます。

広い視点で見る:2.12はWordPressの潮流の中でどう位置づけられるか

ブロックエディタ時代のページビルダー

WordPress本体では、ブロックエディタとフルサイト編集(サイトエディター)の機能強化が続いています。「ページビルダーはもう不要になるのでは?」という議論を耳にすることもあるでしょう。

それでもBeaver Builderのようなビルダーが選ばれ続けている理由は、主に次の3点です。

  • 直感的なドラッグ&ドロップ編集
  • 長期運用に耐える安定性と後方互換性
  • クライアントに渡しやすい編集体験

2.12のアップデート内容は、まさにこの強みを磨く方向に沿ったものです。

パフォーマンスとCore Web Vitals

Googleが重視するCore Web Vitals(LCP、INP、CLS)への対応は、今やサイト制作の前提条件です。

Filterモジュールのようなインタラクティブな要素を、外部プラグインに頼らず本体で実現できるのはプラス材料です。不要なスクリプトの重複読み込みを避けやすくなるからです。

ただし、どんな機能も使い方次第です。公開前にはPageSpeed Insightsなどで計測する習慣をつけておきましょう。

アクセシビリティへの関心の高まり

海外では、Webアクセシビリティへの法的な要請が強まっています。日本でも、障害者差別解消法の改正により、2024年4月から民間事業者の「合理的配慮の提供」が義務化されました。これを受けて、アクセシビリティへの関心が高まっています。

フィルターUIやアイコンなど、今回追加・改善された要素を使うときも、次の点を意識した設計が求められます。

  • キーボードで操作できるか
  • 色のコントラストは十分か
  • 代替テキストが用意されているか

日本のBeaver Builderユーザーが押さえておきたいポイント

日本語環境での確認事項

Beaver Builderは英語圏発のプロダクトです。新機能のラベルやUIの日本語訳が、リリース直後は英語のままだったり、表現がこなれていなかったりする場合があります。

クライアントに編集を任せるサイトでは、アップデート後に管理画面の表示を確認しておきましょう。必要に応じて、マニュアルにスクリーンショットを追加しておくと安心です。

日本語フォントとの組み合わせ

Design タブでタイポグラフィを調整する際は、日本語フォントならではの事情に注意が必要です。

  • Webフォントのファイルサイズが大きい:Noto Sans JPなどの日本語Webフォントは欧文フォントよりかなり重くなります。
  • 読み込むウェイトを絞る:必要な太さだけに限定しましょう。
  • システムフォントも選択肢に入れる:表示速度を優先したい場合に有効です。

見た目と表示速度のバランスを取ることが大切です。

アドオンとの互換性

日本でもBeaver Builderと一緒に、Beaver Themer、PowerPack、Ultimate Addons for Beaver Builderといったアドオンを併用しているサイトは多いでしょう。

メジャーアップデート直後は、アドオン側の対応状況を確認してから本番環境を更新するのが鉄則です。アドオン側にも似たフィルター機能がある場合は、どちらを使うか方針を決めておくと、サイト内で実装がバラつくのを防げます。

アップデート前のチェックリスト

Beaver Builder 2.12へ安全に移行するために、次の手順をおすすめします。

  1. 完全なバックアップを取得する:データベースとファイルの両方を保存します。
  2. ステージング環境で先に更新する:主要ページの表示と編集画面の動作を確認します。
  3. アドオン・テーマの対応状況を確認する:Beaver Themerや各種アドオンの更新情報をチェックします。
  4. キャッシュをクリアする:Beaver Builderのキャッシュに加え、キャッシュプラグイン、CDN、サーバーキャッシュもクリアします。
  5. カスタムCSSの影響を確認する:設定パネルの構成が変わっているため、既存のカスタマイズが意図どおり動作しているか確かめます。
  6. 本番環境を更新し、再度主要ページを確認する:問い合わせフォームなど、ビジネス上重要なページは特に念入りに確認します。

手順の詳細はBeaver Builder公式ドキュメントもあわせて参照してください。

よくある疑問(FAQ)

Q. 既存のページは2.12にアップデートすると崩れますか?

Beaver Builderは後方互換性を重視して開発されているため、基本的には既存レイアウトがそのまま維持されることが期待できます。ただし、独自のCSSやアドオンを多用している場合は、必ずステージング環境で確認してください。

Q. Filterモジュールを使えば、フィルター系プラグインは不要になりますか?

シンプルなカテゴリー絞り込みであれば、置き換えられる可能性があります。ただし、ECサイトの価格帯検索や複数条件の組み合わせ検索など高度な要件がある場合は、専用プラグインの方が適しているケースもあります。要件に合わせて選びましょう。

Q. 無料版(Lite)でも新機能は使えますか?

機能によって提供範囲が異なる可能性があります。ご利用のプランで使えるかどうかは、公式サイトの情報を確認してください。

関連記事

まとめ:Tarbelaは「毎日使う人」のためのアップデート

Beaver Builder 2.12「Tarbela」の新機能をあらためて整理します。

  • Filterモジュール:絞り込み表示を標準機能で実現。プラグインを減らし、訪問者の情報探索をスムーズにする。
  • Design/Codeタブ:設定項目の役割を明確にし、デザイナー・開発者・クライアントそれぞれの編集体験を整理する。
  • 新アイコンピッカー:日常的なアイコン選びを快適にし、細かな作業時間を削減する。

どれも劇的な変化ではありません。しかし、毎日Beaver Builderを触る人ほど効果を実感できる堅実な改善です。

ページビルダーを取り巻く環境が変化し続ける中で、Beaver Builderは「安定して長く使えるツール」としての価値を着実に高めています。制作効率を上げたい方、クライアントサイトの保守性を高めたい方は、ぜひステージング環境で2.12を試してみてください。

最新情報はBeaver Builder公式ブログで随時発信されています。今回のリリースの詳細はBeaver Builder 2.12の公式発表記事をご覧ください。

この記事は、世界中のBeaverBuilderの最新情報をリサーチし、AIで自動作成しています。

その他の記事

Beaver Builderの教科書、はじめます。
BeaverBuilderとは？
Beaver Builderの教科書、はじめます。