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

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

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

close

会員登録が完了しました

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

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

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

直感的UIでイケてるLPを量産できる作成ツール「Lander」

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

lander

こんにちは。つなぎです。

Ptengine Blogでは自分たちが使っていたり、
実際に使ってみて良さそうだったものを紹介しています。

これまでもデザイナーのリソースを使わなくても
ランディングページ(LP)が作れるツールをいくつか紹介してきました。

関連:無料で簡単にオシャレなLPを作れるInstapageがスゴい!
関連:マーケ担当でもお手軽にLPがつくれるペライチを試してみた!

 

何でも1人でやっちゃいたい!もしくは
やらざるを得ない方には本当に役立つサービスです。

そういったニーズが多いからなのか、LPやWebサイトが簡単に作れるツールは
最近になってすごく増えてきているような気がします。

と、いうことで今回は直感的UIでイケてるLPが量産できる「Lander」を紹介します。

Landerとは

12BDAA5A-FD2E-441E-8375-E18573ACA375

 icon-external-link Landing Page: Create, Publish and Optimize for Free | Lander

「Lander」はInstapageペライチと同じく、
デザイナーじゃなくてもイケてるLPが簡単に作れるツールです。

どれぐらい直感で簡単に作れるかは動画をご覧ください。

動画をみると、パワポやKeynoteでワイヤーフレームを作ってるような感じがしますよね。

フリープランはないですが、30日間の無料トライアルが用意されていて
クレジットカード情報の入力をしなくても利用可能なのも良い所。

サイト上の「TRY LANDER FOR FREE」から登録できます。

「Lander」の特徴

そんな「Lander」ですが具体的な特徴をいくつかご紹介します。

直感的操作が可能なエディター

18DE0DB5-AAB6-4CAC-9C91-E20098F3C661

ドラッグアンドドロップでオブジェクトの設置ができます。

しかも、かなり細かいところまでカスタマイズできるので
オリジナル要素が強いLPを作ることができます!

参考:http://landerapp.com/editor/

A/Bテストが簡単にはじめられる

3230207D-89F6-4A0C-935A-7335D1CBCF61

最近のLP作成ツールではA/Bテストが手軽にはじられるものが多いです。
Instapageも簡単にA/Bテストがはじめられました。

またゴール設定やテスト結果のレポート画面がすごく見やすくて
デザイン面でもかなり評価が高いです。

参考:http://landerapp.com/ab-testing/

多くのマーケティングツールとの連携が可能

767ED09B-7247-4B04-B493-9B2676C16E3B

マーケティングオートメーションのMarketoやメールマーケティングツールの
Mailchimpなど多くのマーケティングツールと連携が可能です。

当然、Googleアナリティクスの連携も可能ですが、
分析系のツールはHTMLの編集が可能なので、タグさえ設置できれば
基本的に何でも導入できます。

もちろんPtengineもタグの設置だけで分析を開始することができます。

豊富な種類の中から選べるテンプレート

36BB28C1-0CB3-4699-B8D2-780B27AF7A69

この手のサービスにはかなり重要になるテンプレートですが
「Lander」も目的に合わせた多くのテンプレートが用意されています。

一部ですがご紹介します。

Products & Services

0F5B41E7-6D07-4CD1-9C33-E325B51A134A

 icon-external-link http://demo.landerapp.com/products-and-services-2

Webinars & Events

97752835-0280-47F3-AFEC-E35A707761D8

 icon-external-link http://demo.landerapp.com/webinars-and-events-3

Ecommerce

BF9BC182-C754-4C86-A173-1F57C94C9B0D

 icon-external-link http://demo.landerapp.com/e-commerce-6

目的に応じた6つのジャンルから約10種類程度のデザインから選択可能です。
どれも非常にシンプルな作りですが、かっこいいですね!

「Lander」の基本的な使い方

画面内での説明などが非常に分かりやすいのでほぼ直感で操作できます。

英語表記ですが、難しい英文は使われていないので
戸惑うことなく進めていけます。

1. フォルダをつくる

登録が完了するとダッシュボードが表示されます。
「New Landing Page」をクリックしてフォルダ名を入力してフォルダを作成します。

フォルダとはプロジェクトのようなものなので
自分がわかりやすい名前を任意で入力しましょう。

E0FFC7AC-6F62-4EA7-8081-C306AAE0D68F

2. テンプレートをえらぶ

使用したいテンプレートをえらびましょう。
目的に合ったジャンルのなかから、デザインを選択します。

42CF54C0-82E0-4E3E-879D-9C7DE66EB3E7

3. テンプレートの編集

エディターが起動するのでテンプレートの編集をします。
シンプルで分かりやすいUIなのでLP作成が捗りますね!

364BEFE8-3144-4611-9522-442837851B85

エディターのつかいかた

ここからはエディターのつかいかたをご紹介します。

ワイヤーフレームツールやプロトタイプ作成してる方なら
サクサク作っていけるので基本的なところだけ紹介します。

364BEFE8-3144-4611-9522-442837851B85

左側に表示されているのがテンプレートです。

基本的に編集したいオブジェクト上にホバーしてクリックすると編集できます。

4A495CF3-2406-4786-BCF2-45C52D41BC2B

右側にはオブジェクトを設置することができる「Tools」と
テンプレート上で選択したオブジェクト情報の「Properties」が表示されています。

基本的な使い方はテンプレート上に表示されているものを
自分好みに編集するような使い方ですが、
テンプレート上にないものは「Tools」から選び設置していく流れになります。

テキストの編集

テンプレート上の編集したいオブジェクト上にホバーしクリックします。

すると小さなアイコンが表示されるので、鉛筆マークをクリックすることで
下部にテキストフィールドが表示されるので、テキストを入力します。

日本語フォントには対応していないですが、
Open SansやArialが使えるのでおかしなフォントにはならないです。

FAB2894F-2432-4B53-BB88-C4DF53063DD4

イメージの編集

テンプレート上で既にイメージが設置されている場合は
テキストの編集と同じ方法でイメージをアップロードし任意のイメージに
変更することができます。

ここでは新たにイメージを設置する方法を紹介します。
右側の「Tools」から「Image」をクリックしましょう。

A7850B66-EF6A-40A6-B385-25CAAE072682

ローカル保存されているイメージをアップロードして「Select」をクリックします。

98FC4349-5D3F-4A29-B445-97F687BC983B

テンプレート上に画像が表示されるので任意の箇所までドラッグして移動させましょう。
またオブジェクト右上に表示されるアイコンは鉛筆は編集、鍵はロック、✕ボタンは消去です。

0ADC9374-3E5A-4825-B0BA-F2F9DDC31C97

ビデオの設置

VimeoやYoutubeといった動画共有サービスに
アップロードしているビデオの設置を紹介します。

右側の「Tools」から「Video」をクリックしましょう。

0AD0730F-A4D9-4E3B-8B03-5804536CE929

入力フォームが表示されるので、設置したい動画のURLを入力しましょう。

※動画の取り扱いにはご注意ください。設置には公開元の共有の許諾が必要になります。

31FF883B-B2AD-4B85-9C92-F7AD1C1894FD

あとは大きさや位置などの調整をして設置すれば完了です!

直感で操作できるので「もしかして、こうかな?」という感じで
操作すると大抵合ってます、この辺りのUXは素晴らしいですね!

64D1C710-73F0-4FF1-A18E-4D571FA8E326

ボタンの編集

登録ボタンなどに使われるボタンの編集です。

ここでは画面右端に表示されているプロパティを使用します。
テンプレート上のボタンをクリックすると右端のプロパティにボタンの情報が表示されます。

01734720-673F-4ED7-BC55-73EE45827F59

表示テキストやリンク先、背景色や影の色など細部まで編集できます。
もちろんオリジナルのボタン素材をアップロードして使用することもできますよ。

ソーシャルメディアボタンの設置

ソーシャルメディア関連のボタンを設置します。
「Tools」の下部に「Social」の表示があるのでクリックしましょう。

72B70CA6-6FB7-4D39-B9D1-78EEC74B5676

ソーシャルメディア関連のオブジェクトツールが表示されます。
それぞれ目的に応じてフォローボタンなどを選んで設置しましょう!

ここではフォローボタンが1つにまとまったものを設置してみます。
ソーシャルメディアを選び、自身のもつソーシャルのURLを入力しましょう。

EBFF1A70-C84B-4114-BEC9-AD5C2E51698E

設置してみました。
みなさんどんどんフォローしてください!よろしくお願いします!!

6B2FDA5D-C994-427D-83CF-1481449FF111

背景画像の編集

背景が画像を変更します。
これもローカルに保存されているイメージをアップロードして適用します。

オブジェクトがない箇所で背景をクリックすると
背景のプロパティが画面右端に表示されます。

プロパティの「Background」の「Image」の所で下記の図のボタンをクリックします。

E1F58FA3-1E56-40BA-AB4C-9952F415C483

あとはアップロードしたいイメージを選ぶだけ。
位置やトリミングなどもプロパティから行えます。

5B5C8781-47DD-4ECE-A230-54E7E5CA7F64

その他の機能

設置はしないですが、その他にも便利なオブジェクトがあるので紹介しておきます。

右側に表示されている「Tools」の「Advanceed」をクリックします。

D37EDC2B-AB2F-4333-8675-4BC94275C3E2

  • Form:入力フォーム
  • HTML:HTMLタグ
  • Timer:ティザーサイトなどで見られるカウントダウンタイマー
  • Map:Googleマップ
  • PayPal:PayPalボタン

さまざまなオブジェクトが設置可能です。
その中でも「Timer」はスゴいですね。初めて見ました。

ティザーなどは1ページだけで作成したりするので
そっちの使い方もできそうです。

作成が終わったら画面左上の「SAVE」して、画面右上の「FINISH」をクリックします。

応用的なつかいかた

ここでは応用的な使い方をご紹介します。

Googleアナリティクスとの連携

ダッシュボードです。
またLPを公開するには「Publish」をクリックしましょう。

42A450AE-8082-45BB-921B-18A88C78D279

Googleアナリティクスやその他のツール連携は、
ダッシュボードのページ下部「Integrate Your Landing Page」より設定できます。

Googleアナリティクスの設定は「Analytics」をクリック。

D437A49F-B4D5-4619-AA5A-4DCC713D5488

枠内のフォームにGoogleアナリティクスのアカウントIDを
入力すると連携完了です。この辺も非常に簡単ですね。

A389CEBA-1E95-4270-8AEA-5DA4D8C1F5EB

ただし、Googleアナリティクスでは数値の分析しか行えないのと
平均滞在時間の取得が正確におこなえません。
※平均滞在時間に関しての詳細は下記をご覧ください。

 

またLPは基本的に1ページでの構成です。

Googleアナリティクスはサイト単位での分析には向いていますが
ページの中での行動はわからないので、ページ単位の深い分析にはむいていません。

LPで1番大切なのは、ページのコンバージョンレート(CVR)の最大化を
するために改善を行っていくことです。

サイトができて、それで終わりではなく、そこから如何に最大化できるかが重要です。
※このようなことをCRO(コンバージョン率最適化)といいます。

PV数や訪問数、直帰率だけではLPのCVRを向上させるような
仮説に結びつかせることはかなり難しいのが現実です。

そこでヒートマップを使いましょう!

ヒートマップを使えば、リンクがない箇所のクリックを計測したり、
CVしたユーザーがどの箇所を重点的に見ていたのか?が分かるので
効率的にページの分析と改善をおこなうことが可能です。

5C957A32-F160-445C-94D4-AFF30912EECA

Ptengineなら無料で1ページまでヒートマップが使用できるので
Googleアナリティクスを使用するよりも効率よくLPの分析をおこない
改善につなげるPDCAをまわすことができます。

「Lander」へのPtengineの導入方法

まずはPtengineへ無料登録をおこないましょう。

C1996099-6699-45AA-A7CB-341D0915EE7B
ヒートマップ付きアクセス解析ツール | Ptengine

登録は1分程度で完了するので、表示される案内に従って進めましょう。

登録手順の中で「解析コード」を発行できるので、
発行された解析コードをコピーします。

E29BBAC0-3907-4EA3-A159-392C466AA1DF

コピーした解析コードをエディター上の背景画像編集のプロパティ内、
「Before Body」の箇所に貼り付けましょう。

EDDE0014-D5F7-4C1D-B331-E92AC07AF919

これで設定は完了です。
解析コードの設置が完了すればすぐに計測がスタートします。

もちろんページの公開も忘れないでくださいね!

まとめ

いかがでしたか?

実際にLPを作ってみると気になった点がいくつかありました。

  • アップロードできる1ファイルあたりの容量が小さい
  • エディター内の動作が若干モッサリすることがある
  • deleteキーでオブジェクトの削除ができない

などがありました。今後のアップデートに期待したいとおもいます。

と、いうことで今回、作成したLPは下記から見ることができます。
※実質10分くらいで作ったのでちょっと手抜きですが、勘弁してくださいm(__)m

ADA3ED5B-65B5-4E22-8A52-F872D2171B63

 icon-external-link http://www.mylanderpages.com/aekein/campaign_lp

それでは、また!

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

SNSで最新情報をうけとる