こんにちは、ユキです＾＾
販売サイトの売り上げやお店の集客をアップさせるために、
ランディングページを作りたいと考えてるケースも多いんじゃないかしら。
でもWebデザイナーなんかにランディングページ制作を依頼すると、
場合によっては100万円以上の費用がかかっちゃうわ。
ランディングページが売り上げや集客のアップにどの程度効果があるか分からないから、
できればランディングページ制作にあまり費用はかけたくないところよね。
そこでノーコードツールであるWordPressのページビルダープラグイン「Elementor」を
使えば、安い費用で簡単にランディングページが作れちゃうのよ。
じゃあ実際にElementorでどうやってランディングページを作るのか、
などについて詳しく見ていきましょう。
Elementorでランディングページを作る前の準備
WordPressでElementorを使ってランディングページを作るには、
それなりの準備が必要なのよ。
まず、完成したランディングページを公開するのに必要なサーバーとドメインを
別途調達しておくの。
WordPress以外のノーコードツールではサーバーとドメインも提供してたりするんだけど、
WordPressではサーバーもドメインも提供してないわ。
だからWordPressでランディングページを作っても、そのままだとネット上に
公開できないから、サーバーとドメインを別途調達しておく必要があるってわけ。
サーバーとドメインを調達したら、調達したサーバーにWordPressをインストールして、
さらにWordPressにプラグインであるElementorをインストールするの。
Elementorをインストールしてようやく準備完了、いよいよランディングページの制作に
入っていくのね。
ドメインも提供しているレンタルサーバーを利用する
サーバーとドメインを別々に調達するのはちょっと手間だから、
できればドメインも提供してるレンタルサーバーを利用すると良いわよ。
ちなみにドメインっていうのは、
WebサイトのURLの「http://www.」の後に続く部分のことなの。
例えばAmazonのショッピングサイトのURL「https://www.amazon.co.jp」だと、
「www.」の後の「amazon.co.jp」がドメインになるのね。
最近はドメインも提供してるレンタルサーバーも増えてるから、
・エックスサーバー
・さくらのレンタルサーバー
・お名前.comレンタルサーバー
・mixhost
・カラフルボックス
など名どころのレンタルサーバーならサーバーとドメインの両方が利用できるわよ。
もちろんレンタルしなくても自力でサーバーを立てられるなら、
自作のサーバーを使っても何ら問題は無いわ。
（サーバーを立てられる人がElementorを使うとは考えにくいけど・・・）
WordPressクイックスタートが利用できるレンタルサーバー
サーバーとドメインを調達したらサーバーにWordPressをインストールするんだけど、
サーバーにWordPressをインストールするのってちょっと手間がかかるのよ。
だからレンタルサーバーを利用するんだったら、簡単にWordPressがインストールできる
「WordPressクイックスタート」に対応したレンタルサーバーを選びましょう。
WordPressクイックスタートが利用できるのは
・エックスサーバー
・mixhost
・カラフルボックス
などね。
サーバーにWordPressをインストールしようと思ったら、通常はWordPressのファイルを
ダウンロードして、それをインターネット経由でアクセスできる場所に配置。
さらにブラウザでWordPressファイルにアクセスして、
PHP設定などの初期設定を行わないといけないのよ。
ところがWordPressクイックスタートだと、レンタルサーバーを契約する際に
WordPressクイックスタートの利用にチェックを入れて必要事項を入力するだけでOK。
これだけで、
WordPressがインストールされた状態のレンタルサーバーが使えるようになるわ。
初めてElementorでランディングページを作るんだったら、
WordPressクイックスタートが使えるレンタルサーバーがおすすめね。
WordPressにElementorをインストール
サーバーにWordPressをインストールしたら、
次にはWordPressにElementorをインストールするのよ。
WordPressクイックスタートで設定したランディングページのURLの後に
「/wp-admin」と入力してWordPressの管理画面にログインするの。
例えば設定したランディングページのURLが「https://www.landing.com」だとすると、
「https://www.landing.com/wp-admin」と入力すればログイン画面が表示されるわ。
WordPressの管理画面にログインしたら、画面左側のメニューで「プラグイン」→
「新規追加」を選び、画面右側の検索窓に「elementor」と入力して検索するの。
検索結果の一覧内にある「Elementor Page Builder」の「今すぐインストール」をクリック、
インストールが完了したら「有効化」をクリックすればOKよ。
これでElementorを使ってランディングページを作るための準備は完了、
いよいよ実際にランディングページを作る作業に入っていくわ。
Elementorでランディングページを作る
まずWordPressの管理画面の左側にあるメニューで「固定ページ」を選択、
画面右側上部の「新規追加」をクリックするの。
さらに画面上部の「Elementorで編集」をクリックすると、
Elementorの編集画面が表示されるわ。
Elementorの編集画面が表示されたら、
画面左下の歯車アイコンをクリックして「固定ページ設定」画面を開くのよ。
画面左側の「タイトルを隠す」のタブをONに切り替えて、
「固定ページレイアウト」で「Elementorキャンバス」を選ぶ。
これでヘッダーやフッター、サイドバーなどの余分なものが無いランディングページが
作れるようになるわ。
テンプレートを選ぶ
編集画面がランディングページ用になったら、Elementorにデフォルトで用意されてる
テンプレートから使いたいデザインのものを選ぶのよ。
編集画面の「ウィジェットをここにドラッグ」と表示されてるところに「＋」とファイルの
アイコンがあるから、ファイルの方をクリックするの。
ちなみに「＋」のアイコンをクリックすると編集画面にセクションが追加されて、
そのセクション内にテキストや画像などのウィジェットを配置できるようになるわ。
ファイルのアイコンをクリックするとテンプレート一覧が表示されるから、
「landing page」と検索してランディングページ用のテンプレートを絞り込むのよ。
一覧から使いたいデザインのテンプレートを選んでクリック、さらに画面右上にある
「挿入」ボタンをクリックすればElementorの編集画面にテンプレートが反映されるのね。
Elementorでテンプレートを編集
Elementorの編集画面にテンプレートが反映されたら、
あとはテンプレートの内容を目的に沿ったものに編集していくのよ。
テンプレートの見出し部分をクリックすると編集可能となり、
画面左側でテキストを入力すると見出し部分が入力したものになるわ。
同じようにテンプレートの画像部分をクリックして、
画面左側で別の画像を選択すると画像を挿し替えることもできるの。
「ウィジェットをここにドラッグ」の「＋」アイコンをクリックしてセクションを追加、
セクション内にウィジェットを配置すればテンプレートにテキストや画像などを
追加することも可能よ。
見出しやテキストのアイデア、使いたい画像を事前に用意しておけば、
Elementorを初めて使う人でも30分ぐらいでランディングページが作れちゃうわ。
WordPressをインストールするところを含めても、Elementorを使うことで1時間から
1時間30分ぐらいでランディングページが完成させられるのね。
無料版のElementorだと全てのテンプレートは使えない
Elementorのテンプレートは全部で300種類以上あるんだけど、
無料版のElementorだと全部は使えないのよ。
実はElementorには無料版と有料版のElementorProがあって、
全てのテンプレートが使えるのはElementorProだけなの。
無料版のElementorのテンプレート一覧にも、
ElementorProでないと使えないテンプレート表示されるわ。
だから気に入ったデザインのテンプレートを見つけても、
無料版のElementorだと使えないことがあるから気を付けてね。
ちなみにテンプレートの右上に「PRO」の表示があるとElementorProでしか使えなくて、
「PRO」の表示がないと無料版のElementorでも使えるわよ。
テンプレート同士を組み合わせて新しいテンプレートを作る
無料版のElementorで使えるテンプレートには限りがあるんだけど、
テンプレート同士を組み合わせて新しいテンプレートを作ることもできるのよ。
例えば、全体的なデザインはAのテンプレートを使って、
画像はBのテンプレートの物を使いたいとするじゃない。
通常はBのテンプレートに使われてる画像をネットで探してパソコンに保存、
ElementorでAのテンプレートに保存した画像を貼り付けるといったことをしないと
いけないわ。
でもBのテンプレートで使われてる画像をネットで見つけられるとは限らないし、
ランディングページで使うんだったら商業利用の許可も得る必要があるのよ。
そこでElementorではBのテンプレートの画像を切り出して、
Aのテンプレートに貼り付けるといったことができるようになってるの。
これなら画像を探す必要もないし、別途商業利用の許可を得る必要もないわ。
無料版のElementorでは100種類ほどのテンプレートしか使えないけど、
テンプレート同士を組み合わせることでバリエーションを増やすことができるわよ。
Elementorには日本語フォントが1つしかない
ランディングページに限らずWebサイトを作る時に、
ページ全体のデザインとテキストのフォントを合わせるのって当たり前よね。
でもね、Elementorには日本語のフォントが1つしかないから、ランディングページの
デザインとテキストのフォントを合わせようにも合わせられないのよ。
（有料版のElementorProも日本語フォントは1つだけ）
Elementorはイスラエルの会社が開発したプラグインで、徐々に日本でも利用者が
増えてるけど、現状ではまだ日本語のWebサイトを作るのにはあまり向いてないの。
（今後Elementorで使える日本語フォントが増えることに期待）
ネットを見てて、たまにページデザインとテキストのフォントが合ってないサイトがあると、
やっぱり違和感を覚えちゃうわ。
だからと言って、テキストのフォントに合わせてランディングページのデザインを
決めるっていうのもちょっと違うような気がするわね。
Elementorで日本語フォントを変更するには
日本語フォントが1つだけだと作れるランディングページも限られちゃうから、
何とかElementorで日本語フォントを選べるようにしたいわよね。
実はElementorで使える日本語フォントを増やす方法がいくつかあるわ。
有料版のElementorProには「カスタムフォント」という機能があって、
ネットでダウンロードしたフォントファイルをアップロードすることができるのよ。
無料版のElementorだとカスタムフォント機能が使えないから、
Elementorで使える日本語フォントを増やすことは難しいわ。
でもフォントを増やすためのプラグインを使うことで、無料版のElementorで作った
ランディングページのテキストのフォントを変えられるの。
ElementorProのカスタムフォント機能で使える日本語フォントを増やす
まず「Googleフォント」などの日本語フォントがダウンロードできるサイトで、
使いたい日本語フォントのファイルをダウンロードするの。
ダウンロードした日本語フォントのファイルは多分ZIP形式になってるから、
解凍ソフトを使って解凍しておいてね。
解凍したファイルに拡張子が「.ttf」とか「.woff」とかのものが無ければ、
ファイルの拡張子が変換できるサイトなんかを利用して変換しておくのよ。
次にElementorProのダッシュボードで「Custom Fonts」を選び「Add New」をクリック、
さらに任意のフォント名を入力して「ADD FONT VARIATION」をクリック。
そうするとファイルの一覧が表示されるから、拡張子が「.ttf」とか「.woff」のファイルを
選んで「UPROAD」をクリック、最後に画面右上の「公開」をクリックすれば
ElementorProで使える日本語フォントが増えるわ。
ただし、ランディングページってお店とかの宣伝として使われることが多いから、
ランディングページに使う日本語フォントをダウンロードする際は、
事前に商業利用可能かどうか確認しておきましょう。
フォントが追加できるプラグインを使う
カスタムフォント機能が使えない無料版のElementorでは、
フォントが追加できるWordPressのプラグインを使うと良いわ。
フォントが追加できるプラグインを使うことで、Elementorで使える日本語フォントは
増えないんだけど、WordPressで使える日本語フォントが増えるの。
だからElementorでランディングページを完成まで作っておいて、
最後にWordPressでテキスト部分のフォントを変更すれば良いのよ。
日本語フォントが増やせるプラグインには
・Japanese font for TinyMCE
・Google Fonts Typography
なんかがあるわ。
また、
・エックスサーバー
・さくらのレンタルサーバー
・お名前.comレンタルサーバー
といったレンタルサーバーでは、「モリサワフォント」という日本語フォントが
使えるようになるWordPress用のプラグインを提供してるわ。
（サーバーのユーザーのみ利用可能）
WordPressクイックスタートが使えることを合わせて考えると、やっぱりElementorで
ランディングページを作るんだったら「エックスサーバー」を利用するのが便利そうね。
WordPressの管理画面のメニューで「プラグイン」→「新規追加」と選んで、
画面右側の検索窓にフォントが増やせるプラグイン名を入力して検索。
ヒットしたプラグインの「今すぐインストール」をクリックして、インストールが完了したら
「有効化」をクリックすれば、WordPressで使える日本語フォントが増えるわよ。
Elementorで使えるテンプレートを増やす
無料版のElementorでは100種類ほどのテンプレートが使えるけど、
ランディングページに適したテンプレートとなると数が限られるわ。
テンプレートを切り貼りすることもできるものの、
それじゃあ「簡単に」ランディングページが作れることにならないわよね。
それなら先の日本語フォントと同じように、
無料版のElementorで使えるテンプレートを増やしちゃえば良いのよ。
実はアドオン（プラグインのプラグイン）を使うことで、
無料版のElementorで使えるテンプレートを大幅に増やすことができるの。
テンプレートが増やせるアドオンは
・Element Pack
・Ultimate Addons For Elementor
などいくつかあるんだけど、中でも「envato elements」がおすすめよ。
他のアドオンだと増やせるテンプレート数は100～200種類ぐらいなんだけど、
envato elementsだと何と700種類以上もテンプレートを増やせるのよね。
envato elementsでElementorのテンプレートを増やす
ランディングページをElementorで作るためのテンプレートを増やすには、
プラグインを追加する要領でenvato elementsをWordPressにインストールするの。
envato elementsを有効化したらWordPressの管理画面のメニューで「Elements」を選び、
メールアドレスを入力、2つのチェックボックスにチェックを入れて「Continue」をクリック。
そうするとenvato elementsのテンプレート一覧が表示されるから、
その中から使いたいテンプレートを探すのよ。
使いたいテンプレートが見つかったらクリックして、
・Import Template
・Create New Page
のどちらのボタンをクリックするの。
「Import Template」をクリックするとElementorのマイテンプレートに保存され、
「Create New Page」をクリックするとそのままElementorの編集画面に反映されて
ランディングページの制作に進むわ。
ただやっぱり、
envato elementsにもElementorProでないと使えないテンプレートがあるのよねぇ。
テンプレートに「PRO」の表示が付いてると、
無料版のElementorでは使えないから気を付けるのよ。
Elementorでランディングページを作る際に気を付けること
Elementorでランディングページを作るのは簡単なんだけど、
いくつか気を付けておかないといけないことがあるのよ。
1つはElementorをアンインストールすると、
Elementorで作ったランディングページのレイアウトが崩れちゃうってこと。
Elementorで作ったランディングページのデザインとかレイアウトは、
Elementorによってコントロールされてるのよ。
そのためElementorをアンインストールしちゃうと、
コントロールを失ってランディングページのデザインやレイアウトが崩れるってわけ。
だからランディングページを公開してる間は、もう使うことが無いとしてもWordPressも
Elementorもインストールしたままにしておいてね。
自分以外はWordPressにログインできないようにする
Elementorでランディングページを作る準備として、
サーバーにWordPressをインストールしたら、自分以外はWordPressに
ログインできないようにしておく必要があるわ。
サーバーにWordPressをインストールした際に決めたランディングページのURLの
後に「/wp-admin」を付けるだけで、WordPressのログイン画面にアクセスできちゃうのよ。
もちろんメールアドレスやパスワードを入力しないと実際にログインはできないけど、
ログイン画面に簡単にアクセスできちゃうだけでもかなりセキュリティリスクが高いの。
そこでサーバーにWordPressをインストールしたら、Elementorをインストールする前に、
「Site Guard WP Plugin」というプラグインをインストールしましょう。
Site Guard WP Pluginを使うことで、
ログイン画面にアクセスするURLの「/wp-admin」の部分が変更できるの。
またログイン画面に画像認証をプラスできて、メールアドレスとパスワードに加えて
ログイン画面に表示される平仮名や英数字を入力しないとログインできないように
なるのよ。
ログイン画面にアクセスしにくくなるだけでもセキュリティリスクは軽減できるし、
ログイン作業にひと手間追加すればさらにセキュリティリスクは低くなるわ。
ランディングページを検索されやすくする
Elementorで作るかどうかに関わらず、
ランディングページってどうしてもGoogleなどで検索される際に不利になるのよねぇ。
ランディングページでは、あまり冗長にならずにそれでいて十分な情報量が
詰め込めるように画像をたくさん使うことが多いわ。
実はGoogleなどの検索エンジンは画像の内容まで読み取ることができなくて、
画像の多いランディングページは「情報量の少ないページ」と見なされちゃうの。
情報量の少ないページを利用したい人は居ないから、必然的にGoogleなどで
関連ワードが検索されてもランディングページは上位に表示されにくいのよ。
だからと言って、画像を減らしてテキストを増やすと見にくくなって利用者の評価が
下がるから、結果的には検索ランクが下がっちゃうわ。
ランディングページが検索結果の上位に表示されやすくするには、
サイト名やドメインの決め方が重要なのね。
ランディングページを検索結果の上位に表示させるには
・同じようなサイト名やドメインを使っているサイトが少ない
・ドメインが覚えやすい
・サイト名もドメインも入力ミスしにくい
といったことを意識しないとダメよ。
これはいわゆるSEO対策ってやつなんだけど、ランディングページのSEO対策は
非常に難しいから、できれば専門家に相談することをおすすめするわ。
まとめ
Elementorを使った、ランディングページの作り方やランディングページを作る際に
注意することなんかを詳しく紹介したわ。
ランディングページの制作を専門家にお願いすると100万円以上の費用がかかることも
あるけど、Elementorを使うと無料で作れちゃうのよ。
でも簡単に作れる反面、見る人が見るとElementorで作ったことが分かることもあるの。
だから紹介した方法で使えるフォントやテンプレートを増やして、
オリジナリティのあるランディングページの制作に挑戦してみてね。
