モバイル向けのポップアップフォームとフライアウトフォームを最適化する方法
このページで学べること
Klaviyo のベストプラクティスを踏まえてモバイル用サインアップフォームを設計し、ポップアップフォームとフライアウトフォームをモバイル訪問者向けに最適化する方法を確認しましょう。
オンラインショッパーはモバイルデバイスを使って新しいストアを見つけ、商品を閲覧し、購入することが増えています。そのため、ウェブサイトがデスクトップと同じくらいモバイルでも見栄えよく表示されるようにすることがこれまで以上に重要です。これにはサインアップフォームも含まれます。
始める前に
Klaviyo では、すべてのデバイス（デスクトップとモバイル デバイスで表示されることを意味します）に表示されるフォームを作成することも、モバイル デバイスにのみ表示されるモバイル専用フォームを作成することもできます。
フォームがすべてのデバイスに表示されるように設定されている場合、Klaviyo はモバイルデバイスで閲覧する買い物客向けの見た目を改善するために、フォントサイズや画像など一部の要素を自動的に最適化します。ただし、このガイドでは、追加で押さえておきたいベストプラクティスについて説明します。フォームビルダーの右上にあるビュー セレクターを使用して、フォームの作成中にデスクトップ表示とモバイル表示を切り替えてください。デスクトップのアイコンにはデスクトップで閲覧する買い物客に表示されるフォームが表示され、モバイルのアイコンにはモバイルで閲覧する買い物客に表示される内容が表示されます。
このガイドでは、モバイルデバイスに表示されるポップアップフォームとフライアウトフォームを作成する際のベストプラクティスについて説明します。フォームがすべてのデバイスに表示される場合でも、モバイルのみに表示される場合でも、これらは役立ちます。モバイルデバイスにおけるサインアップフォームの詳細な概要については、基本：モバイルフォームデザインをご覧ください。
一般的なフォームのベストプラクティス
デスクトップ フォームのベスト プラクティスの多くは、モバイル デバイスにも同様に当てはまります：
- 短く簡潔にまとめてください：フィールドが多い場合は、複数ステップのフォームをご検討ください。
- フォームで SMS の同意を収集する場合は、まず 1 ステップ目でメールアドレスを収集し、続いて 2 ステップ目で スマートオプトイン を使用して SMS を収集します。これにより、モバイル デバイスの訪問者が最も簡単な方法で購読できるようになります。
- 訪問者が不満を感じてサイトを離れないよう、簡単に閉じられるようにしてください。
- フォームティーザーを使用すると、購入者は必要に応じてフォームを閉じたり再度開いたりできます。
- フォームがすべてのデバイスに表示されるように設定されている場合（つまり、デスクトップとモバイルの買い物客の両方に表示される場合）で、サイド画像が含まれているときは、サイド画像は Mobile のみに表示されるようにしてください。
- 各入力フィールド（例: メールアドレス、電話番号など）には 1 行に収まる簡潔なラベルを使用し、どの情報の入力を求めているかが買い物客にとって分かりやすいようにしてください。
SEO とモバイルフォーム
モバイル SEO のベスト プラクティスを考慮することが重要です。特に、ホームページやその他のランディングページにフォームを作成する場合は注意してください。一般的なオーガニック検索のランディングページに表示されるフォームは、サイトのコンテンツを覆ったり、訪問者の体験を妨げたりしないようにしてください。そうしないと、検索アルゴリズムによってページがペナルティを受ける可能性があります。割り込み型インタースティシャルと SEO の詳細はこちら。
これを回避するには：
- ターゲティングと行動タブで、フォームのタイミングをルールに基づくに設定し、より長い時間の遅延（例：訪問者がページから離脱しようとしているとき）を設定します。
- フォームを表示する前 を表示する ティーザー を追加します。
ポップアップの最適化
ポップアップフォームは購入者の画面の中央に表示されるフォームで、多くの場合ページの大部分を覆い、フォームが開いている間はページ内の他の要素を操作しにくくなります。これにより、ポップアップはより邪魔になりやすくなりますが、コンバージョン率も高くなります。
モバイルデバイスでポップアップの動作を最適化するには：
- モバイルの購入者がフォーム領域の外側をクリックしたときにフォームが閉じないように無効化して、誤ってフォームが閉じられるのを減らします。
- [ターゲティングと動作] に移動します。
- デバイスまでスクロールします。
- Click outside form to close の下で、Mobile スイッチを無効にしてください。
- フォームの閉じるアイコン（X ボタン）が、モバイル デバイスのような小さな画面でも十分に大きいことを確認してください。
- フォームのプレビューで閉じるアイコンをクリックして、サイズを調整してください。
- フォームが見つけやすくクリックしやすいことを確認するために、お手元のモバイル端末でフォームの見え方をテストしてください。
例えば、左側のフォームの閉じるアイコンは、モバイル端末ではクリックしにくい場合があります。一方で、右側のフォームの閉じるアイコンは大きく、見つけやすいです。
- オーバーレイの色、ドロップシャドウ、またはその両方を使用して、ポップアップをサイトの他の部分から視覚的に分離します。
- [スタイル] タブに移動します。
- Form Background セクションで、Overlay Color を設定して半透明のオーバーレイを使用すると、フォームに注目を集め、フォームが開いている間はサイトのコンテンツを暗くできます。
- フォームを周囲のコンテンツから分離するために、フォームの周囲にさりげない影を付ける ドロップ シャドウ を設定します。
- フォームの余白を調整して、モバイルデバイスでポップアップフォームに近い見た目にし、端から端まで表示されないようにします。
- Styles タブで、Form Styles. まで下にスクロールします。
- プレビューでの見た目に応じて左右のマージンを増やしてください。
これらの設定は、フォームのデスクトップ版とモバイル版の両方に反映されます。
フライアウトを最適化する
フライアウトフォームが表示されると、Mobile Overlay がオンになっていない限り、モバイル訪問者はフォームの背後で引き続きサイトを操作できます。フォームを閉じる、入力する、または閲覧を続けながら開いたままにすることを選択できます。一般的に、これによりフライアウトはポップアップよりも邪魔になりにくくなります。
モバイル デバイス向けにフライアウトフォームを最適化するには：
- フォームが画面の上部または下部からフライアウトするように設定します。
- [スタイル] セクションに移動します。
- Mobile Flyout Position を選択し、Dock to Bottom または Dock to Top のいずれかを選択してください。
この設定を選択すると、フォームは画面の上部または下部からフライアウトして表示され、画面の端から端までの一部を覆います。
- モバイル オーバーレイ、ドロップシャドウ、またはその両方を使用して、フライアウト フォームをサイトの他の部分と視覚的に区別します。
- [スタイル] タブに移動します。
- フォーム背景設定までスクロールします。
- モバイルの買い物客がフォームに入力するか閉じるまで、サイト上の他の要素をクリックできないように モバイル オーバーレイ をオンにします。フライアウトフォームをデスクトップで表示している場合、モバイル オーバーレイ は表示されないことに注意してください。
- フォームの周囲に控えめな影を付けて周囲のコンテンツから分離するには、「Drop Shadow」をオンにします。ドロップ シャドウ の設定は、フォームのモバイル版とデスクトップ版の両方に影響する点にご注意ください。
次の手順
モバイル デバイス向けにフォームを最適化したら、サイト訪問者の好みをより深く理解するために、フォーム デザインの A/B テストを試してみてください。