モバイル向けのポップアップフォームとフライアウトフォームを最適化する方法

推定 1 分で読めます

更新日 2025年8月6日 0:00 EST

このページで学べること

Klaviyo のベストプラクティスを踏まえてモバイル用サインアップフォームを設計し、ポップアップフォームとフライアウトフォームをモバイル訪問者向けに最適化する方法を確認しましょう。

オンラインショッパーはモバイルデバイスを使って新しいストアを見つけ、商品を閲覧し、購入することが増えています。そのため、ウェブサイトがデスクトップと同じくらいモバイルでも見栄えよく表示されるようにすることがこれまで以上に重要です。これにはサインアップフォームも含まれます。

始める前に

Klaviyo では、すべてのデバイス（デスクトップとモバイルデバイスで表示されることを意味します）に表示されるフォームを作成することも、モバイルデバイスにのみ表示されるモバイル専用フォームを作成することもできます。

フォームがすべてのデバイスで表示されるように設定されている場合、Klaviyoはモバイルデバイスの買い物客にとっての見た目を改善するために、フォントサイズや画像などの一部要素を自動的に最適化します。このガイドでは、追加で意識しておきたいベストプラクティスを取り上げます。フォームの作成中は、フォームビルダーの右上にあるビューセレクターを使用して、デスクトップビューとモバイルビューを切り替えてください。デスクトップアイコンでは、デスクトップの買い物客にフォームがどのように表示されるかを確認でき、モバイルアイコンでは、モバイルの買い物客に表示される内容を確認できます。

このガイドでは、モバイルデバイスに表示されるポップアップフォームとフライアウトフォームを作成するためのベストプラクティスを解説します。これらは、フォームがすべてのデバイスに表示される場合でも、モバイルのみに表示される場合でも役立ちます。モバイルデバイスでのサインアップフォームについてより詳しく概要を確認するには、基本：モバイルフォームのデザインをご覧ください。

一般的なフォームのベストプラクティス

デスクトップフォームのベストプラクティスの多くは、モバイルデバイスにも同様に当てはまります：

短く簡潔にまとめてください：フィールドが多い場合は、複数ステップのフォームをご検討ください。
- フォームでメールとSMSの同意を収集する場合は、1番目のステップでメールを収集し、2番目のステップでSMSを収集してください。モバイルでのオプトインをより簡単に行えるように、スマートオプトインを使用してください。スマートオプトインを使用するには、アカウントでSMSを有効にし、有料のSMSプランに加入している必要があります。設定要件については、リンク先のガイドをご覧ください。
訪問者が不満を感じてサイトを離れないよう、簡単に閉じられるようにしてください。
- フォームティーザーを使用すると、買い物客は閉じたフォームを再度開けます。ティーザーをフォームを閉じた後に表示またはフォームを表示する前と閉じた後に表示に設定してください。
フォームがすべてのデバイス（デスクトップとモバイル）に表示される設定になっており、サイド画像が含まれている場合は、Edit styles > Side imageで画像の設定をデスクトップのままにしてください。これにより、モバイルデバイスではサイド画像が非表示になり、フォームのコンテンツに使えるスペースが増えます。

各入力フィールド（例: メールアドレス、電話番号など）には 1 行に収まる簡潔なラベルを使用し、どの情報の入力を求めているかが買い物客にとって分かりやすいようにしてください。

SEO とモバイルフォーム

モバイル SEO のベストプラクティスを考慮することが重要です。特に、ホームページやその他のランディングページにフォームを作成する場合は注意してください。一般的なオーガニック検索のランディングページに表示されるフォームは、サイトのコンテンツを覆ったり、訪問者の体験を妨げたりしないようにしてください。そうしないと、検索アルゴリズムによってページがペナルティを受ける可能性があります。割り込み型インタースティシャルと SEO の詳細はこちら。

これを回避するには：

ターゲティングと動作>表示を開きます。タイミングで、フォームを表示をルールに基づくに設定し、待機後をオンにして、待機時間を秒単位で入力します。他のタイミングルールを有効にする場合は、待機が経過する前に別のタイミングルールでフォームが表示されないように、選択したすべての条件が満たされる場合にのみ表示をオンにしてください。
ティーザーを追加し、表示オプションをフォームを表示する前と閉じた後に表示に設定してください。

ポップアップの最適化

ポップアップフォームは購入者の画面の中央に表示されるフォームで、多くの場合ページの大部分を覆い、フォームが開いている間はページ内の他の要素を操作しにくくなります。これにより、ポップアップはより邪魔になりやすくなりますが、コンバージョン率も高くなります。

モバイルデバイスでポップアップの動作を最適化するには：

モバイルの購入者がフォーム領域の外側をクリックしたときにフォームが閉じないように無効化して、誤ってフォームが閉じられるのを減らします。
- ターゲティング&行動>表示に移動してください。
- 下にスクロールしてフォームの外側をクリックして閉じるを探します。
- ポップアップの外側をタップしても閉じないようにするには、モバイルでの選択を解除してください。

フォームの閉じるアイコン（X ボタン）が、モバイルデバイスのような小さな画面でも十分に大きいことを確認してください。
- フォームのプレビューで閉じるアイコンをクリックして、サイズを調整してください。
- フォームが見つけやすくクリックしやすいことを確認するために、お手元のモバイル端末でフォームの見え方をテストしてください。
  例えば、左側のフォームの閉じるアイコンは、モバイル端末ではクリックしにくい場合があります。一方で、右側のフォームの閉じるアイコンは大きく、見つけやすいです。

オーバーレイの色、ドロップシャドウ、またはその両方を使用して、ポップアップをサイトの他の部分から視覚的に分離します。
- スタイルを編集を選択して、スタイルパネルを開きます。
- オーバーレイの色セクションで、フォームに注意を向け、フォームが開いている間はサイトのコンテンツを暗くするための半透明の色を選択してください。
- 周囲のコンテンツからフォームを分けるために、フォームの周囲にさりげない陰影を付けるドロップシャドウを設定します。
フォームの余白を調整して、モバイルデバイスでポップアップフォームに近い見た目にし、端から端まで表示されないようにします。
1. スタイルを編集を選択し、下にスクロールして余白まで移動します。
2. モバイルプレビューでのフォームの見た目に応じて、左右のマージンを増やしてください。

閉じるアイコンのスタイル設定、オーバーレイの色、ドロップシャドウ、余白の変更は、フォームのデスクトップ版とモバイル版の両方に適用されます。モバイルの閉じるオプションは、モバイル訪問者にのみ影響します。

フライアウトを最適化する

フライアウトフォームが表示される場合でも、モバイルオーバーレイがオンになっていない限り、モバイル訪問者はフォームの背後にあるサイトを引き続き操作できます。フォームを閉じる、入力する、または閲覧を続けながら開いたままにすることを選択できます。一般的に、これによりフライアウトはポップアップよりも邪魔になりにくくなります。

モバイルデバイス向けにフライアウトフォームを最適化するには：

フォームが画面の上部または下部からフライアウトするように設定します。
- スタイルを編集を選択して、スタイルパネルを開きます。
- モバイルのフライアウト位置を選択し、下部にドッキングまたは上部にドッキングのいずれかを選択します。
  モバイルデバイスを縦向きで使用している場合、フォームは画面の上部または下部からフライアウトし、画面の端から端までの一部を覆います。横向きの場合は、通常のフライアウト位置が使用されます。

モバイルオーバーレイ、ドロップシャドウ、またはその両方を使用して、フライアウトフォームをサイトの他の部分と視覚的に区別します。
- スタイルを編集を選択して、スタイルパネルを開きます。
- モバイルオーバーレイとドロップシャドウの設定までスクロールしてください。
- フライアウトフォームを開いたままにしている間、サイトの他の部分を操作できないようにするには、モバイルオーバーレイをオンにします。フライアウトフォームをデスクトップで表示している場合、オーバーレイは表示されません。
- ドロップシャドウをオンにすると、フォームの周囲にさりげない影を付けて周囲のコンテンツから区別できます。ドロップシャドウの設定は、フォームのモバイル版とデスクトップ版の両方に影響する点にご注意ください。