ドキュメントAEMAEM Assets チュートリアル

Dynamic Media テンプレート dynamic-media-templates

最終更新日： 2026年9月10日
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • Beginner
  • Intermediate
  • User

WYSIWYG テンプレートエディターである Dynamic Media テンプレートを使用して、リアルタイムでカスタマイズ可能なバナーやチラシ用テンプレートを作成します。 Dynamic Media テンプレートを公開し、ダウンストリームアプリケーションで使用します。 Dynamic Media テンプレートには、画像、テキスト、シェイプ、およびカウントダウンタイマーレイヤーが含まれます。 テンプレートの画像、テキスト、シェイプ、カウントダウンタイマーレイヤーにパラメーターを追加し、Dynamic Media URLを使用してレイヤーの位置とサイズを変更し、リアルタイムでコンテンツを更新します。

https://video.tv.adobe.com/v/3451728/?captions=jpn&learn=on&enablevpops
https://video.tv.adobe.com/vc/3451728/jpn.json

主な機能は次のとおりです。

  • Dynamic MediaWYSIWYG テンプレート エディター：​画像、テキスト、シェイプ、およびカウントダウン タイマーのレイヤーを使用して、カスタマイズ可能なバナーを作成します。

  • レイヤーのパラメーター化：​レイヤーの動的なキーと値のペアを定義して、リアルタイム更新を実現します。

  • Dynamic MediaURL サポート： テンプレートにはDynamic Media URLを使用し、AdobeおよびAdobe以外のアプリケーションからパーソナライズされた値を統合します。

  • レイヤー表示コントロール：​必要に応じて、レイヤーを動的に非表示または表示します。

  • スマートテキストのサイズ変更：​指定された領域に合わせて、テキストのサイズを自動的に調整します。

  • カウントダウンタイマーレイヤー： カウントダウンタイマーをテンプレートに追加し、終了時間、表示単位（日、時間、分）、サフィックス、フォールバックテキスト、CTAを設定します。

Dynamic Media テンプレートの主なメリットには、次のようなものがあります。

  • 1対1の最適化Personalization: リアルタイムの顧客シグナルに合わせてコンテンツをカスタマイズします。
  • 手作業を削減：​コンテンツの作成と管理を自動化および高速化します。
  • 一貫したオムニチャネルエクスペリエンスを確保：​チャネル全体でブランドの一貫性を維持します。
  • コンテンツを効果的に再利用： 1 回使用のコンテンツを避け、動的なパラメーター化されたテンプレートを使用して拡大します。
  • リスクを軽減：​価格、割引、リンクをリアルタイムで更新します。
  • 顧客エンゲージメントを強化：​インタラクティブでコンテキストに関連のあるエクスペリエンスを推進します。
NOTE
セキュリティの強化の SKU を購読しているお客様は、そのクラウドサービスプログラムで Dynamic Media テンプレートを含む Dynamic Media 機能を使用できません。

Dynamic Media テンプレートを作成する手順については、このビデオを参照してください。

https://video.tv.adobe.com/v/3443281?learn=on
https://video.tv.adobe.com/vc/3443281/jpn.json

事前準備 prerequisites-for-dynamic-media-wysiwyg-template

Dynamic Media テンプレートを作成し、その配信 URL を生成するには、次の要件を満たします。

  1. Dynamic Media にアクセスします。

  2. Assets View ホームページには、Dynamic Media アセット​にテンプレートを保存するためのフォルダーがあります。 アセット アセット​​にフォルダーを作成して、そのフォルダーを​ ​ Dynamic Media アセット​ ​にレプリケートします。

  3. ​ AEM Assets インスタンスで使用可能な画像を Dynamic Media と同期して、テンプレートの作成に使用します。

  4. テンプレートの作成時に使用する画像を公開し、テンプレートの作成後にテンプレートの配信 URL を生成します。 配信 URL は、ダウンストリームアプリケーションで使用できます。

  5. テンプレートのテキストレイヤーでデフォルトの Adobe Sans F2 フォント以外のフォントを使用するには、フォントファイルを AEM および Dynamic Media に同時にアップロードして公開します。 サポートされているフォントファイル形式は、AFM、OTF、PFB、PFM、PhotoFont、TTC、TTF です。 また、既存のフォントを使用するには、再処理する必要があります。 詳しくは、フォントを参照してください。

  6. タッチ UI で次の内容を確認します。

    • Dynamic Media 設定を編集ページ​で、デフォルトで無効​に設定されている Dynamic Media同期モード​は、すべての AEM フォルダーに適用されません（「すべてのコンテンツを同期」がオフになっています）。 詳しくは、Dynamic Media Cloud Service の設定を参照してください。
    • 作成後にテンプレートを保存する宛先フォルダーまたはサブフォルダーの Dynamic Media同期モード​が​ サブフォルダーに対して有効にする ​に設定されています。 詳しくは、​ Dynamic Media Cloud Service の設定を参照してください。

Dynamic Media テンプレートの作成 how-to-create-dynamic-media-template

Dynamic Media テンプレートを作成するには、次の手順を実行します。

  1. 空のキャンバスを作成
  2. キャンバスに画像を追加
  3. キャンバスにテキストレイヤーを追加
  4. キャンバスにシェイプを追加
  5. カンバスにカウントダウンタイマーを追加
  6. レイヤーを編集または削除
  7. レイヤーをパラメーター化

空のキャンバスを作成 create-a-canvas

空のキャンバスを作成するには、次の手順を実行します。

  1. Assets View に移動し、左側のパネルで使用可能な Dynamic Media アセット​を選択してフォルダーに移動し、そのフォルダーにテンプレートを保存します。

    Dynamic Media テンプレート

  2. 「テンプレートを作成」を選択します。 新規テンプレート​ダイアログボックスが表示されます。

    リアルタイムでカスタマイズできる動的テンプレートの作成方法

    note
    NOTE
    テンプレートは、作成した場所に保存されます。 Assets View ホームページで、「Dynamic Media アセット」を選択し、「テンプレートを作成」をクリックして、テンプレートを Dynamic Media アセット​ルートフォルダーに保存します。

  3. テンプレート名を指定し、キャンバスの幅と高さを定義して、「作成」をクリックします。 空白のキャンバスが表示され、テンプレートの作成に使用するメニューオプションが両側に表示されます。 メニューオプションにポインタを合わせると、ツールチップが表示されます。
    リアルタイムのカスタマイズ可能なテンプレート

    note
    NOTE
    許容される幅と高さの範囲は 50～5000 です。

右側のパネルのメニューオプション：​これらのオプションを使用して、必要な画像とテキストレイヤーをキャンバスに追加します。

  • DM テンプレート ：クリックして、画像をキャンバスに追加します。
  • カスタマイズ可能なテンプレート ：クリックして、テキストをキャンバスに追加します。
  • ​ カスタマイズ可能なテンプレート ​ ：クリックすると、キャンバス上のすべてのレイヤー（画像、テキスト、シェイプ、カウントダウンタイマー）のリストが表示されます。 カンバスに追加されたすべてのレイヤーは、個別のレイヤーとして表されます。
  • ​ カウントダウンタイマーを追加 : クリックして、カンバスにカウントダウンタイマーレイヤーを追加します。

左側のパネルのメニューオプション：​次の一般的なエディターアクションには、これらのオプションを使用します。

  • DM テンプレート ：「 DM テンプレート 」を選択し、キャンバス上のレイヤーをクリックして選択します。
  • カスタマイズをサポートするテンプレート ：「 カスタマイズをサポートするテンプレート 」をクリックするか、キーボードショートカットの Ctrl + ] キー（Windows）または Cmd + ] キー（Mac）を使用して、選択したレイヤーを前面に移動します。
  • 簡単にカスタマイズできるテンプレートを作成する方法 ：「 簡単にカスタマイズできるテンプレートを作成する方法 」をクリックするか、キーボードショートカットの Ctrl + [ キー（Windows）または Cmd + [ キー（Mac）を使用して、選択したレイヤーを後面に移動します。
  • すぐにカスタマイズできるテンプレートを作成 ：「 すぐにカスタマイズできるテンプレートを作成 」をクリックするか、キーボードショートカットの Ctrl + Z キー（Windows）または Cmd + Z キー（Mac）を使用して、最後のアクションを取り消します。
  • バナーをすばやく作成するテンプレート ：「 バナーをすばやく作成するテンプレート 」をクリックするか、キーボードショートカットの Ctrl + Y キー（Windows）または Cmd + Y キー（Mac）を使用して、最後のアクションをやり直します。
  • チラシをすばやく作成するテンプレート ：「 チラシをすばやく作成するテンプレート 」をクリックするか、キーボードショートカットの Ctrl + + キー（Windows）または Cmd + + キー（Mac）を使用して、キャンバスをズームインします。
  • バナーをすばやく作成するテンプレート ：「 バナーをすばやく作成するテンプレート 」をクリックするか、キーボードショートカットの Ctrl + - キー（Windows）または Cmd + - キー（Mac）を使用して、キャンバスをズームアウトします。
  • テキストやプロパティが編集されていない場合は、Backspace キーまたは Delete キーを押すと、選択したレイヤーが削除されます。

​ テンプレートをクリックしてチラシをすばやく作成 し、キャンバスレイヤーで他のオプション（ ）を選択して、テンプレートの作成中にいつでもキャンバスディメンションを編集できます。

NOTE
テンプレートでは、カンバスを含む最大60のレイヤーを使用できます。

キャンバスに画像を追加 add-images-to-the-canvas

キャンバスに画像を追加するには、次の手順を実行します。

  1. 「 バナーをすぐに作成 」をクリックして、アセットセレクターパネルを開きます。 パネルには、Dynamic Media に同期される AEM Assets インスタンス内の画像が表示されます。
  2. パネルを参照するか、検索バーでキーワードを使用して、特定の画像を見つけます。
  3. 画像をキャンバス上にドラッグ＆ドロップして使用します。 キャンバス上のレイヤーのサイズ変更や再配置について詳しくは、プロパティパネルを参照してください。
    数秒以内にバナーを作成
  4. 均一半径​切替スイッチを有効にし、角丸の半径​スライダーを使用して、画像の 4 つの角すべての丸みを均一に調整します。 切替スイッチを無効にすると、各角に特定の半径値を割り当てることで、角の丸みをカスタマイズできます。
    画像の角の丸みを調整

レイヤーに合わせて画像を伸縮する

レイヤーのサイズに合わせて画像を伸縮できます。

  1. キャンバス上の画像レイヤーを選択し、プロパティパネルの「フィット」セクションを展開します。

  2. 画像​ に合わせて ​伸縮を有効にします。

    画像に合わせて伸縮トグル ​

    インタラクティブなサイズ変更ハンドルがカンバスに表示されます。

  3. インタラクティブなサイズ変更ハンドルを使用して、画像のサイズを変更します。

  4. 「切り抜きを承認」をクリックして、新しい幅と高さを適用し、画像を再レンダリングして、サイズ変更された領域を塗りつぶします。

  5. 「切り抜きをキャンセル」をクリックして、変更を破棄します。

    切り抜きを承認して切り抜きボタンをキャンセル ​

  6. または、プロパティパネルで正確な​ 伸縮幅 ​と​ 伸縮高 ​の値を指定します。

変更を受け入れると、指定した幅と高さを使用してレイヤーの寸法を塗りつぶすために、画像が再レンダリングされます。

画像に合わせて伸縮​を無効にすると、画像は伸縮修飾子を使用せずに再レンダリングされ、元の縦横比が復元されます。 画像は最後に保存された​ 伸縮高 ​に拡大・縮小され、幅は画像の自然な縦横比に合わせて調整されます。

配信URLに合わせて伸縮を使用

配信URLを使用してテンプレートが要求されると、画像レイヤーに設定された​画像の伸縮率、伸縮幅、伸縮高さ​の設定に従って画像がレンダリングされます。

配信URLは、他のDynamic Media テンプレート配信URLと同じように使用できます。

キャンバスにテキストレイヤーを追加 add-text-to-the-canvas

キャンバスにテキストレイヤーを追加するには、次の手順を実行します。

  1. 新しいバナーを素早く作成 をクリックしてテキストレイヤーをキャンバスに追加し、プロパティパネルを開きます。
  2. レイヤーを選択し、テキストをクリックして更新します。
  3. プロパティパネルで「スマートテキストのサイズ変更」を選択すると、テキストの長さとフォントサイズが自動的に調整され、指定された領域に最適に収まります。
NOTE
デザインキャンバス、プレビュー出力、配信出力では、コンテンツのレンダリング方法の違いにより、テキストの位置やサイズが若干異なる場合があります。

カスタマイズ可能な最適なバナー

レイヤーの再配置、サイズ変更、回転または削除について詳しくは、プロパティパネルを参照してください。 パネルの「テキスト」セクションの下にある各フィールドの値を変更して、テキストを必須のフォント、サイズ、カラー、スタイル、位置（レイヤー内）に書式設定します。 「フォントファミリー」フィールドには、Adobe Sans F2 のデフォルトフォント、再処理した既存のフォント、新しくアップロードおよび公開したフォントが表示されます。 詳しくは、上記の開始する前にの節のポイント 5 を参照してください。

​ テキストの特定の部分を書式設定およびそれらをパラメータ化して個別に制御。

選択テキストの書式設定 apply-formatting-to-substring

文字列の特定の部分をフォーマットするには、次の手順を実行します。

  1. 書式設定する文字列内の1つ以上の文字を選択します。

  2. ​ プロパティパネル ​を使用して選択範囲を書式設定します。 サブストリングとそのパーツには、次の書式設定オプションが適用されます。

    • フォントスタイル: フォントスタイル オプションを使用した、太字、斜体、下線、下付き、上付き文字。
    • フォントプロパティ：それぞれのパネルオプションを使用して、フォントファミリー、色、サイズ、行間を変更します。
      format-substring
NOTE
複数行のテキストレイヤーに異なるフォントサイズのサブストリングが含まれており、カスタム行間が適用されている場合、プレビュー出力または配信出力がカンバスビューと完全に一致しない場合があります。 場合によっては、生成された出力に行間の間隔が狭くなることがあります。

書式設定された各文字列部分は、パラメーターパネルで使用できる部分文字列セレクターに部分文字列として表示されます。 ​ テンプレートの配信URLを使用して、これらの書式設定された部分にパラメーターを追加して動的に書式設定します。

キャンバスにシェイプを追加 add-shapes-to-the-canvas

キャンバスにシェイプを追加するには、次の手順を実行します。

  1. 「 シェイプの作成 」をクリックし、シェイプ（長方形または円）を選択してキャンバスに追加します。 シェイプのプロパティパネルを使用して、レイヤーの再配置、サイズ変更、回転または削除を行います。
  2. パネルの「スタイル」セクションまでスクロールし、「シェイプカラー」フィールドで 16 進コードを定義するか、カラーピッカーを使用して選択したシェイプのカラーを塗りつぶします。
  3. 「均一な半径」切替スイッチを有効にし、コーナー半径 スライダーを使用して、長方形のすべての4つの角の丸みを均一に調整します。 切替スイッチを無効にすると、各角に特定の半径値を割り当てることで、角の丸みをカスタマイズできます。
    シェイプの角の丸みを調整
  4. 選択したレイヤーに​ 非表示 ​パラメーターを追加すると、テンプレート URL を使用してテンプレート内のレイヤーをリアルタイムで表示または非表示にすることができます。
  5. レイヤーを選択して CTA リンクを追加すると、ユーザーはライブテンプレート内のハイパーリンクとしてシェイプをクリックできます。

カンバスにカウントダウンタイマーを追加 add-countdown-timer-to-the-canvas

カンバスにカウントダウンタイマーレイヤーを追加するには、次の手順を実行します。

  1. 「 ​ カウントダウンタイマーを追加 」をクリックして、カンバスにカウントダウンタイマーレイヤーを追加します。 カウントダウンタイマーレイヤーが追加され、プロパティ パネルが自動的に開きます。

  2. カウントダウンタイマーレイヤーを選択して、そのプロパティを設定します。

  3. 「位置」セクションを使用して、カウントダウンタイマーレイヤーの位置を変更、サイズ変更、回転、または非表示にします。

  4. 「テキスト」セクションを使用して、フォントファミリー、フォントサイズ、テキストカラー、整列、不透明度、回転などのカウントダウンタイマーテキストの外観を設定します。

  5. Timer セクションまでスクロールし、終了時間の指定、時間単位の有効化または無効化、サフィックステキストの定義、フォールバックテキストの指定など、カウントダウンタイマーの設定を行います。

  6. 「CTA」セクションを使用して、宛先URLを指定し、カウントダウンタイマーレイヤーをクリック可能にします。

    ​ カウントダウンタイマーレイヤーのプロパティ ​

カウントダウンタイマーレイヤーの位置を変更、サイズ変更、回転、削除、またはパラメーター化するには、[プロパティパネル]を参照してください。

NOTE
カウントダウンタイマーレイヤーは現在、Beta環境でのみ使用できます。 この機能は、一部の環境では利用できない場合があります。

レイヤーを編集または削除 edit-or-delete-a-layer

キャンバスレイヤーを編集または削除するには、次の手順を実行します。

  1. 「 動的更新をサポートするテンプレート 」をクリックして、キャンバスまたはレイヤーリストからレイヤーを選択します。
  2. 「その他のオプション」（ リアルタイムの更新をサポートするテンプレート ）をクリックして、レイヤーを編集または削除します。
  3. 「削除」をクリックして、レイヤーを削除します。
  4. 「編集」をクリックして、プロパティパネルを使用してレイヤーを編集します。
    迅速なバナー作成

プロパティパネル properties-panel

プロパティパネルには、レイヤーの再配置、サイズ変更、回転を行うセクションが含まれています。 また、​ シェイプレイヤーのカラー塗りつぶしオプション、​ テキストレイヤーの​ テキスト書式設定オプション ​、​ カウントダウンタイマーレイヤーのカウントダウンタイマーコンフィギュレーションオプション、選択したレイヤーにCTA リンク ​を追加するオプションも用意されています。

レイヤーのプロパティパネルに移動するには、「 迅速なコンテンツ作成 」をクリックし、リストからレイヤーを選択して、そのプロパティパネルを表示します。

迅速なコンテンツ作成

レイヤーのプロパティパネルからキャンバス上の別のレイヤーを選択して、そのプロパティパネルに移動します。

レイヤーの再配置、サイズ変更、回転または削除 reposition-resize-delete-a-layer

画像、テキスト、シェイプ、またはカウントダウンタイマーレイヤーを編集するには、次の一般的なレイヤー編集アクションを参照してください。

  • レイヤーを再配置：​レイヤーをドラッグして、キャンバス上の任意の場所に移動します。 このアクションにより、プロパティパネルの X 値と Y 値が更新されます。 X と Y は、キャンバスプレーン上のレイヤーの中心の座標です。
  • レイヤーをサイズ変更：​レイヤーを選択し、エッジハンドルをドラッグしてサイズ変更します。 このアクションにより、プロパティパネルの W（幅）値と H（高さ）値が更新されます。
  • レイヤーを回転：​レイヤーの上に垂直に配置された正方形のハンドルをドラッグして、レイヤーを中心に回転させます。 このアクションにより、プロパティパネルの角度値が更新されます。
  • レイヤーを削除：Backspace キーまたは Delete キーを押し、「確認」をクリックして、選択したレイヤーを削除します。

テキストの書式設定オプション text-formatting-options-on-properties-panel

パネルの「テキスト」セクションの下にある各フィールドの値を変更して、テキストを必須のフォント、サイズ、カラー、スタイル、位置（レイヤー内）に書式設定します。
スマートテキストのサイズ変更​を含めます。 ​ スマートテキストのサイズ変更は、​ コピーフィッティング ​ アルゴリズムで動作し、テキスト領域にテキストを最適に入力し、テキストのオーバーフローを防ぎ、テキストの下部の余分なスペースを最小限に抑えます。

すぐにコンテンツを作成

カウントダウンタイマープロパティ countdown-timer-properties

​ プロパティ ​ パネルの​タイマー セクションを使用して、カウントダウンタイマー設定を構成します。 これらの設定は、カウントダウンタイマーの表示、有効期限の動作、およびオプションのハイパーリンク機能を制御します。

次のオプションを使用します。

  • 日、時間、分 - カウントダウンタイマーに表示される値を制御するために、特定の時間単位を有効または無効にします。 有効にすると、選択した単位がカウントダウンタイマーに表示されます。

  • 接尾辞 – 有効な時間単位ごとに表示される追加のテキストを指定します。 例えば、「d」、「h」、「m」などの接尾辞の値や、「:」などの区切り記号を使用して、表示形式をカスタマイズできます。

  • 終了時間（エポック） - カウントダウンタイマーの正確な有効期限と時刻を指定します。 カウントダウンは動的に更新され、指定された終了時間までの残り時間が表示されます。

  • 代替テキスト - カウントダウンタイマーが有効期限に達した後に表示されるテキストを指定します。 例えば、「Time’s up!」などのメッセージを表示できます。 または「オファーが期限切れ」です。

カウントダウンタイマーレイヤーをクリックできるようにするには、CTA セクションを使用して、リンク先URLを指定します。

レイヤーをパラメーター化 parameterise-a-layer

画像、テキスト、シェイプ、カウントダウンタイマーの複数のレイヤーを含むテンプレートを作成した後、選択したレイヤーをパラメータ化します。 レイヤーまたはそのプロパティをパラメーター化すると、キーと値のペア（パラメーターとも呼ばれる）が取得されます。 このパラメーターをテンプレートの URL に含めると、レイヤーの位置、サイズまたはコンテンツをリアルタイムで更新できるので、テンプレートのカスタマイズをすぐに行うことができます。

レイヤーをパラメーター化するには：

  1. 「 即時コンテンツ作成 」をクリックし、レイヤーを選択して「パラメーター」をクリックします。 パラメーター​パネルが表示されます。
  2. パラメーターを含める​を切り替えて、プロパティをパラメーター化します。 パラメーター化後のプロパティの動作について詳しくは、パラメーターパネルオプションを参照してください。
  3. オプション：​パラメーター名を変更します。 パラメーター名には、レイヤー名の後に接尾辞が続きます。 選択したレイヤーでは、そのすべてのパラメーター化されたプロパティは同じレイヤー名を共有し、その後に様々な接尾辞が続きます。 セマンティックの命名規則に従ってレイヤー名を変更すると、URL にパラメーターを含める際に、パラメーター名自体がレイヤーのコンテンツや目的についての説明となります。
  4. 「保存」をクリックします。
    即時コンテンツ制作
    画像とテキストレイヤーのパラメーターパネルを切り替えるには、キャンバス上でレイヤーを選択し、「パラメーター」をクリックします。

パラメーターパネルオプション parameterisation-options-or-allowed-parameters

パラメーター化されたプロパティをテンプレートの URL に URL パラメーターとして含めることで、URL を使用してテンプレートをリアルタイムで編集できます。

レイヤーパラメーター layer-parameters

以下は、画像レイヤーとテキストレイヤーの両方に適用されるレイヤーパラメーターです。

X：​URL のパラメーターの値を変更して、テンプレートプレーンの X 軸に平行な中心線に沿ってレイヤーを水平方向に移動する場合に含めます。
Y：​URL のパラメーターの値を変更して、テンプレートプレーンの Y 軸に平行な中心線に沿ってレイヤーを垂直方向に移動する場合に含めます。
幅：​URL のパラメーターの値を変更して、レイヤーの幅を調整する場合に含めます。
高さ：​URL のパラメーターの値を変更して、レイヤーの高さを調整する場合に含めます。
非表示: 0 （表示）と1 （非表示）を使用して、テンプレート内のレイヤーを非表示または表示します。

画像パラメーター image-parameter

Source パラメーターを含めて、URLのパラメーターの値の画像パスを変更して、レイヤーの画像を新しい画像に置き換えます。
画像ソースパラメーター

テキスト書式設定パラメーター text-formatting-parameters

次のパラメーターを含めて、URLのパラメーター値を更新して、配信URLからテキスト、フォント、カラー、サイズを編集します。

テキスト：​URL からテキストを更新する場合に含めます。
フォントファミリー：​URL からテキストのフォントを更新する場合に含めます。
フォントサイズ：​URL からテキストのフォントサイズを更新する場合に含めます。
テキストカラー： URL からテキストのフォントカラーを更新する場合に含めます。

カウントダウンタイマーパラメーター countdown-timer-parameters

カウントダウンタイマーレイヤーの場合、次のパラメーターを含めて、URLを介してタイマーを動的に更新できます。

  • 終了時間: カウントダウンの終了時間を設定する場合に含めます。 Unixのエポックタイムスタンプまたは事前定義済みの日時形式をパラメーター値として使用します。

  • 代替テキスト: カウントダウンが終了した後にテキストを表示する場合に含めます（例：「時間が経過しました！」）。

  • オプションのタイマーパラメーター:

    • countdown_show_days、countdown_show_hours、countdown_show_mins – 特定の時間単位を表示または非表示にするには、1/0を設定します。
    • countdown_cta - カウントダウン完了後にリダイレクトするオプションのCTA リンク。
      ​ タイマーソースパラメーター

これらのパラメーターを使用すると、テンプレート URLから直接カウントダウンタイマーをリアルタイムで更新できます。

部分文字列のパラメータ化 substring-parameterisation

パラメーター パネルで、部分文字列パラメーター セクションまでスクロールします。 このセクションには、部分文字列セレクター​が含まれており、一貫した書式設定を持つ完全な文字列（選択したテキストレイヤー）または書式設定された部分を別々の部分文字列として表示します。 テキスト、フォントファミリー、フォントサイズ、カラーを​ パラメーター化する部分文字列を選択します。
部分文字列セレクターを使用して、部分文字列を分割して個々の部分をパラメータ化するか、部分文字列を結合して均一なパラメーターを適用します。

部分文字列を分割 split-substring

部分文字列の特定の部分をパラメータ化するには、その部分を引き出して、個々の選択とパラメータ化のために別の部分文字列にします。 サブストリングを別々のサブストリングに分割するには、次の手順を実行します。

  1. 部分文字列セレクターで、部分文字列内の文字を選択して区切ります。
  2. 部分文字列を分割 をクリックして選択範囲を引き出し、部分文字列セレクター​内の別の部分文字列にします。
    部分文字列を分割
    必要な部分文字列を選択して、テキスト、フォントファミリー、フォントサイズ、カラーを​ パラメーター化できます。
部分文字列を結合 merge-substring

サブストリングを結合すると、既存の個々のパラメーターが削除され、新しく形成されたサブストリング全体に一貫性のあるパラメーターを適用できます。
次の手順を実行して、隣接する2つのサブストリングを結合し、結果のサブストリングに均一なパラメーターを適用します。

  1. 部分文字列セレクターで、同じ書式設定の2つの隣接する部分文字列の間で文字を選択します。

  2. 「 部分文字列を結合 」をクリックして、部分文字列を結合します。

    同一の部分文字列を結合

    新しく形成された部分文字列に均一なパラメーターを適用できます。

    note
    NOTE
    同一の書式を持つ部分文字列のみが結合できます。

レイヤーをグループ化して同時に表示をコントロール group-layers

テンプレートの柔軟性を維持するもう 1 つの方法は、単一のパラメーター名を使用して複数のレイヤーを制御することです。 この戦略は、表示（レイヤーを非表示または表示）パラメーターで、単一のテンプレートからデザインまたはグラフィックを更新する場合に役立ちます。

複数のレイヤーの非表示パラメーター（ 高速コンテンツ作成 ）に同じ名前を割り当て、同時に非表示または表示できるようにするには、次の手順に従います。

  1. レイヤーの プロパティパネル に移動します。
  2. 以前にパラメーター化していない場合は、非表示​パラメーターを切り替えます。
  3. オプション：​ 非表示 ​パラメーターの名前を変更します。
  4. 非表示​パラメーターの名前をコピーします。
  5. キャンバスから他のレイヤーを選択して、そのレイヤーのパラメーターパネルに移動し、パラメーター化されていない場合は、非表示​パラメーターを切り替えます。
  6. 非表示パラメーター​の名前を、コピーした名前に置き換えます。
  7. 「保存」をクリックして、レイヤーをグループ化します。
  8. プレビューと公開の節の手順 3 と 4 を実行して、変更を確認します。

PSDからDynamic Media テンプレートを作成する create-a-dynamic-media-template-from-a-psd

PSDからDynamic Media テンプレートへの変換機能を使用すると、AEM as a Cloud ServiceのPhotoshop（PSD）ファイルから編集可能なDynamic Media テンプレートを生成できます。 生成されたテンプレートは、Dynamic Media テンプレートエディターで使用して、さらに編集できます。

PSDを変換する前に、Dynamic Mediaの一般設定で必要なPhotoshop設定が有効になっていることを確認してください。

始める前に before-you-begin

PSD ファイルをDynamic Media テンプレートに変換する前に、Dynamic Mediaの一般設定で必要なPhotoshop設定が有効になっていることを確認してください。

  1. AEMで、ツール > Assets > Dynamic Media General Settings​に移動します。

  2. 「Photoshop」タブを選択します。

  3. 次のオプションを有効にします。

    • レイヤーを維持
    • テンプレートを作成
    • テキストを抽出

  4. 「保存」を選択します。
    Dynamic Mediaの一般設定

これらの設定を有効にすると、PSD ファイルを読み込んでDynamic Media テンプレートを生成できます。

PSDのDynamic Media テンプレートへの変換 convert-a-psd-to-a-dynamic-media-template

  1. AEMで、Dynamic Media Assets​を選択します。

  2. PSD ファイルを読み込むフォルダーに移動します。

  3. 「PSDを読み込み」を選択します。
    PSDの読み込み

  4. PSDの読み込み ダイアログで、変換する.PSD ファイルを参照して選択します。

  5. 宛先​ パス ​を確認します。

  6. 「読み込み」を選択します。
    PSD タブの読み込み

PSD ファイルが処理され、Dynamic Media テンプレートが生成されます。

生成されたテンプレートは、Dynamic Media Assets​に表示されます。

デフォルトでは、生成されたテンプレート名は次の形式になります。

<PSD-file-name>_template

生成されたテンプレートをDynamic Media テンプレートエディターで開いて、さらに編集することができます。

環境にないフォントの解決 resolve-missing-fonts

PSDにDynamic Mediaで使用できないフォントが含まれている場合、生成されたDynamic Media テンプレートには​環境にないフォント インジケーターが表示されます。 環境にないフォントの問題が解決されるまで、テンプレートのプレビューはレンダリングされません。

​ テンプレートフォントの編集

NOTE
環境にないフォントがあるテキストレイヤーは、環境にないフォントが解決されるまで、Adobe Sans F2を使用してレンダリングされます。

元のフォントをDynamic Mediaに追加するか、使用可能なフォントに置き換えることで、環境にないフォントを解決できます。

環境にないフォントを解決するには：

  1. 「環境にないフォント」インジケーターを選択します。

  2. 「編集」を選択して、テンプレートを開きます。

  3. テンプレートエディターで、「環境にないフォント」アラートを選択して、使用できないフォントを表示します。

  4. 次のいずれかのオプションを選択します。

    • 元のフォントを使用するには、環境にないフォントをAEMにアップロードし、Dynamic Mediaで使用できるようにします。 Dynamic Mediaでフォントが使用可能になると、エディターで置換できるようになります。

    • 使用可能なフォントを使用するには、「置換」列の自動入力リストからフォントを選択し、置換を選択します。

  5. 同じ見つからないフォントが複数存在する場合は、すべてを置換​を選択します。

  6. テンプレートを保存します。

環境にないフォント ​

環境にないフォントを追加または置き換えると、テンプレートプレビューがレンダリングされます。

PSDからテンプレートを再抽出する re-extracting-a-template-from-a-psd

既に生成されたテンプレートがあるPSDを再処理しても、新しいテンプレートが作成されたり、既存のテンプレートが更新されたりすることはありません。

PSDから新しいテンプレートを生成するには：

  1. 既存の生成テンプレートを削除します。
  2. 元のPSDを再処理します。

その後、新しいDynamic Media テンプレートが生成されます。

PSD ファイルのレコメンデーション psd-file-recommendations

PSD ファイルをDynamic Media テンプレートに変換する際に最適な結果を得るには、次の推奨事項に従ってください。

  • 1つのページまたはアートボードを使用： PSDからDynamic Mediaへのテンプレート変換は、1つのページまたはアートボードをサポートしています。 複数のページまたはアートボードを含むPSD ファイルでは、テンプレートが不完全または正しくない場合があります。

  • 画像レイヤー名に+を使用しない：​画像レイヤー名に+文字を使用しない。 例えば、my_sample+psd_file の代わりに my_sample_psd_file を使用します。 画像レイヤー名に+文字を使用すると、画像レイヤーが誤って変換され、画像の同期に問題が発生する可能性があります。

  • レイヤー単位で回転を適用：​回転が必要な画像レイヤーとテキストレイヤーの場合は、PSD コンポジション全体ではなく、個々のレイヤー単位で回転を適用します。 テキストレイヤーの場合は、レイヤーレベルの回転のみを使用します。生成されたDynamic Media テンプレートで不正確なレイヤーレンダリングが発生する可能性があるため、縦書きテキスト​またはその他のテキスト整列オプションは使用しないでください。

PSDのファイル操作の影響 impact-of-psd-file-operations

元のPSDのコピー、移動、削除は、生成されたDynamic Media テンプレートには影響しません。 生成されたテンプレートは個別に管理されます。

テンプレートが不要になった場合は、手動で削除します。 元のPSDを削除しても、生成されたテンプレートは自動的に削除されません。

生成されたテンプレートのダウンロード downloading-generated-templates

生成されたDynamic Media テンプレートは現在、ダウンロード オプションをサポートしていません。

PSDで使用される画像アセット image-assets-used-in-the-psd

PSDで使用される画像レイヤーが抽出され、生成されたDynamic Media テンプレートに表示されます。

ただし、PSDから抽出された個々の画像は、AEM Assetsでは個別のアセットとして表示されません。 したがって、抽出された画像は、AEM Assetsで個別に管理することはできません。

グラデーションレイヤー gradient-layers

Dynamic Media テンプレートエディターは、Photoshopのグラデーションレイヤーまたはグラデーション塗りつぶしレイヤーをサポートしていません。

PSDにグラデーションレイヤーが含まれている場合：

  • 生成されたテンプレートは、元のPSDと完全に一致しない場合があります。
  • 場合によっては、グラデーションが画像に変換されることがあります。
  • 最終的な外観は元のデザインとは異なる場合があります。

最良の結果を得るには、Dynamic Media テンプレートの変換を目的としたPSD ファイルでグラデーションまたはグラデーションの塗りつぶしレイヤーを使用しないでください。

シェイプを使用したスマートオブジェクト smart-objects-with-shapes

シェイプと組み合わされたスマートオブジェクトを含むPSD ファイルは、正確に抽出できない場合があります。

例えば、スマートオブジェクトを使用してシェイプ内に配置された画像は、生成されたテンプレートで異なる表示になる場合があります。

最良の結果を得るには、テンプレート変換を目的としたPSD ファイル内のスマートオブジェクトとシェイプの複雑な組み合わせを避けます。

レイヤーのマスク masking-layers

マスクレイヤーを使用するPSD ファイルは、必ずしも正確に抽出されない場合があります。 その結果、生成されたDynamic Media テンプレートは、元のPSD デザインとは異なる場合があります。

最適な結果を得るには、テンプレート変換を目的としたPSD ファイルの複雑なマスク設定を避けます。

最大レイヤー制限 maximum-layer-limit

Dynamic Media テンプレートエディターは、テンプレート内で最大​ 60 レイヤー ​をサポートします。

PSDに60を超えるレイヤーが含まれている場合、生成されたテンプレートが元のPSDと完全に一致しない可能性があります。 サポートされている制限を超えるレイヤーは、テンプレートエディターではレンダリングされません。

最適な結果を得るには、Dynamic Media テンプレートに変換する際に、60 レイヤー以下​のPSD ファイルを使用します。

ラスタライズされた画像を使用 use-rasterized-images

可能であれば、PSDでラスタライズされた画像を使用して、レイヤー数を減らします。 これは、Dynamic Media テンプレートエディターでスムーズに開いたり編集したりするのに役立つ場合があります。

Dynamic Media テンプレートをプレビューして公開し、配信URLをコピーします preview-and-publish-dynamic-media-template-and-copy-template-deliver-url

テンプレートをプレビューおよび公開し、配信 URL をコピーするには、次の手順を実行します。

  1. キャンバスページで、「プレビュー」をクリックします。 また、アセットビュー​ ／ ​ Dynamic Media アセット ​ に移動して、 ​テンプレートを見つけて選択し​、「テンプレートを編集」をクリックして​、「プレビュー」をクリックすることもできます。 プレビューページには、テンプレート、そのパラメーター（パラメーター化されたレイヤとプロパティ）、公開ステータスおよび「公開」オプションが表示されます。

  2. テンプレートパラメーター​パネルからパラメーターを選択して値を編集すると、プレビューの対応するテンプレートレイヤーのコンテンツ、サイズ、位置、またはテキストの書式設定が即座に更新されます。 例：

    1. テキストレイヤーを選択し、そのテキストを編集します。
    2. 画像レイヤーを選択し、「 その場でコンテンツを作成 」をクリックし、アセットセレクターから画像を選択して、「更新」をクリックします。
    3. カウントダウンタイマーレイヤーを選択して、終了時間、表示単位、サフィックス、フォールバックテキストまたはCTAを変更します

    テンプレートはすぐに更新され、編集されたテキストが表示され、以前の画像が新しい画像に置き換えられます。 また、画像パラメーターの値には、新しい画像のパスが反映されます。 同様に、レイヤーの値を調整してサイズ変更すると、その変更がリアルタイムでテンプレートに適用されます。

  3. リストからグループ化されたレイヤーの​ 非表示 ​パラメーターを選択して、テンプレート内でまとめて表示または非表示にします。

  4. オプション：​ 非表示 ​パラメーターの値を 0 と 1 の間で変更し、「更新」をクリックして変更を確認します。 同じ​ 非表示 ​パラメーターを持つレイヤーは、まとめて非表示または表示されます。 同様に、URL からレイヤーの表示をコントロールできます。

    その場でのコンテンツの作成
    また、すべてのパラメーターを含める​を切り替えて、表示されているすべてのパラメーター値を編集し、テンプレートのプレビューで更新を確認することもできます。

  5. プレビューページからテンプレートを公開するには、「公開」をクリックして公開を確定します。 公開完了​メッセージが表示され、公開ステータスが​ 公開済み ​に更新されます。

配信 URL をコピー

プレビュー​ページで選択したパラメーターは、テンプレートの URL の URL パラメーターになります。

テンプレートの配信 URL を生成するには、テンプレート内の画像が AEM および Dynamic Media に既に公開されていることを確認します。

テンプレートの配信 URL をコピーするには、次の手順を実行します。

  1. 「URL をコピー」をクリックします。 URL をコピー​ダイアログボックスが表示されます。 表示されている URL を選択してコピーします。 URLの最初のパラメーターは、疑問符​ （?） ​の後から始まります の後から始まり、キーと値のペアが $ で始まり & で終わることを確認します。 キーと値は等号​ （=） ​で区切られ、キーが左側、値が右側になります。
  2. この URL をブラウザーのタブにペーストして、ライブテンプレートを表示します。 プレビューと公開​の節の手順 2 の説明に従って、URL の必要なパラメーターの値（キーの値）を直接更新して、テンプレートをリアルタイムでカスタマイズします。
  3. 製品やサービスの迅速なマーチャンダイジングには、この URL を使用します。 この URL を顧客と共有することや、web サイトやダウンストリームのサードパーティアプリケーションに統合してバナーを表示することや、継続的なオファーを反映するようにリアルタイムで更新することができます。

URLからDynamic Media テンプレートをリアルタイムで更新します update-the-template-from-the-url

URL 内でパラメーターを直接編集するのは面倒な場合があります。 簡素化するには：

  1. URL をコピーして、メモ帳にペーストします。

  2. Cmd + F キー（Mac）または Ctrl + F キー（Windows）を使用して、パラメーター値を見つけて編集します。 例：

    • 画像レイヤーの画像パスを検索して置き換えます。
    • レイヤーのパラメーター化された座標、幅、高さを検索して、その値を調整します。
    • テキストレイヤーのテキスト、フォント、カラー、サイズ、位置を編集します。
    • 表示値を 0 と 1 の間で変更します。

この更新された URL をブラウザーにペーストして、変更を表示します。

Dynamic Media テンプレートの編集 edit-the-template

テンプレートを編集するには、次の手順に従います。

  1. Assets view で、「Dynamic Media アセット」をクリックします。
  2. テンプレートの場所に移動します。
  3. テンプレートを選択します。
  4. 「テンプレートを編集」をクリックします。 テンプレートキャンバスには、テンプレートと、レイヤーパネル内のすべてのレイヤーのリストが表示されます。 必要に応じて、テンプレートの編集を開始します。

Dynamic Media テンプレートレイヤーへのCall to action（CTA）リンクの追加 add-CTA-in-dynamic-media-templates

Dynamic Media テンプレートの任意の画像、テキストまたはシェイプレイヤーに CTA リンクを追加してハイパーリンクに変換し、ユーザーをターゲットページに誘導します。

レイヤーに CTA リンクを追加するには、次の手順を実行します。

  1. テンプレートの場所に移動し、テンプレートを選択して「 編集  テンプレートを編集」をクリックします。 テンプレートがキャンバスに表示されます。

  2. テンプレートレイヤーを選択し、そのプロパティパネルに移動して、CTA リンクを追加します。

  3. プロパティパネルで「CTA を追加」を選択し、「URL」フィールドに宛先 URL を指定して、「保存」をクリックします。

    CTA を追加

  4. まだ公開していない場合は、「プレビュー」をクリックし、「公開」を選択してテンプレートを公開します。

  5. このテンプレートが保存されているフォルダーに移動し、このテンプレートを選択して「 詳細ページ 詳細」をクリックします。

  6. 「コピーオプション」をクリックし、「埋め込みコードをコピー」を選択します。 埋め込みコードをコピーするには、テンプレート画像を AEM and Dynamic Media に公開する必要があります。

    埋め込みコードをコピー

    埋め込みコードの例を次に示します。

    code language-json 
     <div class="adobe-dynamicmedia-template-embed-container">
 <img id="<Image ID>>" src="<Image Source>>" alt="adobe dynamicmedia template" usemap="#adobe-dynamicmedia-template-map" width="800" height="300">
 <map name="adobe-dynamicmedia-template-map">
 <area shape="rect" coords="417,-60,817,340" href="https://business.adobe.com/jp/products.html" alt="Layer with CTA" title="https://business.adobe.com/jp/products.html" target="_blank">
 <area shape="rect" coords="6,206.57,129,231.43" href="https://business.adobe.com/jp/products.html" alt="Layer with CTA" title="https://business.adobe.com/jp/products.html" target="_blank">
 </map>
 </div>

  7. コピーした埋め込みコードをサイトの HTML ファイルに追加します。ブラウザーで実行すると、テンプレートが表示されます。

  8. テンプレートの CTA 要素をクリックして、宛先ページに移動します。

テンプレートレイヤーに CTA リンクを追加する方法について詳しくは、このステップバイステップビデオを参照してください。

https://video.tv.adobe.com/v/3457616?learn=on
https://video.tv.adobe.com/vc/3457616/jpn.json

Adobe Journey OptimizerでのDynamic Media テンプレートの管理 dynamic-media-templates-ajo-integration

Adobe Journey Optimizerにダイナミックメディアテンプレートを追加し、必要に応じてメディアコンテンツを更新できます。 メディアにパーソナライゼーションフィールドを組み込むことで、Journey Optimizer内で、よりカスタマイズされた魅力的なコンテンツを制作できるようになりました。

詳しくは、Adobe Journey OptimizerでのDynamic Media テンプレートの管理を参照してください。

重要な注意点 important-points-to-note

  • 動的更新用にパラメーター化された画像レイヤーを含むテンプレートを作成したら、今後の更新を予定している画像がパラメーター化された画像と同じ寸法を共有していることを確認します。 これにより、画像がオーバーフローしたり、空のスペースが残ったりすることなく、レイヤー内に完全に収まります。 現在、テンプレートは、画像をレイヤーに収める自動寸法調整をサポートしていません。
  • テキストレイヤーでは、部分文字列はサポートされません。 ユーザーは、テキストレイヤーの部分文字列に異なるフォントプロパティを適用できません。
  • 現在、Dynamic Media テンプレートでは複数の Dynamic Media 会社のサポートを使用できません。
  • コピーまたは移動の場合、宛先セレクターにはすべてのフォルダー（Dynamic Media 以外の同期フォルダーを含む）が表示されます。 また、現在、Dynamic Media テンプレートアセットは表示されません（これらは両方とも宛先セレクターの制限です）。
  • 「アセット」セクションからのフォルダーに対する更新操作（公開や削除など）は、そのフォルダー内で使用可能な Dynamic Media テンプレートに影響を与えます。
  • ごみ箱は、Dynamic Media テンプレートでは機能しません。 アセットをごみ箱に移動してから復元すると、アセットは AEM では復元されますが、Dynamic Media では復元されません。 Dynamic Media テンプレートも同様です。

関連トピック

recommendation-more-help
experience-manager-learn-help-assets