サインアップフォームにサイド画像を追加する方法

このページで学べること

ブランドのデザインに合った魅力的なサインアップ体験を実現するために、サインアップフォームの左側または右側に高品質な画像を追加する方法をご紹介します。

始める前に

サイド画像はフォームコンテンツの左側または右側に表示されます。フォームで画像を使用する場合、いくつか注意すべき点があります。

• 選択できる画像形式は多数あります。JPEG はカラフルな画像で品質とサイズのバランスが良く、PNG は透明な画像やロゴを鮮明に保てます。
• 最適な結果を得るために、十分に高品質な画像を使用してください。
  
  • 全幅画像では、品質と読み込み時間のバランスを取るため、画像の幅は 600～1000px、高さは 2000px 未満にすることをおすすめします。全幅ではない画像は 600px 未満でも構いません。
• ウェブで表示されるすべての画像と同様に、ファイルサイズが大きいほど読み込み時間は遅くなります。
  • サイトの表示速度を低下させずに高品質に見せるために、サイド画像のファイル サイズは 50-100 KB、背景画像は 200 KB 未満を目安にしてください。
• すべてのサイト訪問者がフォームを利用できるように、画像に代替テキストを追加します。

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

フォームにサイド画像を追加する

サインアップフォームのコンテンツの左右どちらかに画像を追加するには：

1. [サインアップフォーム] タブに移動します。
2. フォームの横で、3 つのドット > [フォームを編集] をクリックします。
   

1. スタイルセクションで、サイド画像セクションに移動し、画像を追加する側（左または右）を選択します。
   

2. フォームのプレビューで、空の画像プレースホルダーをクリックします。
3. [画像ライブラリを参照]をクリックして、Klaviyo の画像ライブラリから画像を追加するか、画像をアップロードするか、URL から新しい画像をインポートします。
   

最良の結果を得るには、十分に高品質な画像を使用してください。ウェブで表示されるすべての画像と同様に、ファイルサイズが大きいほど読み込み時間は遅くなります。サイトの速度を低下させずに画像の高品質さを確保するため、サイド画像のファイルサイズは 50～100 KB を目安にしてください。

サイド画像の表示オプション

フォームスタイル

デフォルトでは、サイド画像付きフォームは幅 780px に設定され、サイド画像の幅は 中 に設定されています。幅セクションと 最小の高さセクションを使用して、フォームのサイズを調整できます。フォーム内でサイド画像が占めるスペースを増減したい場合は、サイド画像セクションでサイズ（例：小、中、大、カスタム）を調整します。

モバイルデバイスでは画面スペースが限られているため、モバイルでの体験を最適化する目的で、フォームのサイド画像はデフォルトで非表示になります。サイド画像をすべてのデバイスで表示したい場合は、プレビュー内の画像をクリックし、Show on までスクロールして All devices を選択します。

サイド画像のスタイル

Side Image 設定の Styles セクションを使用して、画像の表示方法を選択します。

• 代替テキスト
  ウェブサイトを訪れるすべての方がアクセスできるように、画像に代替テキストを追加してください。
• Image Position
  これにより、サイド画像エリア内で画像がどのように収まるかが決まります。次のオプションから選択します。
  • 収める
    画像全体がセクション内に表示され、切り抜かれません。画像が画像領域にぴったり収まらない場合、セクションの背景色が未表示の領域を埋めます。
  • カバー
    画像はサイド画像エリアを完全に埋めます。画像がスペースを埋めるようにするため、画像の一部が切り取られる場合があります。
  • カスタム
    画像の幅を任意に選択します。
• 横方向の配置 と 縦方向の配置
  これらを使用すると、画像が中央揃えか、画像領域の上部、下部、左、右のいずれかに配置されるかを選択できます。
• 背景色
  フォームで小さめの画像を使用する場合は、背景色を設定して、その背後にある空きスペースを埋めます。

その他のリソース