Elementor使い方｜WPページビルダー

※本記事にはプロモーションを含みます

最終確認：2026年11月9日時点（日本時間）。料金・プラン・規約は変更されることがあります。契約前に公式サイトで最新情報をご確認ください。記載内容は効果や成果を保証するものではありません。

無料とPro（2026年11月確認）

Elementor Coreは無料でサイト数無制限・基本ウィジェットあり。Proは年額プラン（Essentialは1サイト等）。金額は時期やキャンペーンで変わるため、購入画面に表示される額を確認してください。

区分	できること
Free	ドラッグ＆ドロップ、基本ウィジェット、レスポンシブ
Pro	Theme Builder、フォーム高度化、ポップアップ、Wooテンプレ等

公式サイト：Elementor

Cocoonとの併用

多くの場合可能ですが、ヘッダー／フッターを両方で作ると役割が被ります。固定LPだけElementor、記事はテーマ、と分けると管理しやすいです。

始め方

1. ステージングでインストール
2. 必要な固定ページだけElementor化
3. 使わないウィジェットを減らして速度確認

速度と保守のための運用ルール

• Elementorは固定ページ／LPに限定
• 投稿本文はブロックエディタまたはテーマ
• 同じデザインをグローバルウィジェット化
• 使わないプラグインを増やさない

何でもElementor化すると更新時の切り分けが難しくなります。役割分担を最初に決めるのがコツです。

Elementorとは

Elementorは、WordPressのページをドラッグ＆ドロップで作れるページビルダーのプラグインです。見出し、テキスト、画像、ボタン、動画などの部品（ウィジェット）を画面上に配置し、文字の大きさや色、余白を見たまま調整できます。HTMLやCSSを書かなくても、ランディングページ（LP）やサービス紹介ページのようなデザイン性の高いページを作れるのが特徴です。無料版でも基本的なページ作成ができ、有料のElementor Proではテーマビルダーやフォーム、ポップアップなどの機能が加わります。

無料版で固定ページを作る手順

1. プラグインを追加：WordPressの管理画面で「プラグイン」→「新規追加」からElementorを検索し、インストールして有効化します。
2. ページを作成：「固定ページ」→「新規追加」でタイトルを入れ、「Elementorで編集」をクリックします。
3. レイアウトを決める：コンテナ（セクション）を追加し、1列・2列などの構成を選びます。
4. ウィジェットを配置：左側のパネルから見出し、テキスト、画像、ボタンをドラッグして並べます。
5. デザインを調整：色、フォント、余白を設定します。サイト全体の色とフォントは「サイト設定」でまとめて決めておくと統一感が出ます。
6. スマホ表示を確認：画面下のレスポンシブ切り替えで、タブレットとスマホの表示を確認し、文字の大きさや並び順を調整します。
7. 公開：プレビューで確認したら「公開」をクリックします。

ElementorとWordPress標準のブロックエディタの比較

項目	Elementor	ブロックエディタ
デザインの自由度	高い。細かな配置や装飾が可能	テーマに合わせた標準的なデザイン
表示速度	読み込むファイルが増え、重くなりやすい	比較的軽い
向いているページ	LP、トップページ、サービス紹介	ブログ記事、お知らせ
覚えること	独自の操作に慣れる必要がある	WordPressの標準操作
乗り換え	停止するとレイアウトが崩れる	テーマを変えても内容は残りやすい

Proが必要になる場面

• ヘッダー、フッター、記事ページのテンプレートを自分でデザインしたい（テーマビルダー）
• お問い合わせや資料請求のフォームを、デザインをそろえて作りたい
• ポップアップでキャンペーンの告知やメール登録を表示したい
• WooCommerceのショップページをデザインしたい

これらが不要なら、無料版とテーマの機能で十分なことが多いです。Proは年額のプランで、使えるサイト数によって価格が変わります。

メリット・デメリット

• メリット：コードを書かずにデザイン性の高いページを作れる。テンプレートが豊富
• メリット：利用者が多く、使い方の情報が見つけやすい
• デメリット：ページが重くなりやすく、表示速度の対策が必要
• デメリット：Elementorをやめると作ったページのレイアウトが崩れるため、乗り換えが難しい

表示速度を落とさないための設定

Elementorで作ったページは、通常のページより読み込むファイルが多くなります。表示速度を保つため、画像は事前に圧縮してからアップロードし、横幅も表示サイズに合わせて小さくしておきましょう。Elementorの設定にある「パフォーマンス」や「機能」の項目では、CSSの読み込みを最適化する機能や、使わない機能を無効にする設定ができます。キャッシュプラグインや、サーバーのキャッシュ機能と組み合わせると、さらに表示が速くなります。

ページを作り終えたら、GoogleのPageSpeed Insightsでスマホ表示の速度を確認し、特に重い画像や要素がないかを見ておくと安心です。

テンプレートを使って効率よく作る

Elementorには、プロのデザイナーが作ったページやセクションのテンプレートが用意されています。一からデザインするより、目的に近いテンプレートを読み込み、文字と画像を差し替える方が短時間で整ったページになります。テンプレートを使う場合も、色とフォントはサイト全体の設定に合わせて変更し、他のページとの統一感を保ちましょう。

自分で作ったセクションは「テンプレートとして保存」しておけば、別のページでも再利用できます。お問い合わせへの誘導ボタンや、サービスの特徴を並べたセクションなど、繰り返し使う部品を保存しておくと、ページを増やすときの作業が大幅に減ります。

更新とバックアップ

Elementorは更新の頻度が高いプラグインです。更新の前にはサイトのバックアップを取り、できればステージング環境（テスト用のサイト）で動作を確認してから本番に適用しましょう。他のプラグインとの相性で表示が崩れることもあるため、更新後はElementorで作ったページを一通り確認する習慣をつけておくと安心です。

よくある質問

まとめ

ブログ中心なら無料やテーマ標準で足りることが多いです。LPやテーマビルダーが必要になってからProを。

Elementorを使うかどうか迷ったら、まずは無料版で1ページだけ作ってみましょう。操作感と表示速度を確かめてから、使う範囲を決めるのが失敗しない進め方です。

参考・公式ソース

• https://elementor.com/pricing/
• https://elementor.com/help/elementor-pro-vs-free/

料金・機能は変更される場合があるため、最新情報は公式サイトでご確認ください。