Stripoドラッグ＆ドロップメールエディターの設定

公開日: 2024年10月22日 · 最終更新日: 2026年9月12日 · 著者 Marcus Biel

Maildroppaのメールエディター右側には、メール設定パネルがあります。メールの構成や内容、デザインを調整するためのツールがまとまっており、Content（コンテンツ）とAppearance（外観）の2つのタブに分かれています。

Contentタブ

Contentタブでは、メールの内容をデザインし、配置を整えます。主なセクションは、Structures（構造）とBlocks（ブロック）の2つです。

1. 構造

構造は、コンテンツを行と列に配置するためのレイアウトです。あらかじめ用意された次のようなレイアウトから選べます。

• 1列
• 2列
• 複数列

これらのレイアウトに限らず、複数のブロックを組み合わせて、目的のデザインに合わせた自由なレイアウトを作成できます。

• ドラッグ＆ドロップ：このセクションから構造をドラッグし、メールのデザイン領域にドロップすると、コンテンツを追加できます。
• カスタマイズ：構造を追加したら、その中に画像、テキスト、ボタンなどのコンテンツブロックを配置します。

2. ブロック

ブロックは、構造の中に配置してメールを組み立てるコンテンツ要素です。

利用できるブロックは次のとおりです。

• Image（画像）：画像（PNG、JPG、GIF）をアップロードし、表示を調整します。
• Text（テキスト）：メッセージを伝えるテキストを追加し、書式を設定します。
• Button（ボタン）：クリックできるボタンを追加し、テキスト、リンク、スタイルをカスタマイズします。
• Spacer（スペーサー）：空白を挿入し、ブロック間のレイアウトを調整します。
• Video（動画）：YouTubeやVimeoなどの動画を埋め込みます。
• HTML：独自のHTMLやCSSコードを追加し、メールの内容をより細かくカスタマイズします。

各ブロックを柔軟にカスタマイズすることで、ブランドのイメージに合ったメールを作成できます。

コンテンツブロックの詳しい使い方

画像ブロック

Stripoのドラッグ＆ドロップメールエディターでは、画像ブロックを使ってキャンペーンのメールに画像を追加し、カスタマイズできます。

画像ブロックを追加する

画像ブロックをメールに追加する方法は2つあります。

方法1

構造内の「Drop Content Here」と表示された領域にカーソルを合わせ、画像アイコンをクリックします。選択した構造がすぐに画像ブロックに変わります。

方法2

ContentタブのBlocksセクションを開きます。画像ブロックをドラッグし、メールレイアウト内の目的の構造に配置します。この方法なら、画像の配置場所をより細かく指定できます。

画像をアップロードする

画像ブロックを追加したら、次の2つの方法で画像をアップロードできます。

ドラッグ＆ドロップ

パソコン上の画像ファイル（PNG、JPG、GIF）をドラッグし、画像ブロック内のアップロード欄に直接ドロップします。

パソコンからアップロード

画像ブロック内の雲のアイコンをクリックすると、ファイル選択画面が開き、パソコン上の画像を選択できます（最大2MB）。選択した画像は、ブロック内と右側のContentタブの両方に表示されます。

画像を変更する

画像を差し替えるには、ContentタブのChange Imageを使います。円形のChange Imageアイコンをクリックすると、新しい画像をアップロードするか、外部URLの画像を指定できます。

画像を編集する

アップロードした画像は、その場で編集することもできます。Stripoに内蔵された画像エディターを使えば、メールエディターを離れずに画像を補正・調整できます。

画像エディターを開く

1. 画像をアップロードしたら、Edit Imageボタンをクリックします。画像エディターが開きます。
2. エディター上部のメニューバーに、さまざまな編集ツールが表示されます。

利用できる画像編集ツール

• Filters（フィルター） 1回のクリックで、次のようなフィルターを適用できます。

  • Grayscale（グレースケール）
  • Black & White（白黒）
  • Sharpen（シャープ）
  • Invert（色の反転）
  • Sepia（セピア）
  • Brightness（明るさ）
  • Color（カラー）

• Resize（サイズ変更） 画像のサイズを調整します。次の操作ができます。

  • 幅と高さを指定する
  • 縦横比を維持する

• Crop（切り抜き） 残す範囲を選択し、不要な部分を切り取ります。

• Transform（変形） 画像を回転・反転します。

  • 水平方向
  • 垂直方向

• Draw（描画） 描画ツールを使い、画像の上に線や自由な形をフリーハンドで描きます。

• Text（テキスト） 画像に直接テキストを追加します。次の項目をカスタマイズできます。

  • フォント
  • サイズ
  • 色
  • 配置

• Shapes and Stickers（図形とステッカー） 次の要素を重ねて画像を装飾します。

  • あらかじめ用意された図形
  • 遊び心のあるステッカー

• Frames（フレーム） 用意されたフレームから選び、画像に装飾的な枠を付けます。

• Corners（角） 角のスタイルを調整し、見た目を整えます。

• Background（背景） 画像の背景を削除・変更し、すっきりとした見た目に仕上げます。

編集内容を保存する

編集が終わったら、エディター左上のSaveボタンをクリックします。メールレイアウト内の元の画像が、編集後の画像に自動で置き換わります。

画像の設定

アップロードした画像は、右側のContentタブにある画像設定でカスタマイズできます。

リンク

画像にリンクを追加します。リンクの種類には、次のような選択肢があります。

• Webサイト（HTTP、HTTPS）
• メール（mailto:）
• ファイル（ftp）
• ソーシャル共有（Facebook、X（旧Twitter）、LinkedIn、Pinterest）

これらはリンク設定のドロップダウンから選択できます。

代替テキスト

画像が読み込まれない場合に表示する代替テキストを追加します。スクリーンリーダーが視覚に障害のある受信者に画像の内容を伝えられるため、アクセシビリティの向上にも役立ちます。

配置

コンテナー内での画像の配置を選びます。Left（左）、Center（中央）、Right（右）から選択できます。

サイズ

プラス／マイナスボタンを使うか、数値を入力して、画像の幅と高さを調整します。

Adjust to Widthを有効にすると、画像がコンテナーの幅いっぱいに自動調整されます。

レスポンシブ画像

Responsive Imageを有効にすると、特にモバイル端末など、さまざまな画面サイズに合わせて画像が調整されます。

パディング

画像の周囲のパディングを設定し、画像と周囲のコンテンツとの間隔を調整します。すべての辺を同じ値にすることも、各辺（Top：上、Bottom：下、Left：左、Right：右）を個別に設定することもできます。

アンカーリンク

画像にアンカーリンクを設定すると、受信者が画像をクリックしたときに、同じメール内の特定のセクションへ移動できます。ただし、GmailやApple Mailなど、一部のメールクライアントでは機能しない場合があります。

テキストブロック

次の設定で、テキストブロックの見た目と機能をカスタマイズできます。各項目を調整して、目的のデザインに合ったテキスト表示に仕上げます。

テキストツールバー

テキストブロック内をクリックすると、コンテンツ領域の上にテキストツールバーが表示されます。よく使う書式設定にすばやくアクセスでき、次の機能を利用できます。

1. 段落の書式

通常の本文にはNormal、見出しにはHeading 1～Heading 6を選択して、段落スタイルを設定します。見出しの階層を付けることで、メールの内容を整理し、読みやすくできます。

2. フォント

デフォルトはArialです。ほかにも、Georgia、Helvetica、Courier Newなど、さまざまなフォントを選べます。検索機能を使えば、目的のフォントをすばやく見つけられます。

3. フォントサイズ

8ptから72ptまで調整できます。デフォルトの14ptは、多くのメールの本文に適したサイズです。ドロップダウンから希望のサイズを選択します。

4. テキストの装飾

次のオプションでテキストを装飾できます。

• Bold (B)：太字にして強調します。
• Italic (I)：斜体にして、見た目に変化を付けます。
• Underline (U)：下線を付けます。ハイパーリンクによく使われます。
• Strikethrough (S)：取り消し線を付けます。編集箇所や削除した内容を示すのに便利です。

5. テキストの詳細な装飾（3点メニュー）

ツールバーの3点メニューをクリックすると、追加のオプションが開きます。

• Subscript：文字を基準線より下に配置します。脚注や化学式に便利です。
• Superscript：文字を基準線より上に配置します。指数や序数によく使われます。
• Remove Formatting：適用された書式をすべて解除し、デフォルトのスタイルに戻します。

6. テキストと背景の色

• Text Color：このボタンをクリックし、パレットから色を選ぶか、16進数カラーコードを入力して文字色を指定します。
• Background Color：テキストの背景色（ハイライトの色）を選択します。

7. テキストの配置

ブロック内でのテキストの配置を設定します。

• Align Left：左揃えにします。
• Center：中央揃えにします。
• Align Right：右揃えにします。
• Justify：ブロックの幅に合わせて文字を均等に配置し、両端を揃えます。

8. リスト

番号付きリストや箇条書きを作成します。

• Insert/Remove Bulleted List：箇条書きを追加・削除します。
• Insert/Remove Numbered List：番号付きリストを追加・削除します。

9. 行の折り返し

テキストブロック内の行の折り返しを有効・無効にします。有効にすると、長い行は自動で次の行に折り返されます。

10. インデント

テキストの字下げを調整します。
- <strong>Increase Indent</strong>：余白からテキストまでの距離を広げます。小項目や引用に便利です。
- <strong>Decrease Indent</strong>：字下げを減らし、テキストを左の余白に近づけます。
![テキストのインデント](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. ハイパーリンクの挿入

メール本文にハイパーリンクを追加し、編集・管理する方法を説明します。

リンクを追加・編集する手順

a) テキストを選択する

リンクにするテキストを選択します。

b) リンクアイコンをクリックする

テキストツールバーのリンクアイコンをクリックします。

c) 設定パネルでリンクを編集する

右側の設定パネルにリンクの設定項目が表示されます。

• リンク欄：URLを入力するか、あらかじめ用意された選択肢から選びます。
• タグ：購読者の分類や自動化の開始に使うタグを追加します。

送信後にリンクを修正する

新しいキャンペーンを2,365人の購読者に送信した後で、入力ミスによるリンク切れに気づいたら、せっかくのブラックフライデーの売上機会を逃しかねません。

Maildroppaでは、購読者にメールを送信した後でも、リンク切れを修正できます。

a) キャンペーンを表示する

一覧で送信済みのキャンペーンを見つけ、3点メニューをクリックしてView Campaignを選択します。

b) リンクやタグを変更する

キャンペーンの詳細画面でリンク一覧までスクロールすると、次の操作ができます。

• リンク先の更新：誤ったURLを修正します。
• タグの管理：自動化に使うタグを追加・削除します。

注意： 送信後にリンク先を変更するには、キャンペーン設定でClick Tracking（クリック計測）を有効にしておく必要があります。

リンクの見た目をカスタマイズする

右側の設定パネルで、リンクの見た目を調整できます。

• Link Color：色を選択するか、16進数カラーコードを入力します。

• Underline Links：下線の表示・非表示を切り替え、見た目を整えます。

12. パーソナライズタグ

パーソナライズタグを使うと、受信者の名やカスタム項目の値など、受信者に応じて変わる内容を挿入できます。

• ツールバーのPersonalization Tagsドロップダウンを開き、First Name（名）、Email（メールアドレス）、Country（国）などの項目を選択します。カスタム項目を定義して、受信者ごとにメールの内容を調整することもできます。

13. 絵文字

絵文字を加えて、テキストの見た目に変化を付けます。

• ツールバーの絵文字アイコンをクリックすると、カテゴリ別の絵文字一覧が開き、使いたい絵文字を探せます。
• 互換性に関する注意：Outlookなど、一部のメールクライアントでは絵文字が正しく表示されない場合があります。実際の表示をテストしてください。

14. 表と特殊文字

ツールバーの末尾にある3点メニューをクリックすると、さらに詳しい設定が表示されます。

表の挿入

表を作成・カスタマイズして、メールのレイアウトを整えます。

• 必要に応じて、行、列、セル間隔、パディング、枠線の太さを指定します。

特殊文字の挿入

記号、アクセント付き文字など、通常の文字以外も挿入できます。

• Special Charactersを開くと、さまざまな特殊文字を確認できます。

テキストブロックの追加設定（右パネル）

右側のパネルでは、テキストブロックの見た目と機能をさらに細かく調整できます。設定項目は次のとおりです。

1. テキストの色

カラーピッカーで色を選ぶか、16進数カラーコードを入力して文字色を指定します。

2. 背景色

テキストブロックの背景色を設定します。デフォルトは透明です。

3. リンクの設定

テキストブロックにリンクが含まれている場合は、次の設定項目が追加で表示されます。

• Link Color：カラーピッカーや16進数カラーコードで、リンクの色を調整します。

• Underline Links：テキストブロック内のリンクの下線をオン・オフにします。

• リンクの編集： コンテンツ領域でリンクを選択すると、設定パネルでURLを編集できます。「Tags」ドロップダウンでは、リンクに割り当てるタグの追加・更新もできます。

4. 配置

コンテナー内でのテキストブロックの配置を、Left（左）、Center（中央）、Right（右）から選びます。

5. 高さの固定

Fixed Heightを有効にすると、テキストブロックの高さを固定できます。テキストの縦方向の配置も、Top（上）、Middle（中央）、Bottom（下）から選べます。

6. 行間

テキストの行間を調整します。Tight（狭い）、Normal（標準）、Wide（広い）から選択できます。

7. パディング

テキストブロックの周囲の余白を調整します。すべての辺を同じ値にすることも、Top（上）、Bottom（下）、Left（左）、Right（右）を個別に設定することもできます。

8. アンカーリンク

アンカーリンクを作成すると、読者がメール内の特定のセクションへ移動できます。ただし、一部のメールクライアントではアンカーリンクに対応していません。

ボタンブロック

ボタンブロックでは、クリックできるボタンをメールに追加し、その動作やデザインをカスタマイズできます。

リンクの設定

Linkでは、受信者がボタンをクリックしたときの動作を指定します。

利用できるリンクの種類

• 通常のWebサイトリンク（HTTPまたはHTTPS）：Webページへ移動します。
• メールリンク：メールクライアントを開き、新規メールの作成画面を表示します。
• ファイルリンク（FTP、FTPS）：FTPサーバー上のファイルにリンクします。
• Skype：Skypeの通話やチャットを開始します。
• 電話（tel）：対応端末で電話をかけます。
• SMS：宛先の電話番号が入力された状態でメッセージアプリを開きます。
• Viber：メッセージや通話のためにViberアプリを開きます。
• その他のプロトコル：上記以外の独自のプロトコルを指定します。

ソーシャル共有の設定

SNSやメールで共有するためのボタンも設定できます。

• Facebook
• X（旧Twitter）
• LinkedIn
• Pinterest
• メールでの共有

URL欄

リンクの種類の横にあるURL欄（通常はhttps://で始まります）に、選択したリンクの種類に応じたアドレスを入力します。

ボタンのラベル

読者に促したい行動に合わせて、ボタンのラベルを変更します。デフォルトは「Button」ですが、「詳しく見る」、「今すぐ登録する」、「今すぐ購入する」などに変更できます。

テキストスタイル

Text Styleでは、ボタンに表示するテキストの見た目を調整できます。

フォントの選択

次のような標準フォントから選べます。

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

標準以外のフォントとして、次のフォントも選択できます。

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

フォント一覧の上部にある検索欄を使うと、目的のフォントをすばやく見つけられます。

フォントサイズと書式

• フォントサイズ：ボタンのテキストをどの程度目立たせるかに応じて、8～72から選びます。
• テキストの書式：「B」や「I」アイコンで太字や斜体を適用し、ボタンのテキストを強調します。

色の設定

色を調整して、ボタンの見た目をカスタマイズします。

1. ボタンの色： ボタン自体の背景色を変更します。デフォルトは緑（#31cb4b）です。16進数カラーコードの入力欄やカラーピッカーで色を指定します。

2. テキストの色： ボタンの文字色を指定します。デフォルトは白（#ffffff）です。読みやすくするため、ボタンの背景色と十分なコントラストのある色を選んでください。

3. 背景色： ボタンを配置するコンテナーの背景色を調整します。デフォルトは透明ですが、メールの背景に対してボタンを目立たせたい場合は変更できます。

角の丸み

Border Radiusで、ボタンの角の丸みを調整します。

• デフォルト値：30（適度に丸みのある角）
• 設定範囲：0（直角）～100（カプセル型）

注意： Microsoft Outlookで角の丸みを正しく表示するには、AppearanceタブのSupport of Outlookを有効にしてください。

配置

Alignmentで、コンテンツ領域内のボタンの位置を設定します。

• 選択肢：Left（左）、Center（中央）、Right（右）
• 使い分けの例：ボタンを強調するなら中央揃え、ほかの要素との統一感を出すなら左揃えや右揃えにします。

高さの固定

Fixed Heightを有効にすると、ボタンの寸法を一定に保てます。

1. デフォルト：無効
2. 最小の高さ：44ピクセル
3. コンテンツの縦方向の配置：高さを固定すると、ボタン内のコンテンツをTop（上）、Middle（中央）、Bottom（下）から選び、細かく配置できます。

アイコン付きボタン

Button with Iconでは、ボタンのテキストの横にアイコンを追加できます。視覚的なアクセントを加え、促したい行動をよりわかりやすく伝えられます。この機能はデフォルトでは無効です。

• 対応形式：PNG、JPG、GIFのアイコンをアップロードできます。ファイルサイズは最大2MBです。
• アイコンの位置：ボタンのテキストに対して、Left（左）またはRight（右）を選択できます。

注意：Windows版Microsoft Outlookの次のバージョンなどでは、アイコンが表示されません。

• Outlook 2002、2007、2010、2013、2016、2019 これは、各メールクライアントのHTMLメールの描画方法による制限です。受信者の多くがこれらのバージョンを使っている場合は、この点を考慮してください。

枠線の設定

ボタンの枠線をカスタマイズし、デザインに変化を付けたり、ボタンを強調したりできます。

• 枠線の太さ：左、右、上、下の各辺を個別に、最大40ピクセルまで設定できます。
• 枠線のスタイル：Solid（実線）、Dashed（破線）、Dotted（点線）から選びます。
• 枠線の色：カラーピッカーや16進数カラーコードで、ブランドやデザインに合う色を指定します。

内側のパディング

ボタン内のコンテンツ（テキストとアイコン）と枠線との間隔を調整します。

• 設定項目：Left（左）、Right（右）、Top（上）、Bottom（下）の各辺に、最大99ピクセルのパディングを設定できます。
• 調整による変化：内側のパディングは、ボタン全体のサイズと、ボタン内のコンテンツの位置に影響します。

外側のパディング

ボタンの外側の余白を調整し、メール内のほかの要素との位置関係を整えます。

• 設定項目：Left（左）、Right（右）、Top（上）、Bottom（下）の各辺に、最大40ピクセルの外側パディングを設定できます。
• 用途：ボタンがほかのコンテンツやメールの端に近づきすぎるのを防ぎます。

アンカーリンクの追加

アンカーリンクを使うと、同じメール内の特定のセクションへ読者を誘導できます。長いメールマガジンで、目的の箇所へすばやく移動できるようにしたい場合に便利です。

• アンカー名：メール内の移動先を定義し、ボタンからそのアンカーにリンクします。クリックすると指定したセクションまでスクロールし、メール内を移動しやすくなります。

重要：次のメールクライアントや形式などでは、アンカーリンクに対応していません。

• iOS版Gmailアプリ
• iOS版Apple Mail
• Android版Outlookアプリ
• macOS版Outlookアプリ
• AMPメール

さまざまなメールクライアントで十分にテストし、動作を確認したうえで、受信者に適した機能かどうかを判断してください。

スペーサーブロック

スペーサーブロックでは、メール内に余白を追加し、サイズ、配置、見た目、内側の間隔を調整できます。ここでは、通常のスペーサーと動的スペーサーの2種類を説明します。

1. 通常のスペーサー

通常のスペーサーは、メール内のセクションを視覚的に区切る線です。

主な設定

1. 線の太さとスタイル 線の太さ、スタイル、色をカスタマイズします。

   • 太さ：+と-ボタンで調整します（開始値は1）。
   • スタイル：solid（実線）、dashed（破線）、dotted（点線）から選びます。
   • 色：16進数カラーコードやカラーピッカーで指定します（デフォルト：#cccccc）。

2. 幅 コンテンツ内でのスペーサーの線の長さを指定します。+と-ボタンで、ピクセル単位で調整できます。

3. 配置 レイアウトに合わせて、線を左、中央、右に配置します。

4. パディング スペーサー周囲の内側の余白を調整します。

   • デフォルト：すべての辺が20に設定されています。
   • Moreの切り替えスイッチを使うと、各辺のパディングを個別に指定できます。
     • Top（上）
     • Right（右）
     • Bottom（下）
     • Left（左）

用途

通常のスペーサーは、メールのセクションを線ですっきりと区切り、整理されたビジネス向けのレイアウトに仕上げるのに適しています。

2. 動的スペーサー

動的スペーサーは、メールレイアウトにゆとりを持たせるための、見えない空白のブロックです。

主な機能

1. 高さの調整 コンテンツ領域で直接調整するか、コントロールパネルの+と-ボタンを使います。高さによって、セクション間に追加する縦方向の余白が決まります。

2. 背景色 デフォルトでは背景は透明ですが、16進数カラーコードやカラーピッカーで背景色を指定できます。必要に応じて、色の付いた見えるブロックとして使えます。

3. 画面サイズに応じた調整 Responsive Spacerを有効にすると、画面サイズに応じてスペーサーが自動調整され、端末ごとに適したレイアウトになります。この機能はデフォルトで有効です。

通常のスペーサーと動的スペーサーの主な違い

• 動的スペーサー：線を表示せず、空白を追加します。
• 通常のスペーサー：次のような、線に関する設定があります。
  • 線の幅
  • 配置
  • 線のスタイル
  • パディング

動的スペーサーにはこれらの設定はなく、視覚的な要素を使わずに間隔を空けるためのものです。

3. アンカーリンクの追加

どちらのスペーサーにもアンカーリンクを設定できます。メール内の別の場所からスペーサーの位置へ直接移動できるため、特に長いメールマガジンで、メール内のナビゲーションを設けるのに便利です。

注意：次のメールクライアントなどでは、アンカーリンクに対応していません。

• Microsoft Outlook
• Gmail（モバイル）

動画ブロック

動画ブロックでは、メールに動画を埋め込み、見た目や動作をカスタマイズできます。YouTubeやVimeoなどの動画リンクに対応しており、動画の表示方法を柔軟に調整できます。

1. 動画へのリンク

Link to Video欄に動画のURLを入力します。YouTube、Vimeoのほか、埋め込みに対応するサービスを利用できます。

• 自動で行われる処理： 有効なURLを入力すると、次の処理が行われます。

  • 動画サービスのサムネイルを使って、プレビュー画像が自動生成されます。
  • 動画のタイトルや説明を取得できる場合は、Alternate Text欄に自動入力されます。

• 編集できる項目： 生成されたプレビュー画像とテキストは、必要に応じて手動で編集・変更できます。

2. 代替テキスト

Alternate Text欄に設定した説明は、動画が読み込まれない場合に表示され、アクセシビリティの確保に役立ちます。

• 対応する動画URLを入力すると、自動入力されます。
• 内容に合わせてカスタマイズできます。

3. カスタムサムネイル

独自の画像をアップロードし、デフォルトの動画プレビュー画像を変更できます。

• 有効にする方法：Custom Thumbnailをオンにします。
• 対応形式：PNG、JPG、GIF
• 用途：自動生成されたサムネイルがメールのデザインに合わない場合に差し替えます。

4. 再生ボタン

動画サムネイルに重ねて表示する再生ボタンをカスタマイズします。

• 設定できる内容：
  • YouTube、Vimeoなどの再生ボタンのスタイルを選択できます。
  • 「None」を選択すると、再生ボタンを完全に非表示にできます。

5. サイズ

メールのデザインに合わせて動画のサイズを調整します。

• 幅と高さ：+と-ボタンを使うか、数値を入力してサイズを指定します。
• レスポンシブデザイン：さまざまな端末で動画が自然に収まるようにします。

6. 幅に合わせる

Adjust to Widthを有効にすると、動画がコンテナーの幅に合わせて自動調整されます。これにより、端末が変わっても画面に応じたレイアウトを維持できます。

7. レスポンシブ画像

Responsive Imageを有効にすると、モバイル端末で動画サムネイルが画面の幅に合わせて調整されます。

• 注意：レスポンシブ表示の動作は、端末やメールクライアントの対応状況によって異なります。

8. 配置

Alignmentで、ブロック内の動画の横方向の位置を指定します。

• Left：左に配置します。
• Center：中央に配置します。
• Right：右に配置します。

9. モバイル向けの設定

モバイル端末での動画の動作や見た目をカスタマイズします。

1. Hide Element on Mobile（モバイルで非表示） 必要に応じて、モバイル端末で動画ブロックを非表示にします。

   • 注意：この機能はメディアクエリへの対応が必要なため、すべてのメールクライアントで機能するとは限りません。

2. Mobile Padding（モバイルのパディング） モバイル表示での動画の周囲の余白を調整します。

   • Moreの切り替えスイッチを使うと、各辺のパディングを個別に設定できます。
     • Top（上）
     • Right（右）
     • Bottom（下）
     • Left（左）

10. AMPHTMLまたはHTMLに含める

動画ブロックをどの形式のメールに表示するかを選択します。

• AMPHTMLとHTMLの両方
• AMPHTMLのみ
• HTMLのみ

この設定により、配信されるメールの形式に応じて動画を含めるかどうかを指定できます。

HTMLブロック

HTMLブロックでは、独自のHTMLやCSSコードをメールに挿入できます。メールクライアントとの互換性に配慮しながら、柔軟で高度なカスタマイズが可能です。HTML要素を1つだけ追加する場合にも、メール全体をデザインする場合にも、目的に合ったデザインを作成できます。

1. コードエディターの画面

HTMLブロックを選択すると、コンテンツ領域に黒いコードエディターが表示されます。コードの記述、貼り付け、編集ができ、次の2つのセクションがあります。

• HTMLセクション：メールのHTML構造を追加・編集します。
• CSSセクション：専用のCSSエディターを開き、コンテンツのスタイルを設定します。

2. フォントサイズの調整

コードを読みやすくするため、エディター内のフォントサイズを調整できます。

• A+ボタンで文字を大きくします。
• A-ボタンで文字を小さくします。

3. エディターのウィンドウサイズの調整

作業しやすい大きさに、コードエディターのウィンドウを調整できます。

• 調整方法：
  • エディターの上部中央にある3つの点にカーソルを合わせます。
  • スライダーを上下にドラッグして、エディターを拡大・縮小します。

長いコードや細かな記述の多いコードを扱う際に便利です。

4. CSSエディター

CSSエディターでは、HTMLコンテンツのスタイルを管理できます。コードエディター右上のボタンから開きます。

重要な注意点：

• 対応範囲の制限：多くのメールクライアントは、Flexbox、Grid、メディアクエリなどの高度なCSS機能に対応していません。
• 基本的な記述を使う：できるだけ広い互換性を確保するため、基本的なインラインCSSを使ってください。
• 設定済みのスタイルを残す：主要なメールクライアントで正しく表示するため、あらかじめ設定されているスタイルは削除しないでください。

5. メールクライアントとの互換性

多くのメールクライアントでは古い描画エンジンが使われているため、メール用のHTMLには特別な配慮が必要です。

主な指針：

• 互換性を高めるため、<div>ベースではなくテーブルベースのレイアウトを使います。
• アニメーション、Flexbox、Gridなどの高度なCSS機能は避けます。
• メディアクエリや一部の細かなCSSプロパティは、メールクライアントによって動作が異なる場合があります。
• テスト：Gmail、Outlook、Apple Mailなど、複数のメールクライアントで必ず表示を確認してください。

6. パディング

Paddingでは、HTMLコンテンツの周囲の余白を調整します。

• デフォルトのパディング：0に設定されています。
• 個別のパディング：Moreを有効にすると、各辺の値を個別に調整できます。
  • Top（上）
  • Right（右）
  • Bottom（下）
  • Left（左）

メールレイアウト内でHTMLコンテンツの位置を整えるのに便利です。

7. アンカーリンクの追加

Add Anchor Linkを使うと、メール内の別の場所に、HTMLブロックへ移動するリンクを作成できます。

使い方：

• このオプションをオンにし、入力欄にアンカー名を指定します。

制限事項：

• 次のメールクライアントや形式などでは、アンカーリンクに対応していません。
  • iOS版Gmailアプリ
  • iOS版Apple Mail
  • Outlookアプリ（Android版、macOS版）
  • AMPメール

8. 独自のHTMLの記述

HTMLエディターでは、メール用の独自のHTML構造を記述したり、貼り付けたりできます。

推奨事項：

• シンプルで、広く対応しているHTMLを使います。
• <div>要素など、複雑なレイアウトや機能は避けます。
• 互換性を高めるため、テーブルベースのデザインを使います。

9. 活用のポイント

1. 小さな範囲から始める：HTMLメールの制作が初めての場合は、メールの一部のセクションでHTMLブロックを使ってみましょう。
2. コードを検証する：HTMLがメールクライアントの要件を満たしているか確認します。
3. 十分にテストする：ツールを使い、複数のメールクライアントや端末でメールをプレビューし、動作をテストします。