Hello Elementorは装飾をほとんど持たない軽量テーマで、Elementorでページ全体を組み立てるランディングページ（LP）と相性が良い組み合わせです。この記事では、テーマと子テーマの準備から、ヘッダーやフッターを外したLP用ページの作り方、構成の考え方、公開前の表示速度とアクセシビリティの確認までを順に説明します。読み終えるころには、無料版のElementorだけでも1枚のLPを公開できる状態になります。
ElementorとHello Elementorは更新が頻繁で、画面の表記や無料版・Pro版の機能の分かれ方も変わります。本文では設定を目的で説明し、表記は目安として書いています（2026年10月現在）。作業前にはバックアップを取り、可能ならステージング環境で試してください。
準備：テーマ・プラグイン・子テーマ
まず次の3つをそろえます。
- Elementor（無料版）：プラグインの新規追加から導入します。
- Hello Elementor：外観のテーマ画面から導入します。
- 子テーマ：Elementor公式が「Hello Elementor Child」という子テーマのひな形をGitHubで公開しています。自分で作る場合は、
style.cssのヘッダーでTemplate: hello-elementorを指定します。
子テーマを使う理由は、Hello Elementorの更新でテーマのファイルが上書きされても、自分で加えたCSSやPHPを残すためです。LPでは計測タグの追加やLP専用CSSの読み込みなど、テーマ側に手を入れる場面が出てきます。
/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
*/Hello Elementorのバージョンによっては、管理画面にテーマ専用の設定ページがあり、テーマが出力するヘッダー・フッターや、ページタイトル、説明文のメタタグなどを個別に無効化できます。LPでは不要な要素が多いので、一度この設定ページを確認しておくと後の作業が楽になります。
LP用のページを作る
固定ページを新規作成し、Elementorで編集を始めます。ポイントはページテンプレートの選び方です。Elementorは独自のページテンプレートを用意しています。
- Elementor Canvas：テーマのヘッダー・フッターを出さず、Elementorで作った内容だけを表示します。広告から流入させる単独のLPに向いています。
- Elementor Full Width：テーマのヘッダー・フッターは残し、本文部分を全幅で使えます。サイト内の他ページへの導線を残したいLPに向いています。
テンプレートはElementorのページ設定、またはブロックエディタ側のページ属性から選べます。あわせて、ページタイトルを非表示にする設定も確認してください。LPでは見出しをファーストビューで自分でデザインするため、テーマが出す標準のタイトルは不要です。
// 子テーマの functions.php：Hello Elementor が出力するページタイトルを固定ページ「lp-sample」だけで隠す
add_filter( 'hello_elementor_page_title', function ( $show ) {
if ( is_page( 'lp-sample' ) ) {
return false;
}
return $show;
} );このフィルターはHello Elementorのテンプレート内で使われているものです。Elementorのページ設定にもタイトルを隠す項目があるため、通常はそちらで足ります。複数のLPでまとめて制御したいときにコードを使います。
構成を先に決めてから組み立てる
Elementorは自由に配置できる分、構成を決めずに作り始めると、要素が増えて読みにくいページになりがちです。先に紙やテキストで次の順番を決めておくと、作業が早くなります。
- ファーストビュー：誰の、どんな悩みを、どう解決するかを1文の見出しと短い説明で示し、行動ボタン（CTA）を置きます。
- 課題の共感：読者が抱えている状況を具体的に書きます。
- 解決策と特長：サービスや商品が何をするのかを、3〜5項目に絞って説明します。
- 根拠：導入事例、利用者の声、数字などを載せます。掲載許可を得たもの、事実に基づくものだけにします。
- よくある質問：申し込み前の不安（費用の考え方、解約、サポート）に答えます。
- 最後のCTAとフォーム：ページの終わりで、もう一度行動を促します。
Elementorでは「コンテナ」を使ってセクションを組むのが現在の基本です。コンテナは横並び・縦並びと余白をまとめて設定できるので、1セクション＝1コンテナを基本にし、入れ子を深くしすぎないようにすると、表示が軽く、修正もしやすくなります。
フォームとCTAの設置
申し込みや問い合わせのフォームは、Elementor Pro のフォームウィジェットを使う方法と、無料のフォームプラグイン（Contact Form 7やWPForms Liteなど）のショートコードをショートコードウィジェットで埋め込む方法があります。どちらでも、送信後に表示するサンクスページを別に用意しておくと、広告やアクセス解析での成果計測がしやすくなります。
フォームで個人情報を受け取る場合は、プライバシーポリシーへのリンクをフォームの近くに置き、受け取った情報の利用目的を明記してください。項目数は必要最小限に絞るほうが、入力の負担を減らせます。
CTAボタンは、文言を「送信」ではなく「無料で資料を受け取る」のように、押した結果が分かる言葉にします。ページ内で何度か繰り返し置いても構いませんが、行き先は統一します。
スマートフォン表示を作り込む
LPの訪問者はスマートフォンからの割合が高いことが多いため、編集画面の表示切り替え（デスクトップ・タブレット・モバイル）で、モバイル表示を基準に調整します。チェックするのは次の点です。
- 見出しの文字サイズが大きすぎて、1語ずつ改行されていないか
- 横並びの要素が縦並びに切り替わり、順番が自然か
- ボタンが指で押しやすい大きさと間隔になっているか
- 横スクロールが発生していないか
特定の端末だけで非表示にする機能もありますが、非表示にした要素も読み込まれる点は覚えておいてください。重い動画や画像を「モバイルでは非表示」にしても、通信量は減らないことがあります。
表示速度を確認する
LPは最初の画面がすぐに表示されることが大切です。PageSpeed Insightsで公開前のページを計測し、特に LCP（最大のコンテンツが表示されるまでの時間）と CLS（レイアウトのずれ）を確認します。
- ファーストビューの画像：適切なサイズに縮小し、遅延読み込みの対象から外します。ファーストビューの画像まで遅延読み込みにすると、表示が遅く見えます。
- 画像の幅と高さ：指定がないと読み込み後にレイアウトがずれ、CLSが悪化します。
- アニメーション：入場アニメーションを多用すると、表示が遅く感じられ、動きに敏感な人の負担にもなります。ファーストビューでは控えめにします。
- Webフォントとアイコン：使う書体の数を絞り、使わないアイコンセットは読み込まないようにします。
Elementorには、出力するHTMLやアセットの読み込みを軽くするための機能が用意されています。多くはバージョンアップで標準の動作になっていますが、設定画面の「機能」系の項目で状態を確認してください。
アクセシビリティと公開前の確認
LPは見た目を優先しがちですが、文字と背景のコントラスト、見出しの順序（h2の次にh3）、画像の代替テキスト、キーボードでボタンやフォームまで移動できるかを確認します。基準としては W3C の勧告である WCAG 2.2 が参考になります。自動チェックツールで分かるのは問題の一部なので、実際にキーボードだけで操作してみることも大事です。
最後に、広告専用のLPで検索結果に出す必要がない場合は、SEOプラグインの設定などでページを noindex にするか検討します。逆に検索から集客したい場合は、タイトルと説明文をページの内容に合わせて設定してください。
まとめ
- Elementor・Hello Elementor・子テーマの3つをそろえ、カスタマイズは子テーマで行います。
- 単独のLPは「Elementor Canvas」、サイト内導線を残すなら「Elementor Full Width」を選びます。
- 構成（ファーストビュー→課題→解決策→根拠→FAQ→CTA）を先に決め、コンテナを浅く組みます。
- フォームはサンクスページとプライバシーポリシーへの導線をセットで用意します。
- 公開前にモバイル表示、LCP・CLS、コントラストとキーボード操作を確認します。