無料で簡単にオシャレなLPを作れるInstapageがスゴい！

こんにちは。Ptmindでマーケティングを担当している繋です。

今回ユーザーさん向けにキャンペーンをやろうという事になったのですが、自分だけでLP作って実施できないかな？と考えました。弊社は中国に開発やデザインを担当している部署がありますが、LPの作成などを依頼するとなると時間がかかってしまいます。

また同時に進行しているプロジェクトなどがあると更に時間がかかってしまうという事で、簡単にかっこよくLPを作れるツールを探していました。WiXやStrikinglyなど試してみましたがテンプレートなどは豊富だけど理想のページが作れず悩んでいました。

マーケ担当だけでページ作って分析して改善してというPDCAが1人で回せれば便利なのになぁ。と考えていたところ…おっ！これは！！って感じのツールを発見したのでご紹介します。

無料で簡単にオシャレなLPを作れるInstapage

Landing Page Marketing Made Simple – Instapage

サイトを見てみるとテンプレートなども結構オシャレなのがありました。

という事で無料だしさっそく使い始めてみることに。

まずは無料登録

とりあえず登録します。「BUILD MY PAGE NOW」をクリック。

ソーシャルアカウントでも登録は可能なので気軽に使えますね。

テンプレートを選択します

日本語には対応していませんが英語が苦手な人でも簡単に作れると思います。と、いうことでLPのベースになるテンプレートを選びましょう。

Lead GenerationやThank you Pageなどページの内容からテンプレートを選択できるのも魅力です。

気になったテンプレート上にマウスオーバーすることでPreviewとEditが表示されるので、画面全体にPreviewさせる事も可能です。

テンプレートをいくつか紹介します。

WEB系のスタートアップっぽいサイトのテンプレートがたくさんあります。またサンクスページのテンプレートもいくつか。

もちろん白紙からの作成も可能ですし、テンプレート上に表示されているものは全て編集が可能なので、テンプレートを参考にしながら自分好みのサイトを作れます。

テンプレートの内容をカスタマイズ

Editをクリックしてページのカスタマイズにはいります。

まずはページの名前を設定。この名前は公開されるものではなく管理画面上で表示されるものです。

早速カスタマイズしていきます、まずは背景を変えてみます。

編集したいセクションにマウスオーバーするとアイコンが表示されます。

セクションを並び替える場合は矢印アイコン、消去する場合はゴミ箱アイコン、編集を行う場合はペンアイコンをクリックします。

今回は編集を行うのでペンアイコンをクリック。

アイコンをクリックすると上部からバーが表示されるので背景色を変えたい場合はBackground colorで色を編集。

今回はローカルに保存されているイメージを背景に使用します。背景色の右隣りにあるBackGround imageからローカルに保存されているイメージもしくはURLからアップロードを行います。

どうです？一気にそれっぽくなりました。ここからは少し細かい部分です。

フォントカラーや大きさなどもPowerPointやKeynoteの感覚で編集が可能です。

ボタンの編集も簡単にできます。本当にKeynoteで作っている感覚です。

ボタンに至ってはクリックされた際の動作を細かく編集できます。

• URL：リンク先設定
• Pop Up：ポップアップ表示設定
• On Page：ページ内の指定したセクションにオートスクロールさせる
• File Download：資料などをダウンロード

ロゴなどの置き換えも簡単で既に配置されているロゴをクリックして好きなイメージに置き換えることができます。

こんな感じでサクサクLPを作ることが超速で誰でも簡単に作ることができます。素材の追加も簡単です。

ヘッダにあるバーからAdd Newを開きます。

• Add Newを開くと追加する項目が表示されます。
• Section：その名の通りセクションを追加
• Headline：見出し文言
• Paragraph：説明などに適した長めの文言
• image：画像
• Video：Youtubeの動画
• Button：ボタン
• Forms：メールアドレスなどを入力させるフォームとボタンのセット
• Shapes：図形
• Map：Googleマップ
• Social：Facebook、Twitter、Linkedlnなどのソーシャルボタン
• HTML：HTMLソース

Videoを挿入してみます。

Youtubeの共有URLを貼るだけで表示させる事ができサイズなどの調整も簡単です。

こんな感じであっという間にそれっぽいのができました。要領をつかめば本当に簡単にサクサク作ることができます。

更に便利な機能がコレ。申込フォームが簡単につくれます。Add NewからFormsを選択。

それっぽい申込フォームができました。細かく設定もできます。EditからRedirectを選択。

• Redirect page to：リダイレクトさせるページの設定（申込→サンクスページなど）
• Document Download：ホワイトペーパーなどのファイルをサーバーからダウンロード
  
• Thank you Message：ボタンをクリックした際に表示される文言

この辺りの設定も非常に簡単ですね。

更にこの申込フォームで実際に申込を行った方のリスト管理もInstapage内でできます。

管理画面です。サイト名の右側にアイコンが表示されています。

• 編集アイコン：ページの編集
• グラフアイコン：簡易的なアクセス数やコンバージョン数
• メールマーク：申込リスト管理

実際に申込のリストはこのように確認できCSVなどで出力する事も可能です。

他社のツールを使用しなくても簡単に申込フォームまで実装できちゃうのは本当に便利ですね。もちろんMailChimpやSalesForceなどの他社ツールとの連携も可能です。

細かな設定

設定はヘッダにあるバーのSettingから行います。（機能のいくつかは無料版では設定不可）

• Background：背景の設定
• Fonts：全体のフォント設定
• SEO：titleやkeyword、Descriptionの設定
• Con. Goals：コンバージョンやゴール設定
• Analytics：GoogleAnalyticsのIDの入力する事で連携が可能
• HTML/CSS：header、body、footerのHTML/CSSの設定
• JAVAScript：header、body、footerのJsの設定
• Page History：編集履歴

という感じで細かく設定も可能です。

無料版ではA/Bテストはできませんが有料版ではAとBで違うコンテンツを表示させてCVRの比較などA/Bテストも簡単に行えます。とりあえずサイトを時間かけずにできるだけ簡単で尚且つオシャレにって考える人にはオススメです。

ただあくまで簡易的なLPなのでガッツリ作りこむサイトなどはHTML5とかで作った方が良いです。

Instapageで作ったLPをヒートマップで分析してみた

と、いうことでキャンペーンのLPが簡単につくれました。上で作成したLPとは別のものになりますが、今回作成したLPはこちら。

【ギフト券プレゼント】Ptengineを体験！ブログ投稿キャンペーン｜Ptengine

※キャンペーン終了につき、ページの公開を停止しました。

有料版を契約したのでHTMLの編集も可能になりました。

もちろんPtengineタグをbodyに設置。今回のキャンペーンはPtengineに関してブログで書いてくれたら結果に応じてAmazonギフト券プレゼントします！という内容。

サイトへの集客はメルマガ、Facebook、Twitterで行いました。配信して2日間の結果がこちら。

クリックヒートマップでクリックされた箇所を分析

左上のPtengineへのリンクはクリックされています。

ただし「今すぐ応募する」と書かれたボタンは申込のセクションまでオートスクロールするボタンですがクリックされていないです。このオートスクロールのボタンはブログを書いた後応募するためにサイトに戻ってきてくれた方の為に用意しましたが、まだクリックされていないみたいですね。

30,000円分の所が周りよりも多くクリックされています。やはり30,000円の効果は絶大なのでしょうか。また参加賞と書かれた所もクリックが多いです。

ただしこの箇所にリンクされている箇所は1つもなくテキストのみで構成されています。クリックされているという事は「クリックすると内容を詳しく見れる」と思いクリックされた可能性があります。

こういう所はヒートマップでしかわからないので、ユーザー目線に立ったサイト改善を行えるメリットがあります。

申込フォームの下がフッターになっていますが、フォローしてもらいたいのでFacebookとTwitterのリンクを設置しました。

こちらもクリックされているようで、ページを作った側は本当に嬉しいです！

ただ意図しない行動もあります。フッターに設置したPtengineのロゴです。こちらにはリンクを設けていませんが、かなりクリックされています。

クリックした方はこの先にページが存在すると思いクリックをしたのだと思いますがリンクがなく無駄クリックとなってしまっています。これも上記で書いたようにヒートマップでしかわからない部分です。

…リンク設定させて頂きます…すみませんでした。

アテンションヒートマップで視線が集まった箇所を分析

ファーストビューは見られていました。作った側としては「真っ青だったらどうしよう…」と考えていたので安心しました。

概要の部分も赤くなっているので、ちゃんと読んでもらえています。

また右側に「91%」という数字が出ていますが、こちらはこのサイトに訪問した内、「91%」の人がここまでスクロールしているということになります。

いろいろなサイトのヒートマップを見ていますが、やはりどうしてもファーストビューでそれなりに離脱してしまう人がいます。サクっとデザイナーでもない自分が作ったファーストビューですが、91%は、なかなか高い数字が出せているなとおもいます。

今回のキャンペーンは3つの賞を用意しているのですが、やはり1番金額の高い最優秀賞の所が真っ赤になっていて金額が低くなる参加賞の箇所にかけて徐々に色が変化しているのがわかります。

面白かったのがこちら。

「応募していただいた対象の記事をPtengineの公式アカウントでシェアします。」という内容。このテキストの部分だけちょうど赤くなっていて視線が集中しています。

弊社もそうですがシェアされる事はやはり多くの人に露出が見込めるため嬉しいですよね。

ページ最下部にある応募フォームです。

ここは大抵赤くなるのですが注目してもらいたいのはスクロール到達率です。

ここまで何%の人が到達しているのかを表す数値です。このLPの場合41%の人が応募フォームまで到達してます。という事は残りの59%の人は応募フォームまで到達せずに離脱してしまっています。

このページのコンバージョンは応募フォームなので、いかに多くの人に応募フォームまで来てもらうか？が重要視されます。

どのコンテンツの箇所で離脱が多かったのか？などを分析してコンテンツの入れ替え等を行いできるだけ離脱をさせないようなサイト改善を行っていくことが重要です。

まとめ

こんなふうにサクッとLPを作り集客した翌日にヒートマップで分析をするという高速PDCAサイクルも可能です。Ptengineで分析した後にInstapageを使えば無駄クリックされた箇所や、離脱が多かったコンテンツの修正もすぐに行えます。

リソース不足で困っていたり、サイトを見える化して効率的にサイト改善したい方はInstapageとPtengineを使ってみては？この組み合わせは正直ヤバいです。

今回ご紹介したツールはこちら
Landing Page Marketing Made Simple – Instapage