このページで学べること

Amped.io(現在は Mailchimp 傘下)のフォームを Klaviyo に移行する方法をご覧ください。2025年8月15日以降、Amped.io では Klaviyo などのサードパーティー外部連携がサポートされなくなります。このガイドは、既存フォームの主要な要素を特定して文書化し、Klaviyo で簡単に再構築できるようにするための参考資料です。

始める前に

Klaviyo でフォームを再作成する必要があるため、参照用に Amped.io のフォームとスタイルのスクリーンショットを撮るか、別の方法で記録しておくことをおすすめします。Klaviyo に移行する予定の Mailchimp の各フォームについて、またフォームに含まれる可能性のある各ステップについても、この手順を繰り返します。

フォーム要素

Klaviyo でフォームを正確に再作成するには、既存のフォームの見た目と設定を十分に記録してください。通常、以下の主要な要素について、スタイル設定と併せてドキュメント化またはスクリーンショットを取得してください。

入力フィールド

フォーム上のすべてのフィールド(標準のメールフィールドを含む)を文書化するか、スクリーンショットを撮ってください。これには、電話番号、生年月日、お客様から収集しているその他の情報などのフィールドも含まれる場合があります。

必ずスクリーンショットをキャプチャしてください:

  • フィールド ラベル
    各フィールドの表示ラベル(例:"名," "好きな色," "誕生日")。
  • フィールドタイプ
    各フィールドのタイプ(例:テキスト、数値、日付、ラジオボタン、チェックボックス、ドロップダウン)をメモします。
  • マージタグ
    各フィールドに関連付けられた Mailchimp のオーディエンスフィールド。これは、Klaviyo で作成するカスタムプロパティを特定する方法です。
  • プレースホルダーテキスト
    ユーザーが入力を開始する前に入力フィールド内に表示される、例または説明用のテキストです。

Mailchimp では、フォームエディターでフィールドを直接クリックすることで、この情報にアクセスできます。右側にパネルが開き、入力フィールドの設定が表示されます。

ここでは、フィールドに関連付けられたデータと、適用されているすべてのスタイルに関する情報を確認できます。これらの設定をスクリーンショットに撮るなどして記録し、Klaviyo でフォームを再構築する際に参照できるようにしてください。

field settings.jpg
field settings.jpg

フォームのコピー

フォーム上のすべてのコピー(つまり、テキストとメッセージング)も記録として残してください。以下を必ず文書化してください:

  • フォーム見出し
    フォームのメイン見出し(例: "ニュースレターに登録"、"10% オフを入手")。
  • 本文テキスト
    購読の価値、受け取れる内容、または手順を説明する任意の説明文。
  • ボタンのテキスト
    任意のボタン上のテキスト(例:"購読," "オファーを受け取る," "登録する")。
  • 確認メッセージ
    ユーザーがフォームを送信した後に表示されるメッセージ。
  • 開示文言
    お客様が何を購読するのかの詳細と、ブランドがその情報をどのように使用するかを知らせる、フォーム上の開示文言。

Mailchimp では、フォーム エディターでテキストをクリックすると、そのテキストの設定を表示できます。右側にパネルが開き、適用されているすべてのスタイルを確認できます。Klaviyo でフォームを再構築する際に参照できるよう、これらの設定をスクリーンショットに撮るなどして記録します。

text settings.jpg
text settings.jpg

ボタン

ボタンもフォームの重要な要素の 1 つです。フォームに複数のステップがある場合はボタンがいくつかあることがあるため、それらすべての設定を必ず記録してください。必ず以下を記録してください:

  • デザインとスタイル
    ボタンの色(例: テキストの色、背景色など)、パディング、フォント。
  • ラベル
    ボタン上のテキスト(例:"[送信]," "[登録]," "[割引を取得]," "[次へ]")。
  • ボタンの動作
    顧客がボタンをクリックしたときの動作(例:次のステップへ進む、送信、リダイレクトなど)
  • データ収集
    顧客から情報を収集するボタン(例:ラジオボタン)がある場合は、Klaviyo のカスタムプロパティとして再作成できるように、Mailchimp で関連するオーディエンスタグをドキュメント化してください。
  • 無効状態
    ボタンが無効な場合(例:必須フィールドがすべて入力される前)はどのように表示されますか?これには、色とカーソル スタイルの変更が含まれます。

Mailchimp では、フォームエディターでボタンをクリックすると、そのボタンの設定を表示できます。右側に、ボタンの設定があるパネルが開きます。ここでは、ボタンの動作に関する情報に加え、適用されているすべてのスタイルを確認できます。Klaviyo でフォームを再構築する際に参照できるように、これらの設定をスクリーンショットに撮るか、別の方法で記録してください。

button settings.jpg
button settings.jpg

ティーザー

Mailchimp でフォームのティーザーを有効にしている場合は、Klaviyo で再構築できるように、内容と外観を記録します。スクリーンショットを撮る、または別の方法で次を記録します:

  • ティーザー コンテンツ
    ティーザーおよび行動喚起に含まれるコピーまたは画像。
  • ティーザーのデザインとスタイル
    ティーザーが画面のどこに表示されるか、形状やサイズ、色、フォントなど、デザインとスタイルの詳細に注意してください。
  • ティーザーの表示と動作
    トリガー、頻度、表示設定など、ティーザーの表示設定と動作設定を文書化します。

Mailchimp のフォームビルダーでは、ティーザーは Second-chance elements と呼ばれます。ティーザーの設定を表示するには:

  1. 手順パネルで、[フォローアップ]をクリックします。
  2. 2 番目のチャンス コンテナをクリックします。
  3. 右側のパネルでティーザー設定を表示して文書化します。
teaser.jpg
teaser.jpg

動作と機能

Mailchimp フォームの視覚要素を記録したら、次のステップは、その動作と機能をキャプチャすることです。Mailchimp フォームで次の設定を必ず記録してください。

  • 表示タイミング
    フォームがどのように、いつ表示されるかを記録します(例:ページ読み込み時、遅延後、離脱意図時、スクロール率)。
  • 表示頻度
    フォームがユーザーに表示される頻度を指定します(例:セッションごとに 1 回表示する、毎回表示する)。
  • 特別なインタラクティビティの注記
    特定のインタラクションやトリガー(例:あることが起きると別のことが起きる)を含めます。
  • ターゲティング ルール
    • URL
      フォームを表示するページと、表示から除外するページはどれですか?
    • デバイス
      フォームをどのデバイスに表示しますか(例:モバイル、デスクトップ、または両方)?
    • 訪問者タイプ
      フォームは新規または再訪問のプロファイルをターゲットにする必要がありますか?
    • ジオターゲティング
      フォームは特定の地理的な場所をターゲットにしていますか?
    • UTM パラメーター
      フォームは特定の UTM パラメーターによってトリガーされますか?

Mailchimp フォームの動作と機能の設定を表示するには:

  1. Mailchimp の Forms ページでフォームの横にある[編集] を選択します。
  2. どこに表示しますか? で[サイト設定を編集] を選択します。
  3. 誰に表示しますか? の [ターゲティングを編集] を選択します。
  4. いつ表示する必要がありますか? で[トリガーを編集] を選択します。
  5. これらそれぞれの設定を文書化するか、スクリーンショットを撮っておきます。

アセット

画像とロゴ

Klaviyo に移行したい Mailchimp フォーム内の画像やロゴは、必ずエクスポートしてください。

Mailchimp フォームから画像をエクスポートするには:

  1. Mailchimp のフォーム エディタで画像を選択します。
  2. 右側パネルのダウンロード ボタンをクリックします。
download image.jpg
download image.jpg

フォント

Mailchimp フォーム内のあらゆるテキスト要素について、フォントを必ず文書化してください。各テキスト(例:見出し、ボタンラベルなど)は、それぞれ独自のフォントを設定できます。

フォームビルダーの概要ページから、Mailchimp フォームで使用されているすべてのフォントのリストを表示できます。

fonts overview.jpg
fonts overview.jpg

特定の要素で使用されているフォントは、それをクリックして確認することもできます。使用されているスタイルとフォントは、右側のパネルに表示されます。

element font.jpg
element font.jpg

色

Klaviyo のフォームで同じ色を使用するには、Mailchimp のフォームから各色の 16 進コードをコピーします。各 16 進コードは特定の色を表しており、同一の色を使用して Klaviyo でフォームを再作成できます。

Mailchimp フォームで使用されているすべての色とその 16 進コードのリストは、フォームビルダーの概要ページで確認できます。

color overview.jpg
color overview.jpg

特定の要素で使用されている色は、それをクリックして確認することもできます。使用されているスタイルとフォントは、右側のパネルに表示されます。

element colo.jpg
element colo.jpg

Klaviyo でフォームを作成する

上記の手順を実行し、Mailchimp でフォームの主要コンポーネントを文書化したら、Klaviyo でフォームを再構築する準備ができた時点で、以下のプロセスを使用できます。

Klaviyo でフォームを再作成する

Klaviyo アカウントでフォームの再構築を開始するには、

  1. [サインアップフォーム] タブに移動して [サインアップフォームを作成] をクリックします。
  2. Choose a form type
    Mailchimp フォームに一致するフォームタイプ(例:ポップアップ、フライアウト、全ページ、または埋め込み)を選択します。
  3. コンテンツと入力フィールドを追加する
  4. フォームのスタイルを設定する

ターゲティングと動作を設定する

Klaviyo でフォームのターゲティングと動作設定を構成するには:

  1. フォームビルダーの概要ページで [ターゲティングと行動] ボタンを選択します。
  2. 表示ルールを設定
    [ターゲティングと行動] タブで、フォームをいつ、どのように表示するかを設定します。
    • 表示タイミング を設定します(例:ページ読み込み時、遅延後、離脱意図時、スクロール率)。
    • [表示頻度]を設定します(例:セッションごとに 1 回表示、毎回表示)。
  3. オーディエンスを定義
    • フォームを特定のページにのみ表示する必要がある場合は、特定の URL をターゲットにします。
    • デバイス を指定します(例:デスクトップ、モバイル、または両方)。
    • 訪問者タイプ(例:新規またはリピーター)を設定します。
    • フォームが特定の場所の顧客向けに設定されている場合は、ジオターゲティング を適用します。
    • フォームが特定の UTM によってトリガーされる場合は UTM パラメーター を使用します。

次の手順

Klaviyo で Mailchimp フォームの再構築が正常に完了したら、スムーズに移行するための次のステップがいくつかあります。

  1. ウェルカムフローをトリガーする
    フォームに接続したリストによってウェルカムフローがトリガーされるようにしてください。
  2. フォーム クーポンを設定
    フォームの成功メッセージでクーポンを表示するか、ウェルカムメールに含めることができます。

公開して置き換える

Klaviyo でフォームの準備ができたら、公開の準備を進め、古い Mailchimp フォームを削除できます。

  1. Klaviyo フォームを公開
    フォームに問題がなければ、[公開] をクリックします。
    • 必要に応じて Klaviyo の埋め込みコードをインストールします:
      1. ポップアップ、フライアウト、全ページフォームの場合は、Klaviyo のオンサイト トラッキング(つまり、Klaviyo.js)をサイトにインストールする必要があります。
      2. 埋め込みフォームの場合は、提供されている埋め込みコードをコピーし、フォームを表示したいウェブサイトの HTML に貼り付ける必要があります。
  2. Mailchimp フォームを削除
    両方のフォームが表示されないように、Mailchimp アカウントで該当するフォームを無効化または削除します。
  3. テスト
    新しい Klaviyo フォームが正しく表示され、正常に機能することを確認するために、シークレット ウィンドウでウェブサイトにアクセスします。

その他のリソース

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

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

  • サインアップフォームのスタイルを理解する

    Klaviyo のサインアップフォーム ビルダーの使い方を確認し、[スタイル] セクションで利用できるデザイン設定を編集してフォームをデザインします。スタイル設定は、フォームのすべてのステップや成功メッセージを含め、サインアップフォーム全体に適用されます。

  • サインアップフォームのターゲティングと行動設定について理解する

    サインアップフォーム エディターの Targeting & behavior セクションについて学びましょう。ここでは、サイト上でフォームが表示されるタイミングと、表示対象を管理および変更できます。既存のサインアップフォームのフォーム エディターを開き、Targeting & behavior を選択して、このガイドで説明する表示設定とターゲティング設定を調整します。

この記事は役に立ちましたか?
この記事へのフィードバックには、このフォームのみを使用してください。 サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ
同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。
パートナー
特定のタスクのサポートや継続的なマーケティング管理のために、Klaviyo 認定エキスパートを雇いましょう。
サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャル アシスタント
利用可否は地域およびプランタイプによって異なります