Klaviyo サインアップフォームでモバイル最適化を使用する

概要

Klaviyo フォームを複製することなく、デスクトップとモバイル向けに調整できるため、公開をより迅速に行い、モバイル訪問者の体験を改善できます。

モバイル最適化では、モバイルビューとデスクトップビューを並べて編集し、ブロックへの変更をデバイス間で同期するか、デバイス固有のままにするかを選択することで、デバイスごとの体験を設計できます。

始める前に

• 一部のブロックタイプでは、デバイス間のリンク解除がサポートされていません。例外には、Disclosure、Spin to win、Image（別途処理）、Phone number（複数ステップの同意）が含まれます。

仕組み

デュアル デバイス プレビューの切り替え

フォームをデスクトップとモバイルで並べてプレビューし、編集内容がデバイス間でリアルタイムにどのように反映されるかを確認してください。これにより、切り替えの往復が減り、モバイルデザインの品質向上が速まります。

リンク済みブロックと未リンク ブロック

デフォルトでは、デスクトップとモバイルの同等のブロックはリンクされています。一方のビューでの変更は、もう一方にも引き継がれます。フォームを複製せずにモバイル専用またはデスクトップ専用の編集を行えるように、ブロックのリンクを解除できます。

選択したブロックは、キャンバス内のリンク解除ボタンをクリックするか、サイドパネルのリンク解除ボタンをクリックして、リンク解除／再リンクできます。

ブロックのリンクが解除されると、

• 編集は現在のデバイスビューにのみ適用され、他のデバイスのブロックは変更されません。
• リンクされていないブロックを複製すると、現在のデバイスビューにのみ複製が作成されます（リンクされたブロックを複製すると、両方のデバイスに複製されます）。

ブロックの再リンク：

• 再リンクすると、デバイス間で新しいペアのブロックが再び作成されます。対応するブロックが削除されている場合、再リンクするともう一方のデバイス用に作成され、両方のビューに再びブロックが表示されます（その後、不要な重複は削除できます）。

デバイスあたりのティーザー

サイドパネルからティーザーのリンクを解除できるため、デスクトップとモバイルそれぞれで独自のティーザーのスタイルを設定できます。再リンクすると、再リンクされたティーザーの表示範囲がすべてのデバイスにリセットされます。

ステップバイステップ

デュアルプレビューを開く

1. エディターでフォームを開きます。
2. デスクトップとモバイルを並べて表示する トグル からプレビューに切り替えると、レイアウトと余白をひと目で確認できます。

デバイス別の編集のためにブロックのリンクを解除する

1. モバイルでカスタマイズするブロックを選択してください。
2. [リンク解除] を選択すると、モバイルでの編集がデスクトップに影響しなくなります。
3. 小さい画面で読みやすくなるように、モバイルレイアウト（例：配置、フォントサイズ、間隔）を調整してください。
4. 必要に応じて、他のブロックでも繰り返します。

再度共有された行動を使用したい場合は再リンクします。

1. ブロックを選択し、再リンク を選択します。
2. もう一方のデバイスに対応するものがない場合、エディタが自動的に作成します。
3. 重複するブロックを削除します。

デバイス別にティーザーを設定（任意）

1. ティーザー設定を開き、[リンク解除]を選択します。
2. デスクトップとモバイル向けに、ティーザーコンテンツまたは表示・非表示を個別に設定します。
3. 後で再リンクすると、1 つのティーザーを両方のデバイスに適用できます。

モバイルフォームのベストプラクティス

• 小さい画面を優先します：大きめのフォントと簡潔なコピーを使用します。
• ボタンや入力が使いやすいように、タップターゲットと縦方向の間隔を大きくしてください。
• 特に小型のデバイスでは、集中と明瞭さのためにモバイルでは全画面表示を検討してください。
• 画像は目的に沿って使用してください。小さな画面でサイド画像がコンテンツと競合する場合は、非表示にするかレイアウトを簡素化してください。

把握しておくべき制限事項と動作

• リンクブロックは、デバイスの表示設定がデスクトップとモバイルの両方に設定されている単一のブロックです。いずれかのビューで行った編集は、その 1 つの共有ブロックに反映されます。
• ブロックのリンクを解除すると、エディターは内部的に 2 つ目のブロックを作成し、各ブロックを異なるデバイス（1 つはデスクトップ専用、もう 1 つはモバイル専用）に設定します。それ以降、編集内容は両者間で同期されません。
• 一部のブロックタイプではリンク解除はサポートされていません：Disclosure、Spin to win、Image（サイドイメージ作業で別途処理）、Phone number（複数ステップの同意）。
• クローンの動作はリンクの状態によって異なります。リンクされたブロックのクローンは両方のデバイスに表示され、リンクされていないブロックのクローンは現在のデバイスビューにのみ表示されます。
• 再リンクすると、選択したブロックが参照元となり、両方のデバイスに表示されるように設定されます。対応するものがない場合、エディターが作成します；複数のバージョンが存在する場合、保持したくない追加のブロックは手動で削除する必要がある場合があります。

達成できること

これで、2 つの別々のフォームを作成しなくても、モバイル デバイス向けに最適化されたサインアップフォームを作成できるようになります。

トラブルシューティング

• ブロックにリンク解除/再リンクが表示されません：
  ブロックの種類がリンク解除に対応していない可能性があります（例外を参照）。
• モバイルでの変更がデスクトップに影響した（またはその逆）：
  デバイス固有のバージョンを編集する前に、ブロックのリンクが解除されていることを確認してください。
• 再リンクで追加のブロックが作成されました:
  対応するブロックが欠落していた場合は想定どおりです。再リンク後、不要な重複は削除してください。

次の手順

• サインアップフォームのスタートガイド。
• 基本：フォームフォームのデザイン。
• サインアップフォームを A/B テストする方法。