悩む人WordPressでランディングページを自分で作ってみたいけど、便利なツールとかないかな？
こんな方にぴったりなのが「elementor」です！
elementorは、世界的に人気があるWordPressのプラグインで、めちゃくちゃ使い勝手が良いです。
クオリティの高いテンプレートを土台に、直感的な操作でサクサクとページが作れます。
だからこそ、コード（HTML/CSS）の知識がない方や、デザインに自信がない方でも安心して利用できます。
そこで今回は、以下の内容を解説していきます！
- ellementorの特徴や実際のページ例
- ellementorでランディングページを作る前に準備すること3つ
- ellementorでランディングページを作る5ステップ
- サイト制作時に気をつけたい3つのポイント
それでは、さっそく見ていきましょう。
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
elementor（エレメンター）とは？わかりやすく解説
elementorは、直感的な操作でWebサイトが作れる無料のWordPressのプラグインです。
通常、サイトを作るにはHTMLやCSSといったコードを書かなきゃいけないですが、elementorはその必要がありません。
ドラッグ＆ドロップで感覚的にサイトが作れるので、コードの知識がない方や、デザイン経験がない方も安心して利用できます。
あおいelementorは海外製ですが、日本語にも対応していますよ！
実際にどんなページが作れるのか？
elementorには「Kits（キット）」と呼ばれるテンプレートがたくさん用意されています。
これを土台にして、サイトを作っていきます。
キットはカテゴリーごとに種類が豊富で、どれもクオリティがめちゃくちゃ高いです。
カテゴリー
- 貿易サービス
- イベント・音楽
- テクノロジー
- ビューティー
- クリエイティブ・デザイン
- 教育・非営利団体
- スポーツ・フィットネス
- 企業・ビジネス
- 飲食
- 旅行・宿泊
- 健康・医療
具体例を3つ紹介しますね！
あおい制作会社に30万円くらい払って作ったような完成度の高いページだと思いませんか？
単にオシャレなだけでなく、読みやすさや機能性もかなりいいと思います。
レスポンシブ対応もバッチリなので、PC・タブレット・スマホどの端末で見ても綺麗に表示されます。
既存サイト内で1ページだけelementorを使って作成ができる
考える人今、すでにWordPressのテーマを使ってサイト運営してるんだけど、その中の1ページだけelementorで作れないかな？
このように考えている方も大丈夫です！
elementorはプラグインなので、新しくWordPressを立ち上げる必要はありません。
例えば、当ブログではSwellという有料テーマを使っていますが、プロフィールページとお問い合わせページだけはelementorで作っています。
あおい特に「既存サイトに販売用ランディングページを1つ追加したい！」といった場合に最適ですよ。
機能はすべて無料で使えるの？【無料・有料プラン】
elementorには、2つの種類があります。
- elementor（無料版）
- elementor Pro（有料版）
あおい結論から言うと、無料版でも十分に高品質で高機能なサイトが作れます！私も今のところ無料版を使ってます。
少しだけ違いを説明しておくと、無料版と有料版では以下の点で差があります。
- テンプレートの数
- ウィジェットの数
- テーマビルダーの有無など…
例えば、elementorでは「ウィジェット」と呼ばれるパーツを組み合わせてサイトを作っていきます。
パーツには、見出しパーツや画像パーツ、ボタンパーツなどがあります。
無料版だと使えるウィジェットが限られていて、編集画面に「Pro」と書かれたウィジェットは、無料版では使えません↓
ただ、基本的なパーツは無料版で十分カバーされてるので、そこまで心配しなくて大丈夫ですよ。
まずは無料版で始めてみて、もし「やっぱり有料版の機能が欲しいな」と思った時に考えればいいと思います。
elementorでランディングページを作るための準備
ここからは、elementorを使う前に必要な準備を3つ解説していきます。
- サーバー・ドメイン・WordPressのインストール
- 目的・ターゲット・訴求軸の決定
- 原稿・構成や素材の準備
①について、もう準備ができている人はここは読み飛ばしてください。
②と③は、成果の出るランディングページを作るために重要なポイントになります。
「まだちゃんと準備してないな…」という方は、ぜひチェックしてみてくださいね。
①サーバー・ドメイン・WordPressのインストール
まず、WordPressを利用するには「サーバー」と「ドメイン」の2つが必要です。
この3つの関係は、家を建てる時のイメージで考えると分かりやすいです！
- WordPress（Webサイト）：インターネット上の「家」
- サーバー：インターネット上の「土地」
- ドメイン：インターネット上の「住所」
サーバーとドメインは一緒に取得することが多いので、両方を提供しているサービスで同時にゲットするのがオススメです。
例えば、安さを重視したい方におすすめなのが「ロリポップ」というサービス。
ロリポップのハイスピードプラン（月額550円～）を契約すると、無料ドメインが2つも付いてきてお得です。
あおいロリポップはWordPressの表示速度も早く、シェア率も高いサービスなので、私は一番おすすめです。
サーバーやドメインについて詳しく知りたい方や、他のおすすめサービスについては、こちらも参考にしてください↓
WordPressをインストールする
契約が済んだら、次はサーバーにWordPressをインストールします。
先に紹介したロリポップを含め、ほとんどのサーバーでは「クイックスタート」という機能を使い、簡単にWordPressをインストールできます。
下記に有名なサーバー会社のヘルプを載せておきますね。
WordPressの初期設定とセキュリティ対策
インストールが終わったら、いよいよWordPressの管理画面にログインして、ページを作成します。
ただし、その前にWordPressの初期設定を済ませておきましょう。
初期設定では、文字化け防止のプラグインを入れたり、サイトのタイトルやキャッチフレーズの設定を行います。
初期設定については別の記事でまとめているので、ぜひ合わせてご確認ください。
②目的・ターゲット・訴求軸の決定
売上や集客アップなど成果につながるページを作りたいなら、事前の構想段階が勝負の鍵です。
必ず以下の3点を明確にした上で、次の原稿やデザイン作りに進んでいきましょう。
- 制作の目的：ゴールは必ず1つに絞る（商品販売？お問い合わせ？メルマガ登録？）
- ターゲット層：どんな悩みや希望を持っている人に届けたいのか、具体的なユーザー層を設定する
- 訴求軸：一番の強みを明確にする（安さを推すのか、それとも品質で勝負するのか？など）
あおいこの3つがあいまいだと、伝えたいことがブレてしまうので、思い切って内容を絞って打ち出していきましょう！
詳しくは別の記事でまとめているので、ぜひ合わせてご覧ください。
③原稿・構成や素材の準備
目的・ターゲット・訴求軸がしっかり決まったら、次は原稿と構成作りに取りかかりましょう。
ランディングページを作る目的は、商品の購入や申し込みなど、ユーザーに具体的な行動をうながすことです。
だからこそ、ユーザーの心理をしっかり理解して、心に刺さる言葉や情報を提供しないといけませんよね。
また、どんな順番で情報を伝えれば、スムーズにボタンクリックに誘導できるかも考える必要があります。
もし予算に余裕があれば、プロのセールスライターさんにお願いするのが一番おすすめです。
ただ、世の中には「ランディングページ向けのセールスレターの型」がいくつかあるので、それを参考にすれば、自分で書くこともできますよ！
あおいこの本が超オススメなので、ぜひチェックしてみてください↓
本書は「Kindle unlimited」を利用すると無料で読めます。
これはAmazonの電子書籍Kindleの読み放題サービスです。
30日間の無料体験ができ、無料期間内に解約も可能です。
＼ 200万冊以上を好きな端末で読み放題 ／
当ブログでも、原稿や構成作りのポイントを詳しく解説しています↓
elementorで高品質ランディングページを作る5ステップ
ここからは本題であるelementorを使ったページの作り方をご紹介します。
下記の5ステップに分けて、わかりやすく解説していきますね！
- elementorのインストール
- 新規固定ページを作成
- テンプレートの選択
- ページの編集
- 公開
ステップ①elementorのインストール
まず、最初にelementorのプラグインをインストールしましょう。
WordPressの管理画面にて、左側メニューの「プラグイン」をクリックして、「新規プラグイン追加」を選びます。
画面右上にある検索窓に「elementor」と入力して検索します。
elementorが表示されたら、「今すぐインストール」をクリックします。
インストールが終わったら「有効化」というボタンが表示されるので、それをクリックすれば完了です。
インストールと有効化の違い
インストールは、ただプラグインをWordPressに追加しただけの状態です。このままではまだ使えません。
そこで、有効化が必要になります。有効化をすることで、そのプラグインが実際に機能するようになります。
elementorの有効化が済んだら、次に「Envato Elements」というプラグインもインストールしてください。
elementorと同じやり方でインストールし、有効化までおこなっておきましょう。
ステップ②新規固定ページを作成
次に、新規で固定ページを作成します。
WordPressの管理画面にて、ダッシュボードの「固定ページ」の中にある「新規固定ページ追加」をクリックします。
編集画面が開いたら、次に「タイトル」と「テンプレート」を設定して、右上の「下書き保存」をクリックします。
- タイトル：お好きなタイトル名でOKです
- テンプレート：Elementor Canvas（Elementorキャンバス）を選択
ステップ③テンプレートの選択
次に「テンプレート」を選んでいきましょう！
まず、先ほど作った固定ページ内にある「elementorで編集」ボタンをクリックします。
elementorを使うページでは、毎回このボタンをクリックして編集を開始します。
まずは、画面に表示されているアイコンの中から、一番右の緑のアイコン「Envato Elements」をクリックします。
次に、「Free Kits」というタブをクリックします。
すると、たくさんのテンプレートが出てくるので、ここから好きなものを選びましょう。
右側に「カテゴリー」タブがあるので、その中から自分の商品・サービスに合ったデザインを選ぶといいですね。
テンプレートを選んだら、「Install Kits」という緑のボタンをクリックすると、インストールが始まります。
あおい私は今回、「Startup Business」というタイトルのテンプレを選びました。
インストールが終わった後で「Installed Kits」タブの中身を確認すると、先ほどインストールしたテンプレートが追加されているのが分かります。
そしたら、次に「View Installed Kit」 をクリックしましょう。
すると、たくさんページが表示されます。
例えば、ホームのページ、特徴のページ、お問い合わせページなどいろんなページがあるので、ここから好きなものを選んでください。
ランディングページを作る場合は、「Home」という名前のページをまずは選んでみましょう。
選んだら、緑のボタン「Insert Template」をクリックします。
すると、先ほどの編集ページに自分が選んだテンプレートが追加されました！
あおいこの状態から、いよいよ自分用にページを編集していきます。
ステップ④ページの編集
ここからは、具体的なページの編集方法を解説していきますね。
自分でできそうな方は、どんどん手を動かしてページを作っていってください。
あおい実際に自分でいじってみて、「ここの値を変えると、こんな風に変更されるんだ！」と分かれば、習得が早いです。
目次を用意したので、操作方法が分からないものがあれば、解説を探して読んでみてください。
1：テキストの内容を変更する
テキストを変更する時は、まずそのテキストの上をクリックします。
すると、左に編集項目が出てくるので「コンテンツ」というタブ内の「タイトル」に入っている文字を入れ替えます。
2：テキストの文字色やサイズ、フォントを変更する
文字の色やフォントを変えたい時は、左にあるタブを「スタイル」に切り替えます。
その中に各項目があるので、編集したいものをクリックして変更します。
※文字のフォントやサイズを変えたい場合は、「タイポグラフィ」から可能です。
フォントの枠をクリックすると、選択メニューが出てきます。
日本語のフォントを利用したい場合は、検索窓に「JP」と打ち込みましょう。
あおいこの中でおすすなのが、Note Sans JP！
日本の多くのWebサイトで使用されている有名なGoogleフォントです。
3：文字を好きな位置で改行する
文字を任意の位置で改行したい場合は、その位置に<br>と打ち込んでください。
HTMLを知っている方なら見たことがあるかも知れません。ブレイクのことで、これを入力すると、その位置で改行されます。
4：いらない要素を削除する
いらない要素を削除したい場合は、いくつか方法があります。
一つ目が、右クリックからの削除です。まず、削除したい要素の上をクリックします。
すると、右上にピンク色の「テキストエディターを編集」マークが出てくるので、この位置でマウスを右クリックします。
すると、メニューが出てくるので、この中から一番下「削除」をクリックすると削除されます。
↓もう一つが、画面中央に出てくる「内部セクションを編集」の中にある「×」マークをクリックして削除する方法です。
この方法だと、大きなセクションのカタマリが丸ごと削除されます。
5：写真やイラストなど画像を変更する
画像を変更したい場合は、テキスト同様に、まずその画像の上でクリックをします。
↓背景画像の場合は、「セクションを編集」の真ん中にある6つの黒ポチマークをクリックしてください。
すると、画面左に編集項目が出てくるので「スタイル」のタブに切り替えて、「画像」という箇所から、画像の入れ替えを行ってください。
あおい画像アップロードの際の注意点は「①画像は圧縮する」にて詳しく解説しています。
6：文字と文字の間隔を広げる・縮める
文字を入れた時に、やたらと文字間隔が詰まっていたり、逆に開き過ぎていることがあります。そんな時は「マージン」を調整しましょう！
まず調整したい文字の上をクリックします。
そして、画面左から「高度な設定」タブを選択し、その中の「マージン」の値を調整してください。
今回は、「当サービスの3つの特徴〜」の上に隙間を作りたかったので、「上」の値を3くらいに変更しました。
7：新しいブロック要素を追加する
テンプレートにはない要素を新しく追加したい場合は、「セクションを追加」から簡単に追加できます。
まず、追加したい位置の周辺にカーソルを持っていき、＋ボタン（セクションを追加）をクリックします。
次に、画面左上の「＋」ボタンをクリックします。すると、ウィジェットと呼ばれるパーツがたくさん出現します。
この中から追加したいパーツを選んで、ドラッグしながら先ほど追加した「セクション」部分に持っていきます。
追加した後は、同じように編集をしていけばオッケーです。
8：フッターなどの要素を追加する
先ほど7で解説したのは、「テキスト」や「画像」など個別の小さい要素を追加する方法でした。
それ以外に、フッターやヘッダー、ギャラリー、FAQなど、まとまった大きな要素を追加することも可能です。
今回は、フッターを追加するやり方を解説します。
まずは、フッターを入れたい位置で「セクションを追加」します。
テンプレートを追加した時と同様に、一番右の緑のアイコンをクリックしてください。
次に、一番右にある「Free Blocks」タブをクリックします。
今回はその中から「Footer」をクリックします。
すると、すでにデザインが出来上がったフッターのテンプレが出てくるので、この中から好きなものを選びましょう。
選んだら、緑のマーク「Insert Template」を押してインストールします。
すると、このようにフッターがページ内に追加されました↓
9：間違った操作を一個前に戻す
編集をする中で、「間違ってしまったから一個前に戻りたい」といったことがあると思います。
通常なら【Ctrlキー ＋ Z】で戻ることができますが、elementorでは、なぜかうまくいかないことが多いです。
そんな時は、「履歴」機能を使いましょう。
まず、画面左上の「＋」マークの中にある「履歴」をクリックします。
すると、過去の編集内容一覧が表示されるので、一個前に戻りたいなら上から2番目をクリックすればオッケーです。
10：下書き保存して、現在のページを確認する
elementorでは自動保存がされないので、編集中は適宜「保存」するようにしましょう。
保存は、画面右上の下矢印の中にある「下書き保存」をクリックすればオッケーです。
また、「固定ページを表示」をクリックすることで、今の時点でページ全体がどんな感じになっているか確認することができます。
11：お問い合わせフォームを作成する
Elementorでは、情報の送受信ができるフォームも無料で作成ができます。
「MetForm」というプラグインを入れて作成していきましょう。
あおい当ブログでも、MetFormで作ったフォームを使っています。
使い方の詳細は「MetForm 使い方」などで検索をお願いします。
12：【重要】タブレットとスマホ表示を編集する
パソコン表示用のページが完成した後で、次にやっておくべきなのが、レスポンシブデザインです。
特に、今の時代はスマホでWebサイトを見るユーザーが多いです。
なので、スマホで見たときに違和感のない文字サイズやレイアウトを作ることが大切です。
↓elementorでは、画面上のデバイスマークを切り替えることで、レスポンシブの編集ができます。
例えば、一番右のスマホに切り替えてみると、文字が異様に大きかったりすると思います。
これを見やすいサイズに変更しましょう。変更方法は、これまでのやり方と同じです。
ステップ⑤公開
最後のステップが「公開」です！
公開はとても簡単で、画面右上の「公開」ボタンをクリックすればオッケーです。
あおいお疲れ様でした！
初めて使う時は、編集に苦戦するかもしれませんが、慣れてくるとサクサク操作できるようになりますよ。
たくさん手を動かして、elementorに慣れていきましょう！
【必見】サイト制作時に気をつけたい3つのポイント
最後に、elementorでサイトを作る際に気をつけたいポイントを3つお伝えします。
- 画像は圧縮する
- ページ速度が遅くないかチェック
- WordPressのセキュリティ対策
①画像は圧縮する
画像をアップロードして使う場合は、必ず事前に「圧縮」をしましょう。
なぜなら、圧縮していない画像は容量が大きく、ページの読み込み速度に悪影響を与えるからです。
特に素材サイトからダウンロードした状態の写真は、かなり容量が大きいです。
また、サイズが横幅5000pxなど大きい場合は、2000pxくらいにサイズ調整しておくといいと思います。
あおい無料で使えるおすすめサービスはこちらです。
画像の圧縮
Tiny PNG（https://tinypng.com/）
「png」「jpg」「webp」の3つの形式の画像を圧縮できます。会員登録なども要らず、単に画像をアップロードするだけで大丈夫です。
画像のリサイズ
画像のリサイズ（https://rakko.tools/tools/67/）
会員登録なども要らず、単に画像をアップロードするだけで大丈夫です。
幅の枠に希望の横幅サイズを入れ、「縦横比を固定」にチェックを入れたままの状態でリサイズをしましょう。
②ページ速度が遅くないかチェック
画像や動画をたくさん入れたり、動きを入れたりしすぎると、どうしてもページが重たくなります。
ページの読み込み速度が遅いと離脱率アップにつながるので、注意が必要です。
例えばelementorでは、「モーション」という機能でフェードインなどの動きをつけることができます。
▼「高度な設定」タブのモーション効果から設定できます。
動きをつけたサイトはカッコイイですが、あまり多すぎると読みずらさにも繋がるので、ほどほどにしましょう。
自分のページの読み込み速度を調べたい時には、「PageSpeed Insights」というツールがおすすめです。
URLを入力するだけで、そのページの状態を分析してくれます。
あおい判定結果を100％にする必要はありませんが、あまりに数値が悪い場合は、改善しておいた方がいいですね。
③WordPressのセキュリティ対策
最後が、WordPressのセキュリティ対策です。
WordPressは、世界的に人気があるシステムなので、自動化されたボットやハッカーにとって攻撃対象となりやすいと言われています。
データ流出や不正ログインを防ぐためにも、しっかりとしたセキュリティ対策が必要です。
でも、安心してください！WordPressのセキュリティ対策は、無料プラグインで十分対応ができます。
セキュリティ対策は別の記事でまとめているので、ぜひ合わせて確認してみてください↓
まとめ：elementorをうまく利用してビジネス成果に繋げよう
ランディングページを作るときに大事なことの一つは、公開後の運用がスムーズにできるかどうかです。
そもそもランディングページは作って終わりではなく、公開後に得られるデータや反応を見ながら、修正・改善を繰り返して、最終的に一番成果が出るページにしていくことが大切なんですよね。
仮に、制作会社にお願いすると、納品後に自分でページを編集するのが難しいことがほとんどです。
そのたびに修正をお願いして、毎回お金がかかるってなると、ちょっと厳しいですよね。
だからこそ、便利なのが「elementor」です。運用結果を見ながら、自分で簡単に修正できるのは本当にありがたいと思います。
もちろん、最初は操作を覚えるのに時間がかかるかもしれません。でも、慣れてくれば自分でサクサク編集できるようになります。
ぜひ「elementor」を使って、あなたのビジネスを加速させるランディングページを作っていきましょう！
