# Brevoのメールテンプレートをカスタマイズして、ブランドに合わせたデザインを作る方法

- 種別: BrevoNavi 活用ガイド（メール送信）
- URL: https://brevo-navi.com/tips/2026-05-12-brevo-email-template-customization-guide/
- 公開: 2026-05-12 / 更新: 2026-10-23
- 著者: 浅井 翔（HIUP LLC 代表、日本初のBrevo認定マスターパートナー）
- 概要: Brevoのドラッグ&ドロップエディタとHTMLコードエディタを使って、ブランドカラーやロゴを反映したメールテンプレートを作成・編集する手順を解説します。

## Brevoのメールテンプレートカスタマイズで、ブランドらしい配信メールを実現

メール配信の効果を高めるには、企業ロゴやブランドカラーが入った統一されたデザインが欠かせません。Brevoなら、難しいコーディング知識がなくても、プロフェッショナルなメールテンプレートを簡単に作成・編集できます。この記事では、初心者向けの操作方法と、より細かくカスタマイズしたい方向けのHTMLエディタの使い方をご紹介します。

## ドラッグ&ドロップエディタで直感的にテンプレート設計

### テンプレートを新規作成する

Brevoの管理画面から以下の経路でアクセスします：

**Campaigns（[キャンペーン](/glossary/campaign/)）→ Email Campaigns（メールキャンペーン）→ Create a campaign（キャンペーンを作成）**

キャンペーン作成画面で「Design（デザイン）」ステップに進むと、テンプレート選択画面が表示されます。

- **Blank（空白）**：0から自分でデザイン
- **Templates（テンプレート）**：業種別に用意された既存テンプレート

はじめての方は、近い業種のテンプレートを選択してから修正する方が時間短縮になります。

### ドラッグ&ドロップで要素を配置

選択したテンプレートを開くと、左パネルに利用可能なコンポーネントが表示されます：

| コンポーネント | 用途 |
|---|---|
| Text（テキスト） | 見出しや本文を追加 |
| Image（画像） | ロゴや製品画像を挿入 |
| Button（ボタン） | CTAリンク（例：「詳細を見る」） |
| Divider（区切り線） | セクション間に視覚的な区切りを追加 |
| Social（ソーシャル） | SNSフォローアイコンを配置 |

これらを任意の場所にドラッグして配置し、ダブルクリックで内容を編集します。

### ブランドカラーとフォントの統一設定

> **ヒント：** テンプレート全体で統一されたスタイルを適用したい場合は、エディタ上部の「Style（スタイル）」タブから背景色、フォント、リンク色などを一括設定できます。

各テキスト要素をクリックすると右パネルに編集オプションが表示されます：

- **Font（フォント）**：「Noto Sans JP」などの日本語対応フォントを選択
- **Color（色）**：ブランドカラーのHexコード（例：#FF5733）を入力
- **Font Size（フォントサイズ）**：見出しは16-20px、本文は14-16pxが推奨

ロゴ画像を挿入する際は、ヘッダー部分に配置し、幅を120-150px程度に設定するとバランスが取れます。

## HTMLコードエディタで細部をコントロール

基本的なカスタマイズだけでは足りない場合は、HTMLエディタで直接コードを編集できます。

### HTMLエディタへの切り替え

デザイン画面の右上にある **\<\> Code（コード）** ボタンをクリックすると、HTML形式でテンプレート全体が表示されます。

> **注意：** HTMLエディタに切り替えた後、ドラッグ&ドロップエディタに戻すと、コード内の一部カスタムタグが反映されない場合があります。どちらかの編集方法に統一することをお勧めします。

### よくあるカスタマイズ例

**例1：メールの最大幅を制限する**

```html
<table style="max-width: 600px; margin: 0 auto;">
```

キャンペーンが横に広がりすぎないよう、コンテナ幅を600pxに固定する際に使用します。

**例2：背景画像を設定する**

```html
<table style="background-image: url('https://example.com/bg.jpg'); 
            background-repeat: no-repeat; 
            background-size: cover;">
```

ただし、Outlookなどのメールクライアントが背景画像に対応していない場合があるため、背景色も併記することが重要です。

**例3：[条件分岐](/glossary/branch/)を使った動的コンテンツ**

Brevoは `{%if%}...{%endif%}` という動的タグに対応しており、顧客属性に基づいて表示内容を変えられます：

```html
{%if CUSTOMER_SEGMENT == "premium"%}
プレミアム会員様向けの特別オファー
{%else%}
通常のキャンペーン内容
{%endif%}
```

詳細は「Contacts（連絡先）」で定義した属性名と一致させる必要があります。

## テストメール送信でプレビュー確認

> **重要：** カスタマイズ完了後は、必ずテストメールを自分のメールアドレスに送信し、異なるメールクライアント（Gmail、Outlook、スマートフォンアプリ）での表示を確認してください。

テストメール送信は、デザイン画面下部の **Send Test（テスト送信）** ボタンから実行できます。実際の配信前に、以下をチェックします：

- ロゴやCTA画像が正常に表示されているか
- テキストの行間や余白が適切か
- リンクが正しく機能しているか
- スマートフォン表示で崩れていないか（レスポンシブ対応）

## テンプレートを保存して再利用

> **ヒント：** 作成したテンプレートは保存してライブラリに登録できます。同じデザイン基調のキャンペーンを複数配信する場合は、大幅な時間短縮になります。

キャンペーン完成後、画面上部の **Save as template（テンプレートとして保存）** をクリックし、わかりやすい名前（例：「2026年春キャンペーンテンプレート」）を付けます。

次回以降、新規キャンペーン作成時に **Templates** セクションからこのテンプレートを選択でき、編集だけで素早く配信準備ができます。

## よくある質問

**Q：メールの幅を変更したいのですが、どこで設定しますか？**

A：HTMLエディタで `<table>` タグの `max-width` を調整するか、ドラッグ&ドロップエディタでは各要素の右パネルで「Width（幅）」を指定してください。

**Q：日本語フォントが反映されません。**

A：Webフォントサービス（Google Fonts など）は、すべてのメールクライアントで対応していません。安全な選択肢は、システムフォント（Noto Sans JP、Hiragino Sans など）を指定することです。

**Q：テンプレートをスマートフォンに最適化するには？**

A：Brevoのテンプレートはデフォルトでレスポンシブデザインに対応しています。プレビューの下部から「Mobile（モバイル）」タブを選択し、小画面表示を確認できます。

## 関連記事

- [Brevoのメール配信精度を高めるための設定ガイド](/tips/email-deliverability/)
- [顧客セグメント分けで、ターゲット別のメール配信を実現する](/tips/segmentation-basics/)
- [ウェルカムシリーズオートメーションで、新規顧客をファンに育成する](/tips/automation-welcome-series/)