メールテンプレートエディター ガイド

このページで学べること

Klaviyo のドラッグ＆ドロップ メールテンプレートエディターについて、テンプレートスタイルの使用方法や各ブロックタイプの設定方法などを説明します。

This content requires Functional cookies to be enabled.

Update Cookie Settings

ブロックとレイアウトについて

Klaviyo のメールテンプレートエディターを開くと、サイドバーにブロックとセクションのオプションが表示されます。基本ブロック（メールをいちから作成するために使用する白紙のブロック）またはユニバーサルコンテンツ（他のテンプレートで作成し、後で再利用するために保存したコンテンツ）のどちらかを選択します。

[基本] セクションには、ブロックとレイアウトの両方のオプションがあります。ブロックは、テキスト、画像、ボタンなどのコンテンツを追加するのに使います。レイアウト（セクションや列）は、ブロックのグループ化と設定のために使います。

テンプレート上のブロックやセクションの上にカーソルを置くとアイコンが表示されます。このアイコンをクリックし、ブロックやセクションを複製、削除、または保存できます。

ブロックやセクションを動かすには、クリックしてドラッグしてください。

テンプレートスタイル

左側のサイドバーでスタイルを編集をクリックすると、テンプレート全体のスタイル設定オプションが開きます。

ここで、メールのデザインと操作感を設定できます。セットアップウィザードを利用した場合、このセクションには、貴社ブランドのスタイルがすでに表示されているでしょう。

テンプレートのスタイルセクションでは、以下の設定を編集できます。

• メール
  • テンプレートの背景
    
    テンプレートの背景色を選択できます
  • 背景画像
    
    オプションで背景画像を追加できます
  • コンテンツの背景
    
    メールコンテンツの背景色を設定できます（テンプレートの背景とは異なる色を設定でき、メールコンテンツの幅にのみ適用されます）
  • 幅
    
    メールコンテンツの横幅です（推奨：600px）
  • 角丸半径、マージン、パディング、枠線
    
    テンプレートに余白や枠線を追加できます
• テキストと見出し
  通常のテキストと4つの見出しスタイルを設定し、任意のテキストブロックのドロップダウンメニューからテキストスタイルを選択して適用できます
• フォント
  
  テキストスタイルのフォント、フォント間隔、サイズ、太さ、色を選択できます
• 文字間隔
  
  水平方向の各文字の間隔です
• 行間
  
  テキストの行と行の間の縦方向の間隔です
• テキストの配置
  
  左寄せ、中央寄せ、または右寄せを選択できます
• モバイル
  
  モバイル最適化を有効にするか（推奨）、デスクトップとモバイルの両方で同じスタイルとコンテンツを表示するかを選択できます
• その他
  • 通貨
    
    アカウントの設定と異なる場合、テンプレートのデフォルト通貨を選択できます

テンプレートスタイルは各ブロックやセクションのスタイルにどう影響するか

テンプレートのスタイル設定は、各ブロックやセクションの設定が適用される前に、まずテンプレートに適用されます。ブロックまたはセクションのスタイルがテンプレートスタイルと対立する場合、ブロックおよびセクションのスタイルが適用されます。例えば、スタイルを編集パネルでコンテンツの背景色を設定した後で、ブロック固有の背景色を設定した場合、そのブロックの領域にはブロックの背景色が使用されます。

セクションとセクションスタイル

テンプレートエディター内のすべてのコンテンツはセクション単位で整理されます。新しいテンプレートを作成すると、デフォルトで1つ以上のセクションが含まれ、必要に応じてセクションを追加または削除できます。

セクションの設定を開くには、そのセクションのコンテンツの右または左のエリアをクリックします。ブロックをクリックすると、ブロック自体の設定が開きます。そのブロックを含むセクションが開くわけではない点にご注意ください。

各セクションには［スタイル］タブと［表示］タブがあります。[スタイル] タブでは、セクションに背景画像やパディングなどのスタイルを追加できます。セクションの表示オプションでは、そのセクションを表示するデバイスタイプと受信者を選択できます。

セクションについて詳細はこちら。

セクションスタイルの設定は、テンプレートスタイルの適用後、かつブロック固有のスタイルが適用される前のタイミングでテンプレートに反映されます。テンプレートスタイルとセクションスタイルが対立する場合は、セクションスタイルが適用されます。ブロックの設定がセクションスタイルと対立する場合は、ブロックのスタイルが適用されます。

ブロックとブロックスタイル

セクション内にブロックを追加して、メールにコンテンツを入力します。ほとんどのコンテンツブロックには、ブロックの外観を設定できるスタイルタブと、ブロックを表示する相手と表示先のデバイスタイプを選択できる表示タブがあります。使用できる具体的なスタイル設定はブロックの種類によって異なりますが、表示オプションは全ブロック共通です。

スタイルセクションに色のオプションがある場合、色の選択ツールが含まれており、以下の方法で色を選択できます。

• グラデーションフィールドを使用してシェードと色相を選択
• 16 進コードまたは RGB コードをコピーして貼り付け
• 最近使用した色、またはこのテンプレートにすでに存在する色から選択
• ブラウザがスポイトツールに対応している場合は、それを使用してメールキャンバス内の任意の場所から色を選択します。

表示オプションの詳細、およびブロックの種類とその使い方についてはリンク先の記事をご覧ください。

テキスト

メールにテキストを追加するには、テキストブロックを使用してください。テキストスタイル（[標準] または [見出し 1]～[見出し 4]）を選択してメインテンプレートのスタイル設定を適用するか、テキストエディターの設定によってテキストコンテンツをカスタマイズします。

Klaviyo のメールエディターは UTF-8 エンコーディング標準を使用しており、ラテン文字、絵文字、2 バイト文字などに対応しています。 

テキストブロックに動的コンテンツを追加して、受信者ごとにメッセージをパーソナライズすることも可能です。メッセージのパーソナライゼーションについて詳細はリンク先をご覧ください。

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

テキストブロックのスタイルタブを開き、ブロックまたはテキストコンテンツ領域の背景色を選択して、パディングを追加します。

画像

画像ブロックを使用して、メールに画像を挿入します。以下のソースから画像を追加できます。

• 画像ライブラリ
  
  画像ライブラリを検索して、過去にアップロードした画像を追加できます
• 画像のアップロード
  デバイスからJPEG、PNG、またはGIFをアップロードできます。また、アニメーションではないWebP画像をアップロードし、プロンプトが表示されたらPNGに変換することもできます。
• URLからインポート
  画像のURLを使用して画像をインポートできます。
• 動的画像
  
  動的画像の変数を使用して、各受信者にカスタム画像を表示できます（例：受信者のイベントデータ内またはプロファイルプロパティとして保存されている画像 URL を参照する）

画像を選択したら、alt テキスト（画像の説明）、画像をクリック可能にするためのリンクアドレス、画像の幅、配置などの、画像の設定を調整します。

分割

分岐ブロックを使用すると、任意の幅の2列でコンテンツを表示できます。分岐ブロックの左右それぞれに画像またはテキストコンテンツを追加します。デフォルトでは、分岐ブロックは50/50の分岐を使用します。この比率を調整するには、スタイルタブに移動してください。または、[列レイアウト]を使用してコンテンツを2列以上に分割することもできます。

ボタン

ボタンブロックは、通常のテキストリンクよりも目立つ大きなリンクを作成し、目立つデザインで重要な行動喚起（CTA）を行うのに最適です。CTA に使用されることから、各メールでの使用は数個にとどめることを推奨します。

少なくとも、テキストとリンクアドレスフィールドは入力してください。[テキスト] は受信者のボタンに表示される内容で、[URL] は訪問者がボタンをクリックしたときに移動する場所です。色、角丸半径、パディングのオプションを使用して、ボタンの外観、形状、サイズを調整できます。また、ブロックのフォントやその他のスタイルも調整可能です。

ヘッダー / リンクバー

ヘッダー/リンクバーブロックを使用すると、サイト上の別コンテンツにリダイレクトするロゴやナビゲーションリンクを追加できます。

ヘッダーバーのブロックをドラッグすると、ヘッダー / リンクバーのレイアウトがオプションとして表示されます。各デバイスのサイズに合わせて、デスクトップとモバイルで異なるレイアウトを選択できます。

必要なリンクをリンクバーに追加します。各リンクごとにデバイス表示設定を指定できます。モバイルではデバイスのサイズが小さいため、重要なリンクのみを表示することをお勧めします。

リンクとロゴを追加したら、以下のスタイルオプションを使用して最終調整を行います。ブロックのフォント、色、余白を変更できます。すべての調整を終えたら、デスクトップとモバイル両方のプレビューで最終的な仕上がりを確認してください。

ドロップシャドウ

ドロップシャドウを使うと、メッセージに深みを加えたり、特定の領域を強調したりできます。影の色のオプションにはライト、ミディアム、ダークがあり、ブロックの背景色とパディングを設定できます。

仕切り線

他のコンテンツブロックの間にシンプルな線を追加します。実線、破線、点線のいずれかを選択します。色、サイズ、パディングは自由にカスタマイズできます。以前は「水平ルール」と呼ばれていました。

ソーシャルリンク

ソーシャルリンク ブロックを使用すると、Instagram、Pinterest、Facebook、X（Twitter）などのソーシャルアイコンを簡単に追加できます。Klaviyo は、さまざまなサイトに対応した標準のフルカラーアイコンのほか、シンプルな黒、白、グレーのオプションを提供しています。

カスタマイズしたソーシャルアイコンを使用したい場合は、カスタムオプションを使用して、独自の画像ファイルをアップロードしてください。その場合、96px の正方形の画像を使用することをお勧めします。Klaviyo のソーシャルアイコンとカスタム画像との間で余白と配置を維持するには、画像ファイル内で縦方向と横方向の配置をいずれも中央寄せにした、幅 50px のアイコンを使用してください。

また、サイドバー内でアイコンラベルをドラッグし、アイコンの順序を変更できます。[スペーサーの追加] ボタンを使用すると、各アイコン間のスペースをより細かく指定できます。

スペーサー

スペーサーブロックは、縦方向に並べたブロックの間にカスタマイズ可能なスペースを追加します。横に並んだブロック（列内など）の間のスペースをカスタマイズするには、左右のパディングを使用してください。

商品

商品ブロックを使用して、ストアのカタログからおすすめの商品を追加できます。商品ブロックは、[動的] と [静的] の 2 つのオプションから選べます。

動的フィードは自動的に更新され、商品フィードを介して設定されます。商品フィードの設定について詳しくは、商品フィードとおすすめ機能の使用方法をご覧ください。

静的な商品ブロックは、テンプレートエディターで手動で選択したカタログ商品のみを表示します。自動更新されたり、個々の受信者向けにターゲティングされたりすることはありません。

どちらのオプションでも、フィードまたは商品のいずれかを選択した後でブロックのデザインをカスタマイズできます。商品ブロックには、画像のみを表示することも、各商品の名前と価格を記載することもできます。商品ブロックの [スタイル] タブにあるすべてのオプションをスクロールして、ブロックをお好みに合わせてカスタマイズしてください。

クーポン

メールにクーポンコードを表示するには、クーポンブロックを使用してください：

1. キャンバスにクーポンブロックをドラッグしてください。
2. アカウントにまだクーポンがない場合は、ブロックの設定でクーポンを作成をクリックして作成し、その後エディタでこのブロックに戻ってください。
3. 最近使用したクーポンを選択するか、View allをクリックしてクーポンリストを検索またはフィルタリングし、目的のクーポンでSelectをクリックしてください。

このブロックには、選択したクーポンで各受信者に割り当てられたコードが表示されます。受信者にまだコードが割り当てられていない場合は、Klaviyoがメッセージ送信の一環としてコードを割り当てます。この動作は、テンプレートタグを使用してクーポンを挿入する場合と同じですが、この方法では、スタイルのカスタマイズが可能です。

ヘッダーテキストを追加してクーポン情報を提供したり、テキストスタイル、背景色、枠線など、ブロックのデザインを好みに合わせて変えられます。

テーブル

テーブルブロックは、メールテンプレート内の画像やテキストを構造化するのに役立ちます。必要に応じて列または行を追加してください。列の間隔は自動的に設定されます。または、スタイルタブの列セクションで各列の幅を設定できます。

テーブルブロックを最初にテンプレートにドラッグすると、2つの列を持つ行が1つ作成されます。[スタイル]タブで行や列を追加してから、[コンテンツ]タブに戻ってテーブルのコンテンツを設定します。

特定のセルの内容を開くには、[セルセレクター] を使用してください。[セルコンテンツ] で [テキスト] コンテンツか [画像] コンテンツを選択し、コンテンツを追加します。テキストと画像のコンテンツタイプを切り替えると、そのセルに以前含まれていたコンテンツが失われる可能性があることに注意してください。変更を元に戻すには [元に戻す] ボタンをクリックしてください。

テーブルの色、フォント、枠線、レイアウトを編集するには、スタイルタブを開きます。

テーブルブロックは、受信者のカート内にある商品リストの詳細といった、動的コンテンツを表示するためにも使用されます。動的テーブルブロックについて詳しくはこちら。

HTML

HTML ブロックを使用すると、テンプレートにカスタムコードを追加できます。カスタムコーディングされた要素、カウントダウンタイマーなどのサードパーティ機能、またはカスタム CSS を追加する場合は、このブロックタイプを使用してください。メール内のカスタムコードに関して問題がある場合は、テンプレート内のカスタムコードのトラブルシューティングをご覧ください。

レビュー引用

Klaviyoレビューを使用している場合は、レビューの引用ブロックを使用して、メールに顧客レビューを紹介してください。

レビュー引用ブロックでは、メッセージ内に掲載するレビューを選択できます。レビューを選択できない場合は、以下の原因が考えられます。

• フィルターによって、必要なレビューが除外されています。レビューピッカーは5つ星レビューが選択された状態で始まります。評価とその他のフィルターを調整して、選択範囲を広げてください。
• お使いのアカウントに、十分な数の質の高いレビューがまだない。この場合、後日、選択可能なレビューがあるか再度ご確認ください。
• レビューがまだ処理されていない。新しいレビューの掲載を希望する場合は、数時間ほどしてからもう一度お試しください。
• お使いのアカウントのレビューが検証されていない。レビューを検証済みとするには、そのレビューが Klaviyo のレビュー依頼フローのパーソナライズされたリンク経由で提供されたものであるか、他のプラットフォームからアップロードされたレビューの CSV 内で検証済みとマークされている必要があります。サイトに直接投稿されたレビューを含め、未検証のレビューはレビュー引用ブロックで使用できません。

列

メールテンプレートに列を追加するには、分岐ブロックまたは列レイアウトを使用します。分岐ブロックでは、テキストまたは画像コンテンツを2列に配置し、各列の幅を正確に調整できます。

列のレイアウトでは、それぞれの列に任意のタイプのコンテンツを追加できますが、列の幅は事前に設定された少数のオプションに限定されます。ただし、列レイアウトでは1～4列を使用できます。

列のレイアウトを使ってテンプレートに列を追加したら、それぞれの列にコンテンツブロックをドロップして追加します。1列につきコンテンツブロックは1つだけという制限はありません。必要な数のコンテンツブロックを追加して、上から重ねて配置できます。

動画

動画ブロックは、メール内にリンク付きのサムネイルを表示します。受信者がサムネイルをクリックすると、リンク先の動画ページが開きます。

動画ブロックを追加するには、動画のURLをブロックの設定に貼り付けてください。Klaviyoは、対応しているYouTube、Vimeo、TikTokのURLに対してサムネイルを取得します。

サムネイルが表示されない場合、または動画が別の場所でホストされている場合は、サムネイル画像を選択またはアップロードしてください。再生ボタンのオーバーレイを追加するには、ブロックの設定で再生ボタンを表示をオンにしてください。

メール内で動画が直接再生されない理由

主要なメールクライアント（Gmail など）のほとんどは、動画などの埋め込みコンテンツをセキュリティ上の脅威とみなしています。こうしたメールクライアントは、この埋め込みコードを完全に削除してしまうことが多く、受信者がメールを開いたときにコンテンツが表示されません。

埋め込み動画は主要なメールクライアント全体で確実にレンダリングされないため、Klaviyoでは動画の直接埋め込みをサポートしていません。

ユニバーサルコンテンツ

星アイコンをクリックすると、テンプレート内のブロックまたはセクションを保存し、他のテンプレートでも使用できるようになります。ブロックまたはセクションを保存すると、メールテンプレート ブロックの [ユニバーサル] タブに表示されます。ユニバーサルのブロックまたはセクションを編集する場合、保存済みコンテンツのすべてのインスタンスに編集内容を適用することも可能です。すべてのインスタンスにわたる編集が完了したら、変更を公開をクリックし、影響を受けるメッセージを確認してから、公開を確定してください。

保存したユニバーサルコンテンツの使用について詳しくはリンク先をご参照ください。

元に戻すとやり直し

テンプレートの編集中に間違えた場合は、[元に戻す] ボタンを使用してください。また、[やり直し] ボタンをクリックすると、変更をやり直すこともできます。テンプレートは編集中に自動保存され、テンプレートを編集している間は、元に戻す/やり直しボタンによって変更内容が記録されます。ただし、過去の変更内容は編集を行っている間に限って保存されます。テンプレートの編集を終了した後に、同じテンプレートに戻ってきた場合、元に戻すボタンは新たに変更を加えるまで無効になります。

メールのプレビュー

メールのレイアウトとパーソナライズされたコンテンツを確認するには、プレビューをクリックしてください。再利用可能なテンプレートを作成している場合は、メールの送信方法に基づいてプレビューデータを選択してください。以下の表を使用して、適切なデータを選択してください。

プレビューデータを選択したら、デスクトップとモバイルのレイアウトを確認してください。受信トレイでメールを確認するには、プレビューサイドバーにテスト受信者のメールアドレスを入力し、テスト送信をクリックしてください。テストメールを開いて、レイアウトとリンクを確認してください。

その他のリソース