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

2015年06月14日

Ptengine 編集部

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

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

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

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

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

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

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

Landerとは

Landing Page: Create, Publish and Optimize for Free | Lander

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

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

How to create my first Landing Page on Lander from Lander on Vimeo.

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

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

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

「Lander」の特徴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Products & Services

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

Webinars & Events

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

Ecommerce

http://demo.landerapp.com/e-commerce-6

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

「Lander」の基本的な使い方

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

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

1. フォルダをつくる

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

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

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

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

3. テンプレートの編集

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


エディターのつかいかた

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

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

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

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

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

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

テキストの編集

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

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

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

イメージの編集

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

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

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

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

ビデオの設置

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

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

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

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

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

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

ボタンの編集

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

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

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

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

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

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

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

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

背景画像の編集

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

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

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

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

その他の機能

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

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


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

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

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

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

応用的なつかいかた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「Lander」へのPtengineの導入方法

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

ヒートマップ付きアクセス解析ツール | Ptengine

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

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

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

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

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

まとめ

いかがでしたか?

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

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

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

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

http://www.mylanderpages.com/aekein/campaign_lp

それでは、また!