バナー

概要

Avonni Banner コンポーネントは、Experience Cloud サイト上でリッチメディアとテキストを目立たせて表示することで、メッセージを強化します。詳細な見出しを作成したり、説明キャプションを追加したり、メッセージをより魅力的にするための追加コンテンツを含めることができます。

新機能の発表、アップデートの共有、テキストとビジュアルのバランスでストーリーを紹介するのに最適です。

Avonni Banner の設定

タイトルとコンテンツの追加

タイトルとコンテンツの設定は簡単なプロセスであり、バナーの効果に大きな影響を与えます。

タイトルとコンテンツの追加

1. カスタムプロパティエディタを使用：

• コンテンツを入力する: Avonni Banner コンポーネントに用意されたカスタムプロパティエディタにタイトルとコンテンツを直接入力できます。この方法はユーザーフレンドリーで効率的であり、迅速な更新や編集が可能です。

2. テキストスタイルオプション：

• サイトテーマから継承: Avonni Banner コンポーネントでは、タイトルとコンテンツのテキストスタイルを Experience Cloud サイトのテーマ設定から継承できます。これによりサイト全体の一貫性が保たれ、統一された外観になります。

• カスタムスタイリング: より特定のニーズには、カスタムプロパティエディタの下部にある Avonni 専用のスタイリングカスタマイズを使用できます。このオプションでは、サイト全体のテーマとは独立してタイトルとコンテンツのスタイルを手動で設定できます。

• カスタムスタイリングの利点: カスタムスタイリングは、バナーを際立たせたい場合、重要なメッセージを強調したい場合、またはバナーがサイトの他の部分とは異なる独自のスタイルを必要とする場合に特に有用です

コンテンツの水平揃えを定義する

• 中央： バナーの中央にテキストを配置してバランスの取れた外観にします。

• 左： 伝統的なレイアウトのためにテキストを左揃えにします。

• 右： ユニークなデザインのためにテキストを右揃えにします

メディア要素を定義する

Avonni Banner コンポーネントはテキストや静止画像に限定されません。バナー設計にビデオを組み込んでメッセージを活気づけ、ユーザーエンゲージメントを高めましょう。

• ビデオでバナーを強化する

  • ビデオ要素を追加して、バナーをよりダイナミックで魅力的にします。

  • 最も視覚的な効果が得られるようにビデオの位置を指定します。右、左上、中央上、右上、左、左下、中央下、右下から選択できます。

  • オプションで、ビデオをクリック可能にしてユーザーがクリックして操作できるようにします。

• 追加のビデオ設定

  • バナー読み込み時にビデオを自動再生するかどうかを選択します。

  • ビデオを繰り返し再生する（ループさせる）かどうかを設定します。

  • ビデオプレーヤーのコントロールを表示するか非表示にするかを決定します。

  • ビデオの再生速度を制御します。

  • ビデオの開始時の音量レベルを設定します。

背景画像の追加

この機能は視覚的に強い第一印象を作るのに便利であり、バナーの外観をサイトのブランディングやテーマに合わせるために使用できます。

背景画像は次の3つの方法で追加できます：

1. 手動アップロード：

• ユーザーはデバイスから画像ファイルを直接アップロードできます。

• このオプションは、カスタムグラフィック、会社のロゴ、すでにローカルに準備・保存されている特定のマーケティング素材に最適です。

2. Experience Cloud サイト式を使用して生成：

• 背景画像はサイト式に基づいて動的に生成できます。

• この方法により、ユーザーの操作、サイトデータ、または Experience Cloud サイト内で定義された特定の条件に基づいてリアルタイムでバナーをカスタマイズできます。

3. CMS メディアから：

• ユーザーは統合されたコンテンツ管理システム（CMS）から画像を選択できます。

• このオプションは、サイトのコンテンツリポジトリにすでにある高品質で関連性のある画像のライブラリにアクセスでき、便利に選択できます。

インタラクション機能

クリック可能なバナー

Avonni Banner コンポーネントの主要なインタラクティブ機能の一つは、クリック可能にできる点です。これにより受動的な閲覧者を能動的な参加者に変え、コンテンツへの関与を深めることができます。

インタラクションの実装

バナーをクリック可能にするには、まずクリック可能トグルをオンにします。次に「Link To」セクションを使用して、バナーがクリックされたときに何が起こるかを選択します。これによりバナーにさまざまな機能を追加できます。

インタラクションの定義

ユーザーがバナーをクリックすると、コンポーネントは事前定義されたインタラクションをトリガーできます。このレベルのカスタマイズにより、ユーザーエクスペリエンスはインタラクティブでサイトの特定のニーズや目標に合わせて調整されます。

仕様

注意

オブジェクトフィット:

• fill: 画像をコンテナに収まるように引き伸ばし、場合によっては歪ませます。

• contain: 画像のアスペクト比を維持し、トリミングせずにコンテナ内に収めます。

• cover: 画像のアスペクト比は維持しますが、コンテナを完全に覆うために一部が切り取られる可能性があります。

• none: コンテナのサイズに関係なく画像は元のサイズのままになります。

• scale-down: と の差を比較し、より小さい具体的なオブジェクトサイズを提供します。 none と contain, および

ボーダースタイル：

• none: 境界線は表示されません。

• solid: 連続した途切れのない線で境界線を作成します。最も一般的で直接的なスタイルです。

• dashed: 境界線が短い線分やダッシュの連続として表示されます。

• dotted: 境界線が丸い点の連続で構成されます。

• double: 2 本の並行した実線が境界線として使用されます。2 本の線の間のスペースは透明か背景と一致します。

• groove: 境界線がページに彫り込まれたように見え、3D の外観を与えます。効果は境界線の色によって変わります。

• ridge: groove の反対で、ページから浮き出ているように見え、別の 3D 効果を与えます。視覚的な結果は境界線の色に影響されます。

• inset: 上と左の境界線が陰影付けされ、要素がページに埋め込まれているように見え、右と下の境界線はハイライトされます。

• outset: inset の反対で、右と下の境界線が陰影付けされ、上と左がハイライトされ、要素がページから浮き出ているように見せます。

フォントスタイル:

• normal: テキストを標準のイタリックでないフォントスタイルで表示します。

• italic: テキストを斜体で表示し、文字を右に傾けます。

水平方向の配置:

• left: コンテンツをコンテナの左側に揃えます。

• center: コンテンツをコンテナ内で水平方向に中央揃えします。

• right: コンテンツをコンテナの右側に揃えます。