レッツグロースハック！

最近ではスマートフォンからの閲覧を軽視することが出来ないですね。どういったサイトであれ60％前後のUUをスマホが持って行っているのではないでしょうか。スマホ向けのCVアップ対策はどうすればいいのかわからない・・・。といった時にサクッと実装して次に繋がる手法をご紹介します。

あっという間に実装JQueryでスクロール追従CVエリア

CVエリアをスクロール追従にしてみて、実際にCVが上がるかどうかをチェックするのは第一歩ですね。フォーム遷移率が上がったら、フォームの改善を。フォーム遷移率が上がらない場合はコンテンツの内容を精査するなど、次に繋がる対策になります。実装〜テスト〜削除、までがカンタンに出来るようにしてみました。

<style>
.fix {
position: fixed;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.85);
text-align: center;
}
</style>

<div class="fix">
<p>
<a href="cv.html">
<img src="cv-button.png" width="100%">
</p>
</div>

ざっくりこういう感じですね。自分のサイトに合わせてa hrefの値を変更してみる、ボタンデザインを変える、CSSでボタンデザインをするなど工夫してみてください。ボタンカラーやサイズ、ボタンを2つならべるか一つかなど。色々と結果が変わるはずです。

スマホの場合は、アコーディオンでコンテンツを折りたたむ手法も効果的。

JQueryでアコーディオンをカンタンに作る

<style>
.hide-cont {
display: none;
}
</style>

<script>
$(function() {
    $('.button').click(function(){
        $('.hide-cont').toggle();
    });
});
</script>

<p class="button">MORE</p>

<div class="hide-cont">
<p>出てくるエリア</p>
</div>

現在あるコンテンツを折りたたむときにカンタンな記述だけで実装できるのでおすすめです。