WordPress Elementorの使い方｜初心者がデザインを完成させるまでの手順

ホームページの「ちょっとした修正」を、毎回メールで制作会社に頼み、見積もりを待ち、数日後にやっと反映される。この往復がなくなるだけで、サイトの動きは変わる。営業資料が新しくなったその日に、サイトのバナーも差し替えられる。キャンペーンの締切に合わせて、文言を自分で直せる。

WordPressのページビルダー「Elementor」は、その「自分で直せる状態」を非エンジニアの手元に持ってくるツールだ。コードは書かない。画面上でパーツを置いていくと、そのままページになる。

この記事では、Elementorとは何かと料金の答えを先に整理し、そのうえで初心者が最初のページを完成させるまでの手順を追う。さらに、そもそも自社で作るのが正解なのか、制作会社やフリーランスに頼んだ方がいいのか、その判断材料まで踏み込む。

この記事の要点

• Elementorとは、コードを書かずにWordPressサイトを本格的にデザインできるドラッグ&ドロップ型のページビルダープラグイン（Elementor公式）
• 料金は、無料版なら0円で基本機能が使える。Pro版はフォーム・ポップアップ・テーマビルダー等が加わる有料プラン（金額は後述、変動するため要確認）
• 始め方は、WordPressに追加して有効化し、固定ページを「Elementorで編集」、ウィジェットをドラッグで配置する流れ
• 向いている用途は、中小企業の集客サイト、LP、ポートフォリオ、小規模なEC。コードを触らずにデザインを調整したい人向け
• 自社で作るか外注するかは、更新の頻度と社内に触れる人がいるかで決まる。判断軸と費用の目安は記事後半で解説

Elementorとは

Elementorは、コードを書かずにWordPressサイトのデザインを組めるページビルダープラグインだ。画面上でパーツをドラッグして置いていくと、置いた通りにページになる。

「ホームページを作りたいけど、プログラミングの知識がない」。多くの個人事業主や中小企業が抱える悩みがこれだ。WordPress単体でもサイトは作れるが、思い通りのデザインにするにはHTMLやCSSの知識が要る場面が出てくる。Elementorはそこを埋める。ワープロで文書を編集するような感覚で、サイトのデザインを変えられる。

ヘッダーを作る場面を考えてみる。従来のWordPressでは、テーマ既定の画一的なデザインを使うか、コードを直接編集するかだった。Elementorなら、背景画像を設定し、ロゴを置き、メニューを足す、という作業をすべてマウス操作で終えられる。

2025年以降のAI機能

Elementorは近年、AIを使った機能を取り込んで進化している。「どんなデザインにすればいいかわからない」という段階で、サイトの目的や業種に合わせたデザインをAIが提案してくれる。経験のあるデザイナーに相談しているような感覚で、レイアウトのたたき台を出せる。

レスポンシブデザイン（スマートフォンやタブレットでの表示）の調整も直感的になった。デバイスごとの見え方を確認しながら整えられる。表示速度の面でも、画像の自動最適化やキャッシュの強化が進み、画像や動画を使っても閲覧が重くなりにくい。

Elementorの料金。無料版とPro版でどこまでできるか

先に答えを言う。無料版は0円で始められる。Pro版は年間49ドル（約7,000円）から。料金は改定されることがあるので、契約前に公式サイトで最新の金額を確認してほしい（要確認）。

無料版でも、実用的なサイトはしっかり作れる。ページのレイアウト、画像やテキストの配置、ボタンやアイコンの設定など、一般的なコーポレートサイトやブログで必要な機能のほとんどがここに含まれる。まずは無料版で試して困らないケースは多い。

有料版のElementor Proでは、本格的なサイト構築に効く機能が加わる。サイト全体のデザインを一括で管理する「テーマビルダー」、問い合わせを受ける「フォームビルダー」などだ。ECサイト構築プラグインのWooCommerceとの連携も使え、商品ページやカート画面まで自由にデザインできる。

判断の目安はシンプルだ。問い合わせフォームをElementorで作りたい、サイト全体のヘッダーやフッターを統一したい、通販ページを作り込みたい。このどれかに当てはまるならProを検討する。名刺代わりの数ページで足りるうちは無料版で十分なことが多い。

自社で作るか、制作会社やフリーランスに頼むか

Elementorを使えば自分で作れる。だからといって、全部を自社でやるのが常に得とは限らない。ここは費用だけでなく、作った後の運用まで含めて考えたい。

判断軸

• 更新の頻度。月に何度も文言や写真を差し替えるなら、内製にした方が速いしコストも下がる。年に数回なら外注でも困らない
• 社内に触れる人がいるか。Elementorは操作を覚えれば難しくないが、覚える人がいなければ結局止まる。担当者を1人決められるかがカギ
• デザイン要件の高さ。競合と差がつくビジュアルやブランド設計まで求めるなら、プロの設計力に投資する価値がある
• 立ち上げまでの時間。学習しながら自分で作ると時間がかかる。締切が近いなら、最初は外注して運用だけ引き取る手もある

費用と期間の目安

以下は一般的な相場感で、案件の規模や要件によって大きく変わる。正確な金額は見積もりで確認してほしい（要確認）。

• 自社で作る（Elementor）。初期費用はほぼ0円から、Proを使っても年間数千円程度。あとは自分の時間。基本操作を覚えるのに数日から数週間が目安
• フリーランスに頼む。数万円から数十万円、期間は数週間から1ヶ月ほどが目安。コミュニケーションが速く、小回りがきくことが多い
• 制作会社に頼む。数十万円からで要件次第で上下する。期間は1ヶ月から数ヶ月。設計・進行管理・品質保証まで任せられる

現実的な落としどころとして、最初の土台は外注で作り、日々の更新は自社でElementorを使って回す、という分担もよくとる。土台の設計を間違えなければ、運用の内製化はぐっと楽になる。

初心者向け、Elementorの使い方

ここからは、実際にElementorを触ってページを完成させるまでの手順を追う。最初の1ページを自分の手で作れれば、あとは同じ操作の繰り返しだ。

インストールと初期設定

WordPressでElementorを始めるのは、想像以上に簡単だ。管理画面から「プラグイン」→「新規追加」と進み、検索ボックスに「Elementor」と入力する。表示された中から「Elementor Website Builder」を見つけて「インストール」、続けて「有効化」をクリックすれば準備完了だ。

有料版のElementor Proを使う場合は、まず公式サイトからライセンスを購入する。購入後、ダウンロードしたプラグインファイルをWordPressの「プラグインのアップロード」からインストールし、発行されたライセンスキーを入力するとProの機能が使えるようになる。

基本的な設定項目の確認

快適に使うために、いくつかの初期設定を確認しておく。まず押さえたいのがデザインの基本設定だ。管理画面の「Elementor」→「設定」から、サイト全体で使うカラーパレットやフォントを設定できる。ブランドカラーやロゴのフォントをここで決めておくと、後の作業が速くなる。

画像まわりの設定も見ておく。Elementorは画像を自動で最適化するが、アップロードする画像のサイズ制限や品質を自分のニーズに合わせて調整できる。大きすぎる画像は表示速度に響くので、ここは慎重に設定する。

推奨環境と動作要件

快適に動かすには、環境を整えておくことが効く。2025年時点で、PHP 7.4以上（できればPHP 8.0以上）が推奨されている。WordPressは最新版が望ましいが、最低でもバージョン6.0以上が必要だ。

サーバーのメモリ制限も見落とせない。編集画面では画像やウィジェットを多用するため、最低256MB、できれば512MB以上を確保したい。レンタルサーバーは契約でメモリ制限が決まっていることが多いので、事前に確認しておく。

ブラウザはGoogle Chrome、Firefox、Safari、Microsoft Edgeの最新版がサポートされている。特にChromeは開発チームが主にテストに使っているブラウザで、動作が安定しやすい。要件を満たさない環境だと、編集画面が重くなったり保存時にエラーが出たりする。本格的に作り始める前に整えておくと、後で困らない。

エディター画面の基本操作

ページ作成は、「固定ページ」や「投稿」の編集画面で「Elementorで編集」ボタンをクリックするところから始まる。普段のWordPressとは違う、Elementor専用の編集画面が開く。これが作業場になる。

画面の構成はシンプルだ。左側のパネルに、ページへ追加できる要素（ウィジェット）が並ぶ。中央に実際のページが表示され、そこへ要素をドラッグ&ドロップして置いていく。要素を選ぶと右側に設定パネルが出て、色やサイズ、余白を細かく調整できる。

便利なのは、編集中の変更がリアルタイムでプレビューされる点だ。文字の大きさや色を変えるたびに、結果をすぐ確認できる。グラフィックソフトで絵を描くような感覚で、ウェブページをデザインできる。

セクションとカラムの使い方

レイアウトを作るうえで軸になるのが、「セクション」と「カラム」の考え方だ。セクションは、ページの大きな区切りを作る箱のようなもの。ヘッダー、メインビジュアル、サービス紹介、会社概要など、内容ごとに別のセクションを作っていく。

各セクションの中には「カラム」を置ける。カラムは縦に区切られた列のことだ。会社概要のセクションを2つのカラムに分け、左に説明文、右に写真を配置する、といった使い方ができる。カラムの幅は自由に変えられ、3分の2と3分の1にしたり、均等に割ったりできる。

このセクションとカラムの組み合わせが、デザインの基礎になる。最初は1セクションに1カラムという単純な形から始めて、徐々に複雑なレイアウトへ進むのがおすすめだ。

基本的なウィジェットの活用

Elementorには、ページを構成するパーツ（ウィジェット）が揃っている。基本は「見出し」「テキスト」「画像」「ボタン」。これらを組み合わせるだけで、たいていのページは作れる。

サービス紹介ページを例にする。まず「見出し」ウィジェットでサービス名を置き、下に「テキスト」ウィジェットで説明文を入れる。特徴を分かりやすく見せたいときは「アイコンボックス」ウィジェットを使うと、アイコンと説明文を組み合わせた見やすいデザインになる。詳しい説明へのリンクは「ボタン」ウィジェットで作り、目立たせることで、読者の動線を自然に作れる。

画像の扱いも直感的だ。「画像」ウィジェットをドラッグ&ドロップし、メディアライブラリから選ぶか新しくアップロードする。サイズ調整、角丸、影の追加まで、すべてマウス操作で終わる。一度置いたウィジェットはいつでも移動・複製できるので、同じデザインを何度も作り直す必要はない。

ドラッグ&ドロップでレイアウトを作る

Elementorの魅力は、マウス操作だけでプロっぽいデザインが作れる点にある。基本は、左側のパネルから要素を選び、中央のキャンバスへ置く操作だ。

会社概要ページを作ってみる。まず「セクション」を置き、中に2つのカラムを作る。左のカラムには会社情報を入れたいので「テキスト」ウィジェットをドラッグ&ドロップ。右のカラムには「画像」ウィジェットを落として、オフィスの写真を配置する。位置を変えたくなったら、要素をクリックしてドラッグするだけで動かせる。

役に立つのが、ドラッグ中に表示される青い線だ。この線が、要素を置ける場所を示している。2つのテキストブロックの間に画像を入れたいなら、その間に青い線が出たところでドロップすれば、きれいに収まる。

スタイルの設定方法

要素を置いたら、次は見た目の調整だ。要素をクリックすると右側に出る設定パネルで、文字の大きさ、色、行間、余白などを細かく変えられる。

特に効くのが「余白」の設定だ。要素の周りの空間を整えると、読みやすく洗練されて見える。見出しの下に少し余白を取るだけで、本文との関係がはっきりし、情報が整理されて見える。

色の設定も大きい。サイト全体で使う色をカラーパレットとして保存でき、企業カラーを登録しておけばボタンやテキストの色を統一するのが簡単になる。背景色を決めるときは、テキストとのコントラストを確認しながら調整できるので、読みやすさを保ちやすい。

レスポンシブデザインの基本

いまのサイトは、スマートフォンやタブレット対応が欠かせない。Elementorでは、画面右下のデバイスアイコンをクリックするだけで、異なる画面サイズでの表示を確認・調整できる。

PCでは横並びの要素を、スマホでは縦並びに変えたいとき。デバイスアイコンをスマホに切り替えて、カラム設定を変えるだけでいい。画像のサイズもデバイスごとに最適な大きさにできる。

気をつけたいのがテキストの読みやすさだ。PCでちょうどいいフォントサイズが、スマホでは大きすぎたり小さすぎたりする。Elementorはデバイスごとに文字サイズを個別に設定できるので、それぞれの画面で最適な表示にできる。装飾やスペーサーなど、スマホでは不要な要素を非表示にする手もある。PCとモバイルで使い分けることで、それぞれの画面に合った見え方を用意できる。

テンプレートの活用

制作の効率を大きく上げてくれるのが、テンプレート機能だ。一から作らず、プロがデザインした既存テンプレートを土台にすれば、質の高いページを素早く組める。

使い方は、編集画面の左上「テンプレートライブラリ」ボタンをクリックする。ポップアップにさまざまなデザインが並ぶ。「About Us（会社概要）」なら、業種に合わせたテンプレートを選べる。美容院ならスタッフ紹介中心、不動産なら実績や物件情報を見せるデザイン、といった具合だ。テンプレートには「ページテンプレート」と「ブロックテンプレート」があり、前者は1ページ分、後者はお問い合わせセクションなど部品単位で使える。

自分で作ったデザインをテンプレートとして保存もできる。気に入ったセクションを右クリックメニューから「テンプレートとして保存」しておけば、別のページで呼び出して内容だけ差し替えられる。複数ページのサイトを作るときに効く。

テンプレートはそのまま使わず、自社ブランドに合わせて調整するのが大事だ。まずカラースキームを自社カラーへ。グローバルカラー設定を使えばサイト全体の色を一度に変えられる。次にフォント。日本語サイトはデフォルトフォントが最適とは限らないので、和文フォントと文字サイズ、行間を日本語に合わせて整えると読みやすさが変わる。サンプル画像は自社の写真に置き換え、トリミングや配置まで整えて全体のバランスをそろえる。セクションの順序を入れ替えたり不要な部分を削ったりしてもいいが、デザインの統一感だけは崩さないように意識したい。

よくある失敗パターン

作り始めてからつまずく箇所は、だいたい決まっている。先に知っておくと避けられる。

• 無料版で作り込んだ後にフォームやサイト全体の統一が必要になり、Pro前提で設計し直す。最初に「フォームが要るか」を決めておくと手戻りが減る
• プラグインを入れすぎて表示が重くなる。Elementorと相性の悪いテーマを使うと崩れることもある。テーマは軽量なものを選ぶ
• スマホ表示の確認を後回しにして、公開後に崩れているのに気づく。作りながらデバイスを切り替えて確認する癖をつける
• デザインは凝ったのに、更新する人が社内におらず放置される。作る前に運用担当を1人決めておく
• テンプレートをそのまま使い、ブランドと合わないページになる。色とフォントと写真の3つだけでも差し替えると印象が変わる

ホームページ運用をAIで効率化するとどうなるか

Elementorで自分でも直せる状態になると、次の悩みは「更新に手が回らない」に移ることが多い。ブログの下書き、バナーの文言、問い合わせへの一次返信。どれも大事だが、時間を食う。

ここにAIを噛ませると、運用の重さが変わる。記事の素材集めや構成のたたき台、更新すべきページの洗い出し、問い合わせ内容の分類。人が判断すべきところは人が握ったまま、手を動かす部分だけを機械に寄せる。結果として、サイトを「作って終わり」から「回し続ける資産」に変えやすくなる。

F2Tは、こうしたAIの実装を自分たちの業務で毎日動かしながら、その記録をこのブログに書いている。理屈だけでなく、実際に使って残ったものを共有しているつもりだ。

もし「自社でやるか外注するか」「Elementorで続けるか作り直すか」「運用のどこをAIに任せられるか」で迷っているなら、方針だけ一緒に整理する無料の壁打ち相談をやっている。売り込みはしない。頭の中を言葉にして、次の一手を決める場として使ってほしい。

無料で相談してみる → https://f2t.jp/#f2t-cta

この記事を書いた人

Tomohiko Akiyama（F2T） AIエージェント組織を自分の業務で毎日動かしている実装者。このブログの記事は、すべてその実作業の記録から生まれています。