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

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

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

  • Dynamic MediaWYSIWYG テンプレートエディター: ​画像とテキストレイヤーを使用してカスタマイズ可能なバナーを作成します。
  • レイヤーのパラメーター化: ​レイヤーの動的なキーと値のペアを定義して、リアルタイム更新を実現します。
  • Dynamic MediaURL のサポート: ​テンプレートに Dynamic Media URL を使用し、ファーストパーティまたはサードパーティのアプリケーションからのパーソナライズされた値を統合します。
  • レイヤー表示コントロール: ​必要に応じて、レイヤーを動的に非表示または表示します。
  • スマートテキストのサイズ変更: ​指定された領域に合わせて、テキストのサイズを自動的に調整します。

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

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

このビデオでは、Dynamic Media テンプレートを段階的に作成する方法について説明します。

開始する前に 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 テンプレートを作成するには、次の手順を実行します。

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

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

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

    Dynamic Media テンプレート

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

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

    note note
    NOTE
    テンプレートは、作成した場所に保存されます。Assets View ホームページで、「Dynamic Media アセット」を選択し、「テンプレートを作成」をクリックして、テンプレートを Dynamic Media アセット ​ルートフォルダーに保存します。
  3. テンプレート名を指定し、キャンバスの幅と高さを定義して、「作成」をクリックします。空白のキャンバスが表示され、テンプレートの作成に使用するメニューオプションが両側に表示されます。メニューオプションにポインタを合わせると、ツールチップが表示されます。
    リアルタイムのカスタマイズ可能なテンプレート

    note 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
テンプレートでは、キャンバスを含めて最大 20 個のレイヤーを使用できます。

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

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

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

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

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

  1. 新しいバナーをすばやく作成 」をクリックして、キャンバスにテキストレイヤーを追加し、プロパティパネルを開きます。
  2. レイヤーを選択し、テキストをクリックして更新します。
  3. プロパティパネルで「スマートテキストのサイズ変更」を選択すると、テキストの長さとフォントサイズが自動的に調整され、指定された領域に最適に収まります。
    カスタマイズ可能な最適なバナー

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

​ テキストの特定の部分を書式設定し ​ ​ パラメーター化して、個別に制御する ​

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

文字列の特定の部分を書式設定するには、次の手順を実行します。

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

  2. ​ プロパティパネル ​ を使用して選択の形式を設定します。 次の書式設定オプションは、部分文字列とその部分に適用されます。

    • フォントスタイル:「フォントスタイル」オプションを使用した、太字、斜体、下線、下付き文字、上付き文字。
    • フォントプロパティ:フォントファミリー、色、サイズを、それぞれのパネルオプションを使用して変更します。
      format-substring

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

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

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

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

レイヤーを編集または削除 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

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

すぐにコンテンツを作成

レイヤーをパラメーター化 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 のパラメーターの値の画像パスを変更することで、レイヤーの画像を新しい画像に置き換えます。
image source パラメーター

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

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

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

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

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

部分文字列を分割 split-substring

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

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

部分文字列を結合すると、既存の個々のパラメーターが削除され、新しく形成された部分文字列に対して一貫性のあるパラメーターを適用できます。
次の手順を実行して、2 つの隣接する部分文字列を結合し、結果の部分文字列に均一なパラメーターを適用します。

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

  2. 部分文字列を結合 をクリックして、部分文字列を結合します。
    同一の部分文字列を結合
    新しく作成された部分文字列には、均一なパラメーターを適用できます。

    note note
    NOTE
    同じ形式の部分文字列のみを結合できます。

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

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

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

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

テンプレートをプレビューおよび公開し、配信 URL をコピー preview-and-publish-template-and-copy-template-deliver-url

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

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

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

    1. テキストレイヤーを選択してテキストを編集するか、
    2. 画像レイヤーを選択し、「 その場でコンテンツを作成 」をクリックし、アセットセレクターから画像を選択して、「更新」をクリックします。

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

  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 からテンプレートをリアルタイムで更新 update-the-template-from-the-url

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

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

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

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

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

テンプレートを編集 edit-the-template

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

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

テンプレートレイヤーにコールトゥアクション(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 ファイルに追加します。ブラウザーで実行すると、テンプレートが表示されます。

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

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

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

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

関連トピック

  1. Dynamic Media とその機能の探索
  2. OpenAPI 機能を備えた Dynamic Media ​ の探索
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab