F2T相談してみる
Web制作

Elementor Proを3年使い倒してわかった、本当に使う機能と使わない機能

Elementor Proを3年使い倒してわかった、本当に使う機能と使わない機能

Elementor Proを3年使っています。その間に作ったサイトは50以上。WordPressのページビルダーとしては、間違いなくトップクラスのツールです。

ただ、「完全活用ガイド」と称して全機能を羅列する記事は世の中に山ほどあります。この記事ではそういうことはしません。

代わりに、3年使ってわかった「実際に使う機能」と「あるけど使わない機能」を仕分けします。加えて、Webflowも併用している立場から、どちらを選ぶべきかの判断基準も書きます。

毎回使う機能(これがないと困る)

Theme Builder

Elementor Proを入れる最大の理由がこれです。

ヘッダー、フッター、アーカイブページ、シングルポスト(記事詳細)、404ページ......。WordPressのテンプレート構造をまるごとElementorのビジュアルエディタで編集できます。

無料版のElementorでは個別のページしか編集できませんが、Theme Builderがあると「全記事ページのレイアウトを一括で変える」ができます。

たとえば、ブログ記事のサイドバーを全ページから外す作業。テーマファイルをPHPで書き換えれば5分ですが、コードに触れないクライアントには無理です。Theme Builderなら、ドラッグ&ドロップで30秒で終わります。

Dynamic Content(動的コンテンツ)

WordPressのカスタムフィールド(ACF等)の値をElementorのウィジェットに直接表示する機能です。

これが効くのは「同じレイアウトだけどコンテンツが違う」ページの量産。不動産の物件詳細ページ、クリニックの症例紹介、ECの商品ページ。全部、テンプレートを1つ作ればACFの値で自動的にコンテンツが切り替わります。

実際にクリニックの症例紹介ページをDynamic Contentで構築したとき、1ページあたりの制作時間が40分から5分に短縮されました。ページの追加はACFに情報を入れるだけ。デザインを触る必要がありません。

Popup Builder

離脱防止ポップアップ、クッキー同意バナー、メルマガ登録モーダル。これらを全部Elementor内で作れます。

表示条件の設定が細かくできるのが便利で、「トップページに初回訪問したユーザーに、30秒後に表示」「特定のページで、スクロール50%以上で表示」のような条件が、コード不要で設定できます。

別途プラグイン(OptinMonster等)を入れなくて済むので、プラグインの数を減らせるのもメリットです。

Form Builder

お問い合わせフォーム、見積もり依頼フォーム、アンケートフォームがElementor内で作れます。Contact Form 7を入れる必要がなくなります。

送信後のアクション(メール通知、リダイレクト、Webhook送信)も標準で設定可能です。MailchimpやHubSpotとの直接連携もあるので、フォーム送信→メルマガリスト追加を自動化できます。

よく使う機能(あると助かる)

Motion Effects

スクロールに連動した視差効果(パララックス)や、要素のフェードイン・スライドインを設定する機能です。

使い方を間違えると「うるさいサイト」になるので、ヒーローセクションのパララックスと、セクション出現時のフェードインくらいに留めるのがおすすめです。

うちのチームでは「1ページあたり動きのある要素は最大5箇所」というルールを決めています。それ以上入れると表示が重くなるし、ユーザーの集中力を奪います。

Custom CSS

Elementor Pro以上で使える、ウィジェット単位でCSSを書ける機能です。

「Elementorの標準UIではできない微調整」がこれで解決します。具体的には、ホバー時の複雑なトランジション、疑似要素(::before, ::after)の追加、特定のブレークポイントだけのスタイル調整などです。

ただし、Custom CSSを多用するとメンテナンス性が下がります。「なぜこのCSSが必要なのか」をコメントに書く習慣をつけてください。半年後に自分で見てもわからなくなります。

WooCommerce Builder

Elementor ProにはWooCommerceのページ(商品一覧、商品詳細、カート、チェックアウト)をビジュアルで編集する機能があります。

WooCommerceのデフォルトデザインはかなり素っ気ないので、まともなECサイトを作るならこの機能は必須です。特に商品詳細ページのカスタマイズ自由度が高く、「関連商品」「レビュー」「サイズ表」の配置を自由に変えられます。

あるけど使わない機能

Loop Builder

Elementor 3.8で導入された、CMSコンテンツのループ表示をカスタマイズする機能です。

コンセプトは良いのですが、2025年時点では動作が不安定です。複雑なクエリ(カスタムタクソノミーでフィルタリング等)を設定するとプレビューと実際の表示がずれることがあります。

うちではLoop Builderではなく、Posts ウィジェット + Dynamic Contentの組み合わせで同じことを実現しています。安定性を優先するならこちらが無難です。

Elementor AI

2024年に導入されたAI機能で、テキスト生成・画像生成・コード生成がElementor内でできます。

試しましたが、正直使い道が限定的です。テキスト生成はChatGPTを直接使ったほうが柔軟だし、画像生成の品質はMidjourneyに遠く及びません。コード生成も、Custom CSSを自分で書いたほうが正確です。

月額の追加料金もかかるので(AI Starterで月$2.99〜)、個別のAIツールを使い分けるほうが結果的にコスパが良いです。

Notes(コラボレーション機能)

Elementorの編集画面にメモやコメントを残す機能。チーム開発では便利そうですが、実際にはSlackやNotionでやり取りするので使いません。

Elementor Pro vs Webflow: どう使い分けるか

うちはElementor ProとWebflowの両方を使い分けています。判断基準はシンプルです。

Elementor Proを選ぶケース

  • クライアントが自分で更新する必要がある: WordPressの管理画面は直感的で、非エンジニアでも記事追加やテキスト修正ができます。Webflowの管理画面はやや学習コストが高い
  • ブログの更新頻度が高い(月10本以上): WordPressのエディタのほうが記事作成は圧倒的に快適
  • EC機能が必要: WooCommerceの拡張性はWebflow Ecommerceの比ではありません
  • 予算を抑えたい: Elementor Pro年$59 + サーバー年$60〜 vs Webflow月$23〜49

Webflowを選ぶケース

  • デザインの自由度を最優先にする: CSS Gridの細かい制御、カスタムアニメーションはWebflowのほうが圧倒的にやりやすい
  • セキュリティとメンテナンスの手間を最小化したい: プラグイン管理・アップデート・セキュリティ対策が不要
  • ページ数が少なく、表示速度を重視する: Webflowのホスティングは静的サイトに近い速度が出る
  • 制作者がHTML/CSSの知識を持っている: Webflowは「コードを書かずにコードを書く」ツールなので、CSSの概念がわかる人のほうが使いこなせる

間違った選び方

「Webflowのほうが新しいからWebflow」「WordPressは古いからダメ」という判断は危険です。

クライアントが月に1回しかPCを開かない人なら、WordPress+Elementor Proで十分です。納品後のサポートコストも低い。

逆に、デザインにこだわりがあり、制作者側で継続的にサイトを改善していく体制があるなら、Webflowの方が長期的に生産性が高いです。

Elementor Proを効率的に使うためのTips

テンプレートを最初に整備する

サイトを作り始める前に、グローバルウィジェット(ヘッダー、フッター、CTA)とセクションテンプレート(ヒーロー、特徴紹介、FAQ等)を先に作っておきます。

5-6個のテンプレートがあれば、新しいページを作るときの作業時間が半分以下になります。

グローバルカラーとグローバルフォントを必ず使う

Elementorにはグローバルカラー・グローバルフォントの機能がありますが、面倒がってウィジェットごとに直接色やフォントを指定する人が多いです。

これをやると、後から「メインカラーを青から緑に変えたい」と言われたときに全ページ修正が発生します。グローバル設定を使っていれば1箇所変えるだけで済みます。

パフォーマンスを定期的にチェックする

ElementorはDOM要素(HTMLの構造)が多くなりがちで、ページが重くなる傾向があります。

Elementor 3.0以降で導入された「Improve Performance」設定(Element Caching、CSS Print Method: Internal Embeddingなど)を有効にしてください。PageSpeedのスコアが10-15ポイント改善することがあります。

まとめ

Elementor Proは「WordPressでサイトを作るなら入れておくべきツール」です。ただし、全機能を使う必要はありません。

必須: Theme Builder, Dynamic Content, Popup Builder, Form Builder 状況次第: Motion Effects, Custom CSS, WooCommerce Builder スキップ可: Loop Builder, Elementor AI, Notes

Webflowとの使い分けは、クライアントのリテラシーと更新頻度で判断してください。

まだElementor Proを使ったことがない人は、年$59のEssentialプランから始めれば十分です。Advancedプラン(年$99)やExpertプラン(年$199)は、25サイト以上を運用する制作会社向けなので、最初は不要です。

関連記事