欧米で人気のLP作成ツール「Unbounce」のUXとCVRを高めるフォーム配置4つの工夫（後編）
欧米で人気のランディングページ作成ツール「Unbounce」を題材にUX改善を解説するこの記事は、前後編の2回に分けてお届けしている。今回は、画面上の決まった位置に表示されるフォームを使った解決策を2種類紹介する。
Unbounceの1フォーム問題を解決しUXとCVRを改善する4つの解決策（続き）
解決策3 固定型フォームを使う（常時表示）
すべての要素を同じページに常時表示させておくのが、固定型フォームだ。CSSのスタイルを使用して、「ページ内の位置を指定」ではなく「画面上の位置を指定して固定」できる。訪問者が下にスクロールするとフォームまたはCTAも一緒に移動するため、いつでもすぐに利用できる。
この簡単なCSSコードを使うと、画面の幅が800ピクセル以上の場合、ページの右側にフォームを固定しておける（800ピクセルというのはUnbounceがデスクトップ用デザインからモバイル用デザインに切り替わるサイズであり、つまり配置を変える必要があるということだ）。
以下の各ID属性は、一緒に移動したいボックスにそれぞれ対応している。ユーザーのスクロールダウンに伴ってページの下部へ移動させたい要素とIDを一致させるには、以下の「lp-pom-box-xxx」の部分を変更する必要がある（前編の「スクロールするアンカーボタン」ソリューションで説明したように、これらのID属性は「Element Metadata」セクションで確認できる）。
<style>
@media (min-width: 800px) {
#lp-pom-box-56{
position: fixed;
left: 50%;
margin-left: 123px;
top: 25%;
margin-top:-70px;
}
#lp-pom-form-59{
position: fixed;
left: 50%;
margin-left: 141px;
top: 25%;
margin-top:60px
}
#lp-pom-box-54{
position: fixed;
left: 50%;
margin-left: 123px;
top: 25%;
margin-top:50px
}
}
</style>
メリット
Unbounce内で追跡が可能だ。他の場所でフォームを構築してから、そのフォームをページ上のiframe内で自分の思う通りに機能させようと試みる手間を省くことになる。
メリット
問題は、一緒に移動するCTAにユーザーの目が慣れてしまいやすく、だからといって常に気を引こうとするエフェクトのようなものを追加すると、ユーザーを苛立たせるだけの結果になる可能性が高いことだ。
それに対する解決策は、ページ内の特定のセクション部分ではCTAやフォームが隠れるようにして、それ以外の場所で、（次のセクションのように）より適切なタイミングで再表示されるようにすることだ。
CSSの変更はエディターのプレビューに反映されないため、フォームが表示される正確な位置を確認するのは難しいかもしれないが、ページを保存してプレビューすると変更を確認できる。
解決策4 固定型フォームを使う（スクロールに応じて表示または非表示）
これは、解決策3で示した、固定表示フォームをあるタイミングで表示されないようにして、また後ほど最適なタイミングで再表示するやり方だ。
これを実現する最もシンプルな方法は、CSSのz-indexを利用することだ。簡単に言うと、z-indexはHTML上での要素の重ね順を制御する方法だ。z-indexが2の画像はz-indexが1のボックスよりも手前にある（上に重なっている）と解釈されるため、ページを閲覧すると、画像がボックスより手前にあるように見える。
この方法では、ページの各セクションに何らかの不透明なボックスが必要になる。このボックスを固定フォームより手前に（上に重ねて）表示するようにCSSを指定すれば、フォームを隠せるというわけだ。
このボックスは、色、画像、グラデーションで塗りつぶすことができ、透明でさえなければ何で塗りつぶそうと構わない。ボックスを配置したら、右側の設定バーの「Element Metadata」セクション（要素のIDが表示されるのと同じ場所）に表示されるz-indexをメモしておこう。
次に、CSSを使用して、ボックスの下に隠す要素を選択し、z-indexをより小さな数字に設定する。以下のコードでは、2つの要素に対してz-indexを30に設定した。これはつまり、z-indexが31で上側にあるボックスの背後に隠れるということだ。ここでも、「#lp-pom-box-xxxx」で始まるIDを、上記の「固定型フォーム（常時表示）」ソリューションで使用したのと同じIDに置き換えた方がいいだろう。
<style>
#lp-pom-box-133{ z-index: 30; }
#lp-pom-box-135{ z-index: 30; }
</style>
フォームを再び表示させたい場所を選択する場合は、そのセクションでフォームを隠す可能性のあるアイテムをすべて削除するだけだ。スクロールすると画面に表示される。
メリット
この方法では、フォームが壁紙のように目立たない存在になってしまうことを心配することも、または外部のコンバージョンを統合できるか心配することもなく、ユーザーがページ上のさまざまな場所で入力できる完全なフォームを提供できる。
使用するのはCSSだけなので、JavaScriptを無効にしているユーザーについて心配する必要もない（以下の「おまけの情報」ではJavaScriptを使用しているが、JavaScriptを無効にされるとお手上げだ）。
デメリット
iframeを使用する場合と異なり、複数のフォーム形式を使用することはできない。また、CSSの知識も少しは必要だ（以下の「おまけの情報」では、JavaScriptを使用して少しばかりは試行錯誤する必要がある）。
おまけの情報
JavaScriptを使用し、ページ上のスクロール位置に基づいてCSSクラスを適用したり削除したりしてみよう。たとえば、要素をフェードインまたはフェードアウトさせるようなCSSクラスを作成できる。
CSS：
<style>
@media (min-width: 800px) {
/* このクラスを含む要素の不透明度を0にする（消える） */
.hide {
opacity: 0;
}
/* エフェクトをすぐに適用するのではなく、0.2秒かけて徐々に適用する */
.transition {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
}
</style>
次に、以下のJavaScriptを使用し、ユーザーが特定の地点を過ぎてスクロールしたら.hideクラスを適用してフォームを非表示にし、フォームを表示させたい地点まで到達したらそのクラスを削除してフォームを再表示できる。
この方法なら、単に覆い隠さなくのではなく、フォームが表示される位置をより細かく制御できる（前述したように、アカウントのIDを一致させるには、文字列「#lp-pom-box-xxx」を変更する必要がある）。
JavaScript（jQueryが必要）：
<script>
$(window).scroll(function() {
// このスクリプトは、
// ページの上部から100ピクセルを超えてスクロールしたら、
// 不透明度をゼロにする「hide」クラスを
// 選択した要素に適用する。
// 実際、ページを下にスクロールすると、
// これらのアイテムはフェードアウトする。
if ($(window).scrollTop() > 100 ){
$('#lp-pom-box-54').addClass('hide');
$('#lp-pom-box-228').addClass('hide');
}
// このスクリプトは、
// ページの下から500ピクセル未満の地点までスクロールするか
// 再び上にスクロールして上から100ピクセル未満の地点に
// 到達した場合に、hideクラスを削除する。
// つまり、これらの要素は、ページの下部近くか
// 上部に戻った場合に再び画面にフェードインする。
if ($(document).height() - ($(window).height() + $(window).scrollTop()) < 500 || $(window).scrollTop() < 100 ){
$('#lp-pom-box-54').removeClass('hide');
$('#lp-pom-box-228').removeClass('hide');
}
});
</script>
もう1つおまけ
JavaScriptを使用して、さまざまな地点でフォームフィールドを表示するか非表示にするか選択することも検討できる。そうすれば、たとえば実際は同じフォームでも、最初は長めのフォームを表示し、2度目に表示されるときは短いバージョンを表示するといったことも実現できる。
それには、上記のJavaScriptに以下を追加するだけだ。
$(window).scroll(function() {
// このスクリプトは、
// ページの上部から100ピクセルを超えてスクロールしたら、
// 不透明度をゼロにする「hide」クラスを
// 選択した要素に適用する。
// 実際、ページを下にスクロールすると、
// これらのアイテムはフェードアウトする。
if ($(window).scrollTop() > 100 ){
$('#lp-pom-box-54').addClass('hide');
$('#lp-pom-box-228').addClass('hide');
}
// このスクリプトは、
// ページの下から500ピクセル未満の地点までスクロールするか
// 再び上にスクロールして上から100ピクセル未満の地点に
// 到達した場合に、hideクラスを削除する。
// つまり、これらの要素は、ページの下部近くか
// 上部に戻った場合に再び画面にフェードインする。
if ($(document).height() - ($(window).height() + $(window).scrollTop()) < 500 || $(window).scrollTop() < 100 ){
$('#lp-pom-box-54').removeClass('hide');
$('#lp-pom-box-228').removeClass('hide');
}
// このスクリプトは、ページを下にスクロールして、
// 下部まで75ピクセル未満になったときに
// ・フォームの「Full Name」の部分を非表示にして、
// ・送信ボタンを上に移動し、
// ・ボックスのサイズを縮小する。
if ($(document).height() - ($(window).height() + $(window).scrollTop()) < 75){
$('#container_full_name').addClass('hide');
$('#lp-pom-box-54').stop().animate({height: "200px"},200);
$('.lp-pom-button-60-unmoved').animate({top: '-=75'}, 200);
$('#lp-pom-button-60').removeClass('lp-pom-button-60-unmoved');
$('#lp-pom-button-60').addClass('lp-pom-button-60-moved');
}
// このスクリプトは、
// 再び上にスクロールした場合に、
// ・「Full Name」の部分をフォーム内に戻し、
// ・送信ボタンを再び下に移動し、
// ・ボックスのサイズを拡大する。
else{
$('#container_full_name').removeClass('hide');
$('#lp-pom-box-54').stop().animate(
{height: "300px"},
200
);
$('.lp-pom-button-60-moved').animate(
{top: '+=75'},
200
);
$('#lp-pom-button-60').removeClass('lp-pom-button-60-moved');
$('#lp-pom-button-60').addClass('lp-pom-button-60-unmoved');
}
});
ページの下部から75ピクセル未満の地点までスクロールすると、JavaScriptによってFull Nameフィールドが非表示になり、ボックスのサイズが縮小され、ボタンが上に移動する。これはすべてフォームが表示されていないときに動作する場合があるので、ここでは動きが分かるように表示している。
結論
以下に、この記事で紹介した解決策それぞれの長所と短所を簡単にまとめた。
解決策1. スクロールするアンカーボタン
長所： 実装は簡単、コーディングはほぼ不要
短所： ユーザー体験に支障
解決策2. iframe
長所： 複数の異なるフォーム
短所： 他の場所でフォームを構築する必要があり、ワークフローでのスタイル設定や分析が若干複雑になる
解決策3. 固定型フォーム（常時表示）
長所： 1つのUnbounceプロジェクト内で追跡が可能
短所： CTA疲れが起こる、広いスペースが必要
解決策4. 固定型フォーム（スクロールに応じて表示または非表示）
長所： 固定型フォームのメリットに加えて、CTA疲れが回避でき、広いスペースも必要ない
短所： CSSの知識が必要、1つのフォームしか使用できない
個人的に僕が気に入っていたのは、外部のツールを統合する必要性を減らせる固定型フォーム（スクロールに応じて表示または非表示）だが、複数の異なるフォームを使用する必要がある場合には、間違いなくiframeの利用も検討するだろう。
この記事は、Moz Blog に掲載された以下の記事を日本語訳したものです。
原文：「Getting Around the "One Form" Problem in Unbounce」 by Robin Lord （2018/03/14）
必見！ Facebookいいね! 人気記事
最近（過去90日間）の記事で、Facebookの「いいね！」が多かった記事をお見逃し無く。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事
ソーシャルもやってます!