【無料】ランディングページ制作マニュアルテンプレート

ランディングページ制作マニュアルテンプレート

ランディングページ制作マニュアルテンプレートの解説動画とダウンロードページです。

下記から、ファイルをダウンロードした後、解説動画をご確認ください。

PDFをダウンロード

ペライチ

もっと詳しく学びたい

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

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

ランディングページといえば、ウェブ集客を実践したいと考える多くの方が必要としているページですね。

自身の商品・サービスをプロモーションしていく為には、かならず必要になってきます。

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

しかし、ランディングページ作成することに課題を抱えている方が多いのが現状です。 理由は、まずページ作成自体に、専門的な知識が必要だと感じている方が多いから。

そこで、今回はランディングページ作成にオススメなウェブサービスのペライチをご紹介します。

このペライチを使うことでHTMLやCSSを学ぶ必要もなく、そういった知識習得は自分には無理だと外注する必要もなくなります。

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

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

まずは、そもそもランディングページって、どんなページなのかをおさらいします。 ランディングページとは、主にウェブ広告をクリックした際に表示される縦に長いページですね。

このページでは、自社の商品・サービスを案内します。 場合によりますが、とてつもなく長い文章をスライドさせていくと行き着くのが「申し込みボタン」。

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

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

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

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

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

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

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

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

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

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

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

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

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

本当に成果が出るのかわからないページに数十万も出すのは考えてしまいます。

2つ目の自作について。

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

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

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

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

意外と面倒い、ドラッグ・アンド・ドロップも必要なし! テキスト入力とマウスをクリックができれば、ページ作成が可能なんです。

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

デザイン面も、豊富なテンプレートが用意されている為、低クオリティになる事はまずありません。 このツールを使うことで、パソコン初心者でもウェブデザインが可能です。

本業をやりつつ素早くページを作成することも、難しくありません。

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

ペライチの使い方

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

といっても、使い方はシンプルです。まずは、アカウント登録をしましょう。

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

ブロックの挿入ボタンをクリック、要素のカテゴリーの中から、必要な要素を選択し、要素をクリックするとテキストの編集が可能です。

マウスをクリックさえ出来てしまえば、誰でも扱えるツールです。

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

よく使う要素をリスト化

  1. ヘッダー/メニュー > 左テキスト+右メニュー(上部固定)
  2. ヘッダー/メニュー > 左画像+右メニュー(上部固定)
  3. 文章 > テキストのみ
  4. 画像/動画 > 画像(横幅フルサイズ)
  5. 画像/動画 > 画像
  6. 見出し > 見出し:矢印
  7. 見出し > 見出し:リボン(フラット)
  8. パーツ > バー見出し
  9. 区切り線 > 好きなデザインの区切り線を選択してください
  10. ボタン > ボタン(大)
  11. 箇条書き/リスト > リスト(枠付)
  12. 箇条書き/リスト > ステップ(画像付き)
  13. 文章+画像 > 左画像
  14. 箇条書き/リスト > よくある質問
  15. その他 > HTML埋め込み(有料プランで使用可能)
  16. フォーム > 各フォーム(有料プランで使用可能)

これらを組み合わせることでランディングページが作成できます。

私が実際にランディングページ作成時に使用したものをリスト化してみました。

また、オプトインページの作成も、同様の要素で作成できます。オプトインページの場合は、HTML埋め込み要素を使用し、LINE公式アカウントと連携することが可能です。

具体的なやり方は、LINE公式アカウントの埋め込みコードを取得(やり方はLINE公式アカウントで解説されているのでそちらを参照)し、コピペするだけです。

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

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

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

何回かペライチを使っていると、事例を眺めているだけで、ここの箇所はあの要素を使っているな!と予想できるようになってきます。

また、日頃Facebookで流れてくる広告をクリックするとペライチで作成されてページに誘導されることもありますので、そちらも参考にしましょう。

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

ペライチの活用法

有料プラン・ペライチ決済の活用

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

無料プランだとページの公開数が1ページですが、レギュラープランに加入することで公開数が5ページになります。

レギュラープランでも毎月1,980円、ビジネスプランでも毎月2,980円とそこまでの費用はかかりませんね。

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

また、ペライチ決済機能も大変便利です。

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

ランディングページに決済機能との連携は不可欠ですので、どうせなら使い勝手がいいものが望ましいです。

そこで、ペライチサービス内で用意されているペライチ決済を利用しましょう。ペライチ決済は、PayPalよりもシンプルなので使いやすいのでオススメです。

料金も月額500円なので、プレミアムプランとあわせてもかなり安いですね。

プレミアムプランとペライチ決済を合わせても3000円以内に収まります。

継続的に払うものですが、外注して何十万もかけるぐらいなら、かなり安価でランディングページの量産とページに決済機能をつけることが出来るので、利用者の立場に立った良質なサービスですね。

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

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

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

まずは、メンタリストDaiGoさんの公式サイトをご覧ください。

http://daigo.jp/

このDaiGoさんの公式ページもペライチで作成されています。 見てわかる通り画像を使っている為、ペライチっぽさがなくなっていますよね。

ある程度は、ペライチの要素を使用しつつ、オリジナル感を出していきたい場合は、画像を使用しましょう。

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

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

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

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

せっかく画像を作成しても、テキストが小さくて見えなかったら、意味がありませんので。 画像については、自分で作成するのが難しい方は上記の内容を外注先に伝えてみてくださいね。

もし、自分で画像編集をしたい場合、専用の編集ソフトがなくても簡単なものだったら自分で出来てしまいます。

もちろん、本格的に画像編集に興味がある場合は、ぜひ購入して頂くとして、シンプルで簡単な画像編集であれば本格的なソフトは購入しなくても意外となんとかなります。

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

または、オフィス系の代替ソフトで有名なOpenOfficeでも、十分です。

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

まとめ

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

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

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