LPの簡単コーディング
効率的なLP(ランディングページ)のフレーム教えます。
■最近のLPの傾向
----------------------------------------------------------------------------
- アテンションになるトップページにインターラクティブなギミックを入れる
- インターラクティブのあと、すぐに入力フォームが出す(フォーム入力という面倒くさいアクションをゲームの延長線感覚で入力してくれる傾向が強い)
- ブラウザースクロールすると、特定の位置でイベントを発生させて、アテンションを引き、ページ内リンクでインターラクティブ部分に戻す
----------------------------------------------------------------------------
という、ちょっと面倒くさいLP作りが常識になってるんで、担当者として、すぐ対応できるようにしておきましょう。
1・ファーストビューでキャンペーンのタイトルとインターラクティブゲーム
ゲームと言っても、フォームに飛ばすだけなので、結果は同じ単純な仕掛けになっていますが、操作が入るのでCSSアニメーションだけでは出来ないです。
下記がソースになります。
HTML
シーンごとに遷移するためのHTML書きます。
シーンの遷移が多くなる場合は id="page"に連番を振って作成して下さい。
JS
シーンが多くなった場合 $("#page2").hide(); の下に $("#page~").hide();を入れて~に HTMLで振った連番を入れて下さい。
CSSに関してはそのLPの規格にあったアニメーションがあるので、そちらに合わせて下さい。ブラウザーの互換やら考えると面倒くさーとなりますが、どのブラウザーでも使えるテンプレートCSSを乗せておきます。
2・フォームが浮かび上がる
ゲームアニメーションが終わったあとにフォームを浮かびあげます。
HTML
JS
3・ブラウザースクロールのイベントアニメーション
「jquery.inview.js」というプラグインを使って対応します。
下記からダウンロードして使いましょう。
他の方面でもさんざん書かれているので割愛します。
下記のサイトを参考にしてみて下さい。簡単に出来まっせ。
4・ページ内リンクでページトップに戻るボタンを仕込む
スクロールの長さに合わせてページ内リンクで、TOPページに戻るようにして上げましょう。
派手なブラウザースクロールイベントを仕込めば、ユーザーは何気なくボタンを押しちゃうパターンが多く、ページトップに戻ってゲームをしてくれます。
これでコンバージョン率が上がること間違いなしです。
以上になります。
アニメーションが多いので作業量が増えますが、簡単でしょ。
----------------------------------------------------------------------------------
↓良かったら遊んでね↓
■appstore
■ googleplay