メールでヘッダー バー ブロックを使用する方法
このページで学べること
メールの上部にロゴ、重要なリンク、その他の情報を追加するために使用するヘッダー バー ブロックについて説明します。
ヘッダーバー ブロックについて
ヘッダー バー ブロックには、ロゴと、強調表示したい任意のリンクを含めることができます。ヘッダー バーに、次のリンクの一部を含めることを検討してください：
- ホーム
- 当社について
- 今すぐ購入
- 新規
- ベストセラー
- セール
- FAQ
- 返品・交換（注文後のフォローアップ メール内）
リンクを追加する際は慎重に行ってください。多すぎると、メールが混み合って見え、移動しにくくなる場合があります。
ヘッダーバー ブロックの形式オプション
デスクトップとモバイルでボタンとロゴの配置をそれぞれ選択できます：
- デスクトップレイアウトオプション
- ロゴを縦並び表示
- ロゴをインライン表示
- ロゴを中央に表示
- リンクとボタンのみ
- モバイル レイアウトオプション
- すべて縦並び表示
- ロゴを縦並び表示
- ロゴをインライン表示
- リンクとボタンのみ
- 縦並び表示されたリンクとボタンのみ
モバイルでは画面が非常に小さいため、積み重ね形式を使用すると、ボタンが読みやすくなり、クリックもしやすくなります。
メールにヘッダー バー ブロックを追加する
- メールテンプレート内で、キャンバスに ヘッダー バー ブロックをドラッグします。
- Content > Images & brand > Brand で Klaviyo アカウントにロゴをすでに追加している場合、ロゴは事前入力されています。それ以外の場合は、ロゴを追加します。
- ドロップダウン矢印 アイコンを使用して各リンクの詳細を確認し、リンクテキストと URL を編集します。
- モバイルでスペースを節約するために、必須ではないリンクには Desktop only を選択することを検討してください。
- [リンクを追加] または [画像を追加] ボタンを使用して、追加のリンクやコンテンツを追加します。
- Contentセクションの下にある設定を使用して、フォント、色、パディングなどのリンクテキストのスタイルを設定します。
今後のメールで使用できるようにヘッダーバーを保存する
送信するメールのほとんどには、ヘッダーバーを含める必要があります。ヘッダーバー ブロックを保存してユニバーサルコンテンツとして今後のメールで再利用するには、ブロックの横にある星アイコンをクリックし、表示される案内に従ってください。
ユニバーサルコンテンツと保存済みコンテンツについて詳しくはリンク先をご参照ください。
ヘッダー バー ブロックの受信トレイに関する考慮事項
受信者の受信箱によっては、ヘッダー バー（またはメール全体）が多少異なって表示される場合があります。異なる受信箱でメールがどのように表示されるかを確認するには、Email on Acid のようなツールの使用を検討してください。
ヘッダーバー ブロックと Gmail のクリッピング
ヘッダー バー ブロックはコード量が多いため、メール全体のコード量が増加します。他のコンテンツが多く含まれるメッセージでは、これが原因で Gmail のクリッピングが発生する可能性があります。
メッセージがクリップされるリスクがある場合は、ロゴ用に画像ブロックを使用し、その後にリンク用のテーブルブロックを続けることを検討してください。
ヘッダーバー ブロックと Microsoft Outlook
Outlook は独自の HTML レンダリングエンジンを使用しているため、Outlook を使用している受信者ではヘッダーバー要素に枠線が追加される場合があります。
これを回避するには、ロゴ用に画像ブロックを、リンク用にテーブルをそれぞれ使用してヘッダーを作成してください。
その他のリソース
- メールでテキストブロックを使用する方法
Klaviyo のメールテンプレートエディターでテキストブロックを使用する方法（スタイル設定、パーソナライゼーションタグの追加、AI を使ったコピーの下書きと修正を含む）をご確認ください。
- Klaviyo でブランドスタイルを更新する方法
リブランドまたはブランドデザインの刷新を行う際に、Klaviyo で更新すべき内容をご確認ください。