ペライチで作るランディングページ制作のポイントを解説。

今回の内容は、ウェブサービスの「ペライチ」を使ってのランディングページ作成について解説します。

ランディングページといえば、ウェブ集客を実践したいと考える多くの方が必要としているページですね。自身の商品・サービスをプロモーションしていく為には、かならず必要になってきます。

ウェブ集客で成果を出している人はこのランディングページを上手く作成し、効果的に活用していることが多いです。しかし、ランディングページ作成することに課題を抱えている方が多いのが現状です。

理由は、まずページ作成自体に、専門的な知識が必要だと感じている方が多いから。

そこで、今回はランディングページ作成にオススメなウェブサービスのペライチをご紹介します。このペライチを使うことでHTMLやCSSを学ぶ必要もなく、そういった知識習得は自分には無理だと外注する必要もなくなります。

コピーライティングについては、また他の記事やセミナーなどで習得してもらうとして、この記事ではペライチを使ったランディングページ作成のポイントを解説していきます。

そもそもランディングページって?

まずは、そもそもランディングページって、どんなページなのかをおさらいします。

ランディングページとは、主にウェブ広告をクリックした際に表示される縦に長いページですね。

このページでは、自社の商品・サービスを案内します。

場合によりますが、とてつもなく長い文章をスライドさせていくと行き着くのが「申し込みボタン」。

そして、文章が訪問者の琴線に触れ、購買意欲を掻き立てられれば、そこから商品・サービスを実際に購入されます。

みなさんも、Facebookなどで広告をクリックした際に、よく目にすることが多いと思います。

今ではいきなり商品・サービスを販売するページが表示されることは少なくなりましたが、無料でPDFや動画講座を案内し、見込み客のメールアドレス取得を目的としたオプトインページを見かけることが、かなり多くなりました。

ちなみに、このオプトインページもランディングページの一種です。

ページに記載されている内容は、商品・サービスの案内なので、このランディングページを用意できなかったら、当然ウェブ広告は出稿できませんね。

といったことを考えると、このランディングページはウェブ集客の肝となる部分な訳です。

ランディングページを実際に作るには

ランディングページを作成するには、大きく分けて2つあります。

  1. 1つ目、ウェブ制作会社に外注する。
  2. 2つ目、自作する。

1つ目のウェブ制作会社に外注する場合、当たり前ですがプロが作成するので、仕上がりがキレイなページになります。

一見、この手段が最適に思われますが、実はデメリットがあります。なぜなら、要望を適切に伝えるには、ある程度のウェブに対する知識は必要になってきます。

また、要望通りに作成できたとして、やっぱり文言を修正したいなんて時にこれが中々の手間。

多くの場合、作成したウェブページは外注先が管理しているので、また連絡する手間・追加料金を考えると、良い事ばかりではないことがわかりますね。

本当に成果が出るのかわからないページに数十万出すのは辛いです。

2つ目の自作についても見ていきましょう。

自作にはHTMLとCSSの知識が必要になってきます。基本シンプルなプログラミングですが、個人差があるものの習得に時間がかかります。

数年前から「Bootstrap」というCSSフレームワークがある為、そこまで高度なデザイン知識が必要なくなったものの、HTMLの基礎知識が必要なので普段パソコンに触れていない人にはそれでも敷居が高いです。

しかし、このままだと八方塞がりなので、冒頭でお伝えしたパソコン初心者でも簡単にランディングページ作成ができるツール「ペライチ」をご紹介したいと思います。

ツール自作の使い勝手は素人でも扱えるくらいに使う側の気持ちに立ったツールな為、めちゃくちゃ簡単なんです。

意外と面倒い、ドラッグ・アンド・ドロップも必要なし!

テキスト入力とマウスをクリックができれば、ページ作成が可能なんです。

こんな便利なツールがあると知った時、ホントIT業界の技術の進歩は早さにビックリしました。早すぎて、意外とこのツールの存在を知らない人がまだまだ多いです。

デザイン面も、豊富なテンプレートが用意されている為、低クオリティになる事はまずありません。

このツールを使うことで、パソコン初心者でもウェブデザインが可能です。本業をやりつつ素早くページを作成することも、難しくありません。

そして今回、この記事でお伝えしたいのがこの「ペライチ」というサービスを使ったランディングページ作成になります。

ペライチの使い方

それでは、ペライチの使い方という事で解説をしていきます。

といっても、使い方はシンプルです。まずは、アカウント登録と使い方については、以下の参考記事がわかりやすく解説しています。

凄く簡単!ペライチの使い方【30分でホームページ作成しちゃった】

無料で使えるペライチで簡単にランディングページを作成しよう

登録作業は、2〜3分で登録できてしまうと思います。使い方もすごくシンプルですよね。

ブロックの挿入ボタンをクリック、要素のカテゴリーの中から、必要な要素を選択し、要素をクリックするとテキストの編集が可能です。マウスをクリックさえ出来てしまえば、誰でも扱えるツールです。

今回は、ランディングページ作成を解説していきましょう(オプトインページも同様の手順で作成可能)。

よく使う要素を一覧化

  1. ナビゲーション → ナビゲーション・ロゴ、ナビゲーション・ロゴ(上部に固定)
  2. パーツ → テキスト
  3. パーツ → 画像(横幅フルサイズ)
  4. パーツ → 画像
  5. パーツ → リボン見出し
  6. パーツ → バー見出し
  7. 区切り線 → 好きなデザインの区切り線を選択してください
  8. ボタン/フォーム → ボタン(大)
  9. リスト/ステップ → チェックリスト、チェックリスト(ボーダー付き)
  10. リスト/ステップ → 流れ
  11. 画像+テキスト → 左画像(1列)
  12. EC向けデザイン → よくある質問
  13. 有料プランブロック → HTML埋め込み(プレミアムプランだと使用可能)
  14. 有料プランブロック → フォーム(プレミアムプランだと使用可能)

これらを組み合わせることでランディングページが作成できます。私が実際にランディングページ作成時に使用したものを一覧化してみました。

また、オプトインページの作成も、同様の要素で作成できます。オプトインページの場合は、HTML埋め込み要素を使用し、お使いのメール配信サービスと連携することが可能です。

具体的なやり方は、メール配信サービスでフォームの埋め込みコードを取得(やり方は各々のメール配信サービスで解説されているのでそちらを参照)し、コピペするだけです。

短時間でシンプルでもいいのでランディングページを作成できる方法をこれで確立できることを考えてみてください。

自分の商品・サービスをいち早くプロモーションでき、素早くスタートを切れますね。

作成のポイントですが、以下の事例も参考にしつつ作成してみましょう。

ペライチ活用事例

何回かペライチを使っていると、事例を眺めているだけで、ここの箇所はあの要素を使っているな!と予想できるようになってきます。また、日頃Facebookで流れてくる広告をクリックするとペライチで作成されてページに誘導されることもありますので、そちらも参考にしましょう。

同じペライチで作成したページであれば、参考にしやすいですし、同じように作成することが可能です。

ペライチの活用法

プレミアムプラン・ペライチ決済の活用

よく質問されることなんですが、プレミアムプランしたほうがいいかですが、本格的にペライチを使っていきたいのであれば間違いなくプレミアムプランにした方がいいです。

ペライチの料金プラン一覧 | ペライチ

無料プランだとページの公開数が、1ページですがプレミアムプランに加入することで公開数が5ページになります。さらに、増やしたい場合は友達にオススメしましょう。

プレミアムプランでも、月々1,683円とそこまでの費用はかかりませんね。プレミアムで使える要素やテンプレートもありますので、かなりお得です。

公開ページ数が1ページで十分であれば問題ないですが、量産していくのが目的ならプレミアムプランに加入しましょう!

また、ペライチ決済機能も大変便利です。決済システムで有名どころと言えば、PayPalですね。PayPalでも、悪くはないのですか、設定しづらいといった問題があります。

【ペライチ決済】ネット通販、サービスEC、イベント決済にも!

ランディングページに決済機能との連携は不可欠ですので、どうせなら使い勝手がいいものが望ましいです。そこで、ペライチサービス内で用意されているペライチ決済を利用しましょう。ペライチ決済は、PayPalよりもシンプルなので使いやすいのでオススメです。

料金も月額500円なので、プレミアムプランとあわせてもかなり安いですね。プレミアムプランとペライチ決済を合わせても3000円以内に収まります。継続的に払うものですが、外注して何十万もかけるぐらいなら、かなり安価でランディングページの量産とページに決済機能をつけることが出来るので、利用者の立場に立った良質なサービスですね。

ペライチっぽさをなくすには

多くの方が、ツールを使用する上で気になる点で、そのツールに依存したデザインにならないかという懸念点があると思います。

これを完全に解消したいとなるとHTMLで自作するしかないのですが、少しでもペライチで作成したランディングページにオリジナルティを出す方法として、画像を使用しましょう。

まずは、一時期パフォーマンスが人気で一世を風靡したメンタリストDaiGoさんの公式サイトをご覧ください。

メンタリスト DaiGoのオフィシャルサイト

余談ですが、テレビ番組で見てからDaiGoさんの大ファンで、その後の活動をウォッチしてます。それはさておき、このDaiGoさんの公式ページもペライチで作成されています。

見てわかる通り画像を使っている為、ペライチっぽさがなくなっていますよね。ある程度は、ペライチの要素を使用しつつ、オリジナル感を出していきたい場合は、画像を使用しましょう!

ちなみに、ペライチではありがたいことにスマホ最適化をしてくれているのですが、その関連で画像がスマホ表示だと画像が少し小さく表示されてしまいます。

なので、画像は大きめに作成しましょう。主にヘッダー画像で画像を配置することが多いと思うので、オススメの画像サイズは、「2500 x 1875」です。

PCから見た時に、少し大きめに表示されますが、今はスマホからネットを見る方が大半な為、スマホ最適化で行きましょう。

スマホ最適化により、小さくなるとテキストが見づらくなる為、ヘッドライン、サブヘッドライン、ターゲットといったテキストサイズを少し大きめなフォントサイズにした方が望ましいです。

せっかく画像を作成しても、テキストが小さくて見えなかったら、悲惨ですから。

画像については、自分で作成するのが難しい方は上記の内容を外注先に伝えてみてくださいね。

もし、自分で画像編集をしたい場合、専用の編集ソフトがなくても簡単なものだったら自分で出来てしまいます。もちろん、本格的に画像編集に興味がある場合は、ぜひ購入して頂くとして(その場合、買い切りがオススメ)、シンプルで簡単な画像編集であれば本格的なソフトは購入しなくても意外となんとかなります。

資料作成ソフトのPowerPointや、Googleが無料で提供しているGoogleスライドでも作成できます。Macをお使いの方は、PagesとKeynoteで全然問題なく画像編集が可能です。または、オフィス系の代替ソフトで有名なOpenOfficeでも、十分です。

背景に画像を配置し、テキスト機能によりテキストを編集後に配置、簡単な図形描画ツールで図形を配置といった感じでシンプルなデザインだったら意外と作れてしまいます。

といっても、デザインについてはいくつかポイントがあるので、以下の記事が参考を参考にして下さいね。

可読性を高める!理解を深めるデザイン!【デザインで自分発信】

レッスンしててよく見るグラフィックデザイン初心者がやりがちな失敗とミス!

まとめ

今回は、今では使っている方も多くなってきたウェブサービスの「ペライチ」を紹介しました。

ペライチ決済の機能がどんどん追加されてきているところを見ると、これからもっと便利になっていくことが予想されるサービスです。

これを機に使ってみて、どれだけお手軽にウェブページが作成できるようになったのか、ぜひ体感してみてくださいね。

記事が気に入ったら
いいね!しよう

このは屋の最新情報をツイッターで