Dynamic Media ジャーニー：基本知識（第 1 部）

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

このジャーニーでは、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 を初めて使用する以下のユーザーです。

• 管理者
• ビジネスアナリスト
• コンテンツアーキテクト
• コンテンツ作成者
• デザイナー
• 開発者
• マーケター
• 製品管理者／所有者

Dynamic Media の概要と機能

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

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

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

Dynamic Media について理解するための主なポイントの 1 つは、無限の可能性を持つ 1 つのプライマリアセットファイル​という概念です。

この概念をより深く理解するために、画像やビデオなどの単一アセットの従来の操作方法を考えてみましょう。通常は、1 つのプライマリアセットを作成します。次に、そのアセットのバージョンを、アセットが使用されるエクスペリエンスごと、必要なデバイスごと、web ページごとに手動で作成します。時間が経つと、1 つのアセットが 20、30、またはそれ以上のバージョンに増え、バージョン履歴も残らなくなります。保有している画像やビデオごとに、この操作を行うことを想像してみてください。アセットバージョンは、あっと言う間に圧倒的な数に増えて維持管理と更新が困難になります。ストレージコストの増加は言うまでもありません。

一方、Dynamic Media は他のシステムとは基本的に異なり、単一のプライマリアセットや RL 呼び出しから​動的に​メディアを配信します。Dynamic Media の URL パスには、顧客の画面にアセットを配信する際に、アドビのパブリッシュサーバーに表示方法を指示する命令が含まれています。例えば、同一のプライマリアセットを使用して、サイズ、形式、解像度、線幅、カラー、切り抜き、ズームビューなどのエフェクトを変更しながら無数のレンディションで即座に配信することができます。

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

Adobe Dynamic 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 のテクニカルサポートとの連携が必要なので、スマートイメージングはデフォルトではオンになっていません。また、スマートイメージングを有効にするには、CDN キャッシュを一度完全にクリアする必要があります。その後、キャッシュには、時間の経過と共にデータがまた保存されていきます。スマートイメージングの使用に関心がある場合は、テクニカルサポートチケットを送ることで、アドビと協力してスマートイメージングを有効にすることができます。次に、スマートイメージングを試すことができる URL パラメーターがテクニカルサポートから提供されます。どの web ページや画像でも試すことができるので、実際のパフォーマンスやメリットを確認できます。その後、サイト全体に対してスマートイメージングを有効にすることができます。

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

あるページやメインページにビデオがある場合、顧客がそのコンテンツに関わる時間やページに留まる時間が長くなる傾向がありますが、これは基本的に良いことです。この行動は、アドビが実施した分析を通じて明らかになっています。ただし、ビデオは扱いが複雑になりがちです。1 つには、多くの場合、プライマリファイルが大きくなります。表示しているデバイスや帯域幅に関係なくエクスペリエンスがスムーズに実行されるようにビデオをサイズ設定し、配信する方法を決定するのは簡単ではありません。

この問題を解決するために、Dynamic Media では​アダプティブビデオセット​を作成できるようになっています。

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

まずオリジナルのプライマリビデオをシステムにアップロードします。Dynamic Media は、そのビデオを複数のビデオに自動的にサイジングつまり​トランスコード​します。次に、使用するビデオ画面、画質および形式を配信時にインテリジェントに決定し、携帯電話、タブレット、デスクトップコンピューターなどにビデオを配信します。

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

さらに、ネットワークの状態が変化した場合は、ビデオ画質が自動で動的に切り替わります。また、デスクトップが全画面表示モードに切り替わった場合、アダプティブビデオセットがより高い解像度を使用するように応答するので、ユーザーの視聴エクスペリエンスが向上します。

アダプティブビデオセットを使用すると、Dynamic Media ビデオを複数の画面やデバイスで再生するユーザーが、スムーズに高画質再生を行えます。これにより、ビデオの扱いの複雑さが解消されます。

Dynamic Media のユースケース

次に、肯定的な顧客エンゲージメント、ロイヤルティ、コンバージョン、ROI 向上を推進するために Dynamic Media が役に立つ可能性がある一般的なユースケースについて、問題と解決策を説明します。

ユースケース：プライマリファイルアプローチ

Dynamic Media の最も重要なユースケースの 1 つは、最も明白なユースケースの 1 つでもあります。つまり、配信されるページやエクスペリエンスの重み付けとコンテンツ（画像かビデオかを問わない）のサイズを小さくします。

以下に示すのは、典型的なエクスペリエンスまたは web ページです。ページの約 90％は、画像やビデオなどのリッチメディアで構成されています。一般に、これらははるかに重いファイルになります。

典型的な web ページのコンテンツページの重さ。

残りの 10％はHTML、CSS コードおよび特定のタグです。そのページの 90％の重さを最適化しようとする場合、Dynamic Media がその作業に役立ちます。先ほど、無限の可能性を持つ 1 つのプライマリアセットファイル​という概念について説明しました。このアプローチは、ページ全体の重さを軽減するうえで重要です。1 つのプライマリアセットを製品詳細ページ、サムネールページ、買い物かごおよび検索グリッドで使用できるので、時間を大幅に節約できます。また、エクスペリエンス間の一貫性も保てます。

watch は 1 つのプライマリアセットファイルですが、その場で作成された複数のレンディション（コピーではなく）があります。

1 つのファイルに関して Dynamic Media で解決している問題と、そのアプローチに対する解決策のいくつかを詳しく見てみましょう。

1 つのファイルについて考えると、エクスペリエンスの種類ごとにアセットを作成することになります。例えば、出発点となる画像が 1 つあって、その画像の 20 個、30 個、40 個のバリエーションを作成する必要があるとすると、最終的にそれらを保存し、そのストレージの費用を支払う必要があります。

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

Dynamic Media では、出発点となる 1 つの画像から画像のバリエーションをその場で作成できます。そのため、グラフィックデザイナーやフォトスタジオと何度もやり取りして追加コンテンツを作成する必要がなく、プライマリアセットでクリエイティブの作業を行うことができます。そして、それはお金と時間の節約になります。

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

ユースケース：ビデオ

Dynamic Media で解決されるもう 1 つのユースケースはビデオです。ビデオは複雑です。管理も困難です。ビデオファイルは、ファイルサイズが原因で、保存や移動に難点があります。

顧客は、次のような問題を解決したいと考えて Dynamic Media にたどり着きます。

「当社では多額の資金を費やして、ビデオを制作しました。しかし、そのビデオをページに配置したり配信したりするのは避けました。テストの結果、ビデオの品質を保証できないとわかったからです。実際に再生できるかさえ、わかりません。そして、最終的に、このことは当社のブランドに影響を及ぼし、当社の役割、さらにはコンバージョンにさえ影響を及ぼす可能性があります。」

Dynamic Media の解決策は、1 つのプライマリビデオファイルを基に、Dynamic Media のトランスコーディングプロセスを通じてあらゆるサイズのファイルを作成できるようにすることです。次に、それを Dynamic Media のインテリジェントビデオプレーヤーとペアリングします。このワークフローにより、ビデオをメインのランディングページで使用しているか、カテゴリページや製品詳細ページで使用しているかに関わらず、全体でビデオの一貫性が保たれ、高画質で配信されるようになります。

検討すべきその他のユースケースを以下に示します。

ユースケース：唯一の信頼できる情報源

ユースケース：AI を活用したリッチメディア向けスマート切り抜き

ユースケース：インタラクティブメディアのオーサリング

Dynamic Media システムでのアセットのフロー

Dynamic Media の典型的なワークフローを下図に示します。

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

最終的にはプライマリアセットを作成することを主な目標に、作成フェーズから始めます。プライマリアセットは、写真撮影やビデオベンダーから入手することもできますし、自分で作成したオーディオファイルでも構いません。Adobe InDesign、Adobe Photoshop、Adobe Illustrator といったアドビの Creative Suite アプリケーションを、コンテンツの作成に役立てることができます。

作成フェーズが完了したら、アセットを Dynamic Media にアップロードすることで、アセットをオーサリングソリューションに配置します。Dynamic Media 内で、サイト上の様々な web ページに適した画像プリセットおよびビューアを準備します。

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

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

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

例えば、以下の腕時計の画像は 4560 x 3020 ピクセルです。そのサイズの画像を使用することはない場合でも、アップロードはできます。画像が大きいほど、Dynamic Media で配信できる画質は、サムネールレンディションに至るまで良くなります。注意：既存画像の解像度を​下げる​ことは簡単です。しかし、画像の解像度を​上げよう​としても、満足できない結果になる可能性が高いものになります。

アセットのアップロードに関する考慮事項。

可逆圧縮形式でアセットをアップロードすることをお勧めします。一般に、JPEG は避けた方がよいでしょう。JPEG で配信する場合や JPEG で保存を繰り返すと、時間が経つにつれて画質が低下するからです。使用可能な可逆圧縮形式の最も高い解像度の画像から始めます。その形式は通常、TIFF または PNG ファイルです。

カラースペースに関しては、デジタルチャネルや web ビューを検討する場合、通常は RGB（赤、緑、青）を考えます。

CMYK で配信しようとは思わないでしょう。その理由さえわからないでしょう。その理由は、カラースペースは印刷物の配信に使用されることが最も多いからです。ただし、Dynamic Media ではどちらのカラースペースでも配信できます。

倉庫型の卸売店など、今でも印刷を行っている顧客は多数存在します。また、毎週チラシを印刷することが多い食料品店もあります。このような顧客は、画像を両方のカラースペースで準備する必要があります。そのためには、従来、RGB 形式と CMYK 形式の 2 種類の画像が必要でした。しかし、現在は、CMYK アセットを直接 Dynamic Media にアップロードすれば、画像プリセットまたはカラープロファイルを通じて RGB アセットを自動的に配信することができます。ファイルの複数のバージョンを作成する必要がないので、無限の可能性を持つ 1 つのプライマリアセットファイル​の概念が保たれます。

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

アセットを Dynamic Media にアップロードしたら、Dynamic Media でアセットを選択して、「公開」または「クイック公開」をクリックして、アセットを​公開​することをお勧めします。アセットをエクスペリエンスで使用する場合は、アセットを公開する必要があります。アセットを公開すると、Dynamic Media で生成される URL をコピーして web ページで使用するか、web ページにコードを埋め込むことで、アセットを web ページに組み込むことができます。

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

アップロード後に、Dynamic Media でアセットのレンディションをプレビューするには、いくつかの方法があります。レンディションのプレビューは、顧客に表示される内容を把握するうえで役に立ちます。一般的なプレビュー方法としては、アセットを選択したあと、画像プリセット​を選択してアセットのレンディションを表示します（下図を参照）。

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

上記の URL は実際のものです。試してみる。

アセットをプレビューするもう 1 つの方法は、画像アセットを選択したあと、ビューア​プリセットを選択することです（下図を参照）。

選択した「ZoomVertical_light」ビューアプリセットに基づくアセットのプレビュー。画像上でマウスポインター（「+」）を移動してズームインしました。「URL」ボタンと「埋め込み」ボタンに注目してください。

上記の レンディション は実際のものです。試してみる。

オプション - 詳細情報

このジャーニーの第 1 部では、様々な Dynamic Media トピックの基本を説明しました。ここで学んだ内容についてさらに詳しく知るには、以下の資料を参照してください。または、ジャーニーの第 2 部に進んでください。この Dynamic Media ジャーニーの次のステップを参照してください。

Dynamic Media ヘルプトピック

• Experience Manager の Dynamic Media の操作
• スマートイメージングについて
• アダプティブビデオセットの作成方法
• 画質最適化のベストプラクティス
• アセットのアップロード方法
• アセットのプレビュー方法
• 3D アセットのプレビュー方法
• Dynamic Media アセットの配信方法
• アセットの公開方法
• Dynamic Media での選択的公開の操作

Dynamic Media チュートリアル

• Experience Manager Assets での Dynamic Media の使用
• Adobe Experience Manager コンテンツライブラリ（Dynamic Media で検索）

Dynamic Media ビューア

• 各ビューアのライブデモ

この Dynamic Media ジャーニーの次のステップ

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

Dynamic Media ジャーニー：基本知識（第 2 部）に移動します。

Business.Adobe.com リソース