ドキュメントCampaignCampaign Standard ドキュメント

既存のコンテンツを使用したデザイン

最終更新日: 2025年1月29日
  • 適用対象:
  • Campaign Standard
  • トピック:
  • 電子メールのデザイン

作成対象:

  • 中級
  • ユーザー

既存のコンテンツの選択

Adobe Campaignには、利用を開始するのに役立つ、事前定義済みの一連のコンテンツが付属しています。 これらのいずれかを使用できます。または、送信する必要があるメッセージのコンテンツがAdobe Campaign以外で準備されている場合は、コンピューターまたは URL から読み込むことができます。

メールまたはランディングページの作成時に、別のソースから既存のコンテンツを読み込むように選択できます。

メモ
以下の画像は、 メールDesigner を使用して既存のコンテンツを読み込む方法を示しています。
  1. メールまたはランディングページを作成したら、そのコンテンツを開きます。

  2. ホームアイコンをクリックして、Email Designer のホームページにアクセスします。

  3. 読み込むコンテンツのソースを選択します。

    • コンテンツテンプレート:「コンテン Templates」タブをクリックします。
    • コンテンツをゼロから、新規に開始するには、「Create 開」ボタンをクリックします。
    • ZIP ファイルまたはHTMLファイルとしてコンピューターからコンテンツを取得:「Upload」ボタンをクリックします。
    • 既存の URL のコンテンツ(メールの場合のみ):「Import from URL 信」ボタンをクリックします。

  4. コンテンツを読み込みます。 選択したコンテンツが現在のコンテンツを置き換えます。

    インポートすると、コンテンツを編集してパーソナライズできます。

    メモ
    電子メールDesigner では、特定のタグ付けを使用します。 Campaign にアップロードされる標準HTMLコンテンツは、電子メールDesignerから完全に互換性を持ち編集可能にするために、期待されるタグと一致する必要があります。 一致しない場合、コンテンツは 互換性モードでアップロードされます。 既存のコンテンツに互換性を持たせるには、 この節を参照してください。

関連トピック:

  • メールの作成
  • ランディングページの管理

メールDesignerを使用した既存のコンテンツの編集

メールDesigner の編集機能を最大限に活用するには、アップロードするHTMLに、WYSIWYG エディターに準拠するための特定のタグが含まれている必要があります。

HTMLのすべてまたは一部にこのタグ付けがない場合、コンテンツは「 互換モード」で読み込まれます。

既存の外部コンテンツをメールDesigner内で完全に編集可能にするには、 既存のコンテンツを使用したメールのデザインの節を参照してください。

既存のメールコンテンツの読み込み

ファイルからのコンテンツの読み込み

メールDesignerのホームページで、「Upload」ボタンをクリックしてコンピューターからファイルをアップロードし、確認します。

zip ファイル構造に制約はありません。 ただし、HTMLファイルの参照は相対パスにする必要があり、zip フォルダーのツリー構造に従う必要があります。

読み込みでは、次の形式がサポートされています。

  • スタイルシートが組み込まれたHTMLファイル
  • HTMLファイル、スタイルシート(.CSS)、画像を含んだ.zip フォルダー
メモ
メールコンテンツの場合は、スタイルシートが組み込まれたシングルHTMLファイルを読み込むことをお勧めします。

URL からのコンテンツの読み込み

URL からコンテンツを読み込む前に、以下の要件に従っていることを確認してください。

  • コンテンツは、この URL を通じて公開する必要があります。

  • セキュリティ上の理由から、https で始まる URL のみを使用できます。

  • すべてのリソース(画像、CSS)が絶対リンクと HTTPS で設定されていることを確認します。 そうでない場合は、メールを送信した後、リソースのないミラーページが表示されます。 絶対リンク定義の例を次に示します。

    <a href="https://www.mywebsite.com/images/myimage.png">
    
NOTE
URL からのコンテンツの読み込みは、メールチャネルでのみ使用できます。

URL から既存のコンテンツを取得するには、次の手順に従います。

  1. メールDesignerのホームページで、「Import from URL」ボタンを選択します。

  2. コンテンツの取得元となる URL を定義します。

  3. 「Confirm」をクリックします。

ビデオでこの機能を確認します。

video poster

https://video.tv.adobe.com/v/25926?quality=12

その他のCampaign Standardチュートリアルビデオについては、 こちらを参照してください。

準備時に URL からコンテンツを自動的に取得

メッセージの準備中に URL からコンテンツを読み込むと、メールを準備するたびに最新のHTMLコンテンツを取得できます。 これにより、繰り返しメールのコンテンツは常に最新の送信時のコンテンツになります。 また、この機能を使用すると、コンテンツの準備がまだ整っていない場合でも、特定の日付にスケジュールされたメッセージを作成できます。

準備時にコンテンツを取得するには、次の手順に従います。

  1. Content imported during preparation オプションを選択します。

  2. URL コンテンツは、エディターに読み取り専用として表示されます。

    CAUTION
    この段階では、コンテンツエディターでのHTML表示は考慮しないでください。 準備段階で取得されます。
  3. 取得した URL コンテンツをプレビューするには、メッセージの作成後にメッセージを開き、「Preview」ボタンをクリックします。

コンテンツの取得元となるリモート URL をパーソナライズできます。 これを行うには、次の手順に従います。

  1. 画面上部のメールラベルをクリックして、「メールDesigner Properties」タブにアクセスします。

  2. 「Remote URL」フィールドを検索します。

  3. 目的のパーソナライゼーションフィールド、コンテンツブロック、動的テキストを挿入します。

    例えば、Current date - YYYYMMDD コンテンツブロックを使用すると、日付を挿入できます。

    NOTE
    使用可能なパーソナライゼーションフィールドは、配信 属性(メール作成日、ステータス、キャンペーンラベルなど)にのみリンクされています。

1 回目にコンテンツのダウンロードに失敗した場合は、2 回再試行できます。

  1. 2 回目の試行は、1 回目の試行から 50 ミリ秒後に開始されます。
  2. 3 回目のトライは、2 回目のトライから 100 ミリ秒後に開始されます。

これらの再試行は、次の場合に役立ちます。

  • 遠隔サーバーでの短時間のサービス障害
  • クラスターでのサーバー障害。この場合、動作中のサーバーへのロードバランシングによって再試行が成功する可能性が高くなります。

互換モード

コンテンツをアップロードする場合、電子メールDesignerのWYSIWYG エディターに完全に準拠し編集可能にするには、特定のタグが含まれている必要があります。

アップロードされたHTMLの全部または一部が期待されるタグ付けに準拠していない場合、コンテンツは「互換モード」で読み込まれ、UI を使用した編集の可能性が制限されます。

コンテンツが互換性モードで読み込まれた場合でも、インターフェイスを通じて次の変更を実行できます(使用できないアクションは非表示になります)。

  • テキストの変更または画像の変更
  • リンクとパーソナライゼーションフィールドの挿入
  • 選択したHTMLブロックのスタイルオプションを編集します
  • 条件付きコンテンツの定義

メールに新しいセクションを追加したり、高度なスタイルを設定したりするなどの他の変更は、HTMLモードを使用して、メールのソースコードで直接行う必要があります。

既存のメールをメールDesigner互換のメールに変換する方法については、 この節を参照してください。

関連トピック:

  • メールの作成
  • メールDesignerの概要ビデオ
  • メールコンテンツのゼロからのデザイン

HTMLコンテンツの変換

複数のメールで再利用できるように組み合わせることができるモジュール型テンプレートおよびフラグメントのフレームワークを構築する場合は、メールテンプレートをメールDesignerHTMLに変換することを検討する必要があります。

このユースケースは、HTMLメールをメールDesignerコンポーネントに簡単に変換する方法を提供します。

CAUTION
この節は、HTMLコードに精通した上級ユーザーを対象としています。
NOTE
互換モードと同様に、HTMLコンポーネントも編集可能で、オプションは限られています。つまり、インプレース編集のみを実行できます。

メールDesignerの外部で、元のHTMLが再利用可能なセクションに分割されていることを確認します。

そうでない場合は、HTMLから別のブロックを切り取ります。 例:

<!-- 3 COLUMN w/CTA (SCALED) -->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width:680px;">
<tbody>
<tr>
<td class="padh10" align="center" valign="top" style="padding:0 5px 20px 5px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- //3 COLUMN w/CTA (SCALED) -->

メールDesignerで、すべてのブロックを識別したら、既存のメールの各セクションに対して次の手順を繰り返します。

  1. メールDesignerを開いて、空のメールコンテンツを作成します。

  2. 背景色や幅など、本文レベルの属性を設定します。 詳しくは、メールスタイルの編集を参照してください。

  3. 構造コンポーネントを追加します。 詳しくは、メール構造の編集を参照してください。

  4. HTMLコンポーネントを追加します。 詳しくは、フラグメントとコンポーネントの追加を参照してください。

  5. HTMLした内容を、そのコンポーネントにコピー&ペーストします。

  6. モバイル表示に切り替えます。 詳しくは、この節を参照してください。

    CSS がないので、レスポンシブビューが壊れます。

  7. これを修正するには、ソースコードモードに切り替えて、「スタイル」セクションをコピーして新しい「スタイル」セクションに貼り付けます。 例:

    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    NOTE
    この後に、必ず別のカスタムスタイルタグでスタイルを追加してください。
    メールDesignerで生成された CSS を変更しないでください。
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  8. モバイルビューに戻ってコンテンツが正しく表示されていることを確認し、変更を保存します。

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff