キャンペーンのフォント、色、パディング、その他のスタイル設定を編集して、サイトやブランドの個性を表現しましょう。

メール キャンペーンは、複数のセクションで構成されます。ほとんどのセクションは個別にスタイル設定できますが、キャンペーン全体に影響する「グローバル」なスタイル設定もあります。これは、見た目に一貫性を持たせてブランドの統一感を維持するのに役立ちます。

これらのグローバル スタイルは、各キャンペーン全体に適用されます。

• フォント
• テキストのサイズ
• リンクの色
• 周囲の背景色

Webサイトのスタイル設定をキャンペーンに自動的に適用することも、これらのスタイルを手動で設定することもできます。また、任意のエレメントの色を保存して再利用したり、キャンペーンを複製することにより、すべてのスタイル設定を新しい下書きで再利用したりもできます。

ヒント: グローバル スタイルを調整するには、セクションの外側 (メールの背景) をクリックします。

Webサイトのスタイルを適用する

キャンペーンをWebサイトの雰囲気に合わせたい場合は、サイト ロゴを自動的に挿入し、サイトのカラー パレットに基づいた色を適用することができます。その方法は以下のとおりです。

1. キャンペーンの下書きの編集画面で、右側のパネルの [スタイル] をクリックします。
2. [簡単にサイトと合わせる] をクリックします。このボタンが表示されない場合は、コンテンツ セクションのスタイル設定が開いたままの可能性があります。下書きコンテンツの外側の領域をクリックして、メールのグローバル スタイルを表示します。
3. サイト ロゴを挿入するには、[ロゴを挿入] をクリックします。サイト ロゴをまだ追加していない場合、このオプションは無効になります。
4. キャンペーンの色を変更するには、カラー テーマのいずれかをクリックします。テーマを変更するには、サイトのカラー パレットを変更します。

これらの変更を適用した後でも、元へ戻す矢印をクリックすると以前の設定に戻すことができます。ロゴを削除するには、キャンペーンのプレビューでロゴをクリックし、右側のパネルで [テキスト] を選択します。

フォントを選択する

どのセクションでも、[フォント パック] をクリックすることでテキストのフォントをキャンペーン全体に適用できます。

フォント パックは、登録者がメッセージに集中できる読みやすいフォントの組み合わせを当社のデザイナーが厳選したものです。オプションを参照して、キャンペーンの文章のトーンとコンテンツに合うフォント パックを見つけましょう。

フォント パック内のフォントを個別に編集する方法はありません。当社のフォント パックは、様々な種類のメール クライアントで表示に一貫性が保たれるよう厳選されています。たとえば、多くのモバイル メール クライアントはWebフォントをサポートしていないため、Webフォントは独自の既定フォントに置き換えられます。フォント パックのフォントは互換性を最適化するよう選択されているため、下書きに表示される内容は、登録者に表示されるメールの内容にできる限り近いものになります。

特定の場所で別のフォントを使う必要がある場合は、画像として追加するか、色や書式設定を使ってテキストを区別することを検討してください。

たとえば、Bloomレイアウトでは、「Bloom」というテキストが画像としてヘッダーに追加されており、「extra special」のテキストを固有のテキスト セクション内で目立たせるために斜体とピンク色の書式設定が適用されています。

テキストのサイズを設定する

任意のセクションで [フォント サイズ] をクリックすると、キャンペーン内のすべてのテキストにサイズを適用できます。

• [基本のフォント サイズ] スライダーを使い、キャンペーンの本文テキストのサイズを選択します。
• [タイプ スケール] スライダーを使い、テキスト サイズのコントラストを設定します。たとえば、タイプ スケールを小さくすると、ヘッダーが段落テキストよりもわずかに大きい「フラット」なメールになり、タイプ スケールを大きくすると、ヘッダーが比較的大きいサイズになります。

ただし、以下の例外があります。ヘッダー テキストには独自のサイズ設定があり、現時点では以下のエレメントのサイズは固定されています。

• ボタンのテキスト
• ブログ投稿と商品タイトル
• ブログ投稿の日付
• 商品の価格
• フッターのテキスト (住所と登録解除リンクを含む)

色を変更する

エレメントをクリックしてコンテンツの背景やリンクなどの色を変更すると、[ メール パレット] と [サイト パレット] の2つのオプションと、対応するスウォッチの円が表示されます。

メール パレット

[メール パレット] には、キャンペーンで現在使用されている色が表示されます。

• 既存の色を使用するには、そのスウォッチをクリックします
• 新しい色を追加するには、カラー ピッカー内をクリックして希望の色を探し、表示されるスウォッチで [+] をクリックします。
• 色を削除するには、スウォッチをクリックし、スウォッチ内で [X] をクリックします。

ヒント: 色で個性を出すためのヒントをご参照ください。

使いたい色の値が分かっている場合は、値フィールドにその値を入力します。これは、他のスタイル設定から正確な色をコピーするための優れた方法です。値フィールドはHEX値とRGB値を受け入れます。

サイト パレット

[サイト パレット] には、サイト スタイルで使用されている色が表示されます。このオプションを使用すると、キャンペーンがサイトのブランディングと一致していることを確認できます。

• サイト パレットの色を使用するには、そのスウォッチをクリックします。これにより、色がメール パレットに追加されます。
• サイト パレットの色の変更や削除を直接行うことはできません。代わりに、サイト スタイルでサイトの色を変更してください。

メール パレットのスウォッチを誤って削除してしまった場合

その色が別のセクションで使用されている場合は、メインのスウォッチ カラーに再び追加することができます。たとえば、ブログ投稿のボタンに使われているスウォッチ カラーを削除した場合は、以下の手順に従ってください。

1. ブログ投稿のセクションをクリックします。
2. [詳細] をクリックします。
3. [ボタンの色] をクリックします。
4. その色のスウォッチで [+] をクリックすると、他のエリアの色のスタイル設定に表示されるようになります。

キャンペーン内のどこにもその色が使用されていない場合は、現時点ではその色を再取得する方法はありません。スウォッチを誤って削除してしまった場合に備えて、使用している色のHEXコードを書き留めておくことをおすすめします。

背景の色

背景色の設定には、次の3つのタイプがあります。

• メールの背景 - コンテンツを囲む領域の背景色。以下の2つのスタイルが透明に設定されている場合、キャンペーン コンテンツの後ろにもこの色が表示されます。
• コンテンツの背景 - キャンペーンのすべてのセクションの背景色。セクションの色が透明に設定されている場合、これがセクションの後ろに表示される色になります。すべてのセクションに独自の色設定がある場合、この色はどこにも表示されない場合があります。
• セクションの色 - 個々のセクションの背景色。各セクションのスタイルを個別に設定できます。セクションの色が透明に設定されている場合、コンテンツの背景またはメールの背景のいずれかが、代わりにセクションの後ろに表示されます。

[メールの背景] と [コンテンツの背景] を設定するには、セクションの外側の領域をクリックし、サイド パネルのオプションをクリックします。セクションの色を設定するには、セクションをクリックしてから [セクションの色] をクリックします。

以下の点に留意してください。

• 画像セクションでは、キャプションと透明な画像領域の後ろにのみ背景色が表示されます。たとえば、画像セクションのレイアウトに [下側] を選択してキャプションを非表示にした場合、背景色は見えなくなります。
• メールはモバイルでは全画面表示になることが多いため、一部のデバイスでは背景色が見えない場合があります。
• 透明な背景を作成するには、左の斜線の入ったスウォッチを選びます。

テキスト リンクのスタイルを設定する

テキスト リンクは、グローバル フォント パックとグローバル フォント サイズの設定に従います。キャンペーン内のすべてのリンクの色を設定するには、セクションの外側のエリアをクリックし、[リンクの色] をクリックします。

ヒント: ブラウザー内表示リンクはヘッダーの背景色の上に表示されるため、独自の色のオプションがあります。

パディング

テキストと画像の周りの余白を調整するには、任意のセクションをクリックしてパディング オプションを表示します。パディングの外観は、使用する端末によって異なる可能性があります。たとえば、小さな画面でもコンテンツが見えやすくなるよう、モバイル端末ではキャンペーンの画像にパディングがありません。

パディングが多すぎたり少なすぎたりする場合は、ニーズに合った理想的な外観が見つかるまで、様々な設定をお試しください。登録者がどのような手段でキャンペーンを見るかによって、キャンペーンの外観が若干異なる可能性があることに注意してください。

ヒント: スペース調整を使うことで、セクションの上下に余白を追加できます。

レスポンシブ デザイン

メール キャンペーンに組み込まれたレスポンシブ デザインは、受信者の画面に合わせて画像とテキストのサイズを変更します。登録者がコンピューターを使っている場合でも、電車の待ち時間にスマートフォンでメールを確認している場合でも、レスポンシブ デザインによりキャンペーンの美しい外観が保たれます。

• モバイル端末では、小さな画面でも読みやすいようにフォントがわずかに大きく表示されます。
• ブログ、商品、画像セクションでは、サイドと番号付きの各レイアウトは幅の狭いブラウザーや画面向けにスタックされます。これにより、画像やテキストが見やすくなります。

セクションのスタイルを設定する

上記のグローバル スタイル以外の各セクションは、個別にスタイル設定されます。左側のプレビューでセクションをクリックし、右側のパネルでスタイルを設定します。さらに詳しいヘルプが必要な場合は、各セクション タイプの構築とスタイル設定に関するヒントをご参照ください。

• ブログ
• ボタン
• 画像
• 線
• 商品
• スペース調整
• テキスト
• ヘッダー (上部セクション)
• フッター (下部セクション)

スタイルを再利用する

すでに送信済みのキャンペーンを、すべてのスタイル設定を含むテンプレートとして使用する方法は以下の通りです。

1. メール キャンペーン ダッシュボードに移動します。
2. [送信済み] をクリックします。
3. 目的のキャンペーンをクリックします。
4. [...] をクリックし、[このレイアウトを再利用] をクリックします。

レイアウトは新しい下書きとして表示され、新規キャンペーンの開始点として使用できます。詳細については、「メール キャンペーンを構築する」をご覧ください。