Klaviyo サインアップフォームでモバイル最適化を使用する
概要
別々のフォームを作成せずに、デスクトップとモバイル向けのウェブサイトのサインアップフォームをカスタマイズする方法をご確認ください。
モバイル最適化では、モバイルビューとデスクトップビューを並べて編集し、ブロックへの変更をデバイス間で同期するか、デバイス固有のままにするかを選択することで、デバイスごとの体験を設計できます。
始める前に
フォームがすべてのデバイスに表示されるように設定されている場合、両方のプレビューを利用できます。この設定を変更すると、フォームを表示できるデバイスも変更されます。
- 一部のブロックタイプは、メールアドレス入力、電話番号入力、開示テキスト、クーポンブロック、スピン・トゥ・ウィンブロック、オプトインコード入力など、リンク解除に対応していません。画像ブロックはリンク解除に対応しています。サイド画像にはデバイス別の設定があります。
仕組み
デュアル デバイス プレビューの切り替え
編集中にデスクトップとモバイルを左右に並べて表示するには、デバイスプレビューの切り替えで両方を選択します。1つのデバイスに集中するには、デスクトップまたはモバイルを選択します。
リンク済みブロックと未リンク ブロック
デフォルトでは、デスクトップとモバイルの同等のブロックはリンクされています。一方のビューでの変更は、もう一方にも引き継がれます。フォームを複製せずにモバイル専用またはデスクトップ専用の編集を行えるように、ブロックのリンクを解除できます。
サポートされているブロックを選択し、キャンバスのコントロールまたはブロックの設定パネル上部でリンク解除またはリンクをクリックしてください。
ブロックのリンクが解除されると、
- 編集は現在のデバイスビューにのみ適用され、他のデバイスのブロックは変更されません。
- リンクされていないブロックを複製すると、現在のデバイスビューにのみ複製が作成されます（リンクされたブロックを複製すると、両方のデバイスに複製されます）。
ブロックを再度リンクする場合：
- リンクすると、選択したブロックが両方のデバイスに表示されます。もう一方のデバイス固有のバージョンが統合されたり削除されたりすることはありません。そのバージョンがまだ存在する場合、不要なバージョンを削除するまで、両方のブロックがそのデバイスに表示されます。
デバイスあたりのティーザー
設定パネルでティーザーのリンクを解除すると、個別にスタイルを設定できるデスクトップ版とモバイル版をそれぞれ作成できます。リンクすると、選択したティーザーが保持され、両方のデバイスに表示され、もう一方のティーザーは削除されます。ティーザーのリンクが解除されている間は、デバイスでの表示/非表示は固定されます。
ステップバイステップ
デュアルプレビューを開く
- サインアップフォームページで、カスタマイズしたいフォームの編集を選択してください。
- ターゲティングと表示動作を開き、次に表示を選択します。デバイスで、フォームをデスクトップとモバイルの両方に表示する場合は、すべてのデバイスを選択します。
- フォームの上にあるデバイスプレビューの切り替えで両方を選択し、レイアウトと余白を並べて確認してください。
デバイス別の編集のためにブロックのリンクを解除する
- モバイルでカスタマイズするブロックを選択してください。
- キャンバスのコントロール、またはブロックの設定パネル上部でリンク解除をクリックしてください。
- モバイルプレビューでブロックを選択し、より小さい画面向けにコンテンツ、位置、フォントサイズ、または間隔を調整します。
- 必要に応じて、他のブロックでも繰り返します。
代わりにデスクトップをカスタマイズするには、リンク解除後にデスクトッププレビューでブロックを選択してください。
ブロックをリンクして、編集内容を再度共有します
- 両方のデバイスで使用したいコンテンツとスタイルが含まれる、デバイス固有のブロックを選択してください。
- キャンバスコントロール内、またはブロックの設定パネル上部でリンクをクリックします。選択したブロックが、両方のデバイスに表示されるようになりました。
- 両方のプレビューを確認してください。他のデバイス別バージョンがまだ表示される場合は、不要なブロックを選択し、削除をクリックしてから、ブロックを削除で確定してください。
デバイス別にティーザーを設定（任意）
ティーザーはポップアップ、フライアウト、全画面フォームで使用できます。
- フォームの上にあるティーザーを選択して、設定を開きます。フォームにティーザーがない場合、これによりティーザーが作成されます。設定パネルの上部にあるリンク解除をクリックします。
- デバイスプレビューの切り替えでモバイルを選択し、モバイルティーザーのコンテンツとスタイルをカスタマイズしてください。
- デバイスプレビューの切り替えでデスクトップを選択し、デスクトップ用ティーザーのコンテンツとスタイルをカスタマイズします。
リンクすると、選択したティーザーが保持され、もう一方のデバイスのティーザーは削除されます。両方のデバイスで1つのティーザーを再び使用するには、保持したいティーザーがあるデバイスビューを選択し、その設定パネルでリンクをクリックしてください。
モバイルフォームのベストプラクティス
- 小さい画面を優先：大きめのフォントを使用し、コピーは簡潔にしましょう。
- ボタンや入力が使いやすいように、タップターゲットと縦方向の間隔を大きくしてください。
- 特に小型のデバイスでは、見やすさと分かりやすさのために、全ページフォームの使用をご検討ください。フォームタイプを変更すると、両方のデバイスビューに適用されます。
- 画像は目的に沿って使用してください。小さな画面でサイド画像がコンテンツと競合する場合は、非表示にするかレイアウトを簡素化してください。
把握しておくべき制限事項と動作
- リンクブロックは、デバイスの表示設定がデスクトップとモバイルの両方に設定されている単一のブロックです。いずれかのビューで行った編集は、その 1 つの共有ブロックに反映されます。
- ブロックのリンクを解除すると、エディターにデスクトップ専用版とモバイル専用版が別々に作成されます。一方のバージョンを編集しても、もう一方は変更されません。
- リンク解除を行うと、ブロック設定が分離されます。フォーム全体の設定（フォームタイプや入力フィールドのスタイルなど）は、引き続き両方のデバイスに適用されます。
- メールと電話番号の入力などの一部のブロックタイプ（開示テキスト、クーポンブロック、スピン・トゥ・ウィンブロック、オプトインコード入力などを含む）は、リンク解除できません。画像ブロックはリンク解除できます。サイド画像はデバイス設定が別々です。
- クローンの動作はリンクの状態によって異なります。リンクされたブロックのクローンは両方のデバイスに表示され、リンクされていないブロックのクローンは現在のデバイスビューにのみ表示されます。
- ブロックをリンクすると、選択したバージョンが両方のデバイスに表示され、今後の編集内容が共有されます。その他のデバイス固有のバージョンは、削除するまでそのまま維持されます。
変更内容を確認して公開してください。
編集内容は自動的に保存されます。更新されたフォームを訪問者に表示する準備ができたら、変更内容を公開してください。
- デスクトップとモバイルで、各フォームステップとティーザーを確認してください。リンク解除または複製したボタンについては、各バージョンを選択し、該当する場合はクリックアクション、送信先リスト、宛先を確認してください。
- 公開またはスケジュールを選択して公開パネルを開き、フォームをブロックしているアラートを解消してください。
- 変更をすぐに反映するには、今すぐ公開を選択し、今すぐ公開ボタンをクリックしてください。
トラブルシューティング
- ブロックに［リンク解除］または［リンク］が表示されません：
ブロックタイプがリンク解除をサポートしているか確認してください（「開始する前に」を参照）。 - モバイルでの変更がデスクトップに影響した（またはその逆）場合：
編集したいデバイスプレビューで、リンクされていないブロックを選択します。フォームタイプや入力フィールドのスタイルなど、フォーム全体の設定に対する変更は、引き続き両方のデバイスに影響します。 - リンク後にブロックが重複して表示されます：
リンクすると、選択したブロックが他方のバージョンを削除せずに両方のデバイスに表示されます。不要なデバイス固有バージョンを削除してください。