LPの簡単コーディング

効率的なLP(ランディングページ)のフレーム教えます。

 

■最近のLPの傾向

----------------------------------------------------------------------------

  • アテンションになるトップページにインターラクティブなギミックを入れる
  • インターラクティブのあと、すぐに入力フォームが出す(フォーム入力という面倒くさいアクションをゲームの延長線感覚で入力してくれる傾向が強い)
  • ブラウザースクロールすると、特定の位置でイベントを発生させて、アテンションを引き、ページ内リンクでインターラクティブ部分に戻す

f:id:unottomagi:20170921170615p:plain

----------------------------------------------------------------------------

という、ちょっと面倒くさいLP作りが常識になってるんで、担当者として、すぐ対応できるようにしておきましょう。

 

1・ファーストビューでキャンペーンのタイトルとインターラクティブゲーム

ゲームと言っても、フォームに飛ばすだけなので、結果は同じ単純な仕掛けになっていますが、操作が入るのでCSSアニメーションだけでは出来ないです。

下記がソースになります。

HTML 

シーンごとに遷移するためのHTML書きます。

シーンの遷移が多くなる場合は id="page"に連番を振って作成して下さい。 

JS

シーンが多くなった場合 $("#page2").hide(); の下に $("#page~").hide();を入れて~に HTMLで振った連番を入れて下さい。

CSS

CSSに関してはそのLPの規格にあったアニメーションがあるので、そちらに合わせて下さい。ブラウザーの互換やら考えると面倒くさーとなりますが、どのブラウザーでも使えるテンプレートCSSを乗せておきます。 

 

2・フォームが浮かび上がる

ゲームアニメーションが終わったあとにフォームを浮かびあげます。

 HTML 

JS

CSS

 

3・ブラウザースクロールのイベントアニメーション

jquery.inview.js」というプラグインを使って対応します。

 下記からダウンロードして使いましょう。


 他の方面でもさんざん書かれているので割愛します。

下記のサイトを参考にしてみて下さい。簡単に出来まっせ。

 

4・ページ内リンクでページトップに戻るボタンを仕込む

スクロールの長さに合わせてページ内リンクで、TOPページに戻るようにして上げましょう。

派手なブラウザースクロールイベントを仕込めば、ユーザーは何気なくボタンを押しちゃうパターンが多く、ページトップに戻ってゲームをしてくれます。

これでコンバージョン率が上がること間違いなしです。

 

以上になります。

アニメーションが多いので作業量が増えますが、簡単でしょ。

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay