Dynamic Mediaジャーニー:基本、第 1 部

Dynamic Mediaジャーニーへようこそ。

このジャーニーでは、Dynamic Mediaの基本、仕組み、ユーザーにとって何ができるか、およびユーザーや顧客にとっての価値について説明します。

前提条件

  • 画像およびビデオ形式の基本的な理解
  • HTMLと CSS の基本知識
  • Adobe Illustrator、Adobe Photoshop、Adobe XDなどのデザインツールの基本的な理解
  • Experience ManagerでのDynamic Mediaへのアクセスは便利ですが、必須ではありません

学習内容

第 1 部

  • Dynamic Mediaとは何ですか?また、どのように役立ちますか?
  • Dynamic Mediaの使用例
  • Dynamic Mediaシステムでのアセットの流れの仕組み

第 2 部

  • Dynamic Media URL の詳細とDynamic Mediaがコンテンツを配信する方法
  • アセットをレンダリングするための画像プリセットの作成の基本
  • 画像セット、スピンセットおよび混在メディアセット

対象ユーザ
このジャーニーの読者に最適なオーディエンスは、Experience ManagerでDynamic Mediaを初めて利用する人を以下のとおりです。

  • 管理者
  • ビジネスアナリスト
  • コンテンツアーキテクト
  • コンテンツ作成者
  • Designer
  • デベロッパー
  • マーケティング
  • プロダクトマネージャ/所有者
ヒント

最良の結果を得るには、Adobeは、デスクトップコンピューターでこのDynamic Mediaジャーニーを読み、表示することをお勧めします。

Dynamic Mediaとは何ですか?また、どのように役立ちますか?

Dynamic Mediaは、豊富な視覚的マーチャンダイジングおよびマーケティングアセットをオンデマンドで配信できます。 また、ズーム、360 度スピン、ビデオなど、インタラクティブな表示エクスペリエンスを作成し、提供するのに役立ちます。 アセットは、Web、モバイル、ソーシャルサイトでの消費に合わせて動的に拡大/縮小されます。 画像、ビデオ、3D などの一連のプライマリソースアセットを使用すると、Dynamic Mediaは、グローバルで拡張性に優れ、パフォーマンスが最適化された CDN(コンテンツ配信ネットワーク)を通じて、このリッチコンテンツの複数のバリエーションをリアルタイムで生成し配信します。

Dynamic Mediaは、Adobe Experience Manager Assets のデジタルアセット管理ソリューションのワークフローを組み込むことで、デジタルキャンペーン管理プロセスを簡素化し、合理化します。

無限の可能性を持つ 1 つのファイル

Dynamic Mediaの主なポイントの 1 つは、 無限の可能性を持つ 1 つのプライマリアセットファイル.

この概念をより深く理解するには、画像やビデオなど、単一のアセットを使用する従来の方法を考えてみましょう。 通常、1 つのプライマリアセットを作成します。 次に、エクスペリエンスごとに同じアセットのバージョンを手動で作成し、必要なデバイスごとに、Web ページごとに、使用されているすべてのプロパティを作成します。 時間が経つと、その 1 つのアセットが 20、30、またはそれ以上のバージョンに増え、バージョン履歴が添付されなくなります。 画像やビデオのすべてに対して同じ操作を行うと想像してみてください アセットのバージョン数は、保守と更新に対して急激に増加し、ストレージコストの増加には触れない。

Dynamic Mediaは、メディアを配信する際に使用するので、基本的に他のシステムとは異なります 動的に を単一のアセット、プライマリアセット、URL 呼び出しから取得します。 要求するDynamic Media URL パスには、顧客の画面に配信されたときにAdobeを表示する方法をアセットパブリッシュサーバーに伝える手順が含まれています。 例えば、同じ 1 つのプライマリアセットを使用して、サイズ、形式、解像度、重み、色、切り抜き、ズームビューなどの効果を無制限のレンディションで即座に配信することができます。

この独自の配信方法では、サイズや帯域幅に関係なく、一貫した品質のエクスペリエンスをあらゆる画面に送信できます。 また、フルサイズのビデオは、すべての画面タイプに最適化され、アダプティブにストリーミングされて、一貫した品質のユーザーエクスペリエンスを確保します。

AdobeDynamic Mediaは、同じプライマリイメージを異なるメディアに異なるサイズと形式で配信します。
AdobeDynamic Mediaは、サイズや帯域幅に関係なく、一貫性のある高品質なエクスペリエンスをあらゆる画面に提供します。

ここでは、「1 つのプライマリアセットファイル、無限の可能性」という概念が重要な理由について詳しく説明します。

コンテンツ配信ネットワーク

画像アセットまたはビデオアセットの運用を開始する準備が整ったら、Dynamic Media のバックボーンは、強力で最上位の配信ネットワークで構成されます。 このネットワークは、毎日世界中の数百人のクライアントに対応しています。 アセットは Akamai がホストするコンテンツ配信ネットワーク (CDN) に配布されます。 CDN は、透過的に連携してコンテンツ(特に大規模なリッチメディアコンテンツ)をエンドユーザーに配信する、ネットワーク化されたコンピュータサービスのシステムです。

CDN システムでは、Web コンテンツはインターネットを介した Web キャッシュに保存されます。 その後、Web キャッシュからエンドユーザーに配信され、配信を高速化します。 したがって、誰かが初めて Web ページをダウンロードしたときに、表示されるアセットが CDN キャッシュに配信されます。 同じ領域にいるユーザーが次に Web ページにアクセスするときに、同じキャッシュコンテンツがより高速に配信されるように、これらはサーバーに保存されます。 コンテンツはエンドユーザーに近い場所に配置されるので、より高速に配信されます。 CDN を使用すると、Web ページの表示が高速化されますが、コンテンツがすべてのインスタンスで中央サーバーからではなく、キャッシュネットワークから配信されるので、中央サーバーの帯域幅の需要が減少します。 この最適化されたフローにより、ユーザーエクスペリエンスが向上し、売上が増加します。

従来、CDN は、毎月 3.5 ペタバイトのトラフィックを顧客に提供していました。 システムは 1 日に 520 億個の資産を配信できます。 この数は、顧客に正常に配信された 864,000 個の画像およびビデオと同じです。 毎秒.

スマートイメージング

Dynamic Mediaは既に、アセットを最適化し、CDN を介してモバイルおよびデスクトップシステム上で各アセットを迅速に読み込むという優れた仕事をおこなっています。 そのために、Dynamic Mediaでは画像の品質を定義するために画像プリセットが使用されます。 また、送信する画像のタイプや、画像の鮮鋭さ、エクスペリエンスやページの様々な部分のその他の部分も定義します。

ただし、画像プリセット以外にDynamic Mediaにさらに価値を追加するには、次のようにします。 スマートイメージング.

スマートイメージングは、顧客のブラウザー機能に基づいて画像の形式とファイルサイズを自動的に最適化することで、より優れた画像アセット配信パフォーマンスを提供します。 既存の画像プリセット(画像プリセットについては、このジャーニーの第 2 部で説明します)と連携し、配信時にインテリジェンスを使用します。

このインテリジェンスにより、ブラウザーとネットワークの接続速度に基づいて、画像ファイルのサイズがさらに短縮されます。 画像アセットはページの読み込み時間のほとんどを占めるので、パフォーマンスの向上は次のような主要ビジネス指標に十分な影響を与える可能性があります。

  • 高いコンバージョン
  • サイトでの滞在時間
  • サイトの直帰率を低くする

スマートイメージングを使用すると、既存の画像プリセット設定やエンドユーザーの具体的な特性に応じて、全体として 22%~47%のパフォーマンス向上を期待できます。 画質を保ちながら、まるで触れたことのないもののように。

スマートイメージング
スマートイメージングは、顧客のブラウザー機能とネットワーク速度に基づいて、画像の形式とファイルサイズを自動的に最適化します。

スマートイメージングは、Dynamic Mediaテクニカルサポートとの連携が必要なので、デフォルトではオンになっていません。Adobe また、スマートイメージングを有効にするには、CDN キャッシュを完全にクリアして、時間を費やして再入力する必要があります。 スマートイメージングの使用に興味がある場合は、テクニカルサポートチケットを送信して、Adobeと協力し、スマートイメージングを有効にすることができます。 テクニカルサポートには、事前にスマートイメージングを試すための URL パラメーターが用意されています。 どの Web ページや画像でも試してみて、得られるパフォーマンスと節約額を確認できます。 その後、フルサイトでスマートイメージングを有効にすることができます。

アダプティブビデオセット

ページやメインページにビデオがある場合、顧客はそのコンテンツに対して長く関与し、ページに長く関与する傾向があります。これは通常、良いことです。 この動作は、Adobeが実行した分析を通じて示されました。 ただし、ビデオは複雑になる場合があります。 1 つは、大きなプライマリファイルが多い場合です。 ビデオのサイズと配信方法を決定するのは複雑で、表示しているデバイスや帯域幅に関係なく、エクスペリエンスがスムーズに実行されるようにする必要があります。

この問題を解決するために、Dynamic Mediaでは アダプティブビデオセット.

アダプティブビデオセット
アダプティブビデオセットは、異なるビットレートおよび形式でエンコードされた、同じビデオのバージョンをグループ化します。

最初に、システムにアップロードするオリジナルのプライマリビデオを使用します。 Dynamic Mediaが自動的にサイズを変更する、または トランスコード、そのビデオを複数のビデオに分割します。 次に、配信時に、どのビデオ画面、どの画質、どの形式を使用するかをインテリジェントに決定し、携帯電話、タブレット、またはデスクトップコンピュータに配信します。

例えば、iOS モバイルデバイスでは、4G、5G、Wi-Fi などの帯域幅が検出されます。次に、アダプティブビデオセット内の様々なビデオのビットレートの中から、適切なエンコード済みビデオが自動的に選択されます。ビデオは、モバイルデバイス、タブレット、またはデスクトップコンピューターにストリーミングされます。

また、ネットワークの状態が変化した場合は、ビデオ画質が自動的に動的に切り替わります。 また、顧客がデスクトップでフルスクリーンモードに移行した場合、アダプティブビデオセットはより高い解像度を使用して応答し、顧客の表示エクスペリエンスが向上します。

アダプティブビデオセットを使用すると、複数の画面やデバイスでDynamic Mediaビデオを再生するお客様向けに、スムーズで高品質な再生を実現できます。 ビデオの複雑さを取り除きます

Dynamic Mediaの使用例

次に、Dynamic Mediaが積極的な顧客エンゲージメント、忠誠度、コンバージョン、ROI の向上を推進するために役立つ、一般的な使用例の問題とソリューションを示します。

使用例:プライマリファイルのアプローチ

Dynamic Mediaの最も重要な使用例の 1 つも、最も明白な使用例の 1 つです。 つまり、配信されるページやエクスペリエンスの重み付けを軽減し、コンテンツのサイズ(画像かビデオかに関わらず)を小さくします。

次に、一般的なエクスペリエンスまたは Web ページを示します。 ページの約 90%は、画像やビデオなどのリッチメディアで構成されており、一般的にははるかに重いファイルです。

コンテンツページの重み付け
一般的な Web ページのコンテンツページの重さ。

残りの 10%はHTML、CSS コード、特定のタグです。 そのページの 90%の重み付けを最適化したいと考えている場合、Dynamic Mediaはこの作業に役立ちます。 先ほど、 無限の可能性を持つ 1 つのプライマリアセットファイル. この方法は、ページ全体の重み付けを軽減する際に重要です。 1 つのプライマリアセットを取得し、製品の詳細ページ、サムネールページ、買い物かご、検索グリッドで使用する機能は、非常に便利です。 また、複数のエクスペリエンス間でも一貫性を保ちます。

プライマリファイルのアプローチ
監視は 1 つのプライマリアセットファイルですが、その場で作成された複数のレンディション(コピーではなく)を持ちます。

Dynamic Mediaが 1 つのファイルと、その方法に対する解決策の一部を使用して解決している問題について詳しく見てみましょう。

問題 Dynamic Mediaソリューション
すべてのアセットを作成して保存します。 単一の画像ファイルを使用し、配信時に必要なレンディションのみを自動的に作成します。
高いストレージコスト。 アセットの複数のコピーを作成して保存する必要がなくなりました。
管理の連鎖を維持するのが難しい。 デバイスに最適化され、一貫性のあるエクスペリエンスの配信を保証します。
バージョン履歴がありません。
デバイス間でのブランドエクスペリエンスの一貫性が失われます。
重複アセット作成の不要なコスト。

1 つのファイルについて考えると、あらゆる種類のエクスペリエンス用にアセットを作成することになります。 最初の画像が 1 つある場合は、その画像の 20、30、40 のバリエーションを作成する必要があります。最終的に保存し、そのストレージに対して支払う必要があります。

次に、適切な画像が使用され、ブランド間の一貫性を保つ能力に影響を与える可能性があることを確認する必要があります。 また、画像が見つからない場合は、に戻って、それらのアセットを複製する必要があります。

Dynamic Mediaでは、1 つの開始画像から、その場で画像のバリエーションを作成できます。 これにより、プライマリアセットでクリエイティブになり、グラフィックデザインアーティストやフォトスタジオと行ったり来たりしなくても、追加のコンテンツを作成できます。 それはお金と時間の節約です

1 つのファイルを使用する場合は、1 つのプライマリファイルを使用します。 次に、顧客が配信または閲覧した時点でのみ、サイト、プロパティおよびエクスペリエンス全体で必要なこれらのバージョンまたはレンディションを作成します。 この効率化により、アセットに必要なストレージ量を大幅に削減し、ワークフロー全体の複雑さを軽減できます。 また、Dynamic Media の配信システムを使用すると、すべての画像とビデオが最適化され、読み込みが迅速におこなわれ、すべての画面とデバイスで優れた外観を保証できます。

使用例:ビデオ

Dynamic Mediaが解決する別の使用例として、ビデオがあります。 ビデオが複雑です。 管理するのは難しい。 ビデオファイルは、固有のファイルサイズが原因で、保存や移動が困難です。

問題 Dynamic Mediaソリューション
様々なデバイス向けに最適化されたビデオの管理と配信が困難。 すべてのデバイス用に自動的にサイズを設定する 1 つのビデオを使用します。
ビデオは、エンドユーザーの使用可能な帯域幅が原因で、低品質で停止または再生されます。 使用可能な帯域幅を自動検出し、品質を調整して高い忠実性とスムーズな再生を実現するHTMLプレーヤーを通じてビデオを配信します。
デバイス間での良好な表示と再生を確保するために、ビデオのすべてのバージョンを手動で作成するのに不可能で時間がかかります。 ワークフローを簡素化して、煩雑なトランスコーディング作業を時間を省く。
より価値の高い作業に時間を空ける。

お客様は、次の問題を解決したいと考えてDynamic Mediaに来ます。

"ビデオを手に入れ、制作に多くのお金を費やしました。 しかし私たちはページに貼り付けたり配信するのをやめました私たちのテストではビデオの品質を保証することはできませんし本当に再生するかもしれませんから 最終的には、これは当社のブランドに影響を与え、コンバージョンに対する当社の役割にも影響を与える可能性があります。"

Dynamic Media のソリューションは、1 つのプライマリビデオファイルを取り込み、Dynamic Mediaがトランスコードプロセスを通じてすべてのサイズを設定できるようにすることです。 次に、それを Dynamic Media のインテリジェントビデオプレーヤーとペアリングします。 このワークフローにより、そのビデオをメインランディングページで使用しているか、カテゴリまたは製品の詳細ページで使用しているかに関わらず、全体で一貫性が保たれ、高品質で配信されます。

その他の使用例を以下に示します。

使用例:一つの情報源

問題 Dynamic Mediaソリューション
組織内に分散されたデジタルアセット。異なるチームや事業単位に分散されます。 すべてのデジタルアセットを一元的に保存および管理します。
チームメンバーはローカルバージョンをダウンロードして作成します。 チームメンバーは、1 つのプライマリファイルを使用して および は、様々な画面サイズやデバイスをまたいで、必要なすべてのバージョンを提供します。
すべてのエクスペリエンスとデバイス用に作成された単一使用アセット。 単一使用のアセットを排除し、時間とコストを節約します。

使用例:リッチメディア向けの AI を利用したスマート切り抜き

問題 Dynamic Mediaソリューション
画像やビデオを手動で描画、測定、切り取り、焦点をハイライト表示し、すべての画面サイズやデバイスで適切に表示するのに、時間と労力がかかります。 Adobe Sensei AI 機能の 1 つであるDynamic Mediaのスマート切り抜きを使用して、画像やビデオの焦点を自動的に検出し、切り抜いて保持します。
インパクトの大きいエクスペリエンスを作成するのに費やす時間を短縮できます。 画面のサイズに関係なく、目的の目標地点をキャプチャします。
すべてのエクスペリエンスとデバイス用に作成された単一使用アセット。 煩雑な手作業を省き、あらゆるデバイスや画面で見た目に優れた高品質で高速読み込みが可能な画像やビデオを提供します。

使用例:インタラクティブメディアオーサリング

問題 Dynamic Mediaソリューション
エンゲージメント、ロイヤリティの強化、コンバージョンの促進を実現しない、フラットで静的な顧客エクスペリエンス。 技術を持たないユーザーでも、ホットスポット、カルーセル、スピンセットなどのインタラクティブな要素を簡単かつシームレスに追加して、より動的で魅力的なエクスペリエンスを実現できます。
デジタルアセットからの投資利益率 (ROI) が制限され、顧客体験が低下します。 リッチメディアエクスペリエンスからコンバージョンと投資回収率を向上させます。

Dynamic Mediaシステムでのアセットの流れの仕組み

次に、Dynamic Mediaの一般的なワークフローを示します。

Dynamic Mediaワークフロー
Dynamic Mediaシステム内でのアセットの流れ。

主な目標は、作成フェーズから始め、最後にプライマリアセットを配置することです。 これらの主要なアセットは、写真の撮影、ビデオベンダーのもの、または自分が作成したオーディオファイルの場合もあります。 Adobe InDesign、Adobe Photoshop、Adobe IllustratorなどのAdobeのCreative Suiteアプリケーションを使用して、コンテンツの作成を支援できます。

作成部分が完了したら、そのアセットをDynamic Mediaにアップロードして、アセットをオーサリングソリューションに配置します。 Dynamic Media内で、サイト上の様々な Web ページ用に適切な画像プリセットとビューアが整列していることを確認します。

最終的には、Web、印刷、E メール、デスクトップ、モバイルデバイスで使用できるように、すべてのコンテンツを最適化してDynamic Mediaサーバーに公開します。

Dynamic Mediaへのアセットのアップロード

プライマリアセットの作成が完了したら、Dynamic Mediaにアップロードします。 Dynamic Mediaにとって、アップロードするファイルの種類とファイルの形式およびサイズが重要な属性です。 1 つのファイルサポートから最大値を取得する必要があるのは、アップロード時です。

例えば、以下の監視画像は 4560 x 3020 ピクセルです。 そのサイズの画像は決して使用しない場合でも、アップロードは可能です。 画像が大きいほど、Dynamic Mediaが配信できる画質が向上します。サムネールレンディションにも影響しません。 注意:簡単に 減少 既存の画像の解像度。 しかしもしあなたが 増加 画像の解像度を指定すると、結果が満足できない結果になる可能性が高くなります。

Dynamic Mediaにアップロードする推奨される形式
アセットのアップロードに関する考慮事項。

Adobeでは、アセットを可逆形式でアップロードすることをお勧めします。 一般に、JPEGを避けるのが最適な理由は、JPEGを配信する場合やJPEGを保存し続ける場合に、時間の経過と共に画質が低下し始めるからです。 最も高い解像度の画像を可逆形式で使用して開始したい場合。 その形式は通常、TIFFまたは PNG ファイルです。

カラースペースに関しては、デジタルチャネルや Web ビューについて考える際に、通常はRGB(赤、緑、青)について考えます。

ほとんどのユーザーは、CMYK での配信や、CMYK での配信を望む理由を考えることはありません。 カラースペースは印刷物の配信に最も多く使用されるためです。 ただし、Dynamic Mediaは両方のカラースペースで配信できます。

倉庫卸売クラブなど、印刷を行うお客様も多い。 食料品店では毎週チラシを印刷することが多い このような顧客は、画像を両方のカラースペースに配置する必要があります。 従来は、2 つの異なる画像が必要でした。1 つはRGB、もう 1 つは CMYK です。 ただし、CMYKRGBを直接Dynamic Mediaにアップロードし、Dynamic Mediaに画像プリセットを通じて、またはカラープロファイルを通じて、アセットを自動的に配信させることはできます。 複数のバージョンのファイルを作成する必要がないので、 無限の可能性を持つ 1 つのプライマリアセットファイル.

アセットの公開とプレビュー

アセットをDynamic Mediaにアップロードした後、次の操作を行うことをお勧めします。 公開 アセットを選択し、 公開 または クイック公開 Dynamic Media アセットをエクスペリエンスで使用する場合は、アセットの公開が必要です。 アセットが公開されると、コピーするDynamic Media生成 URL を使用して Web ページに含めることができます。または、ページにコードを埋め込むことで含めることができます。

アセットを手動で公開する以外にも、Dynamic Mediaを設定して、アップロード時にユーザーの操作なしで即座にアセットを公開できます。

アップロード後、Dynamic Mediaでアセットのレンディションをプレビューする方法は異なります。 レンディションのプレビューは、顧客に表示される内容を知るのに役立ちます。 一般的なプレビュー方法は、アセットを選択し、そのレンディションを表示する場合に、 画像プリセット 以下に示すように。

大きい画像プリセットに基づくアセットのレンディションのプレビュー
選択した「大」画像プリセットに基づく、アセットのレンディションのプレビュー。 「URL」ボタンがクリックされました。 結果の URL パスには「大」の画像プリセット名が含まれ、Web ページで使用できます。

上記の URL はライブです。 所要時間.

アセットをプレビューする別の方法は、画像アセットを選択し、 ビューア プリセットを設定します。

ズーム垂直光ビューアプリセットに基づくアセットのプレビュー
選択した「ZoomVertical_light」ビューアプリセットに基づくアセットのプレビュー マウスポインタ (+) は、ズームインするためにウォッチ上を移動しました。 「 URL 」ボタンと「埋め込み」ボタンに注意してください。

上記のレンディションはライブです。 所要時間.

オプション — 詳細

このジャーニーの第 1 部では、様々なDynamic Mediaトピックの基本を説明しました。 今読んだ内容の詳細を知りたい場合は、以下の資料を使用して概念を詳細に検討してください。 そうでない場合は、ジャーニーの第 2 部を続行できます。 詳しくは、 このDynamic Mediaジャーニーの次の機能.

Dynamic Mediaヘルプトピック

Dynamic Mediaチュートリアル

Dynamic Mediaビューア

このDynamic Mediaジャーニーの次の機能

第 2 部では、このジャーニーでDynamic Mediaの URL を少し詳しく調べ、アセットが配信された際の動作をより深く理解します。 また、アセットをレンダリングするための画像プリセットの作成に関する基本、画像セット、スピンセット、混在メディアセットの作成方法についても説明します。

移動 Dynamic Mediaジャーニー:基本学第 2 部.

このページ