noteで書く欧米で人気のランディングページ作成ツール「Unbounce」を題材にUX改善を解説するこの記事は、前後編の2回に分けてお届けしている。今回は、画面上の決まった位置に表示されるフォームを使った解決策を2種類紹介する。固定型フォームを使う(常時表示)すべての要素を同じページに常時表示させておくのが、固定型フォームだ。CSSのスタイルを使用して、「ページ内の位置を指定」ではなく「画面上の位置を指定して固定」できる。訪問者が下にスクロールするとフォームまたはCTAも一緒に移動するため、いつでもすぐに利用できる。この簡単なCSSコードを使うと、画面の幅が800ピクセル以上の場合、ページの右側にフォームを固定しておける(800ピクセルというのはUnbounceがデスクトップ用デザインからモバイル用デザインに切り替わるサイズであり、つまり配置を変える必要があるということだ)。以下の各ID属性は、一緒に移動したいボックスにそれぞれ対応している。Metadata」セクションで確認できる)。}}</style>メリットUnbounce内で追跡が可能だ。他の場所でフォームを構築してから、そのフォームをページ上のiframe内で自分の思う通りに機能させようと試みる手間を省くことになる。メリット問題は、一緒に移動するCTAにユーザーの目が慣れてしまいやすく、だからといって常に気を引こうとするエフェクトのようなものを追加すると、ユーザーを苛立たせるだけの結果になる可能性が高いことだ。それに対する解決策は、ページ内の特定のセクション部分ではCTAやフォームが隠れるようにして、それ以外の場所で、(次のセクションのように)より適切なタイミングで再表示されるようにすることだ。CSSの変更はエディターのプレビューに反映されないため、フォームが表示される正確な位置を確認するのは難しいかもしれないが、ページを保存してプレビューすると変更を確認できる。固定型フォームを使う(スクロールに応じて表示または非表示)これは、解決策3で示した、固定表示フォームをあるタイミングで表示されないようにして、また後ほど最適なタイミングで再表示するやり方だ。これを実現する最もシンプルな方法は、CSSのz-indexを利用することだ。簡単に言うと、z-indexはHTML上での要素の重ね順を制御する方法だ。z-indexが2の画像はz-indexが1のボックスよりも手前にある(上に重なっている)と解釈されるため、ページを閲覧すると、画像がボックスより手前にあるように見える。この方法では、ページの各セクションに何らかの不透明なボックスが必要になる。このボックスを固定フォームより手前に(上に重ねて)表示するようにCSSを指定すれば、フォームを隠せるというわけだ。このボックスは、色、画像、グラデーションで塗りつぶすことができ、透明でさえなければ何で塗りつぶそうと構わない。Metadata」セクション(要素のIDが表示されるのと同じ場所)に表示されるz-indexをメモしておこう。このボックスのz-indexは31なので、z-indexが30以下要素を覆い隠すことになる次に、CSSを使用して、ボックスの下に隠す要素を選択し、z-indexをより小さな数字に設定する。以下のコードでは、2つの要素に対してz-indexを30に設定した。これはつまり、z-indexが31で上側にあるボックスの背後に隠れるということだ。ここでも、「#lp-pom-box-xxxx」で始まるIDを、上記の「固定型フォーム(常時表示)」ソリューションで使用したのと同じIDに置き換えた方がいいだろう。}</style>フォームを再び表示させたい場所を選択する場合は、そのセクションでフォームを隠す可能性のあるアイテムをすべて削除するだけだ。スクロールすると画面に表示される。メリットこの方法では、フォームが壁紙のように目立たない存在になってしまうことを心配することも、または外部のコンバージョンを統合できるか心配することもなく、ユーザーがページ上のさまざまな場所で入力できる完全なフォームを提供できる。使用するのはCSSだけなので、JavaScriptを無効にしているユーザーについて心配する必要もない(以下の「おまけの情報」ではJavaScriptを使用しているが、JavaScriptを無効にされるとお手上げだ)。デメリットiframeを使用する場合と異なり、複数のフォーム形式を使用することはできない。CSSの知識も少しは必要だ(以下の「おまけの情報」では、JavaScriptを使用して少しばかりは試行錯誤する必要がある)。おまけの情報JavaScriptを使用し、ページ上のスクロール位置に基づいてCSSクラスを適用したり削除したりしてみよう。要素をフェードインまたはフェードアウトさせるようなCSSクラスを作成できる。}}</style>次に、以下のJavaScriptを使用し、ユーザーが特定の地点を過ぎてスクロールしたら.hideクラスを適用してフォームを非表示にし、フォームを表示させたい地点まで到達したらそのクラスを削除してフォームを再表示できる。この方法なら、単に覆い隠さなくのではなく、フォームが表示される位置をより細かく制御できる(前述したように、アカウントのIDを一致させるには、文字列「#lp-pom-box-xxx」を変更する必要がある)。選択した要素に適用する。これらのアイテムはフェードアウトする。到達した場合に、hideクラスを削除する。上部に戻った場合に再び画面にフェードインする。}});</script>もう1つおまけJavaScriptを使用して、さまざまな地点でフォームフィールドを表示するか非表示にするか選択することも検討できる。すれば、たとえば実際は同じフォームでも、最初は長めのフォームを表示し、2度目に表示されるときは短いバージョンを表示するといったことも実現できる。それには、上記のJavaScriptに以下を追加するだけだ。選択した要素に適用する。これらのアイテムはフェードアウトする。到達した場合に、hideクラスを削除する。上部に戻った場合に再び画面にフェードインする。・ボックスのサイズを縮小する。・ボックスのサイズを拡大する。Nameフィールドが非表示になり、ボックスのサイズが縮小され、ボタンが上に移動する。これはすべてフォームが表示されていないときに動作する場合があるので、ここでは動きが分かるように表示している。以下に、この記事で紹介した解決策それぞれの長所と短所を簡単にまとめた。CSSの知識が必要、1つのフォームしか使用できない個人的に僕が気に入っていたのは、外部のツールを統合する必要性を減らせる固定型フォーム(スクロールに応じて表示または非表示)だが、複数の異なるフォームを使用する必要がある場合には、間違いなくiframeの利用も検討するだろう。掲載された以下の記事を日本語訳したものです。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!「おもてなし」は思考停止ワード。いいね!私は変人コレクター。位置情報データ活用デジタルによる「仕事の自動化」、日本は無関心な人が主流。マーケターに必要な資質インテグリティは、後天的には身につかない!?・第9話アマゾン日本事業の売上高は約1.7兆円【Amazonの2019年実績まとめ】デジタルによる「仕事の自動化」、日本は無関心な人が主流。「おもてなし」は思考停止ワード。各週の人気記事ランキング記事を見るはてなブックマークですべての人気記事を見る今日の用語インタースティシャル広告ページ移動時にページとページの間に独立ページとして表示する広告のこと。日本発のブランドはまだ自動車が強い。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。