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

Published: 2024年10月22日 · Last updated: 2026年7月21日 · By Marcus Biel

Maildroppaのメールエディターの右側には、メールのコンテンツの構成や外観のカスタマイズに役立つツールを備えたメール設定カラムがあります。このカラムは、コンテンツと外観の2つのタブに分かれています。

コンテンツタブ

コンテンツタブでは、メールのコンテンツをデザインし、整理します。ここには、構造とブロックという2つの主要セクションがあります。

1. 構造

構造では、コンテンツを行と列に配置してメールのレイアウトを定義します。次のような、あらかじめ用意されたさまざまなレイアウトから選択できます。

• 1列
• 2列
• 複数列

これらのオプションに限定されることはありません。複数のブロックを組み合わせて、好みのカスタムレイアウトを作成できるため、デザインのニーズに合わせて柔軟に対応できます。

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

2. ブロック

ブロックは、メールを作成するために構造の中へ配置するコンテンツ要素です。

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

• 画像: 画像（PNG、JPG、GIF）をアップロードし、外観をカスタマイズします。
• テキスト: メッセージを伝えるテキストを追加・書式設定します。
• ボタン: テキスト、リンク、スタイルをカスタマイズできるクリック可能なボタンを追加します。
• スペーサー: 他のブロック間のレイアウトを調整するため、空白を挿入します。
• 動画: YouTube、Vimeoなどのプラットフォームから動画コンテンツを埋め込みます。
• HTML: 高度なメールコンテンツのカスタマイズに使用するカスタムHTMLおよびCSSコードを追加します。

各ブロックは柔軟かつカスタマイズ可能な設計になっており、ブランドのイメージや雰囲気に合ったメールを作成できます。

コンテンツブロックの詳細説明

画像ブロック

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

画像ブロックの追加

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

方法1

構造内の**「ここにコンテンツをドロップ」**領域にカーソルを合わせ、画像アイコンをクリックします。選択した構造が直ちに画像ブロックに変わります。

方法2

コンテンツタブのブロックセクションに移動します。画像ブロックをメールレイアウト内の目的の構造へドラッグします。この方法なら、画像を配置する場所をより細かく制御できます。

画像のアップロード

画像ブロックを追加したら、画像をアップロードする方法は2つあります。

ドラッグ＆ドロップ

コンピューターから画像ファイル（PNG、JPG、GIF）を直接ドラッグし、画像ブロック内に表示されるアップロードボックスへドロップできます。

コンピューターからアップロード

または、画像ブロック内のクラウドアイコンをクリックしてファイルブラウザーを開き、コンピューターから画像を選択することもできます（最大2MB）。選択した画像は、ブロック内と右側のコンテンツタブの両方に表示されます。

画像の変更

画像を置き換えるには、コンテンツタブにある画像を変更オプションを使用します。円形の画像を変更アイコンをクリックすると、新しい画像をアップロードしたり、外部URLの画像をリンクしたりできます。

画像の編集

画像をアップロードした後、プラットフォーム内でさらに編集したくなる場合があります。Stripoに組み込まれた画像エディターを使えば、メールエディターを離れることなく画像を補正・調整できます。

画像エディターへのアクセス

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

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

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

  • グレースケール
  • 白黒
  • シャープ
  • 反転
  • セピア
  • 明るさ
  • カラー

• サイズ変更 画像の寸法を調整します。次の操作が可能です。

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

• 切り抜き 残す部分を選択し、不要な部分を削除します。

• 変形 画像を回転または反転します。

  • 水平方向
  • 垂直方向

• 描画 描画ツールを使って、画像上に線やカスタム図形などのフリーハンド要素を追加します。

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

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

• 図形とステッカー 次の要素を重ねて画像を装飾できます。

  • あらかじめ用意された図形
  • 楽しいステッカー

• フレーム さまざまなフレームから選び、画像にスタイリッシュな枠線を付けます。

• 角 角のスタイルを調整して、洗練された見た目にします。

• 背景 画像の背景を削除または置き換え、よりすっきりとした外観にします。

編集内容の保存

必要な変更を加えたら、エディター左上の保存ボタンをクリックします。編集した画像が、メールレイアウト内の元の画像に自動的に置き換わります。

画像設定

画像をアップロードした後、右側のコンテンツタブにある画像設定オプションを使ってカスタマイズできます。

リンク

画像にリンクを追加します。次のようなさまざまな種類のリンクを選択できます。

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

これらのオプションは、リンク設定のドロップダウンにあります。

代替テキスト

画像が読み込まれない場合に表示される代替テキストを追加します。このテキストはアクセシビリティにも役立ち、視覚障害のある受信者に対してスクリーンリーダーが画像を説明できるようになります。

配置

コンテナー内での画像の配置方法を選択します。左、中央、右に配置できます。

サイズ

プラス／マイナスボタンを使うか、希望する寸法を入力して、画像の幅と高さを手動で調整します。

幅に合わせるオプションを有効にすると、画像がコンテナーの幅全体に自動的に収まるようにすることもできます。

レスポンシブ画像

レスポンシブ画像オプションを有効にすると、特にモバイルデバイスで、画像がさまざまな画面サイズに適応します。

パディング

画像の周囲のパディングをカスタマイズし、画像と周囲のコンテンツの間隔を調整します。すべての辺に均一に適用することも、各辺（上、下、左、右）ごとに設定することもできます。

アンカーリンク

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

テキストブロック

以下の設定を使って、テキストブロックの外観と機能をカスタマイズできます。各オプションでテキストの表示方法を細かく調整し、デザインの希望にぴったり合わせられます。

テキストツールバー

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

1. 段落形式

標準などのオプションから段落スタイルを設定できます。また、メール内に構造化された階層を作成するため、さまざまな見出しレベル（見出し1～見出し6）も選択できます。これにより、コンテンツが読みやすく整理されます。

2. フォントファミリー

デフォルトのフォントはArialですが、Georgia、Helvetica、Courier Newなど、さまざまなフォントを選択できます。特定のフォントをすばやく見つける検索機能もあります。

3. フォントサイズ

フォントサイズを8ptから72ptまで調整できます。デフォルトは14ptで、ほとんどのメール本文に適しています。ドロップダウンから希望のフォントサイズをすばやく設定できます。

4. テキストスタイル

次のオプションを使ってテキストをスタイル設定できます。

• 太字（B）: テキストを太字にして強調します。
• 斜体（I）: テキストを斜体にして、よりスタイリッシュな外観にします。
• 下線（U）: テキストに下線を付けます。ハイパーリンクによく使用されます。
• 取り消し線（S）: テキストに線を引き、編集箇所や削除された内容を示すのに役立ちます。

5. 高度なテキストスタイル（3点メニュー）

ツールバーの3つの点をクリックすると、追加オプションが展開されます。

• 下付き文字: テキストをベースラインより下に配置します（脚注や化学式に便利です）。
• 上付き文字: テキストをベースラインより上に配置します（指数や序数によく使用されます）。
• 書式を削除: 適用されている書式をすべて取り除き、テキストをデフォルトのスタイルに戻します。

6. テキストと背景の色

• テキストの色: テキストの色ボタンをクリックし、パレットから選択するか、16進数コードを入力して色を正確に指定します。
• 背景色: テキストの背景（ハイライト）色を選択します。

7. テキストの配置

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

• 左揃え: テキストを左に揃えます。
• 中央揃え: テキストを中央に揃えます。
• 右揃え: テキストを右に揃えます。
• 両端揃え: ブロックの幅全体にテキストを均等に配置します。

8. リスト

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

• 箇条書きリストの挿入／削除: 箇条書きを追加または削除します。
• 番号付きリストの挿入／削除: 番号付きリストを追加または削除します。

9. 行の折り返し

テキストブロック内の行の折り返しを有効または無効にします。有効にすると、長いテキスト行が自動的に次の行へ移動します。

10. インデント

テキストのインデントを調整します。
- **インデントを増やす**: テキストを余白からさらに離します。小項目や引用に便利です。
- **インデントを減らす**: インデントを小さくし、テキストを左余白に近づけます。
![テキストのインデント](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

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

メールコンテンツ内でハイパーリンクを追加、編集、管理する方法を説明します。

リンクを追加または編集する手順

a) テキストをハイライトする

ハイパーリンクに変換するテキストを選択します。

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

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

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

リンクオプションを備えた右側の設定パネルが表示されます。

• リンクフィールド: URLを入力するか、あらかじめ定義されたオプションから選択します。
• タグ: 購読者にラベルを付けたり、自動化を開始したりするためのタグを追加します。

送信後のリンク修正

2,365人の購読者に新しいキャンペーンを送信した後、単純な入力ミスでリンクが1つ壊れていることに気づくほど、つらいことはありません。ブラックフライデーのセールも台無しです！

幸い、購読者にメールを送信した後でも、壊れたリンクを修正できるようになりました。

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

概要で送信済みキャンペーンを見つけ、3つの点をクリックして、キャンペーンを表示を選択します。

b) リンクまたはタグを変更する

キャンペーンの詳細にあるリンクリストまでスクロールし、次の操作を行います。

• リンク先を更新: 間違ったURLを修正します。
• タグを管理: 自動化用のタグを追加または削除します。

注: リンクの再ターゲティング機能を使用するには、キャンペーン設定でクリックトラッキングが有効になっていることを確認してください。

リンクの外観をカスタマイズする

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

• リンクの色: 色を選択するか、16進数コードを入力します。

• リンクに下線を付ける: 下線を有効または無効にして、よりすっきりした外観にします。

12. パーソナライズタグ

パーソナライズタグを使って、受信者の名やその他のカスタムフィールドなど、動的なコンテンツを追加します。

• ツールバーのパーソナライズタグドロップダウンにアクセスし、名、メールアドレス、国などの一般的なフィールドを選択するか、受信者ごとにメールを調整するカスタムフィールドを定義します。

13. 絵文字

絵文字を含めて、テキストに視覚的な魅力を加えます。

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

14. 表と特殊文字

ツールバーの最後にある3つの点をクリックすると、さらに高度なオプションが表示されます。

表の挿入

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

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

特殊文字の挿入

記号、アクセント付き文字、その他の標準外の文字を使ってテキストを補足します。

• 特殊文字オプションにアクセスし、幅広い文字を参照します。

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

右パネルでは、テキストブロックの外観と機能を細かく制御できます。利用できる設定は次のとおりです。

1. テキストの色

カラーピッカーを使うか、16進数コードを入力してテキストの色を指定します。

2. 背景色

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

3. リンク固有の設定

テキストブロックにリンクが含まれている場合、設定に追加オプションが表示されます。

• リンクの色: カラーピッカーまたは16進数コードを使ってリンクの色を調整します。

• リンクに下線を付ける: テキストブロック内のリンクについて、下線をオンまたはオフにします。

• リンクの編集: コンテンツ領域でリンクを選択すると、設定パネルでURLを編集できます。**「タグ」**と表示されたドロップダウンメニューを使って、リンクにタグを割り当てたり更新したりすることもできます。

4. 配置

コンテナー内でテキストブロックを左、中央、右に配置します。

5. 固定の高さ

このオプションを有効にして、テキストブロックに固定の高さを設定します。テキストの垂直方向の配置も、上、中央、下から選択できます。

6. 行間

テキスト行間のスペースを調整します。狭い、標準、広いから選択できます。

7. パディング

テキストブロック周囲のスペースを調整します。均一に適用することも、各辺（上、下、左、右）ごとにカスタマイズすることもできます。

8. アンカーリンク

アンカーリンクを作成して、読者がメール内の特定のセクションへ移動できるようにします。一部のメールクライアントではアンカーリンクがサポートされていない点に注意してください。

ボタンブロック

ボタンブロックでは、機能とスタイルをカスタマイズできるクリック可能なボタンをメールに追加できます。

リンク設定

リンクオプションでは、受信者がボタンをクリックしたときに実行される動作を指定します。

利用できるリンクの種類

• 通常のサイトリンク（HTTPまたはHTTPS）: ユーザーをWebページへ誘導します。
• メールリンク: ユーザーのメールクライアントを開き、新規メールの作成画面を表示します。
• ファイルリンク（FTP、FTPS）: FTPサーバー上のファイルへリンクします。
• Skype: Skype通話またはチャットを開始します。
• 電話（tel）: 対応デバイスで電話を開始します。
• SMS: 受信者番号が入力された状態でメッセージアプリを開きます。
• Viber: メッセージまたは通話のためにViberアプリを開きます。
• その他のプロトコルタイプ: 上記にないカスタムプロトコルを指定します。

ソーシャル共有オプション

ボタンをソーシャル共有またはメール共有用に設定することもできます。

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

URLフィールド

リンクの種類の横にあるURLフィールド（通常はhttps://で始まります）に、リンクの種類に対応する具体的なアドレスを入力します。

ボタンラベル

行動喚起を反映するようにボタンのラベルをカスタマイズします。デフォルトのラベルは**「ボタン」ですが、「詳しく見る」、「今すぐ登録」、「今すぐ購入」**などに変更できます。

テキストスタイル

テキストスタイル設定では、ボタンテキストの外観を調整できます。

フォントの選択

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

• 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. 背景色: ボタンのコンテナーの背景を調整します。デフォルトでは透明ですが、メールの背景に対してボタンを目立たせるために変更できます。

角丸

角丸設定を使って、ボタンの角の丸みを調整します。

• デフォルト値: 30（適度に丸い角）。
• 範囲: 0（四角い角）～100（カプセル型のボタン）。

注: Microsoft Outlookで角丸を正しく表示するには、外観タブの**「Outlookをサポート」**オプションを有効にしてください。

配置

配置設定を使って、コンテンツ領域内でボタンの位置を決めます。

• オプション: 左、中央、右。
• 一般的な用途: 強調する場合は中央揃え、デザインの一貫性を保つ場合は左揃えまたは右揃え。

固定の高さ

固定の高さオプションを有効にして、ボタンの寸法を一定に保ちます。

1. デフォルト: 無効。
2. 最小の高さ: 44ピクセル。
3. コンテンツの垂直方向の配置: 固定の高さを有効にすると、ボタンのコンテンツを正確に配置するため、上、中央、下から選択できます。

アイコン付きボタン

アイコン付きボタンオプションでは、ボタンテキストの横にアイコンを追加し、視覚的な魅力を高めて行動喚起を補強できます。この機能はデフォルトで無効です。

• 対応形式: 最大ファイルサイズ2MBのPNG、JPG、GIF形式のアイコンをアップロードできます。
• アイコンの位置: ボタンテキストの左または右にアイコンを表示するよう選択できます。

注: Windows版Microsoft Outlookの一部バージョンでは、アイコンが表示されません。対象は次のとおりです。

• Outlook 2002、2007、2010、2013、2016、2019。 メールクライアントによるHTMLメールの表示方法が原因の制限です。対象ユーザーの多くがこれらのクライアントを使用している場合は、この点を考慮してください。

枠線の設定

ボタンの枠線をカスタマイズして、スタイルと強調効果を加えます。

• 枠線の幅: 左、右、上、下の各辺を個別に、最大40ピクセルまで設定します。
• 枠線のスタイル: 実線、破線、点線から選択します。
• 枠線の色: カラーピッカーまたは16進数コードを使い、ブランドやデザインに合う枠線の色を指定します。

内側のパディング

コンテンツ（テキストとアイコン）とボタンの枠線の間にある、ボタン内部のスペースを調整します。

• カスタマイズオプション: 左、右、上、下の各辺のパディング値を、最大99ピクセルまで指定します。
• 影響: 内側のパディングは、ボタン全体のサイズと、ボタン内のコンテンツ位置に影響します。

外側のパディング

ボタンの外側のスペースを調整し、メールレイアウト内の他の要素に対する位置を調整します。

• カスタマイズオプション: 左、右、上、下の各辺の外側パディングを、最大40ピクセルまで設定します。
• 用途: ボタンが他のコンテンツやメールの端に近づきすぎないようにします。

アンカーリンクを追加

アンカーリンクを使って、同じメール内の特定のセクションへ読者を誘導できます。長いニュースレターでのすばやい移動に便利です。

• アンカー名: メール内の移動先を定義し、ボタンをこのアンカーにリンクします。クリックするとメールが指定したセクションまでスクロールし、ユーザーの移動が容易になります。

重要: 次のメールクライアントなどでは、アンカーリンクがサポートされていません。

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

メールを十分にテストし、さまざまなメールクライアントで機能することを確認して、この機能が対象ユーザーに適しているか判断してください。

スペーサーブロック

スペーサーブロックでは、メールコンテンツ内に調整可能なスペースを追加し、サイズ、配置、外観、内部の間隔を制御できます。ここでは、通常のスペーサーと動的スペーサーという2種類のスペーサーについて説明します。

1. 通常のスペーサー

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

主な設定

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

   • 太さ: +ボタンと-ボタンで調整します（初期値は1）。
   • スタイル: 実線、破線、点線から選択します。
   • 色: 16進数コードまたはカラーピッカーでカスタムカラーを設定します（デフォルト: #cccccc）。

2. 幅 スペーサーの線がコンテンツ内でどこまで広がるかを定義します。**+ボタンと-**ボタンで幅をピクセル単位で調整します。

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

4. パディング スペーサー周囲の内部間隔を調整します。

   • デフォルト: すべての辺のパディングは20に設定されています。
   • 詳細の切り替えを使って、各辺のパディングを指定します。
     • 上
     • 右
     • 下
     • 左

用途

通常のスペーサーは、メール内のセクション間をすっきりと視覚的に区切るのに適しており、整理されたプロフェッショナルなレイアウトを実現します。

2. 動的スペーサー

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

主な機能

1. 高さの調整 コンテンツ領域内で直接、またはコントロールパネルの**+ボタンと-**ボタンで高さを調整します。高さによって、セクション間に追加される垂直方向のスペースが決まります。

2. 背景色 デフォルトではスペーサーの背景は透明ですが、16進数コードまたはカラーピッカーを使ってカスタム背景色を適用できます。必要に応じて、スペーサーを表示されるブロックとして機能させることもできます。

3. レスポンシブ動作 レスポンシブスペーサーオプションにより、さまざまな画面サイズに合わせてスペーサーが動的に適応し、各デバイスで最適なレイアウトを実現します。この機能はデフォルトで有効です。

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

• 動的スペーサー: 表示される線なしで空白を追加します。
• 通常のスペーサー: 次のような線固有の設定があります。
  • 線の幅
  • 配置
  • 線のスタイル
  • パディング

動的スペーサーはこれらの機能をサポートしておらず、視覚的な要素を使わずに区切りを作ることだけを目的としています。

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

どちらのスペーサータイプにもアンカーリンクを設定でき、メール内の別の場所からスペーサーの位置へ直接移動できるようになります。長いニュースレターでメール内ナビゲーションを作成する場合に特に便利です。

注: 次のメールクライアントなどでは、アンカーリンクがサポートされていません。

• Microsoft Outlook
• Gmail（モバイル）

動画ブロック

動画ブロックでは、メールに動画を埋め込み、外観と動作をカスタマイズできます。YouTubeやVimeoなどのプラットフォームからの動画リンクに対応しており、動画の表示方法を柔軟に制御できます。

1. 動画へのリンク

動画へのリンクフィールドに動画URLを追加します。対応プラットフォームには、YouTube、Vimeo、その他の埋め込み可能なサービスがあります。

• 自動動作: 有効なURLを追加すると、次の処理が行われます。

  • プラットフォームの動画サムネイルを使ってプレビュー画像が自動生成されます。
  • 代替テキストフィールドに、動画のタイトルまたは説明（利用可能な場合）が自動入力されます。

• 編集可能なフィールド: 必要に応じて、生成されたプレビュー画像とテキストを手動で編集または置き換えられます。

2. 代替テキスト

代替テキストフィールドでは、動画が読み込めない場合に説明を表示し、アクセシビリティを確保します。

• 対応する動画URLを追加すると自動入力されます。
• コンテンツのニーズに合わせてカスタマイズできます。

3. カスタムサムネイル

デフォルトの動画プレビューを置き換えるカスタム画像をアップロードします。

• 有効にする方法: カスタムサムネイルオプションを切り替えます。
• 対応形式: PNG、JPG、GIF。
• 使用する場面: 生成されたサムネイルがメールのデザインに合わない場合に置き換えます。

4. 再生ボタン

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

• 利用できるオプション:
  • YouTube、Vimeo、その他の再生ボタンスタイルから選択します。
  • 「なし」を選択すると、再生ボタンを完全に非表示にできます。

5. サイズ

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

• 幅と高さ: **+ボタンと-**ボタンを使うか、値を手動で入力してサイズを調整します。
• レスポンシブデザイン: 動画がさまざまなデバイスで自然に収まるようにします。

6. 幅に合わせる

幅に合わせる切り替えを有効にすると、動画がコンテナーの幅に自動的に収まります。これにより、さまざまなデバイスで動画のレスポンシブデザインが維持されます。

7. レスポンシブ画像

レスポンシブ画像切り替えにより、モバイルデバイスで動画サムネイルが画面幅に合わせて調整されます。

• 注: レスポンシブ動作は、デバイスとメールクライアントのサポート状況に依存します。

8. 配置

配置設定を使って、ブロック内での動画の水平方向の位置を制御します。

• 左: 動画を左に配置します。
• 中央: 動画を中央に配置します。
• 右: 動画を右に配置します。

9. モバイル固有のオプション

モバイルデバイスでの動画の動作と外観をカスタマイズします。

1. モバイルで要素を非表示 必要に応じて、モバイルデバイスで動画ブロックを非表示にします。

   • 注: この機能はメディアクエリのサポートに依存するため、すべてのメールクライアントで機能するとは限りません。

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

   • 詳細の切り替えを使って、各辺のパディング値を設定します。
     • 上
     • 右
     • 下
     • 左

10. AMPHTMLまたはHTMLに含める

動画ブロックを特定のメールバージョンに表示するかどうかを選択します。

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

このオプションにより、配信されるメールのバージョンに応じて動画を適切に含められます。

HTMLブロック

HTMLブロックでは、カスタムHTMLおよびCSSコードをメールに挿入できます。メールクライアントとの互換性を保ちながら高度なカスタマイズを行える柔軟な機能です。単一のHTML要素を追加する場合でも、メール全体をデザインする場合でも、目的に合わせたデザインを作成できます。

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. パディング

パディング設定では、HTMLコンテンツ周囲のスペースを調整します。

• デフォルトのパディング: デフォルトでは0に設定されています。
• カスタムパディング: 詳細の切り替えを有効にして、各辺のパディングを調整します。
  • 上
  • 右
  • 下
  • 左

この機能は、メールレイアウト内でHTMLコンテンツを配置するのに適しています。

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

アンカーリンクを追加機能では、メール内の別の場所に、HTMLブロックへ移動するクリック可能なリンクを作成できます。

使用方法:

• オプションを切り替え、フィールドにアンカー名を入力します。

制限事項:

• 次のメールクライアントなどでは、アンカーリンクがサポートされていません。
  • iOS Gmailアプリ
  • iOS Apple Mail
  • Outlookアプリ（AndroidおよびmacOS）
  • AMPメール

8. カスタムHTMLの記述

HTMLエディターは、メールのカスタムHTML構造を記述または貼り付けるために設計されています。

ベストプラクティス:

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

9. 成功のためのヒント

1. 小さく始める: メール開発が初めての場合は、HTMLブロックを特定のセクションに使用します。
2. コードを検証する: HTMLがメールクライアントの要件に準拠していることを確認します。
3. 十分にテストする: ツールを使って、複数のクライアントとデバイスでメールをプレビューおよびテストします。