カルーセルバナー carousel-banners

ホットスポットと画像マップの変数を識別します（ Experience Manager Assets と Dynamic Media の両方を使用するユーザーのみ）。

まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、Adobe Experience Manager Assets でのカルーセルバナー作成プロセスでホットスポットと画像マップのデータを適切に入力できます。

オプション：必要であれば、カルーセルセットビューアプリセットを作成します。

管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、複数のカルーセルに対してこのカスタムビューアプリセットを再利用できることです。ただし、ユーザーがカルーセルを作成するときに、カルーセルの動作や外観を直接カスタマイズすることもできます。カルーセルで特定のデザインが求められるケースではこの方法が適しています。

画像バナーをアップロードします。

インタラクティブにする画像バナーをアップロードします。

カルーセルセットの作成。

カルーセルセットでは、ユーザーはバナー画像を切り替え、ホットスポットまたは画像マップを選択して関連するコンテンツにアクセスします。

Assets でカルーセルセットを作成するには、「作成」を選択し、「カルーセルセット」を選択します。アセットをスライドに追加し、「保存」を選択します。エディター内で、カルーセルの外観と動作を直接編集することもできます。

画像バナーへのホットスポットまたは画像マップの追加.

1 つ以上のホットスポットまたは画像マップを画像バナーに追加し、それぞれにアクション（リンクやクイックビュー、エクスペリエンスフラグメントなど）を関連付けます。ホットスポットまたは画像マップを追加した後は、カルーセルセットを公開してタスクを終了します。公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。

（オプション）カルーセルバナーのプレビューを参照してください（オプション）。必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。

カルーセルバナーを公開します。

他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択して「公開」を選択します。カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。

次のいずれかの操作を行います。

• Web サイトページへのカルーセルバナーの追加 コピーしておいたカルーセルバナーの URL または埋め込みコードを web サイトページに追加できます。

  • カルーセルバナーと既存のクイックビューの統合。サードパーティの web コンテンツ管理システムを使用している場合は、新しいカルーセルバナーを、web サイト上の既存のクイックビュー実装に統合する必要があります。

• Experience Manager で web サイトにカルーセルバナーを追加します。 Experience Manager Sites のユーザーである場合は、Experience Manager でインタラクティブメディアコンポーネントを使用して、カルーセルセットをページに直接追加できます。

Assets で、カルーセルセットを作成するフォルダーに移動し、作成／カルーセルセット ​に移動します。

カルーセルバナーエディターページで「タップしてアセットセレクターを開く」を選択し、最初のスライドの画像を選択します。

カルーセルバナーエディターページで次のいずれかをおこないます。

• ページの左上隅付近にある「スライドを追加」を選択します。

• ページの中央付近にある「タップしてアセットセレクターを開く」を選択します。

カルーセルセットに含めるアセットを選択します。選択済みのアセットにはチェックマークアイコンが付いています。作業が完了したら、ページの右上隅付近にある「選択」を選択します。

アセットセレクターでは、キーワードを入力して Enter キーをタップまたはクリックすることで、アセットを検索することができます。フィルターを適用して、検索結果を絞り込むこともできます。パス、コレクション、ファイルタイプおよびタグでフィルタリングできます。フィルターを選択してから、ツールバーの フィルター アイコンを選択します。表示アイコンをタップし、列表示、カード表示、リスト表示 ​のいずれかを選択してビューを変更します。

詳しくは、セレクターの操作を参照してください。

カルーセルセット内で回転させたい画像をすべて追加するまで、スライドを追加し続けます。

（オプション）次のいずれかの操作を行います。

• 必要に応じてスライドをドラッグし、画像をセットのリスト内で並べ替えます。

• 画像を削除するには、画像を選択し、ツールバーで「スライドを削除」を選択します。

• プリセットを適用するには、ページの右上隅付近にあるプリセットドロップダウンリストを選択し、セットに一度に適用するプリセットを選択します。

スライドを削除するには、スライドを選択し、ツールバーで「 スライドを削除」を選択します。スライドを移動するには、並べ替えアイコンを選択して、希望の場所まで移動します。

スライドに画像を追加した後で、ホットスポットまたは画像マップ（または両方）を画像に追加できます。詳しくは、画像バナーへのホットスポットまたは画像マップの追加を参照してください。

カルーセルセットの視覚的なデザインと動作を変更できます。「動作」タブと「外観」タブを選択して、カルーセルバナーの外観や特定のコンポーネントの動作を調整します。ビューアエディターの使用方法について詳しくは、ビューアプリセットの管理を参照してください。

* 1 つの画像が表示される時間。デフォルトでは、各画像は 9 秒間表示されます。
* アニメーション.デフォルトでは、各スライドのトランジションはフェードです。これをスライド切り替えに変更できます。
* ボタンのスタイル。ユーザーは点または番号をタップしてバナーの画像を切り替えることができます。セットインジケーターボタンの表示位置（とスタイルが番号か点か）と大きさを変更できます。
* 画像マップまたはホットスポットに使用されるアイコンのハイライトスタイルを変更します。
* ビューアプリセットを編集する前に、プリセットの基にするスタイルを選択します。スタイルを選択しないと、ビューアプリセットの編集を開始した後、別のプリセットに切り替えることにした場合に、変更内容をすべて失うことになります。

また、カルーセルバナーの表示をプレビューすることもできます。（オプション）カルーセルバナーのプレビューを参照してください。

終了したら「保存」を選択します。

Assets ビューで、インタラクティブにするカルーセルセットに移動します。

カルーセルセットを選択し、「編集」を選択します。カルーセルビューアエディターが開きます。

インタラクティブにするスライドを選択します。

ページの左上隅付近にある「ホットスポット」または「画像マップ」を選択します。

次のいずれかの操作を行います。

• ホットスポットの場合：画像の上で、ホットスポットを表示する場所を選択します。
• 画像マップの場合：画像上で選択し、左上から右下にドラッグして画像マップ領域を作成します。画像マップのサイズを調整するには、隅をドラッグします。

必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。必要に応じて、他のホットスポットまたは画像マップを追加します。

ホットスポットまたは画像マップを削除するには、「アクション」タブを選択します。マップとホットスポット ​見出しの下にある​ 選択したタイプ ​ドロップダウンメニューから、削除するホットスポットまたは画像マップの名前を選択します。メニューの横にある​ ごみ箱 ​アイコンを選択したあと、「削除」を選択します。

「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。この名前は​ マップとホットスポット ​ドロップダウンリストにも表示されます。名前を指定すると、後で変更を加える際に、ホットスポットまたは画像特定しやすくなります。

「アクション」タブで次のいずれかの操作を行います。

• 「クイックビュー」を選択します。

  • Experience Manager Sites と eCommerce をご利用の場合は、製品ピッカーアイコン（虫眼鏡）を選択して、製品を選択ページを開きます。使用する製品を選択してから、ページの右上隅のチェックマークを選択して、カルーセルバナーエディターに戻ります。

  • Experience Manager Sites または eCommerce の顧客でない場合は、次のようにします。

    • これらの変数を定義するときは、ホットスポットの変数の識別を参照してください。

    • 次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU（Stock Keeping Unit）を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。

    • （オプション）クイックビュー内で製品をさらに識別するために必要な他の変数がある場合は、「汎用変数を追加」を選択します。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。

    • 詳しくは、セレクターの操作を参照してください。

• 「ハイパーリンク」を選択します。

  • Adobe Experience Manager Sites のユーザーである場合は、サイトセレクターアイコン（フォルダー）を選択して URL に移動します。

    note note
    NOTE
    インタラクティブコンテンツに相対 URL のリンク（特に Experience Manager Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。

  • スタンドアロンユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。

このリンクを新しいブラウザータブで開く（推奨のデフォルト）か同じタブで開くかを指定してください。

詳しくは、セレクターの操作を参照してください。

• 「エクスペリエンスフラグメント」を選択します。

  • Adobe Experience Manager Sites のユーザーである場合は、検索アイコン（虫眼鏡）を選択してエクスペリエンスフラグメントページを開きます。使用するエクスペリエンスフラグメントを選択し、ページの右上隅の「選択 」を選択して、ホットスポット管理ページに戻ることができます。
    エクスペリエンスフラグメントを参照してください。

  • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。

    note note
    NOTE
    カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされないことに注意してください。
    この問題を回避するには、ソーシャルメディアでの共有ツールを持たないビューアープリセットを作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

また、カルーセルバナーの表示をプレビューすることもできます。（任意）カルーセルバナーのプレビューを参照してください。

「保存」を選択します。

カルーセルセットを公開します。公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Experience Manager Sites をご利用の場合は、カルーセルセットを web ページに直接追加できます。

アセットの公開を参照してください。

Web サイトランディングページへのカルーセルセットの追加を参照してください。

次のいずれかの操作を行います。

• カルーセルセットアセットの上にマウスポインターを置き、編集（鉛筆アイコン）を選択します。

• カルーセルセットアセットにカーソルを合わせ、「選択」（チェックマークアイコン）を選択してから、ツールバーから​ 編集 ​を選択してください。

• カルーセルセットアセットを選択し、ページの左上隅にある「編集」（鉛筆アイコン）を選択します。

カルーセルセットを編集するには、次のいずれかの操作を行います。

• スライドを追加するには、スライドを追加 ​アイコンを選択し、そのスライドに追加したいアセットに移動してから、チェックマークを選択してください。
• スライドを並べ替えるには、スライドを新しい位置までドラッグします（並べ替えアイコンを選択して項目を移動します）。
• ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンを選択し、「ホットスポットおよび画像マップの追加」を参照してください。
• カルーセルセットの外観や動作を編集するには、外観 ​タブまたは​ 動作 ​タブを選択してから、必要なオプションを設定してください。
• ホットスポットまたは画像マップを編集するには、対応するスライドの​ アクション ​タブの下で、ホットスポットまたは画像マップを選択し、必要に応じて変更を加えます。
• スライドを削除するには、スライドを選択してから、ツールバーの​ スライドを削除 ​を選択してください。
• プリセットを適用するには、ページの右上隅付近にある​ プリセット ​ドロップダウンリストを選択し、ビューアプリセットを選択します。
• カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、「削除」を選択します。

Assets で、作成したカルーセルバナーの場所に移動し、選択して開きます。

「編集」を選択します。

ツールバーの右端にあるビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。

プレビュー ​を選択します。

画像上のホットスポットや画像マップを選択し、関連するアクションをテストすることができます。

公開済みのカルーセルバナーの埋め込みコードをコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。

Experience Manager Assets から web ページにコピーした埋め込みコードを追加します。
コピーされた埋め込みコードはレスポンシブなため、ページの埋め込み領域に自動的に適応します。