学習内容
Klaviyo のドラッグ＆ドロップ メールテンプレートエディターについて、テンプレートスタイルの使用方法や各ブロックタイプの設定方法などを説明します。
ブロックとレイアウトについて
Klaviyo のメールテンプレートエディターを開くと、サイドバーにブロックとセクションのオプションが表示されます。基本ブロック（メールをいちから作成するために使用する白紙のブロック）とユニバーサルコンテンツ（他のテンプレートで作成し、後で再利用するために保存したコンテンツ）のどちらかを選択します。
[基本] セクションでは、ブロックとレイアウトの両方のオプションがあります。ブロックは、テキスト、画像、ボタンなどのコンテンツを追加するのに使います。レイアウト（セクションや列）は、ブロックのグループ化と設定のために使います。
テンプレート上のブロックやセクションの上にカーソルを置くとアイコンが表示されます。このアイコンをクリックし、ブロックやセクションを複製、削除、または保存できます。
ブロックやセクションを移動するには、クリックしてドラッグしてください。
テンプレートスタイル
メインの [スタイル] タブには、テンプレート全体に適用されるスタイル設定オプションがあります。テンプレートのメインのスタイル設定にアクセスするには、作業中のブロックまたはセクションのサイドパネル上部で「戻る」をクリックしてメインのパネルに移動し、[スタイル] をクリックします。
ここで、メールのデザインと操作感を設定できます。セットアップウィザードを利用した場合、このセクションには、貴社ブランドのスタイルがすでに表示されているでしょう。
新しいテンプレートに適用するブランドのスタイルを調整するには、アカウントのメインナビゲーションから、[コンテンツ] > [メディア & ブランド] > [ブランド] に移動してください。
テンプレートのスタイルセクションでは、以下の設定を編集できます。
-
メール
-
テンプレートの背景
テンプレートの背景色を選択します -
背景画像
オプションで背景画像を追加できます -
コンテンツの背景
メールコンテンツの背景色を設定できます（テンプレートの背景とは異なる色を設定でき、メールコンテンツの幅にのみ適用されます） -
幅
メールコンテンツの横幅です（600px を推奨） -
角丸半径、マージン、パディング、枠線
テンプレートに余白や枠線を追加できます
-
テンプレートの背景
-
テキストと見出し
通常のテキストと 4 つの見出しスタイルを設定し、任意のテキストブロックのドロップダウンメニューからテキストスタイルを選択して適用できます -
フォント
テキストスタイルのフォント、フォント間隔、サイズ、太さ、色を選択できます -
文字間隔
水平方向の各文字の間隔です -
行間
テキスト行同士の間の縦方向の間隔です -
テキストの配置
左寄せ、中央寄せ、または右寄せを選択できます -
モバイル
モバイル最適化を有効にするか（推奨）、デスクトップとモバイルの両方で同じスタイルとコンテンツを表示するかを選択できます -
その他
-
通貨
アカウントの設定と異なる場合、テンプレートのデフォルト通貨を選択できます
-
通貨
テンプレートスタイルは各ブロックやセクションのスタイルにどう影響するか
テンプレートスタイルの設定は、各ブロックやセクションの設定が適用される前に、まずテンプレートに適用されます。ブロックまたはセクションのスタイルがテンプレートスタイルと対立する場合、ブロックおよびセクションのスタイルが使用されます。例えば、メインの [スタイル] セクションでコンテンツの背景色を設定した後で、ブロックの背景色を設定した場合、そのブロックの領域にはブロックの背景色が使用されます。
セクションとセクションスタイル
テンプレートエディター内のすべてのコンテンツはセクション単位で整理されます。新しいテンプレートを作成すると、デフォルトで 1 つ以上のセクションが含まれ、必要に応じてセクションを追加または削除できます。
セクションの設定を開くには、そのセクションのコンテンツの右または左の領域をクリックします。ブロックをクリックすると、ブロック自体の設定が開きます。そのブロックを含むセクションが開くわけではありません。
各セクションには [スタイル] タブと [表示オプション] タブがあります。セクションのスタイルでは、そのセクションに背景画像やパディングなどのスタイルを追加できます。セクションの表示オプションでは、そのセクションを表示するデバイスタイプと受信者を選択できます。
セクションスタイルの設定は、テンプレートスタイルの適用後、しかしブロックスタイルより前にテンプレートに適用されます。テンプレートスタイルとセクションスタイルが対立する場合は、セクションスタイルが使用されます。ブロックの設定がセクションスタイルと対立する場合は、ブロックのスタイルが使用されます。
ブロックとブロックスタイル
セクション内にブロックを追加して、メールにコンテンツを入力します。ほとんどのコンテンツブロックには、ブロックのデザインを設定できる [スタイル] タブと、ブロックを表示する相手やデバイスタイプを選択できる [表示オプション] タブがあります。使用できる具体的なスタイル設定はブロックの種類によって異なりますが、表示オプションは全ブロック共通です。
スタイルセクションに色のオプションがある場合、色の選択ツールが含まれており、以下の方法で色を選択できます。
- グラデーションフィールドを使用してシェードと色相を選択
- 16 進コードまたは RGB コードをコピーして貼り付け
- 最近使用した色、またはこのテンプレートにすでに存在する色から選択
- スポイトツールを使用して、メールキャンバス内の任意の場所から色を選択（現時点では、テキスト、分割、テーブルブロックでは使用できません）
表示オプションの詳細、およびブロックの種類とその使い方についてはリンク先の記事をご覧ください。
テキスト
テキストブロックを使用して、メールにテキストを追加します。テキストスタイル（[標準] または [見出し 1]～[見出し 4]）を選択してメインテンプレートのスタイル設定を適用するか、テキストエディターの設定でテキストコンテンツをカスタマイズします。
Klaviyo のメールエディターは UTF-8 エンコーディング標準を使用しており、ラテン文字、絵文字、2 バイト文字などに対応しています。
テキストブロックに動的コンテンツを追加して、受信者ごとにメッセージをパーソナライズできます。メッセージのパーソナライズについて詳細はこちら。
右から左へ記述する（RTL）スクリプトを使用する言語（ヘブライ語など）のコピーを追加するには、テンプレート上部にあるテキストブロックのソースコードに以下のコードスニペットを追加してください。
<style type="text/css">
p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style>
[コンテンツ] セクションを折りたたむか、スクロールしてブロックのスタイルを調整します。ブロックまたはテキストコンテンツ領域の背景色を選択し、パディングを追加します。
Klaviyo エディター以外（Google ドキュメントや Microsoft Word など）でコピーを作成した場合は、エディターにテキストを貼り付ける際に必ずプレーンテキストで貼り付けてください。Command + Shift + V または Ctrl + Shift + V を使用してプレーンテキストとして貼り付けます。それ以外の方法では、特定のスタイルタグがテキストと一緒に貼り付けられ、デザイン上の問題が発生する可能性があります。
画像
画像ブロックを使用して、メールに画像を挿入します。以下のソースから画像を追加できます。
-
画像ライブラリ
画像ライブラリを検索して、過去にアップロードした画像を追加 -
画像のアップロード
デバイスから JPEG、PNG、または GIF をアップロード -
画像のインポート
画像の URL を使用して画像をインポート -
動的画像
動的画像の変数を使用して、各受信者にカスタム画像を表示（受信者のイベントデータ内またはプロファイルプロパティとして保存されている画像 URL を参照する、など）
画像を選択したら、alt テキスト（画像の説明）、画像をクリック可能にするためのリンクアドレス、画像の幅、配置、その他のスタイルなど、画像の設定を調整します。
テンプレートへの画像の挿入について詳しくはリンク先をご覧ください。
分割
分割ブロックを使用すると、任意の幅の 2 つの列にコンテンツを表示できます。分割ブロックのコンテンツは、どちら側も画像またはテキストコンテンツのいずれかでなければなりません。デフォルトでは、分割ブロックは 50/50 の分割を使用します。この割合は、[分割設定] タブで調整できます。または、[列のレイアウト] を使用してコンテンツを 2 つ以上の列に分割することもできます。
ボタン
ボタンブロックは、通常のテキストリンクよりも目立つ大きなリンクを作成し、目立つデザインで重要な行動喚起（CTA）を行うのに最適です。CTA に使用されることから、各メールでの使用は数個にとどめることを推奨します。
少なくとも、[テキスト] と [URL] フィールドは入力してください。[テキスト] は受信者のボタンに表示される内容で、[URL] は訪問者がボタンをクリックしたときに移動する場所です。色、角丸半径、パディングのオプションを使用して、ボタンの外観、形状、サイズを調整できます。また、ブロックのフォントやその他のスタイルを調整することもできます。
ヘッダー/リンクバー
ヘッダー/リンクバーブロックを使用すると、サイト上の別コンテンツにリダイレクトするロゴやナビゲーションリンクを追加できます。
ヘッダーバーのブロックをドラッグすると、ヘッダー/リンクバーのレイアウトがオプションとして表示されます。各デバイスのサイズに合わせて、デスクトップとモバイルで異なるレイアウトを選択できます。
Outlook は独自の HTML レンダリングエンジンを使用しているため、Outlook を受信トレイとして使用している受信者のヘッダー/リンクバー要素に枠線が追加される場合があります。これを回避するには、ロゴ用に画像ブロックを、リンク用にテーブルをそれぞれ使用してヘッダーを作成してください。
必要なリンクをリンクバーに追加します。各リンクごとにデバイス表示設定を指定できます。モバイルではデバイスのサイズが小さいため、重要なリンクのみを表示することをお勧めします。
リンクとロゴを追加したら、以下のスタイルオプションを使用して最終調整を行います。ブロックのフォント、色、余白を変更できます。すべての調整を終えたら、デスクトップとモバイル両方のプレビューで最終的な仕上がりを確認してください。
ドロップシャドウ
ドロップシャドウを使うと、メッセージに深みを加えたり、特定の領域を強調したりできます。影の色のオプションにはライト、ダーク、暗めがあり、ブロックの背景色とパディングを設定できます。
仕切り線
他のコンテンツブロックの間にシンプルな線を追加します。実線、破線、点線のいずれかを選択します。色、サイズ、パディングは自由にカスタマイズできます。以前は「水平ルール」と呼ばれていました。
ソーシャルリンク
ソーシャルリンク ブロックを使用すると、Instagram、Pinterest、Facebook、X（Twitter）などのソーシャルアイコンを簡単に追加できます。Klaviyo は、さまざまなサイトに対応した標準のフルカラーアイコンのほか、シンプルな黒、白、グレーのオプションを提供しています。
カスタマイズしたソーシャルアイコンを使用したい場合は、カスタムオプションを使用して、独自の画像ファイルをアップロードしてください。その場合、96px の正方形の画像を使用することをお勧めします。Klaviyo のソーシャルアイコンとカスタム画像との間で余白と配置を維持するには、画像ファイル内で縦方向と横方向の配置をいずれも中央寄せにした、幅 50px のアイコンを使用してください。
また、サイドバー内でアイコンラベルをドラッグし、アイコンの順序を変更できます。[スペーサーの追加] ボタンを使用すると、各アイコン間のスペースをより細かく制御できます。
スペーサー
スペーサーブロックは、縦方向に積み重ねられたブロックの間にカスタマイズ可能なスペースを追加します。横に並んだブロック（列内など）の間のスペースをカスタマイズするには、左右のパディングを使用してください。
商品
商品ブロックを使用して、ストアのカタログからおすすめの商品を追加できます。商品ブロックは、[動的] と [静的] の 2 つのオプションから選べます。
動的フィードは自動的に更新され、商品フィードを介して設定されます。商品フィードの設定について詳しくは、商品フィードとおすすめ機能の使用方法の記事をご覧ください。
静的な商品ブロックは、テンプレートエディターで手動で選択したカタログ商品のみを表示します。自動更新されたり、個々の受信者向けにターゲティングされたりすることはありません。
どちらのオプションでも、フィードまたは商品のいずれかを選択した後でブロックのデザインをカスタマイズできます。商品ブロックには、画像のみを表示することも、各商品の名前と価格を記載することもできます。商品ブロックの [スタイル] タブにあるすべてのオプションをスクロールして、ブロックをお好みに合わせてカスタマイズしてください。
テーブル
テーブルブロックは、メールテンプレート内の画像やテキストを構造化するのに役立ちます。テーブルブロックを使用すると、列または行を必要な数だけ追加できます（列または行は自動的に間隔が調整されます。または、 [列] タブの [幅] 設定で幅を設定することもできます）。
テーブルブロックを最初にテンプレートにドラッグすると、2 つの列を持つ行が 1 つ作成されます。[テーブルの設定] タブで行や列を追加してから、[コンテンツ] タブに戻ってテーブルのコンテンツを設定します。
特定のセルの内容を開くには、[セルセレクター] を使用します。[セルコンテンツ] で [テキスト] コンテンツか [画像] コンテンツを選択し、コンテンツを追加します。テキストと画像のコンテンツタイプを切り替えると、そのセルに以前含まれていたコンテンツが失われる可能性があることに注意してください。変更を元に戻すには [元に戻す] ボタンをクリックしてください。
テーブルの色、フォント、枠線、レイアウトの編集は、[テーブルの設定] タブから行ってください。
テーブルブロックは、受信者のカート内にある商品リストの詳細といった、動的コンテンツを表示するためにも使用されます。動的テーブルブロックについて詳しくはこちら。
HTML
HTML ブロックを使用すると、テンプレートにカスタムコードを追加できます。カスタムコーディングされた要素、カウントダウンタイマーなどのサードパーティ機能、またはカスタム CSS を追加する場合は、このブロックタイプを使用してください。メール内のカスタムコードに関して問題がある場合は、テンプレート内のカスタムコードのトラブルシューティングをご覧ください。
レビュー引用
Klaviyo Reviews を使用すると、実際の顧客レビューを掲載し、ブランドのソーシャルプルーフ（世間一般における信用）を確立し、コンバージョンを促進できます。
レビュー引用ブロックでは、メッセージ内に掲載するレビューを選択できます。レビューを選択できない場合は、以下の原因が考えられます。
- お使いのアカウントに、十分な数の質の高いレビューがまだない。この場合、後日、選択できるレビューが揃ったか再度確認してください。
- レビューがまだ処理されていない。新しいレビューの掲載を希望する場合は、数時間ほどしてからもう一度お試しください。
- お使いのアカウントのレビューが検証されていない。レビューを検証済みにするには、そのレビューが Klaviyo Reviews リクエストフローのパーソナライズされたリンク経由で提供されたものであるか、他のプラットフォームからアップロードされたレビューの CSV 内で検証済みとマークされている必要があります。サイトに直接投稿されたレビューを含め、未検証のレビューはレビュー引用ブロックで使用できません。
列
メールテンプレートに列をドラッグする方法は、分割ブロックと列のレイアウトの 2 つがあります。分割ブロックでは、2 列のテキストおよび画像コンテンツの追加に制限されますが、それぞれの列の幅を細かく調整できます。
列のレイアウトでは、それぞれの列に任意のタイプのコンテンツを追加できますが、列の幅は事前に設定された少数のオプションに限定されます。ただし、列のレイアウトでは列を 1～4 列まで使用可能です。
列のレイアウトを使ってテンプレートに列を追加したら、それぞれの列にコンテンツブロックをドロップして追加します。1 列につき 1 つのコンテンツブロックという制限はありません。必要な数のコンテンツブロックを追加して、縦並び表示にできます。
動画
動画ブロックは、メールに動画を埋め込んだようなデザインを実現できます。受信者が再生ボタンをクリックすると、新しいタブが開いて動画が再生されます。
動画ブロックを追加するには、YouTube、Vimeo、TikTok、またはお使いの動画ホスティングプラットフォームから動画の URL をコピーします。YouTube 動画の場合、Klaviyo は自動的にサムネイル画像を選択します。
他のソースからの動画を使用する場合は、動画のサムネイル画像のアップロードも必要になります。動画のサムネイル上に再生ボタンが重ねて表示されますが、ブロックの設定でオフに切り替えることができます。
メール内で動画が直接再生されない理由
主要なメールクライアント（Gmail など）のほとんどは、動画などの埋め込みコンテンツをセキュリティ上の脅威とみなしています。こうしたメールクライアントは、この埋め込みコードを完全に削除してしまうことが多く、受信者がメールを開いたときにコンテンツが表示されません。
Klaviyo はお客様の事業の成功を第一に取り組んでいます。弊社のテストにより、すべての主要なメールクライアントにおいて、動画が確実にレンダリングされる訳ではないことが判明しているため、Klaviyo では動画の直接埋め込みをサポートしていません。
ユニバーサルコンテンツ
星アイコンをクリックすると、テンプレート内のブロックまたはセクションを保存し、他のテンプレートでも使用できるようになります。ブロックまたはセクションを保存すると、メールテンプレート ブロックの [ユニバーサル] タブに表示されます。ユニバーサルのブロックまたはセクションを編集する場合、保存済みコンテンツのすべてのインスタンスに編集内容を適用することも可能です。
保存したユニバーサルコンテンツの使用について詳しくはリンク先を参照。
元に戻すとやり直し
テンプレートの編集中に間違えた場合は、元に戻すボタンを使用して元に戻せます。また、やり直しボタンをクリックすると、変更をやり直すこともできます。テンプレートは編集中に自動保存され、テンプレートを編集している間は、元に戻す/やり直しボタンによって変更内容が記録されます。ただし、過去の変更内容は編集を行っている間に限って保存されます。テンプレートをの編集を終了した後に、同じテンプレートに戻ってきた場合、元に戻すボタンは新たに変更を加えるまで無効になります。
メールのプレビュー
[プレビューとテスト] ボタンを使用して、受信者の受信トレイでメールがどのように表示されるかを確認できます。[メールテンプレート] タブでメールを作成する場合は、必ず、メールの送信方法に基づいてメールをプレビューしてください。以下の表を使用して、最適なプレビュー方法を確認してください。
|
メッセージタイプ |
プレビューのベストプラクティス |
|
キャンペーン リストトリガーフロー セグメントトリガーフロー 値下げフロー 日付トリガーフロー |
[プロファイルを検索] フィールドを使用して、送信予定のリスト/セグメントに含まれているプロファイル、またはメールの受信条件を満たしている可能性があるプロファイル（フローの場合）を検索します。プロファイルを選択します。 |
|
メトリックがトリガーとなるフロー |
テンプレートの [プレビューとテスト]を開き、[データソースのプレビュー] で [イベント] に切り替えてから、フローのトリガーとなるイベントを選択します。別のイベントを選択したり、プロファイルでプレビューしたりすると、動的データが正しく表示されない場合があります。 |