サインアップフォームのスタートガイド – Klaviyo - Help Center - JA

説明内容

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

いくつかの点に気を付けるだけで、デザイン性に優れ、高いコンバージョン率につながるフォームを短時間で作成し公開できます。

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

始める前に

ウェブサイトにサインアップフォームを公開する前に、ウェブサイトと Klaviyo を統合する必要があります。統合が有効になったら、ウェブサイトでサインアップフォームが有効になっていることを確認し、希望どおりにフォームが表示されているかチェックしてください。

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

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

顧客のページ離脱をトリガーとする、ポップアップフォームをサイトに設置する。
- 当記事の説明に従ってフォームを作成・デザインしたあと、「フォームのターゲティング」のセクションを確認してください。 Klaviyo にまだ登録されていない訪問者だけにフォームを表示する方法を解説しています。
  
  このタイプのフォームを利用してメールと SMS 両方の同意を収集する場合、マルチステップフォームを使用しましょう。情報を別々のステップで収集することが、リストを増やすためのベストプラクティスと考えられています。フォームの完了ステップにクーポンブロックを追加して割引を提供すると、訪問者によるオプトインと商品購入をさらに促せます。

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

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

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

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

フォームの目的を決めたら、Klaviyo の左側のナビゲーションから [サインアップフォーム ] を選択して、作成を開始します。

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

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

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

Klaviyo のフォームライブラリにあるテンプレートを使って作成
新規のサインアップフォームを作成

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

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

Klaviyo のメインナビゲーションから、[サインアップフォーム] を選択します。
右上の [フォームを作成] をクリックします。
デザイン済みのフォームテンプレートのライブラリを閲覧できます。また、上部にある [タイプ] と [カテゴリー] ドロップダウンを使って、フォームのタイプ、目的、またはその両方でテンプレートをフィルタリングできます。
フォームのテンプレートを選択します。
プレビューモーダルが表示されたら、以下を行ってください。
- フォームに名前を付ける
- フォームの送信先となるリストを選択する（フォームに入力した顧客はこのリストに登録されます）
  
  メールアドレスと電話番号を収集するマルチステップフォームを使用している場合は、リストを 2 種類選択できる点にご注意ください。SMS 購読者リストがまだない場合は、[SMS 購読者] を選択すると自動的に作成されます。
[フォームを作成] を選択して、フォームエディターに入ると、コンテンツやデザインをブランドに合わせて編集できます。

サインアップフォームを新規で作成する

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

[サインアップフォーム] > [フォームを作成] に移動します。
右上の [新規フォームを作成] をクリックします。
表示される詳細モーダルで、以下を選択してください。
- サインアップフォームの名前
- 新しい購読者を追加するリスト
  
  フォームの送信先リストは後から変更できます。その場合、エディターでフォームの送信ボタンをクリックし、別のリストを選択してください。
- 使用したいサインアップフォームのタイプ
- データ保護フィールドを有効にするオプション
[保存とデザイン] をクリックすると、フォームエディターが表示され、フォームの内容とデザインをカスタマイズできます。

フォームをデザインする

フォームを作成したら、フォームエディターの [スタイル] と [ブロックの追加] セクションを使って、フォームのデザインと内容をカスタマイズしましょう。

プレビューの背後にあるフォームエディターキャンバスに「301 Moved Permanently」のエラーが表示される場合、これは通常、ウェブサイトが無効なドメインを返していることを意味します。まずはドメインが有効であるか確認することをお勧めしますが、原因としては、パスワード保護や古いドメインのリダイレクト設定などが考えられます。このエラーは Klaviyo とストアのウェブサイト間に問題があることを示すものではなく、フォームの公開に影響はありません。

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

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

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

サインアップフォームのデザインに関して詳しくは、サインアップフォームのスタイル選択のガイドをご覧ください。モバイルデバイス限定のサインアップフォームを作成する場合は、モバイルフォームデザインの基本に関するガイドをお読みください。

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

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

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

要素：

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

入力フィールド：

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

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

フォームに追加できるコンテンツブロックの種類について詳しくは、フォームブロックとフィールドを理解するをご覧ください。

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

電話番号入力フィールドを追加すると、SMS マーケティングへの同意がデフォルトで収集され、SMS メッセージを送信できるようになります。この設定をトランザクション目的の SMS の同意収集に限定したり、両方を別々に収集するように調整することも可能ですが、いずれにしても、適切な開示文言の記載は必要です。SMS 同意の種類について詳細はこちら。

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

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

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

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

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

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

ティーザーはバナーフォームでは使用できません。

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

フォームの主なステップをデザインし終えたら、上部メニューバーの [完了] をクリックして、フォームの完了メッセージを表示・編集します。この [完了] ページは、フォームの送信ボタンのアクションが [フォームを閉じる] または [URL に移動] に設定されている場合を除き、フォームの入力を正常に終了したすべての顧客に表示されます。そのため、完了ページもフォームのデザインやブランディングと合わせた内容にする必要があります。

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

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

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

フォームの表示機能を調整する方法について詳しくは、サインアップフォームのターゲティングと動作設定を理解するをご覧ください。

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

[ターゲティングと動作] をクリックします。
[タイミング] で、[ルールに基づいて表示] > [訪問者がページを離れるとき] を選択します。
[表示頻度] で [閉じてから 5 日後に再表示する] を選択し、「受信者がフォームを送信した場合、または [URL に移動] をクリックした場合、フォームを再度表示しない」にチェックを入れます。
[デバイス] で、[すべてのデバイス] をクリックし、[デスクトップとモバイル] の両方を選択します。
上部にある [ターゲティング] のタブをクリックします。
[訪問者] で、[既存の Klaviyo プロファイルに表示しない] を選択します。

EU、EEA、英国、スイスにあるストアの訪問者については、Shopify の顧客プライバシー設定に基づき、訪問者の同意がない場合、Klaviyo はオンサイトイベントをトラッキングしない場合があります（その結果、特定のフォームターゲティングも適用されない場合があります）。

訪問者による同意がない場合、本来ならターゲティング要件を満たしている訪問者であっても、個人の特定ができないためフォームは表示されません。これらの訪問者に対するターゲティングは､以下のように適用されます。

[既存の Klaviyo プロファイルに表示しない] を選択した場合、訪問者を既存のプロファイルとして識別できないため、フォームは表示されます。
[すべての訪問者に表示] を選択した場合、訪問者に表示されます。
[既存のプロファイルに表示する] [メール購読者のみに表示する] [SMS 購読者のみに表示する] を選択した場合、訪問者を既存のプロファイル、メール、SMS 購読者として識別できないため、フォームは表示されません。
[リストまたはセグメント内の特定のプロファイルに表示] を選択した場合、訪問者を識別できないため、（実際にはリストまたはセグメントに含まれていたとしても）、フォームは表示されません。
Cookie 情報とユーザープロパティに基づく特定のカスタムトリガーは、識別ができないためトリガーされません。
場所によるターゲティングは影響を受けません。
デバイスの種類（デスクトップ、モバイル）に基づくターゲティング設定は影響を受けません。

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

サインアップフォームの作成中に、エディターの左下にフォームのアラートが表示されることがあります。[アラート] をクリックすると、特定された問題（例：ボタンにテキストを追加）のリストが表示され、それぞれの問題を修正するよう促されます。アラートを非表示にすると、そのアラートは [非表示にしたアラート] セクションに移動し、後で確認できます。

フォームを共有する準備ができたら、[公開] をクリックします。フォームに未解決のエラーがある場合は、[フォームのアラート] タブでエラーを修正するよう求められます。すべての問題が解決し、「始める前に」で書かれているように Klaviyo とサイトが統合されていれば、フォームは公開することでライブ表示となります。

埋め込みフォームを公開する場合は、これまでの手順に加えて、フォームの埋め込みコードを公開モーダルからコピーし、その後、コードをサイトに貼り付けてください。

サインアップフォームをテストする

サインアップフォームを確認しテストするには、ウェブサイトにアクセスします。既存の Klaviyo プロファイルに表示しない設定にしてある場合は、シークレットブラウザを使用してください。フォームを表示するには、設定したターゲティング要件をすべて満たす必要があります。例えば、フォームをサイトにアクセスしてから 3 秒後、および、サイト離脱の意思が示されたときに表示するよう設定した場合、ページが読み込まれるまで 3 秒待ちます。次に、タブの [閉じる] ボタンに向かってカーソルを素早く動かす（モバイルの場合は上方向に素早くスクロールする）ことで、サイト離脱の意思を示します。フォームが表示されるためには、すべての条件（この場合、3 秒の待機と離脱意図）が満たされている必要がある点にご注意ください。

フォームをライブにした後の数時間から数日の間に、サイト訪問者にフォームが表示され、登録が行われるようになります。フォームの成果は [フォーム分析] で確認できます。

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

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

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

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

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

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

次の手順

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

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

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

その他のリソース