サインアップフォームのスタートガイド

このページで学べること

Klaviyo でサインアップフォームの作成とカスタマイズを行い、ウェブサイトに公開する方法を学びましょう。より多くの顧客からメールアドレスや電話番号を収集できるようになり、長期的な顧客関係を構築できます。

次の手順に従って、ウェブサイトにサインアップフォームを作成して公開してください：

1. ウェブサイトで Klaviyo のサインアップフォームが有効になっていることを確認してください。「始める前に」のセクションに確認方法へのリンクが掲載されています。
2. フォームの目的を再確認しましょう。
3. フォームを作成したら、目的に合わせてデザインをカスタマイズしましょう。
4. オーディエンスを絞り込み、フォームが希望のターゲット層に表示されるようにしましょう。
5. ウェブサイトとスマートフォンでフォームをプレビューします。
6. フォームを公開してから、ターゲティングと表示動作をテストします。

This content requires Functional cookies to be enabled.

Update Cookie Settings

始める前に

サインアップフォームのベストプラクティス

どのようなサインアップフォームを作成すれば良いか迷られている方は、以下の、フォーム作成に関する推奨事項を参考にしてください。オーディエンスを増やし、サイト訪問者を有料顧客に変えるのに効果的だと考えられています。

• 顧客のページ離脱をトリガーとする、ポップアップフォームをサイトに設置する。
  • このガイドに記載された手順に従ってフォームを作成してデザインしたあと、このフォームをトリガーして Klaviyo にまだ登録されていない訪問者にのみ表示する方法については、フォームのターゲティングセクションをご覧ください。
    

サインアップフォームの目的を決める

サインアップフォームの作成を開始する前に、まずはその目的を確認しましょう。サインアップフォームを使えば、見込み顧客とつながり、オーディエンスの解像度を高め、メール購読者の SMS 登録を促進することができます。まだ購読登録をしたことのないサイト訪問者の連絡先情報を収集するには、シンプルなポップアップから始めるのが最適です。

効果的なサインアップフォームのコツとして、以下の 3 点が挙げられます。

• スタイルはシンプルに
  1 つのフォームに情報を詰め込みすぎると、フォームの内容が本来の目的から逸れてしまい、訪問者の登録につながりにくくなります。できるだけシンプルにして、訪問者がフォームの内容を理解し、簡単に入力できるようにしましょう。
• 顧客体験を全体的にとらえたデザイン
  完璧な色やレイアウトを選ぼうとして迷ってしまうことはよくあります。効果的なサインアップフォームは第一印象だけで決まるものではありません。フォームをデザインするときは、購読者がフォームにアクセスする前、入力中、その後の全体を通した顧客体験を考慮しましょう。
• 適切なデータ収集
  サインアップフォームは大抵、メールアドレスか電話番号の入力を求めますが、より多くのデータを集めることで、購読者と強いつながりを築くことができます。また、特定のオーディエンスをターゲットにしたサインアップフォームを利用し、告知やオファーを提供することも可能です。一般的に、適切なタイミングで、何を尋ねればよいかを理解することで、購読者が自身についての情報をさらに提供してくれるようになります。
  • マルチステップフォームは新規購読者から情報を収集するためのベストプラクティスですが、クロスチャネルのオーディエンス獲得には、シングルステップフォーム（電話番号のみを入力するフォームなど）が効果的です。

フォームの目的を決めたら、作成を開始するためにKlaviyoの左側のナビゲーションから［ウェブサイト > サインアップフォーム］を選択します。

基本のサインアップフォームを作成する

このガイドでは、各ステップの概要を説明します。フォームの作成、デザイン、ターゲット設定が完了したら、数回クリックするだけでウェブサイトに公開できます。

This content requires Functional cookies to be enabled.

Update Cookie Settings

新しいサインアップフォームを作成するには、2つの方法があります：

• Klaviyoのフォームライブラリにあるフォームテンプレートを基に作成してください。
• 新規のサインアップフォームを作成

フォームライブラリを利用してフォームを作成する

フォームライブラリにあるフォームは、ベストプラクティスに基づき設計されています。フォームのタイプや目的別にオプションを絞り込んで適切なテンプレートを見つけ、デフォルトのデザインをブランドに合わせて簡単に編集できます。テンプレートを選択する前に、必要な購読者リストを作成してください。

1. Klaviyo のメインナビゲーションから、[ウェブサイト] > [サインアップフォーム] を選択します。
2. 右上の [フォームを作成] をクリックします。
3. チャネルを選択するよう求められたら、フォーム名を入力し、ウェブを選択して、フォームを作成をクリックしてください。
4. デザイン済みのウェブサイトフォームテンプレートのライブラリを閲覧できます。フォームスタイルとテンプレートタイプのフィルターを使用して、フォームの種類、ステップ、同意チャネル、または目標で選択肢を絞り込みます。

5. フォームのテンプレートを選択します。
6. プレビューモーダルが表示されたら、以下を行ってください。
   • フォームに名前を付ける
   • フォームの送信先となるリストを選択する（フォームに入力した顧客はこのリストに登録されます）
     

1. [フォームを作成]を選択して、フォームエディターに入り、コンテンツやデザインをブランドに合わせて編集できます。
   

空のサインアップフォームを作成

フォームテンプレートをいちから自分で設計するには、サインアップフォームを新規で作成します。

1. ウェブサイト>[サインアップフォーム]に移動し、[フォームを作成]をクリックしてください。求められた場合はフォーム名を入力し、ウェブを選択して、フォームを作成をもう一度クリックしてください。
2. 右上の[空のフォームを作成]をクリックします。
   

3. 表示される詳細モーダルで、以下を選択してください。
   • サインアップフォームの名前
   • 新しい購読者を追加するリスト
     

• 使用したいサインアップフォームのタイプ
• データ保護フィールドを有効にするオプション
  

1. [保存とデザイン] をクリックするとフォームエディターが表示され、フォームの内容とデザインをカスタマイズできます。

フォームをデザインする

フォームを作成したら、エディターのコンテンツを追加セクションとスタイルを編集セクションを使用して、フォームのデザインと内容をカスタマイズできます。

サインアップフォームのスタイルを設定する

フォームエディターで[スタイルを編集]セクションを選択します。ここで以下を編集できます。

• フォームタイプ
  • ポップアップ
    ブラウザウィンドウの中央に表示されます。ポップアップは目に留まりやすく、コンバージョン率も高くなる傾向にありますが、訪問者のサイト体験を妨げる可能性があります。
  • フライアウト
    ページの端から「飛び出す」ように表示されます。フライアウトは目立つものの、通常、訪問者はフォームを閉じたりしなくても閲覧を続けられます。
  • フルページ
    ブラウザウィンドウ全体に表示され、顧客の注目を確実に集められます。これらは見過ごされにくいため、コンバージョン率の高いフォームです。しかし、閉じるには買い物客がフォームを操作する必要があるため、その分、より押しつけがましく感じられる場合もあります。サイト内に指定のオプトインページを設けたい場合は、フルページフォームをランディングページとして使用することを検討してみてください。
  • 埋め込みフォーム
    フッターなど、サイトの特定のページやセクションにフォームを埋め込みます。埋め込みは、購読するつもりでサイトにアクセスする訪問者にとって、便利で見つけやすいものです。ポップアップフォームの公開に加えて、フッターに埋め込みフォームを追加することで、リスト拡大の機会を最適化できます。フッターに埋め込みフォームを設置する場合、オプトインの数を増やすために、メールによる同意のみを求めることをお勧めします。
  • バナーフォーム
    バナーはウェブページの上部または下部に横長のバーとして表示され、ウェブサイトに馴染みやすいデザインとなっています。ポップアップやフルページのフォームよりも邪魔にならず、閲覧体験を妨げることなく継続的に表示できます。バナーはページと一緒にスクロールするか、位置を固定しておくかを設定できるため、よりユーザーフレンドリーでモバイルに最適化されたオプションです。バナーフォームでは、次のいずれかを行うことができます。
    • メール入力フィールドなど、バナーフォームに直接コンテンツブロックや入力フィールドを追加できます。
    • ユーザーがバナーをクリックすると別のライブフォームが開くように設定できます。これを行うには、バナーの アクション のボタンを 別のフォームを開く に設定し、買い物客がバナーをクリックしたときに表示したいフォームを選択します。なお、この機能は埋め込みフォームでは利用できません。
      

• フォームサイズ
• 画像内容
• 背景色
• フォーム、テキスト、入力フィールドのスタイル

サインアップフォームにブロックを追加する

サインアップフォームに追加するコンテンツブロックの種類は、フォームの目的や収集したい情報によって異なります。サインアップフォームのコンテンツを追加または編集するには、フォームエディターでコンテンツを追加コントロールを選択します。

さまざまなコンテンツブロックがあり、ドラッグ＆ドロップでフォームに追加できます。以下のようなブロックが用意されています。

要素：

• テキストブロック
• ボタンブロック
• 画像ブロック
• クーポンブロック
• SMS 開示に関する文言ブロック
• カウントダウンタイマー ブロック
• サインアップカウンター ブロック
• レビュー引用ブロック

入力フィールド：

• メールの入力
• 電話番号入力
• ラジオボタン
• マルチチェックボックス
• 日付入力
• ドロップダウン
• 年齢認証（SMS の使用を検討しているアルコール関連ブランドの場合）

フォームに入力フィールドを追加するときは、プレースホルダーテキストを追加しましょう。これにより、どのような情報を入力すべきか、顧客にヒントを提供できます。入力フィールドを必須としてマークすると、対応する必須テキストと無効なテキストも完全にカスタマイズできるため、サインアップフォーム内の他のテキストと同様に、任意の言語に翻訳できます。

顧客に複数の情報（例：メールアドレス、電話番号、誕生日など）を尋ねる場合は、上部メニューバーの [+ステップ] をクリックし、追加したいステップの種類を指定して [マルチステップフォーム] を作成します。マルチステップフォームでは、サインアップフォームに追加のページを加えることができるため、1 つのステップに多くの項目を詰め込み過ぎることなく、訪問者に負担をかけずに済みます。メールアドレスや電話番号を収集する場合は、マルチステップフォームを使用することをお勧めします。マルチステップは、リストの拡大とコンプライアンスの維持のためのベストプラクティスと考えられています。また、SMS の同意を収集する場所すべてに、開示に関する文言を記載する必要があります。

デスクトップとモバイルのビューを区別するために動的ブロックを設定する

サインアップフォームをデスクトップとモバイルの両方で表示するように設定し、デバイスに応じて表示内容を変えたい場合、フォームを 2 種類作成する必要はありません。ダイナミックブロックを導入すると、ブロックの内容を片方のデバイスで表示し、もう片方では表示しないよう設定できます。上記の一覧にあるブロックのいずれかをフォームに追加して、どのデバイスでそのブロックを表示するかを指定できるようになるため、モバイルの顧客向けにデスクトップの顧客とは異なるビジュアルを作成できます。

動的ブロックを使ってデバイスの種類別にフォームを調整する方法については、フォーム内の動的ブロック利用ガイドをご覧ください。

フォームティーザーを追加する

ポップアップ、フライアウト、またはフルページのサインアップフォームにティーザーを追加すると、フォームを閉じた訪問者は、必要に応じて再度フォームを開けるようになります。

メニューバーの [ティーザー] をクリックして、フォーム用のティーザーを作成します。このセクションで、フォームに合わせてティーザーのスタイルと動作も設定できます。ティーザーについて詳細はこちら。

フォームの完了メッセージをカスタマイズする

フォームの主なステップをデザインし終えたら、上部メニューバーの [完了] をクリックして、フォームの完了メッセージを表示・編集します。このメッセージは、フォームのデザインとブランドに一致するようにしてください。最後のメインステップの後に表示するには、そのステップの送信ボタンを選択し、アクションをフォームを送信に設定して、送信後を次のステップを表示に設定してください。送信後でフォームを閉じるまたはURLに移動を選択すると、送信完了メッセージはスキップされます。

フォームのターゲティング

フォームエディターで[ターゲティング＆動作]コントロールを選択し、サイトでフォームを表示するタイミングと表示対象を設定します。サインアップフォームの目的に基づいて、以下の設定を調整できます。

• 表示優先度
• 表示するタイミング
• 表示する頻度
• フォームを表示するデバイス（モバイル、デスクトップ、またはその両方）
• 非表示設定
• ターゲティング設定
  • 訪問者の場所情報、デバイスの種類、リスト登録の有無、URL、UTM パラメーター、カート内容などに基づいて、フォームを表示する対象を絞り込めます。

顧客のページ離脱によってトリガーされるポップアップの場合、次の動作設定を推奨します。

1. ターゲティング＆行動をクリックし、次に表示タブを選択してください。
2. タイミングで、フォームを表示をルールに基づいて表示に設定し、次に訪問者がページを離れるときを選択します。
3. 表示頻度で、訪問者がフォームを閉じた場合、次の時間が経過後に再表示するを5日に設定し、次にフォームが送信された場合、または［URLに移動］ボタンがクリックされた場合は、再表示しないを選択します。
4. デバイスで、すべてのデバイスをクリックします。
5. 上部にある [ターゲティング] のタブをクリックします。
6. オーディエンスで、既存のKlaviyoプロファイルに表示しないを選択します。

ウェブサイトでフォームをプレビューする

公開する前に、下書きフォームをウェブサイトでプレビューして、サイトのコンテンツと並べたときの表示と操作を確認します。また、訪問者に下書きを公開しなくても、スマートフォンでプレビューできます。

フォームをプレビューすると、見込みプロファイルの導線を再現できるため、フォームの品質だけでなく、フローの体験もテストできます。

プレビューを表示するには、アカウントのウェブサイトURLを、KlaviyoのオンサイトJavaScriptがインストールされているページに設定する必要があります。埋め込みフォームの場合、ページにはそのフォームの埋め込みコード（ターゲティングと動作＞表示＞埋め込みコード）も含まれている必要があります。

プレビュー中にフォームを送信する場合は、テスト用の連絡先情報を使用してください。送信内容によっては、プロファイルを更新し、連絡先を購読できます。プレビューでの表示と送信は、ライブフォームの分析には含まれません。

1. エディタでサインアップフォームを開き、ウェブサイトでプレビューを選択してプレビューパネルを開きます。
2. 特定のページをプレビューするには、そのURLをプレビューするページフィールドに入力し、プレビューを開くを選択して新しいタブで開きます。Klaviyoがインストールされているページを選択してください。このフィールドを変更しても、アカウントのデフォルトのウェブサイトURLは変更されません。
3. モバイルでの体験を確認するには、スマートフォンのカメラでQRコードをスキャンします。
4. フォームのレイアウト、コンテンツ、ステップを確認してください。エディタで必要に応じて変更してください。保存した変更はプレビューに自動的に反映されます。
5. 完了したら、ウェブサイトで[プレビューを終了]を選択します。

プレビューリンクとQRコードは30分後に期限切れになります。続行するには、プレビューパネルに戻り、新しいプレビューを作成を選択してください。

プレビューモードではターゲティングと表示ルールがバイパスされるため、フォームを確認できます。公開後は、プレビューモード以外でフォームをテストして、意図した訪問者に適切なタイミングで表示されることを確認します。

ウェブサイトにフォームを公開する

サインアップフォームを作成する際に、エディターのヘッダーでアラートを選択して、特定された問題（例：ボタンにテキストを追加）を確認し、プロンプトに従って修正してください。アラートを閉じると、後で再度確認できるように閉じたアラートに移動します。続行する前に、公開を妨げるエラーを解消してください。

1. 公開をクリックして、公開オプションを開きます。
2. スケジュール設定オプションが表示された場合は、今すぐ公開を選択してください。今すぐ公開ボタンをクリックしてください。オンサイトJavaScriptがインストールされている場合、公開済みのフォームは、ターゲティング設定と表示設定に応じてサイトに表示できます。

公開済みのサインアップフォームをテストする

公開後は、プレビューモード以外でウェブサイトにアクセスして、フォームのターゲティングと表示動作を確認します。

1. アクティブなプレビューセッションを終了します。
2. 広告ブロッカーを無効にした状態で、新しいシークレットウィンドウまたはプライベートブラウジングウィンドウでウェブサイトを開きます。
3. フォームのターゲティング条件と表示ルールを満たしていることを確認します。例えば、フォームに待機と離脱意図の両方が必要な場合、表示される前に両方の条件を満たす必要があります。
4. テスト用のコンタクト先情報を使用してフォームを送信します。想定どおりの成功メッセージまたはリダイレクトが表示され、必要に応じてダブルオプトインを完了して、送信内容が意図したリストに届くことを確認します。

公開済みフォームへの訪問者の操作が始まったら、フォームアナリティクスでパフォーマンスを確認します。

フォームをボットから保護する

Klaviyo はメールアドレス、電話番号、クーポンコードを収集するサインアップフォームで、CAPTCHA を含むボット対策機能を自動的に有効にします。

CAPTCHA は、フォーム送信者がボットではなく人間であることを確認するために、登録者に簡単なタスクを課します。Klaviyo が訪問者の IP アドレスから不審な行動や過去のボット活動を検出した場合、その訪問者はフォームを送信する前に CAPTCHA のタスクを行うよう要求されます。CAPTCHA が表示されるのは、ボットのような疑わしい動きをする訪問者に対してだけです。

広告ブロッカーが原因でフォームが機能しない場合

Klaviyo のユーザーまたはサイト訪問者が広告ブロッカー（AdGuard など）を使用している場合、Klaviyo のフォームが正しく機能しないことがあります。広告ブロッカーによりKlaviyo.jsが読み込まれなくなり、フォームのトリガーなどのフォームの中核機能が動作しなくなります。ブロックされると、個人情報（メールアドレスや電話番号など）を収集するフォームは表示されず、正常に送信されません。

フォームが正しく動作することを確認するために、広告ブロッカーを有効にしていないシークレット/プライベートモードのブラウザウィンドウでフォームをテストしてください。

次の手順

サインアップフォームに新規登録に対する特典（送料無料や注文の割引など）が含まれている場合、新規購読者はすぐにそのオファーを利用したいと考えるでしょう。ウェルカムフローを使用してオファーを提供し、ブランド認知度の向上とロイヤルティの構築を始めましょう。

ウェルカムフローでは、サインアップフォームのリストをトリガーとして使用し、最初のメールがすぐに送信されるよう設定してください。また、数日後にクーポンの使用を促す追加のメッセージやリマインダーも送信できます。

どの特典がオーディエンスに最適であるかをテストしたい場合には、サインアップフォームオファーの A/B テストをご検討ください。

その他のリソース

• コース：サインアップフォームを戦略的に作成する
• フォームの回答を表示する方法
• 基本：モバイルフォームのデザイン