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

このページで学べること

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

サインアップフォームのデザインはシンプルにしてください。明確で、雑然としておらず、主な目的が 1 つである必要があります。さらに、読みやすく、手順を追いやすいようにしておくとよいでしょう。

始める前に

サインアップフォームをスタイリングする前に、[サインアップフォーム] タブ > [サインアップフォームを作成] に移動します。フォームライブラリの事前構築済みテンプレートをカスタマイズするか、まったく新しいサインアップフォームテンプレートを作成できます。スタイルを適用する前に含めたい任意の コンテンツ ブロックと入力ブロック を追加してください。

モバイルのみのサインアップフォームを作成している場合は、基本：モバイルフォームのデザインをご覧ください。

フォームタイプ

Styles セクションの上部で、フォームタイプ（ポップアップ、全ページ、フライアウト、埋め込み）を選択できます：

• ポップアップ は、ブラウザウィンドウの中央に表示されます。ポップアップは目を引きやすく、重要なオファーや重要なメッセージに最適です。ポップアップは、どのフォームタイプよりもコンバージョン率が最も高くなります。
• フライアウトは、選択した任意の方向からブラウザウィンドウ内にスライドして表示されます。これらはポップアップと同様に、何かを実行してもらったりリダイレクトしたりするために使用できますが、より押し付けがましくないオプションであるため、ブラウザ閲覧者に関する情報を受動的に収集する用途にも使用できます。
• 埋め込みフォームは、サイト上の指定箇所に提供されたコードスニペットを貼り付けた場所に表示されます。埋め込みフォームは最も干渉の少ないサインアップフォームで、通常はサイトのフッターでメールアドレスを収集するために使用されます。
• フルページフォームはブラウザウィンドウ全体に表示され、買い物客の注目を確実に集められます。このようなフォームは見過ごされることがないため、コンバージョン率が高くなります。ただし、閉じるには買い物客がフォームを操作する必要があるため、より押しつけがましい印象を与える可能性もあります。
  • 購読者リストを増やすには、フルページフォームをランディングページとして使用することを検討してください。
• バナーは、ウェブページの上部または下部にバーとして表示されます。ポップアップやフルページのフォームよりも邪魔にならず、継続的な可視性と、ウェブサイトにスムーズに統合できるモバイル フレンドリーなデザインを提供します。バナーをページとともにスクロールさせるか固定表示にする、コンテンツブロックや入力フィールドをバナーに直接追加する、またはバナーがクリックされたときにアカウント内の別のフォームが開くようにバナーを設定できます。
  • 買い物客がバナーをクリックしたときに別のフォームが表示されるようにするには、プレビュー内のボタンをクリックして Action を 別のフォームを開く に設定し、表示したいライブフォームを選択します。なお、これは埋め込みフォームでは利用できません。

背景画像とサイド画像

サインアップフォームにカスタム画像を追加するには、サイド画像または背景画像を使用します。サイド画像はフォームコンテンツの左または右に表示され、背景画像はフォームフィールドの背後に表示されます。

フォームで画像を使用する場合、注意すべき点がいくつかあります。

• 選択できる画像形式は多数あります。JPEG はカラフルな画像で品質とサイズのバランスが良く、PNG は透明な画像やロゴを鮮明に保てます。
  • サイトの読み込み時間を遅くすることなく高品質な画像を確保するため、サイド画像のファイルサイズは 50～100 KB、背景画像は 200 KB 未満を目安にしてください。
• ウェブで表示されるすべての画像と同様に、ファイルサイズが大きいほど読み込み時間は遅くなります。
  • 注：72dpi のフル幅画像は 1MB を超えることが多く、画像サイズを小さくすると品質が低下する可能性があります。画像を選択する際は、画質と読み込み時間のトレードオフを考慮してください。
• 最適な結果を得るために、十分に高品質な画像を使用してください。
  
  • ウェブ全体では、解像度を 72dpi に設定することがベストプラクティスです。画質と読み込み速度のバランスを取るために、画像の幅は 600～1000 px にし、全幅画像の場合は高さを 2000px 未満に抑えるようにしてください。メールの全幅ではない画像は、600px 未満でも問題ありません。
    
    • フルページのサインアップフォームを使用している場合は、より大きいサイズのフォームに合わせるために、より大きな高解像度の画像（例：最小幅 1980px）が必要になります。ただし、これでも読み込み時間に影響する可能性がある点にご注意ください。
• フォームを操作するすべてのユーザーのアクセシビリティを高めるために、画像に代替テキストを追加します。

サインアップフォームは（ESP（メール配信プロバイダー）でレンダリングされるメールとは異なり）ブラウザでレンダリングされるため、書式設定や調整の推奨事項は少なくなります。ブラウザではあらゆる種類とサイズの画像をレンダリングできるため、通常は高解像度の画像、扱いやすいファイルサイズを使用し、各デバイスの種類で表示をテストしてください。

側面画像を追加

側面画像を追加するには：

1. [Styles] セクションに移動し、Side Image の設定までスクロールします。
2. 画像を表示したい位置に応じて、[左の画像] または [右の画像] を選択します。
   

3. 画像を選択します。デフォルトでは、サイド画像付きフォームは幅 780px、サイズは中に設定されています。ただし、フォームのサイズや画像を小さくまたは大きく表示したい場合に応じて、[スタイル] タブの [サイド画像] セクションで調整できます。

サイド画像はステップ レベルで設定されるため、フォームの各ステップに別々の画像を設定できます。サイド画像の表示オプションの詳細については、記事サインアップフォームにサイド画像を追加する方法をご覧ください。

背景画像を追加する

背景画像を追加するには：

1. Form Background. の下にある Background Image 設定をオンに切り替えます。
2. [参照] ボタンを使用して画像をアップロードします。
3. 表示設定を好みに合わせて調整します。
   

フォームにサイド画像または背景画像を追加する場合は、上部のメニュー バーで各ステップを選択して、成功メッセージを含むすべてのフォーム ステップをプレビューしてください。デフォルトでは、フォームの高さは各ステップのコンテンツとフォーム フィールドに基づいて調整されるため、ステップによって他よりも高くなったり低くなったりする場合があります。フォームに画像が含まれている場合、小さいサイズのステップでは画像コンテンツの一部が切り取られることがあります。これを回避するには、スタイル セクションの フォームタイプ で最小の高さを設定します。

色と間隔のオプション

フォームのスタイル と 入力フィールドのスタイル の設定を使用して、色、枠線の色、パディング、マージンを設定します。これらの設定は、特定のコンテンツ ブロックのスタイル設定内で競合する設定（テキストや色など）を適用しない限り、フォームのすべてのステップに適用されます。

フォントとテキストスタイル

入力フィールドのテキスト スタイル で、コンテンツ ブロック（例：メールまたは電話番号フィールド）のテキスト（例：フォント、サイズ、色など）を編集します。

フォームプレビューでブロックをクリックし、表示される [テキスト] オプションメニューを使用して、特定のコンテンツブロックのテキストを編集してください。Klaviyo のフォームエディターは UTF-8 コーディング標準を使用しているため、ラテン文字、絵文字、2 バイト文字などに対応しています。

サインアップフォームでは、Klaviyo エディターにネイティブで搭載されているウェブセーフ フォント、Klaviyo がホストするカスタムフォントのいずれかを使用するか、独自のカスタムフォントを追加できます。サインアップフォームでカスタムフォントを使用する方法をご覧ください。

[閉じる] アイコン

フォームの閉じるアイコン（右上の X）のサイズ、色、スタイルを調整できます。フォームエディタで X アイコンをクリックし、左側のエディタで設定を調整します。フォームの閉じるアイコンのスタイル設定について詳細はこちら。

全ページフォームを使用するよう選択した場合、購入者がフォームを閉じる唯一の方法は、閉じるアイコンをクリックすることです。これは注意を引くのに役立ちますが、購入者が全ページフォームの中断に苛立たないよう、閉じるアイコンが明確で見やすいことを確認してください。

カスタム HTML と CSS

Klaviyo のサインアップフォーム エディターは現在、カスタム HTML または CSS コンテンツをサポートしていません。Klaviyo のエディターを使用してフォームをカスタマイズするためのヒントやインスピレーションについては、コミュニティ フォーラムをご覧ください。

達成できること

これで、フォーム エディターでさまざまなスタイル設定を調整してサインアップフォームをデザインする方法を学習しました。

次の手順

サインアップフォームのスタイル設定が完了したら、どの訪問者にフォームを表示するか、いつ表示するかなど、フォームの動作を設定する方法を確認してください。フォームのターゲティングと動作設定を選択する方法に関する記事をご覧ください。

サインアップフォームを公開したら、リストでダブルオプトインがオンになっている場合は、オプトイン確認メールをカスタマイズします。次に、ウェルカムシリーズを作成してフォームのオファー（例：初回注文の割引や送料無料）を提供し、新しい購読者にブランドを紹介します。

その他のリソース