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

このページで学べること

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

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

始める前に

サインアップフォームをスタイル設定する前に、サインアップフォーム＞フォームを作成に移動します。チャネルの選択を求められた場合は、名前を入力し、ウェブを選択して、作成をクリックします。フォームライブラリの事前構築済みテンプレートをカスタマイズするか、まったく新しいサインアップフォームテンプレートを作成できます。スタイル設定を行う前に、追加したいコンテンツブロックと入力ブロックを追加します。

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

フォームタイプ

スタイルセクションの上部で、フォームタイプ（ポップアップ、フルページ、フライアウト、埋め込み、またはバナー）を選択してください。

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

背景画像とサイド画像

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

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

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

サインアップフォームはウェブブラウザに表示され、メールはメールクライアントに表示されます。解像度が高く、ファイルサイズを適切に抑えた画像を使用し、各種デバイスで表示をテストしてください。フォームエディタからアップロードする画像は、5 MB以下である必要があります。

側面画像を追加

側面画像は、ポップアップ、フライアウト、埋め込み、およびフルページフォームで利用できます。側面画像を追加するには：

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

3. フォームプレビューの空のサイド画像エリアをクリックし、次に画像を選択をクリックして、ライブラリから画像を選ぶか、新しい画像をアップロードしてください。

デフォルトでは、サイド画像を追加すると、ポップアップ、フライアウト、埋め込みフォームの幅が780 pxに設定され、サイド画像は中になります。フォーム内で画像が占める割合は、スタイル>サイド画像で調整します。フォーム全体の幅は、ポップアップ設定、フライアウト設定、または埋め込み設定で調整します。フルページフォームの場合、コンテンツの幅はフルページ設定で調整します。

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

サイド画像は、デフォルトでモバイルデバイスでは非表示になります。モバイルでも表示するには、スタイル＞サイド画像に移動し、すべてのデバイスを選択してください。この変更後にモバイルレイアウトをプレビューしてください。

背景画像を追加する

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

1. スタイルで、背景画像をオンにします。
2. ライブラリから画像を選択するか、新しい画像をアップロードするには、画像を選択をクリックしてください。
3. 画像の収まり方を選択してください：カバーは領域を埋め、画像がトリミングされる場合があります；コンテインは画像全体を表示し、空きスペースが生じる場合があります；カスタムでは幅を設定できます。画像の位置を調整するには、配置を調整してください。

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

色と間隔のオプション

スタイルで、背景色、枠線、余白（内側）、余白（外側）を使用して、フォームの色と余白を調整します。入力フィールドのスタイルを使用して、入力フィールドのスタイルを設定します。埋め込みフォームではマージンを使用できません。これらの設定は、特定のブロック内で競合する設定を適用しない限り、フォームのすべてのステップに適用されます。

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

［スタイル>入力フィールドのテキスト］を使用して、メールや電話番号のフィールドなどの入力フィールドのフォント、サイズ、色を編集します。テキストと見出しを使用してテキストブロックの共通スタイルを設定し、本文または見出しレベルを選択してから外観を調整します。

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

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

[閉じる] アイコン

フォームの閉じるアイコン（デフォルトでは右上隅のX）のサイズ、色、スタイルを調整できます。フォームのプレビューでXアイコンをクリックし、閉じるアイコンの設定を調整します。埋め込みフォームには閉じるアイコンがありません。フォームの閉じるアイコンのスタイル設定について詳細はこちら。

買い物客は、閉じるアイコンまたはEscapeキーを使用してフルページフォームを閉じることができます。フルページフォームによる中断で買い物客がストレスを感じないように、閉じるアイコンは見やすく、はっきりと表示してください。

カスタム HTML と CSS

有料のKlaviyoアカウントでは、サインアップフォームでカスタムHTMLとCSSを使用できます。これらの機能は、コードの作成に慣れている方向けです。Klaviyoではカスタムコードのサポートは提供しておらず、コードが正しくないとフォームが破損する可能性があります。公開する前に、デスクトップとモバイルでフォームをプレビューしてテストしてください。

• CSSでスタイルを変更するには、スタイル > カスタムCSSに移動し、カスタムCSSを有効化をオンにします。カスタムCSSコードにコードを入力してください。サインアップフォームでカスタムCSSを使用する方法をご覧ください。
• カスタムコンテンツを追加するには、ブロックを追加からHTMLブロックをフォームにドラッグし、次にそれを選択してマークアップを入力します。これによりブロック内にコンテンツが追加されます。既存ブロックのHTMLは編集されません。サポート対象のタグと属性のみを使用してください。サインアップフォームでカスタムHTMLブロックを使用する方法をご覧ください。

Klaviyoのエディタを使用してフォームをカスタマイズするためのヒントやインスピレーションについては、コミュニティフォーラムをご覧ください。

達成できること

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

次の手順

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

スタイル設定の編集内容は、すでに公開中のフォームへの変更を含め、ウェブサイトに表示される前に公開する必要があります。デザインとターゲティングの準備ができたら、サインアップフォームを公開してテストする手順に従ってください。

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

その他のリソース