あなたのサイトの訪問者の行動が全てわかる、無料で簡単に使えるアクセス解析

正しいメールアドレスをご入力ください

利用規約に同意した上で登録してください

close

会員登録が完了しました

入力いただいたメールアドレスにPtengine本登録に関する確認メールが届きます。

【メールが届かない場合】

お問い合わせ(support@ptmind.co.jp)

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

262217C1-7B17-4E97-9BE7-70A6859FE93F

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

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

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

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

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

1DAE890B-020E-41F6-8A93-CE7714DDA818

Landing Page Marketing Made Simple – Instapage

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

9770A403-EE2B-4B82-8AC1-A2061142BA0F

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

まずは無料登録

1DAE890B-020E-41F6-8A93-CE7714DDA818

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

E065F7B9-3F7F-42D4-A74A-B1DA3CC28887

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

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

7FF92968-97A8-4904-9FCF-EA0B290D53BB

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

D3B7FF0E-CB16-4BDB-86BD-1178A7FA2DC7

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

556DCB5C-4978-43FA-9C5F-216432F9DD87

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

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

C27FC250-37C1-49F3-941F-A3D96D2F330B

2E8E3386-F4EE-4ADA-B613-2AD068BA5748

F4E554D0-EA76-44AE-93C0-066AAC2D6BA5

697BDDCE-42BB-44C7-8645-B593212E2D83

9C3A386F-2993-481C-BE5C-59B0DF67FD19

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

E4AC9FAD-BD6D-4AE2-845B-BEA9DB5D59E6

1B0B07C7-AB6D-4085-9831-CA93E0227CB7

CBE73034-F1D6-4B54-86DF-5B9FD1593960

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

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

CF918557-A782-4FCF-A45B-73C14C087705

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

F751687A-560F-471A-8B9A-B829EF3D6B20

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

8F8300CE-2D75-4508-A528-489B95AD3CC5

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

175503D3-1D39-4CD8-AAA6-09C2B70F801B

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

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

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

85784710-76F2-4E82-988D-6F652E6BB210

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

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

8BB298AB-5BFB-4EF7-9E9D-B2EC338AF850

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

A82D47D0-4A41-4C5B-96FF-D6D6FCBE3E91

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

32C6FC2C-D899-42BD-A5C2-8DB199CF54E1

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

86490181-E6F0-4101-B880-29B8180B416E

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

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

223811EC-704D-47EF-AF20-D592966425EE

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

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

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

0E4A0A46-31FA-4280-95B1-464F11F940F9

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

72537E76-7085-4A08-8B7A-98F1527E2E27

Videoを挿入してみます。

DDF9C1B4-6080-4A88-8386-AE313AFD7DDC

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

DC577BEE-4BE2-46EC-BA40-C962826774B4

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

295D4734-A2C1-46E1-8024-2D7F17DBC3FB

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

7C296CDD-E843-43E4-8D87-C5856E9DDA6E

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

EB5D2D65-0805-49F5-936A-21449E6DE20E

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

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

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

490825BA-000D-4062-8004-C1FE2EDEED49

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

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

06043B4E-D02B-48EE-AB05-F1FD6C873C07

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

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

67558286-0DB2-48C6-92C2-2A9BC7EE3D3D

細かな設定

54265297-C054-42B5-A180-34D224FE72CD

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

7E224F60-ACE7-4903-AE72-CC5A15DE42FF

  • 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はこちら。

2FE5821D-0811-4B1B-AC37-AFDB59EEA597

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

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

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

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

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

335F3E5C-1074-4F94-A4C8-1AC4789DA4EF

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

0B1D01DC-3275-4568-8E29-039291817F1F

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

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

E3202766-76A0-4D3C-8939-3732999510F2

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

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

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

823F3D49-9EF4-4D44-A0B6-85625CC31B3A

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

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

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

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

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

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

151762E8-1A75-451F-AC74-E2E168F02AB2

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

CC68A6D4-00DD-4FE4-9BD9-D7805BC81221

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

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

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

13449753-182D-46AC-BE9D-13CC8845CFE7

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

76D2A76B-59F7-4FB8-AAAC-049119FC28F2

面白かったのがこちら。

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

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

7AFB5C82-F937-4FA6-A791-B2EECEEDBB18

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

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

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

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

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

まとめ

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

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSで最新情報をうけとる

コメント

Comments are closed.