ドキュメントAEMユーザーガイド

[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}

Dynamic Media のベストプラクティス about-dm-best-practices

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

作成対象：

  • ユーザー
  • 管理
NOTE

Adobe Experience Manager上のDynamic Media （AEM）は、アセットを最適化し、パーソナライゼーションを処理し、あらゆるチャネルとデバイスで一貫性のあるブランドに即したエクスペリエンスを提供する包括的なデジタルアセット配信ソリューション​です。 今日の企業は、魅力的な利用者のためのチャネルや接点の爆発的な増加に直面しています。現在、カスタマージャーニーは実店舗、web、モバイル、ソーシャルメディア、電子メール、コマースに広がっています。Dynamic Mediaは、この複雑な課題に単一の情報源で対応しています。

Dynamic Mediaの主な原則

次のコア機能は、Dynamic Mediaの仕組みと、それが企業ワークフロー全体に拡張される理由を定義します。

  • 単一ファイルのアプローチ： Dynamic Mediaでは、1つのプライマリソースファイルを保存し、すべてのサイズのバリエーション、レンディション、視覚的な変換が配信時に動的に生成および最適化されます。 このアプローチ は、ストレージコストを削減し、重複した派生アセットを排除し、複数の事前レンダリング済みバージョンの維持に関連するワークフローの複雑さを排除します。
  • グローバル配信： スマートイメージング​は、コンテンツ配信中に適用され、視覚的な品質を損なうことなく、画像ファイルのサイズとページ全体の重さを減らします。 ネットワーク帯域幅の条件とデバイスのピクセル比に最適化されており、読み込み時間を短縮し、地域やデバイスをまたいでCore Web Vitalsを向上させます。
  • AIを活用した​人工知能（AI）: AIを活用した機能である​ スマート切り抜き ​は、画像とビデオの被写体に応じた切り抜きを自動化します。 これにより、手作業による切り抜きが不要になり、数千ものアセットを複数のアスペクト比に合わせて適応させる必要があるエンタープライズカタログの制作が効率的に拡大します。
  • ビデオのサポート：​主要なソースビデオをDynamic Mediaにアップロードし、記述的なオーディオトラックをサポートしながら、複数の言語をまたいでアダプティブにストリーミングできます。 アダプティブストリーミング機能により、再生品質が各視聴者の帯域幅とデバイス機能に自動的に一致するようになります。
  • Experience viewer library:​画像やビデオ用にExperience ビューアをカスタマイズしてブランド化し、デジタルストアフロント、製品ページ、マーケティングエクスペリエンスにシームレスに統合します。 これらのビューアは、ズーム、パン、ホットスポット、360度スピンセットなどのインタラクティブ機能をサポートしています。
  • 新しい形式のサポート： Dynamic Mediaを使用すると、3Dおよびパノラマ体験​の配信が可能になり、アセットワークフローをフラット画像やビデオ以外にも拡張して、没入型のコマースと製品ビジュアライゼーションのユースケースをサポートできます。

ベストプラクティスの適用

Dynamic Media ジャーニーを検討する際、以下のベストプラクティスの一覧を確認すると、その機能を最大限に活用できます。 これらのDynamic Mediaのベストプラクティスを、特定のコンテキストやプロジェクト要件に適応させ、チャネルやデバイスをまたいでエクスペリエンスを最適化します。

IMPORTANT
この記事のDynamic Mediaのベストプラクティスは、Dynamic Mediaの新しいテクノロジーが登場するにつれて時間の経過とともに進化します。 以下の情報は、Dynamic Media の最新バージョンに関するものです。

Dynamic Media へのアセットの取り込み

ビジネスケース： 大量のアセットを効率的に管理し、関連性が高い承認済みのコンテンツのみをエンドユーザーに配信します。

Dynamic Media​には、2つの補完的なコントロール（選択的同期​と​選択的公開）が用意されています。これにより、デジタルアセット管理（DAM）チームが配信パイプラインに入るアセットと、最終的に顧客向けチャネルに到達するアセットを正確に管理できます。 これらの機能により、大規模なアセットライブラリの管理が合理化され、適切で承認されたコンテンツのみがエンドオーディエンスにリーチできるようになります。

  • 選択的同期：
    Selective Syncは、管理者がDynamic Mediaと同期するアセットを選択できる、プロアクティブな取り込み側コントロールです。 例えば、最終承認を受けたアセットを含むフォルダーのみを同期できます。これらのフォルダーには、完成した季節のキャンペーン画像、地域固有の製品写真、合法的にクリアされたマーケティングクリエイティブなどが含まれます。 このワークフローにより、審査済みのコンテンツのみがDynamic Media環境に入力されるようになり、顧客への配信に備えているアセットを管理するのに役立ちます。

  • 選択的公開：
    アセットを同期した後、セレクティブ公開では、エンドユーザーに表示されるアセットをデリバリーサイドで制御できます。 Dynamic Mediaに入るものを制御する選択的同期とは異なり、選択的公開は公開チャネルに入るものを制御します。 この機能により、チームはチャネルを通じて配信される承認済みアセットを決定でき、オーディエンスはキャンペーンライフサイクルの中で最も関連性の高い、ブランドに即したコンテンツのみを見ることができます。

選択的同期と選択的公開の主な利点

これら2つのベストプラクティスを組み合わせることで、次のことが可能になります。

  • 取り込みから配信までのパイプライン全体で​アセットの可視性を強化する。
  • 未承認、古い、またはブランド外のコンテンツをライブチャネルに公開するリスクを​ 軽減 ​しました。
  • アクティブな管理下にあるアセットの作業セットを絞り込むことで、DAM、マーケティング、マーチャンダイジングの各チームの生産性を​向上。
  • レビューおよび承認されたクリエイティブのみが顧客接点に到達するため、ブランドの一貫性が向上。

その結果、マーケティングチームやデジタルオペレーションチームは、リッチメディアコンテンツに対するガバナンスと生産性をより細かく設定でき、まだ一般公開する準備ができていないアセットを管理する際の運用オーバーヘッドを減らすことができます。

ステップバイステップの設定ガイダンスについては、Dynamic Mediaのフォルダーレベルでの選択的公開の設定を参照してください。

Dynamic Media ビューア

Dynamic Media Viewerのベストプラクティス Adobe Experience Manager（AEM）でのDynamic Media アセットのパフォーマンス、機能、ユーザーエクスペリエンスを最適化します。 これらのガイドラインでは、asset synchronization、publishing、スマート切り抜き、ビデオのミュート自動再生、正しいJavaScriptの組み込み、ビューア固有の埋め込み​について説明しています。これらは、Dynamic Media ビューアが本番環境で確実にレンダリングされるかどうかを判断する中核領域です。

これらの慣行に従うことで、シームレスな統合、効率的なアセット管理、ブラウザーやデバイスをまたいだ一貫した視聴者インタラクションを実現できます。 アセットの同期、スマート切り抜きの適用、JavaScriptのファイルインクルージョンルールの遵守により、ランタイム環境でのメディア配信の整合性と信頼性が保護されます。

  • ビューア Assetsの同期：
    プレーヤーを使用する前に、すべてのビューアアセットをDynamic Mediaと同期します。 同期されていないアセットは、アイコンの欠落、スタイルの破損、実行時の機能しないプリセットの一般的な根本原因です。

    • /libs/dam/gui/content/s7dam/samplemanager/samplemanager にあるサンプルマネージャーページにアクセスします。 このページでは、標準アイコン、CSS ファイル、プリセットなど、ビューアのアセットを再同期します。
    • ビューアの問題が発生した場合は、Dynamic Media ビューアのトラブルシューティング ​の記事を参照してください。

  • Assetsを公開：
    配信ビューアでアセットを表示する前に公開します。 これにより、ビューアがアセットを要求したときに配信層がアセットを提供できるようになります。公開されていないアセットは、パブリックビューアランタイムで解決できません。

  • 自動再生ビデオがミュートされました：
    ビデオの自動再生機能には、ミュートされたビデオ設定を使用します。 最新のブラウザーでは、オーディオが有効になっているビデオの自動再生がブロックされるため、ユーザーの操作なしでビデオを自動的に開始するにはミュート再生が必要です。

  • スマート切り抜き：
    スマート切り抜きに​ 画像v3 コンポーネント ​を使用すると、画像アセットのプレゼンテーションが強化され、レスポンシブブレークポイント全体でフォーカルポイントに応じた切り抜きが生成されます。

  • JavaScript ファイルのインクルード：
    プライマリビューアのJavaScript ファイルのみをページに含めます。 ビューアのランタイムロジックが単独でダウンロードする追加のJavaScript ファイルを参照しないでください。 具体的には、/s7viewers コンテキストパスからHTML5 Software Development Kit （SDK） Utils.js ライブラリに直接リンクしないでください（統合SDK include​と呼ばれるパターン）です。このパターンでは、閲覧者に読み込ませるのではなく、Utils.jsへの直接参照をハードコードします。 ビューアのロジックは、Utils.jsおよびその他のランタイムビューアライブラリの場所を管理し、それらの場所はリリース間で変更される可能性があります。 Adobeでは、セカンダリビューアの古いバージョンはサーバー上に含まれないため、それらを直接参照すると、将来のアップデートでビューア機能が無効になります。

  • 埋め込みガイドライン：
    埋め込みコード、パラメーター、初期化パターンはビューアのタイプによって異なるため、各ビューアに固有の埋め込みガイドラインについて説明します。
    詳しくは、 AEM Assets のビューアを参照してください。

  • SDK チュートリアルと例：
    SDK コンポーネント APIについて詳しくは、Viewer SDK チュートリアル ​およびHTML5 SDK アプリケーション例を参照してください。

配信用アセットの準備

アセットの整理

ビジネスケース： ワークフローを効率化するには、アセットを効率的に整理します。

ワークフローを合理化してアセットを効率的に整理するには、次のベストプラクティスから 1 つ以上を使用してください。

  • フォルダー内のアセットを整理：
    効果的なアセットの整理は、コンピューターのファイル整理と同様に、アセットをフォルダーに分類することから始まります。 予測可能な階層により、アセットの検索、バッチ処理、管理が容易になるため、効率的なアセット処理には、適切な命名、慎重なサブフォルダー構造、およびこれらのフォルダー内の規律あるファイル管理が不可欠です。 体系的な​ 命名規則 ​および​ メタデータプラクティス ​を実装することで、デジタルアセットリポジトリの拡張性を最大限に高めることができます。
    詳しくは、 フォルダー内のアセットの整理を参照してください。
  • タグを使用したアセットの整理：
    アセットにタグを付けると、検索性、コレクションの作成、検索ランキングの向上につながります。タグ付けされたアセットは、容易に検索、グループ化し、関連する検索結果に表示されるからです。 Adobe AI​は、カスタムのタグを含む関連タグをアセットに割り当てるため、手作業を減らし、大規模なライブラリをまたいでメタデータの一貫性を維持する、自動の記述的なタグ付けにより、アセット管理を簡素化します。
    詳しくは、 タグを使用したアセットの整理を参照してください。
  • アセットをコレクションとして整理：
    Dynamic Media​と​ Experience Manager Assets ​により、ユーザー間でのアセットコレクションの効率的な作成、編集、共有が可能になります。 静的リスト​と​ 動的な検索ベースのコンパイル ​を含む、複数のコレクションタイプを確立します。 カスタマイズ可能なアクセス権限と編集権限を使用して、これらのコレクションを複数の場所やチームで共有できます。これにより、アセットのガバナンスを維持しながら、管理されたコラボレーションをサポートできます。
    詳しくは、 アセットをコレクションとして整理を参照してください。
  • プロファイルを使用したアセットの整理：
    処理プロファイル​は、アセットが追加されるたびに、レンディション、メタデータの割り当て、命名などの一貫した処理を適用することで、指定されたフォルダー内のアセットを処理し、整理を効率化する自動ルールセットです。 プロファイルは予測可能な入力に依存しているため、メタデータ、ファイル名、フォルダー構造を標準化することで、デジタルアセットの収集に合わせて、これらのプロファイルを一貫性のある正確な方法で適用できます。
    詳しくは、 プロファイルを使用したアセットの整理を参照してください。

画質の最適化

**ビジネスケース：**Dynamic Media から高品質の画像を取得します。

Adobe Experience Manager Dynamic Mediaでの画質の向上は、相互に関連するいくつかの要因に依存し、多くの場合、このプロセスには時間がかかります。 しかし、確立されたベストプラクティスを適用することで、常に視覚的なアウトプットを向上させることができます。 重点的に取り組むべき領域は次のとおりです。

  • 最適な画像サイズ – 不必要な拡大・縮小を避けるために、コンテキストを表示するピクセル寸法を一致させます。
  • 画像のシャープ処理 – 目的の出力サイズとメディアに適したシャープ処理を適用します。
  • 最適な画像形式 – 品質、ファイルサイズ、ブラウザーまたはデバイスの互換性をバランスさせるファイル形式を選択します。

これらの各領域について詳しくは、画像の品質を最適化するためのベストプラクティス ​を参照してください。

画質に対する認識は人によって異なるため、繰り返し可能で高品質な結果を得るには、体系的でテスト主導の実験アプローチが不可欠です。 このプロセスをサポートするために、Adobe Experience Managerでは、画像の強調​に対して100以上のDynamic Media コマンドを提供しています。このコマンドを使用すると、シャープニング、カラー、圧縮、切り抜き、サイズ変更などのレンダリング動作をアセットごとに微調整できます。

これらの機能の概要については、Dynamic Media スナップショット ​をご覧ください（3分17秒）。

各コマンドが最終的にレンダリングされた画像にどのような影響を与えるかを評価するには、ユーザーがDynamic Mediaに画像をアップロードし、指定したURLでツールのインターフェイスを開き、テストするコマンドを適用します。 この実践的な比較により、大規模な公開前に、必要な視覚的結果を生み出す正確なパラメーターの組み合わせを簡単に特定できます。

直接実験するには、Dynamic Media スナップショット ​を起動します。

画像に適用されるスタイルの標準化

**ビジネスケース：**画像アセットに適用されるスタイルと変換を効率的に標準化します。

Dynamic Mediaで定期的に​ 画像プリセット ​を使用して、アセットが表示されるすべてのチャネルで一貫して動的に画像サイズ、形式、プロパティを調整します。 画像プリセット​は、サイズ変更と書式設定のための名前付き再利用可能なコマンドのセットです。一度定義されると、プリセットをオンデマンドで適用できるので、複数の派生ファイルを生成して保存することなく、各サーフェスに必要な正確なレンディションで同じソースアセットを配信できます。

実際には、画像プリセットは次のような属性を制御します。

  • ディメンション – 配信されたレンディションの幅、高さ、縦横比。
  • 形式 — ターゲットデバイスまたはブラウザーに最適な出力画像形式。
  • 画像プロパティ — レンダリング時に適用される画質、シャープ化、カラー、その他の視覚的変換。

プリセットは動的に適用されるので、元のマスターアセットは変更されず、1つのソースで必要なすべてのバリエーションを即座に生成できます。 これにより、ストアフロント、マーケティングサーフェス、キャンペーンをまたいだ視覚的な一貫性を確保しながら、手作業の制作作業を削減できます。

例えば、画像プリセットを使用すると、デスクトップとモバイルの両方のエクスペリエンスで製品画像のサイズとフォーマットを自動化できます。同じ製品写真をデスクトップで大きなヒーロー画像として配信したり、モバイルで適切なサイズと最適化されたレンディションを配信したりできます。これらはすべて、同じ名前のプリセットによって管理されます。 その結果、統一されたルックアンドフィールを適用し、制作サイクルを短縮して、更新を簡素化できます。一度プリセットを変更すると、プリセットを使用するすべての画像に新しい処理が反映されます。

試してみるには、 アセットをレンダリングするための画像プリセットの作成の基本を参照してください

画像やビデオのフォーカスとフレーミングの調整

**ビジネスケース：**画像やビデオの主な POI が、デバイス間でフォーカスされたままであることを確認します。

スマート切り抜きの仕組み

スマート切り抜き​は、Adobe AI​とAdobeの人工知能と機械学習のフレームワークを活用した​ Dynamic Media ​の自動切り抜き機能です。 スマート切り抜きは、画像やビデオ内の主要な被写体（または注目すべき点）を自動的に識別して保存し、その後、ビューポートの変化に合わせて焦点が中央に配置され、表示されるように、アセットを再フレーム化します。

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

  • 被写体の自動検出： Adobe AIは、各アセットを分析してメインの視覚的被写体を見つけ出し、ブレークポイントごとに手動で切り抜く必要がなくなります。
  • レスポンシブフレーム：​この機能は、デスクトップコンピューター、タブレット、モバイルデバイスをまたいで焦点を維持するため、視聴者は常に意図した構図を見ることができます。
  • 画像とビデオの両方に適用： スマート切り抜きは、静止画像とビデオコンテンツをサポートし、メディアタイプ間で一貫したフレーミング動作を拡張します。
  • デバイスに最適化された配信：​各視聴者は、画面に合わせて適切にトリミングされたレンディションを受け取ります。これにより、メッセージをより速く認識し、視覚的なエンゲージメントを強化できます。

そのためには、幅の広いデスクトップバナー、正方形のソーシャルタイル、背の高いモバイルスクリーンなど、様々な縦横比をまたいで単一のヒーロー画像や動画を制作する必要があります。 インテリジェントな切り抜きがないと、メインの被写体がフレーム外にドリフトしたり、不自然にスライスされたりする可能性があります。 スマート切り抜きは、焦点を各レンディションのアンカーにすることで、これを防ぎます。

ベストプラクティス：スマート切り抜きを使用した画像プロファイルの作成

スマート切り抜きで設定された​ 画像プロファイル ​を作成します。 プロファイル内：

  1. サポートする必要がある画面サイズと縦横比を定義します。
  2. Adobe AIで、定義された各サイズの検出と再フレーム処理を行えます。
  3. 一度公開したコンテンツをレスポンシブに配信：このプロファイルにより、あらゆる画像と動画が視聴者のデバイスに合わせて最適化され、追加の手作業は必要ありません。

このアプローチにより、切り抜きロジックが一元化され、制作のオーバーヘッドが削減され、あらゆるチャネルでブランドプレゼンテーションの一貫性が保たれます。

詳しく見る

詳しくは、 AEM Assets Dynamic Mediaでのスマート切り抜きの使用 （6分35秒）と​ ビデオでのDynamic Media スマート切り抜きの使用 （6分22秒） – 両方のウォークスルーでは、Adobe Experience Manager （AEM） Assets内でのスマート切り抜きが示されます。

SEO ランキングの向上

**ビジネスケース：**Dynamic Media を設定して、SEO ランキングを向上させます。

次の推奨事項を一貫して適用することで、画像がSEO戦略全体に効果的に貢献するようになります。

  • 意味のある画像ファイル名：
    画像コンテンツを反映した、説明的でキーワードの豊富なファイル名​ を使用します。 ​例：

    • myCompany-Silver-Wrist-Watch を使用します
    • myCompany_Silver_Wrist_WatchまたはmyCompanySilverWristWatchの使用を避ける

    わかりやすいファイル名を付けることで、検索エンジンが画像のコンテキストを解釈し、SEO パフォーマンスを向上できます。 Googleでは、ファイル名のアンダースコアまたはスペースよりも​ ハイフン ​を優先します。これは、ハイフンは単語の区切り記号として解析されますが、アンダースコアは解析されないためです。 また、web クローラーが使用する個々のキーワードが連結されている文字列が不明瞭になるため、ファイル名に単語を連結しないでください。

  • カスタムドメイン：
    企業名またはブランド名を含む​ カスタムドメイン ​を実装して、ブランド認知度、ドメイン権限、ユーザーの信頼を強化します。 例：

    • http://images.mycompany.com/is/image/companyname/ を使用します
    • https://s7d1.scene7.com/is/image/folder/AdobeStock_28563982を使用しない

    ブランド付きのドメインは、URL自体に会社名を表示するため、検索エンジンとユーザーは、所有権と関連性を即座に示すことができます。

  • SEO対応のフォルダー構造：
    企業名またはブランド名を含むフォルダー階層に画像を整理して、より優れたインデックス作成を行います（http://images.mycompany.com/is/image/companyname/）。 クリーンでセマンティックなパスは、web クローラーがサイトアーキテクチャを理解し、アセットを正しいブランドエンティティに関連付けるのに役立ちます。

  • Dynamic Mediaのルールセット：
    ルールセット​を使用して、デバイスの種類、画像形式、リクエストコンテキストなどの要素に基づいてURLを条件付きで変換し、SEOとユーザーエクスペリエンスの両方を向上させます。
    詳しくは、 ルールセットを使用した URL の変換を参照してください。

  • スマート切り抜きとスマートイメージング：
    Dynamic Mediaの​ スマートイメージング ​機能と​ スマート切り抜き ​機能を使用すると、各デバイスとビューポートに合わせて最適化されたレスポンシブ画像を提供できます。 これらの機能はペイロードのサイズを削減し、ページの読み込み時間を短縮します。ページの読み込み速度はCore Web Vitalsに関連するGoogleのランキングシグナルであるため、配信を高速化すると、SEO ランキングが直接的なダウンストリーム効果として強化されます。
    詳しくは、 スマートイメージングを参照するか、AEM Assets Dynamic Media でのスマート切り抜きの使用（6 分 35 秒）をご覧ください。

これらのベストプラクティスは、Googleの画像SEOのベストプラクティス​と直接一致しています。このベストプラクティスでは、適切な命名規則、構造化データ、最適化された画像配信を通じて、検索エンジンにコンテキストと明瞭性を提供することを重視しています。 Google独自のガイダンスに従うことが、検索結果で画像を見つけやすくするための最も信頼できる方法です。

詳しくは、 Google の URL 構造のベストプラクティスと Google 画像 SEO のベストプラクティスを参照してください

コマンドを使用した画像の動的な強化と視覚効果の作成

**ビジネスケース：**画像にリッチな視覚効果を適用します。

Dynamic Mediaには、画像を強化し、需要に応じて視覚効果を生成する一連のURL （Uniform Resource Locator）コマンドが用意されており、複数の静的アセットのバリエーションを保存する必要はありません。 以下の節では、主要な画像変換プロセスについて説明し、各プロセスの動作URLの例を示します。

ソース画像内の効果

タスク
実行内容
元の画像をアップロードして公開
  • 元の画像をDynamic Mediaにアップロードします。
  • アセットが公開され、パブリック URLを介してアクセス可能であることを確認します。
  • この例では、白い背景の腕時計のストック画像（「画像X」と指定）がDynamic Mediaにアップロードされます。
    https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer
マスクを作成
  • 被写体（エフェクトが適用される領域）と背景（変更される領域）を定義する​ マスク ​を作成します。
    https://s7g2.scene7.com/is/image/genaibeta/watch-silver-offer-maskps
  • マスクは通常、グレースケール画像​です。ここでは、白が被写体​を表し、黒が背景​を表します。 Adobe Photoshopなどのツールを使用してマスクを作成します。
    詳しいガイダンスについては、Photoshopでのクイックマスクの作成と編集を参照してください。
  • 「画像X」では、強化の対象となる被写体（人物や商品オブジェクトなど）を正確にアウトライン化するマスクを作成します。
Dynamic Media URL コマンドを効果に適用

マスクを準備したら、URL コマンドを適用して、外側の光彩​や​ 背景色 ​などの効果を「画像X」に追加します。 次に、2つの例を示します。

画像の境界線の追加

Dynamic Mediaは、URL パラメーターを通じて画像を直接操作するため、ソースアセットを再生成することなく、動的なデジタルエクスペリエンスを生成するための強力なツールとなります。 次の例は、ベース画像URL https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotelで始まります。

タスク
実行内容
白い境界線
白い境界線を追加するには、次のURLを使用します。
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10
このURLでは、extend=10,10,10,10 パラメーターによって、4つの辺​（上、右、下、左）すべてに 10 ピクセルの境界線が追加されます。
白い境界線に沿ってぼかす
白い境界線に沿ってぼかし効果を追加するには、URLを次のように構造化します。
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&op_blur=60&color=0,0,0
このURLでは、effect=-1 パラメーターで効果レイヤーが有効になり、op_blur=60でぼかし強度が設定されます。値が大きいほど、より柔らかく、より散漫なエッジが生成されます。
外側の境界に沿ったドロップシャドウ効果
外部境界に沿って​ ドロップシャドウ ​を追加するには、次のURLを使用します：
https://s7g2.scene7.com/is/image/genaibeta/ocean-facing-hotel?size=400,400&extend=10,10,10,10&effect=-1&$shadow$&color=0,0,0
パラメーターはシャドウ効果を呼び出し、color=0,0,0はシャドウの色を黒に設定して、明るい背景に対するコントラストを最大限に高めます。$shadow$

これらのURL パラメーターを組み合わせて変更し、商品画像、マーケティングバナー、キャンペーンクリエイティブをまたいで必要な視覚効果を生成します。

画像オーバーレイの作成

既存の画像にロゴやアイコンを重ね合わせるには、Dynamic MediaはURL コマンドを使用して直接メソッドを提供します。 手順は次のとおりです。

手順
実行内容
ベース画像をアップロードして公開
まず、オーバーレイを受け取るベース画像をアップロードして公開します。 公開されたアセットはすべてベースとして機能します。
例えば、次にベース画像を示します。
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa。
ロゴやアイコン画像をアップロードして公開
次に、ベースの上に配置される画像をアップロードして公開します。 このオーバーレイアセットは、ロゴまたはアイコンを含む​透明なPNG （Portable Network Graphics） ファイルである必要があります。これにより、グラフィックピクセルのみが表示され、周囲の領域に基づく画像が表示されます。
以下は、透明効果を持つ星オブジェクトの透明なPNGです。ここでオーバーレイとして使用されます。
https://s7g2.scene7.com/is/image/genaibeta/decorate-star
Dynamic Media URL を適用

次に、ベース画像とロゴまたはアイコン画像を合成するDynamic Media URLを作成します。 URL コマンドは、レイヤーを処理します。
URL構造は次のとおりです。
https://s7g2.scene7.com/is/image/genaibeta/decorative-room-sofa?layer=1&src=decorate-star&scale=1.25&posN=0.33,-.25&fmt=png
アセットの場所

  • hotspotRetailBaseImage は、ベース画像です。
  • starxp は、ロゴ／アイコンの画像です。
  • layer=1は、ロゴまたはアイコンをベース画像の上の最初のレイヤーとして配置します。
  • scale=1.25は、ネイティブサイズに対してロゴ/アイコンを25%拡大します。
  • posN=0.33,-.25は、基本画像のサイズに対するロゴ/アイコンの正規化された位置を設定します。
  • fmt=pngは、透明度を維持しながら、合成画像をPNG形式で出力します。

詳細については、src コマンドおよびその他のDynamic Media URL コマンドについて、srcを参照してください。

プロモーションテキストのオーバーレイ

次の手順では、Dynamic Mediaのテキスト演算子（HTML（HyperText Markup Language）およびweb レンダリングのCSS （Cascading Style Sheets）と同様のリッチテキスト規則に従う）を使用して、画像にプロモーションテキストメッセージをオーバーレイします。

手順
実行内容
ベース画像をアップロードして公開
まず、テキストを含むベース画像をアップロードして公開します。 どんな画像でも構いません。 例えば、次の基本イメージの例を示します。
https://s7g2.scene7.com/is/image/genaibeta/leather-sofa
Dynamic Media のテキスト演算子を適用
Dynamic Mediaを使用して、テキスト演算子を適用し、リクエスト時に画像にダイナミックテキストを直接レンダリングします。これにより、新しいソースファイルを生成することなく、パーソナライズされたプロモーション、ローカライズされたコピー、A/B テストされた見出しを可能にします。 次のサンプル URLは、この機能を示しています。
https://s7g10.scene7.com/is/image/genaibeta/leather-sofa?layer=1&posN=-0.3,-0.455&text=%7b\rtf1\ansi%7b\fonttbl%7b\f0+Arial;%7d%7d%7b\colortbl+\red255\green255\blue255;%7d\copyfit1000\vertalc\qc%7b\cf0\fs42+New+Collection%7d%7d&size=370,70&textAttr=130&bgcolor=FF3333&wid=600&hei=60

様々なユースケースに対応したサイズ変更と切り抜き

画像のサイズ変更の基本

画像のサイズを変更すると、画像の​ディメンション、解像度、ファイルサイズ​が変更されます。 主要な検討事項は次のとおりです。

  • ピクセル構成：
    デジタル画像は、ピクセル​と呼ばれる小さなドットで構成されます。 各画像には、作成時に固定のピクセル数が含まれます。 サイズを変更すると、ピクセルが追加または削除され、画像のサイズ、解像度、ファイルサイズが変更されます。
  • 縦横比：
    縦横比 （幅と高さの比率）を保持すると、ゆがみを防止できます。 縦横比を維持することで、プレースメント全体で視覚的な一貫性が確保されます。
  • 品質に関する考慮事項：
    サイズ変更は画質に直接影響します。 目立つピクセル化を生み出すため、大幅なアップスケーリングは避けてください。 その代わりに、より大きなネイティブサイズと解像度でソースを再現します。 小さいレンディションの場合は、適切なツールを使用してシャープとディテールを維持します。
切り抜きとサイズ変更

切り抜きとサイズ変更は、サムネール、商品ディスプレイ画像、ヒーローバナーなど、様々なユースケース向けに画像を変換する補完的なDynamic Media手法です。

  • 切り抜き：
    画像の一部を削除して、画像の構成とフレームを変更します。 切り抜きは、残りのピクセルを拡大/縮小しません。選択した領域に注目します。
  • サイズ変更：
    縦横比を維持しながら、画像全体のサイズ、解像度、ファイルサイズを変更します。

次のユースケースでは、両方のテクニックをリビングルーム画像に適用します。

これらのバリエーションは、e コマースリスト、ヒーローバナー、サムネールグリッドなど、一般的なプレゼンテーションコンテキストをサポートします。
URL内で使用可能なコマンドの完全なリストについては、​ コマンドリファレンス ​を参照してください。

GIF 画像の配信

**ビジネスケース：**Dynamic Media を使用して GIF をストリーミングする

Dynamic Mediaは、アニメーション GIFを含むGIF アセットのアップロードと配信の両方をサポートしています。 キールール：アニメーション化されたGIFをレンダリングするには、is/imageをURL​のis/contentに置き換えます。 is/image パスは画像処理サーバーを通じてアセットをルーティングし（ファイルを1つのフレームに統合します）、is/content パスは元のアセットのバイナリをストリーミングし、すべてのアニメーションフレームを保持します。

例えば、abc.gifをアップロードした場合は、次のURL パターンを使用します。

静的GIF配信（シングルフレームレンダリング）

このURL パスは、GIFの​ 静的ビュー ​をImage Serverを通じてレンダリングし、標準の画像修飾子を許可します。

https://your.domain.com/is/image/yourfolder/abc

Animated GIF delivery （フルアニメーション）

このURL パスは、生のコンテンツを直接配信することで、GIFの​ アニメーションビュー ​をレンダリングします。

https://your.domain.com/is/content/yourfolder/abc
NOTE
URL パスで is/content を使用する際、画像変換コマンドはアセットに適用されません。 これは、is/content ハンドラーが、画像サーバーパイプラインを介して処理されていないオリジナルのバイナリファイルを配信するからで、これは正確にアニメーションを保持しますが、サイズ変更、トリミング、フォーマット変換、その他の画像修飾子も、このパスでは無視されます。

適切なパスを選択しています：

  • 画像の変換（サイズ変更、切り抜き、形式の変換）が必要で、静的なフレームを使用できる場合は、is/imageを使用します。
  • GIFのアニメーション再生を保持する場合は、is/contentを使用してください。変換パラメーターは有効になりません。

Web サイトにビデオを公開する

ビジネスケース： マーケティングサイトのビデオをすばやく公開します。

  • ビデオプロファイルを選択：
    まず、Dynamic Mediaで、適切なビデオプロファイルを選択します。 Adobe Experience Manager（AEM）Assetsで利用可能なアダプティブビデオエンコーディング プロファイルをビデオプロファイルで選択します。これにより、異なるビットレートと解像度でソースの複数のレンディションが生成されます。 これらの事前に定義されたエンコード設定により、様々なデバイスや帯域幅の条件での再生に合わせてビデオが最適化されます。 または、特定の配信要件に合わせたカスタムのアダプティブビデオプロファイルを作成します。

  • プロファイルを割り当てる：
    選択したビデオプロファイルを、ビデオがアップロードされるフォルダーに割り当てます。 このステップにより、アップロード時に正しいエンコーディング設定が自動的に適用されるので、アセットごとにエンコーディングを設定する必要がなくなります。

  • 元のビデオをアップロード：
    元のビデオファイルをアップロードします。 高画質のマスターファイルを使用します。 アダプティブエンコーディングでは、ソースからすべての出力レンディションが取得されるため、オリジナルの忠実度によって、公開されたすべてのレンディションの最大品質が直接決まります。

  • プレビューと公開：
    ビデオをプレビューして、再生、サムネール、エンコーディング出力が正しくレンダリングされていることを確認します。 問題がなければ公開します。 公開すると、Adobeの配信ネットワークでビデオがアクティブ化され、サイト訪問者がアクセスできるようになります。

  • リンクまたは埋め込み：
    公開後、2つの配信オプションから選択します。

    • 直接リンク：
      提供されたURLを使用して、ビデオに直接リンクします。 マーケティングサイトに適切にハイパーリンクします。
    • ビデオを埋め込む：
      提供された埋め込みコードをコピーし、ビデオが表示されるweb ページのHTMLに貼り付けます。 埋め込むと、ページ内でビデオがインラインで再生されるため、ビューアは外部プレーヤーにリダイレクトされません。

詳しくは、 「ビデオ」に移動します。

最適な品質とエンゲージメントのためのビデオ設定

ビジネスケース： 最高の品質とエンゲージメントを得るために、ビデオを設定します。

最高のビデオ品質を提供し、視聴者のエンゲージメントを最大化するには、Dynamic Media内で次のベストプラクティス戦略を組み合わせます。

  • 組み込みのHTML5 Video Viewerを使用：
    Dynamic Media HTML5 ビデオビューアプリセット​は、堅牢で本番環境に対応したビデオプレーヤーとして機能します。 これらのプリセットにより、デスクトップおよびモバイルデバイスでのHTML5のビデオ再生に関連する一般的な問題を解決できます。
    具体的には、プリセットは、アダプティブビットレートストリーミング配信​やデスクトップブラウザーのリーチ制限などの課題を解決し、幅広いクライアント環境で一貫した再生エクスペリエンスを実現します。
    詳しいガイダンスについては、​ ベストプラクティス：HTML 5 ビデオビューアの使用を参照してください。

  • Dynamic Media ビデオプロファイルを使用：
    Dynamic Media ビデオ プロファイル​は、効率的なビデオ管理、一貫性のある出力品質、配信チャネルをまたいだアダプティブストリーミングを実現します。 その結果、動画アセットのエンコーディング、解像度、配信行動が統一され、手作業による設定のオーバーヘッドが削減されます。
    実装の詳細については、Dynamic Media ビデオプロファイル ​を参照してください。

  • 動画エンコーディングのベストプラクティスに従う：
    元のソースビデオ品質を保持し、エンコーディングプロセス中に過度のダウンスケーリングを避ける​ ビデオエンコーディングプロファイル ​を適用します。 これにより、最終的な出力において、視聴者のリテンションとブランドのプレゼンテーションに不可欠な視覚的な忠実性が維持されます。
    技術仕様については、​ ビデオのエンコードに関するベストプラクティス ​を参照してください。

  • プログレッシブストリーミングではなくアダプティブストリーミングを採用：
    アダプティブストリーミング​は、視聴者のインターネット接続速度とデバイス機能に基づいて、ビデオの画質をリアルタイムで動的に調整します。
    HLS（HTTP Live Streaming）​や​ DASH （Dynamic Adaptive Streaming over HTTP） ​などの業界標準のプロトコルを利用して、多様なネットワーク条件で最適な再生品質を実現します。
    帯域幅の変動に関係なくビデオファイルをリニアに配信する​ プログレッシブストリーミング ​とは異なり、アダプティブストリーミングはバッファリングを最小限に抑え、再生中断を減らし、デバイス間でシームレスな視聴エクスペリエンスを提供します。 そのため、アダプティブストリーミングは、最新のエンゲージメント重視の動画配信に適した方法です。

多言語で利用できるようにビデオを国際化する

ビジネスケース： グローバル市場での多言語使用用ビデオの準備。

グローバルオーディエンスにリーチするには、多言語で利用できるようにビデオを国際化することが不可欠です。 Dynamic Mediaは、世界中の視聴者向けに動画を準備、ローカライズ、配信する組み込みのワークフローを提供し、制作作業を複製することなく、単一のソースファイルで多くの地域に配信することができます。

  • ビデオのアップロード

    • まず、ビデオエンコーディングプロファイルを作成します。 Dynamic Mediaに同梱されている事前定義済みの​アダプティブビデオエンコーディング プロファイルを使用するか、ビットレート、解像度、コーデック要件に合わせて独自のカスタムプロファイルを作成できます。
    • ビデオエンコーディングプロファイルを、プライマリソースビデオをアップロードする1つ以上のフォルダーに関連付けます。 これにより、フォルダーにドロップされたあらゆるアセットを一貫して処理できます。
    • プライマリソースビデオをこれらのフォルダーにアップロードします。 Dynamic Mediaは、割り当てられたビデオ処理プロファイルに基づいて自動的にエンコードし、配信用のアダプティブレンディションを作成します。
    • Dynamic Mediaは主に​ 短編動画（最大30分） ​をサポートしており、最小解像度​が25 ピクセル×25 ピクセルを超えています。 ビデオファイル をアップロードできるのは、各​最大15 GBです。

  • ビデオを管理：

    • Adobe Experience Manager（AEM）内で直接ビデオアセットを整理、参照、検索できます。
    • 単一のインターフェイスから動画アセットをプレビュー、公開できます。
    • ソースビデオを、エンコードされたレンディションと関連するサムネールと共に表示して、リリース前の出力品質を確認します。
    • タイトル、説明、タグなどの動画プロパティを編集して、内部での見つけやすさと下流のSEO メタデータを向上させます。

  • ローカライゼーション：

    • ターゲット地域や言語ごとに、オーディオトラックと字幕を作成し、あらゆる市場の視聴者がネイティブに音声によるダイアログや読みやすいキャプションを受け取れるようにします。
    • これらのオーディオトラックと字幕トラックをAEM インターフェイスからビデオに追加すると、すべてのローカライズされたバリエーションが1つのマスターアセットにアタッチされたままになります。
    • ユーザーがビデオを再生する際に、実行時にオーディオと字幕に好みの言語を選択するため、言語ごとに個別のビデオファイルをホストする必要がなくなります。

  • 公開：

    • AEMをWeb コンテンツ管理（WCM）システムとして使用する場合は、ネイティブのオーサリングエクスペリエンスを使用して、web ページにビデオを直接追加できます。
    • サードパーティのWCM システムを使用している場合は、Dynamic Mediaで生成されたURLまたは埋め込みコードを使用して、web ページにビデオをリンクまたは埋め込むことができます。

ローカライズされた再生の管理について詳しくは、Dynamic Mediaでのビデオの複数のキャプションとオーディオトラックのサポートについてを参照してください。

顧客へのアセットの送信

画像サイズの最適化とページの読み込み時間の最小化

**ビジネスケース：**任意のブラウザーまたは画面に合わせて画像のサイズを最適化し、ページの読み込み時間を短縮します。

Dynamic Media スマートイメージング​は、クライアントブラウザーの機能、ネットワーク条件、画面解像度に基づいて、各画像の​形式、サイズ、品質​を自動的に最適化することで、パフォーマンスを向上させる画像配信機能です。 最適化はリクエスト時に行われるため、あらゆる訪問者は、特定の視聴環境に合わせた画像を受け取ることができます。

Adobeでは、webpやavifなどの画像フォーマットを手動で強制するのではなく、スマートイメージングの自動機能を使用することをお勧めします。 その理由は以下の通り。

  • ブラウザー互換性：
    スマートイメージングでは、フォーマットを選択する前にブラウザーのサポート信号を検出するため、配信された画像フォーマットがユーザーのブラウザーと互換性があることを保証します。 これにより、新しい形式をサポートしていないブラウザーでの画像の破損やフォールバックエラーを防ぐことができます。
  • 最適な圧縮：
    スマートイメージングは、特定のブラウザー、ネットワーク条件、画面解像度に基づいて、圧縮に最適な形式を選択します。 その結果、表示される画質を損なうことなくファイルサイズが縮小され、帯域幅の消費が減少し、レンダリングが高速化されます。
  • 最新の形式：
    avifは、古い形式よりも優れた圧縮を提供する新しい形式ですが、すべてのブラウザーでまだ一般的にサポートされていません。 スマートイメージングは、サポートされている場合にのみavifを提供し、互換性のギャップを回避して、他の場所で互換性のある形式にフォールバックします。
  • ベストプラクティス：
    あらゆるリクエストに対して最高のweb最適化フォーマットを保証するために、開発者は、fmt=webpやfmt=avifなどのコマンドを手動で指定するのではなく、スマートイメージングでフォーマットを自動的に選択できるようにする必要があります。 これにより、ブラウザーごとのレンダリングロジックを維持する必要がなくなり、進化するブラウザーのサポートに合わせて配信を調整できます。

スマートイメージング機能は、リクエストに合わせてリアルタイムで配信を調整するため、各ユーザーの閲覧環境に合わせて、可能な限り効率的な方法で画像が提供されます。 このアプローチにより、配信パイプラインを簡素化し、画像の読み込み時間と全体的なユーザーエクスペリエンスを向上できます。

詳細については、​ スマートイメージング ​を参照してください。

顧客へのアセットの配信後

**ビジネスケース：**新しいコンテンツを公開した後や、既存のコンテンツを上書きした後、CDN に変更をすぐに反映するにはどうすればよいですか？

CDN キャッシュをパージまたは無効化すると、Dynamic Media アセットは、デフォルトの TTL （有効期間） （通常は 10時間​ ）が自然に期限切れになるまで待つのではなく、配信ネットワーク ​ですぐに更新されます。

CDN （コンテンツ配信ネットワーク）​は、地理的に分散されたエッジノードにDynamic Media アセットをキャッシュし、顧客にすばやく配信します。 これらのアセットに更新が公開されると、これらのエッジノードのキャッシュされたコピーは、TTLが期限切れになるまで以前のバージョンを引き続き提供します。 その結果、明示的な無効化がなければ、顧客は変更が公開された後何時間も古いコンテンツを見る可能性があります。

キャッシュ無効化は、次の2つの方法で解決します：

  • 即時の伝播： キャッシュを無効化（またはパージ）すると、CDNは保存されたコピーを破棄するようにシグナルを受け取ります。これにより、次のリクエストで更新されたアセットがオリジンから直接取得されます。 これにより、web サイトにすぐに変更内容が反映されます。
  • TTLの有効期限に依存しません： デフォルトの​10時間 ウィンドウを待つ必要はありません。これは、時間制限のある修正、ブランドの更新、緊急のコンテンツの置き換えに非常に重要です。

特定のユースケースに応じて、CDN TTL​の設定も調整できます。例えば、頻繁に更新されるアセットのTTLを短縮したり、安定した長期間有効なコンテンツを拡張して、オリジンロードと鮮度のバランスを取ったりできます。

詳細な手順については、Dynamic Mediaを使用したCDN キャッシュの無効化を参照してください。

recommendation-more-help
experience-manager-cloud-service-help-main-toc