# AX - バナー

## 概要

**AX - バナー** Experience Cloud コンポーネントで、Experience Sites ページに見出し、画像、テキストコンテンツを含む目立つメッセージを表示します。

新機能を告知したり、重要な更新を共有したり、プロモーションを強調したり、ポータルユーザをブランドメッセージで歓迎したりするために使用します。テキスト、画像、アイコン、CTA（行動喚起）ボタンを組み合わせて、ページ上部に注意を引く告知を作成します。

ポータルのホームページ、告知セクション、機能のハイライト、あるいはサイトを訪れる顧客やパートナーに重要な情報を伝える必要があるあらゆる場所に最適です。

{% hint style="danger" %}
このコンポーネントは [スロットを活用します](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#understanding-slots) 高度なカスタマイズのため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。
{% endhint %}

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0p4IXX31318MsMoyfXus%2F2024-02-14_20-48-00.png?alt=media&#x26;token=a1ca42ce-5a1d-4276-838d-708a63881508" alt=""><figcaption></figcaption></figure>

***

## Avonni バナーの構成

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

タイトルとコンテンツの設定は簡単な作業ですが、バナーの効果に大きく影響します。&#x20;

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

**1. カスタムプロパティエディタの使用:**

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

**2. テキストスタイリングオプション:**

* **サイトテーマからの継承**：Avonni バナーコンポーネントは、タイトルとコンテンツのテキストスタイルを Experience Cloud サイトのテーマ設定から継承できます。これによりサイト全体の一貫性が保たれ、統一された外観になります。
* **カスタムスタイリング**：より具体的なニーズには、カスタムプロパティエディタの下部にある Avonni 専用のスタイル設定を使用できます。このオプションでは、サイト全体のテーマとは独立してタイトルとコンテンツのスタイルを手動で設定できます。
* **カスタムスタイリングの利点**：カスタムスタイリングは、バナーを目立たせたい場合、重要なメッセージを強調したい場合、またはバナーがサイトの他の部分と異なる独自のスタイルを持つ必要がある場合に特に有用です。

### コンテンツの水平方向配置を定義する

* **中央:** バランスのとれた見た目にするためにテキストをバナーの中央に配置します。
* **左:** 伝統的なレイアウトのためにテキストを左揃えにします。
* **右:** ユニークなデザインにするためにテキストを右揃えにします。

### メディア要素を定義する

Avonni バナーコンポーネントはテキストや静止画に限定されません。メッセージに動画を取り入れて、より魅力的にすることができます。

* **動画でバナーを強化する**
  * バナーをより動的で魅力的にするために、ビデオ要素を追加します。
  * ベストな視覚効果のために動画の位置を指定します。次のオプションから選択できます: 右、左上、中央上、右上、左、左下、中央下、右下。
  * 必要に応じて、ユーザがクリックして操作できるように動画をクリック可能にすることもできます。
* **追加の動画設定**
  * バナーが読み込まれたときに動画を自動再生するかどうかを選択します。
  * 動画を繰り返し再生する（ループ）かどうかを設定します。
  * 動画プレーヤーのコントロールを表示するか非表示にするかを決めます。
  * 動画の再生速度を制御します。
  * 動画の開始時の音量レベルを設定します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FRENwos1PJNUT7Wu7Seq6%2F2024-02-14_20-53-10.png?alt=media&#x26;token=7b6aaf7f-87b6-4a22-82ba-923379e78305" alt=""><figcaption></figcaption></figure>

### 背景画像の追加

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

背景画像は3つの方法で追加できます:&#x20;

**1. 手動アップロード:**

* ユーザはデバイスから画像ファイルを直接アップロードできます。
* このオプションはカスタムグラフィック、会社ロゴ、または既に作成されローカルに保存されている特定のマーケティング資料に最適です。

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

* 背景画像はサイト式に基づいて動的に生成できます。
* この方法により、ユーザの操作、サイトデータ、または Experience Cloud サイト内で定義された特定の基準に応じてリアルタイムでバナーをカスタマイズできます。

**3. CMS メディアから:**

* ユーザは統合されたコンテンツ管理システム（CMS）から画像を選択できます。
* このオプションは画像ライブラリにアクセスでき、サイトのコンテンツリポジトリに既にある高品質で関連性の高いグラフィックを便利に選択する方法を提供します。

### インタラクション機能

**クリック可能なバナー**

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FprR1phP1xWwG7miijTRF%2F2024-03-16_11-16-16.png?alt=media&#x26;token=684da873-57a9-4b9f-b8a3-e15084dc1cfb" alt=""><figcaption></figcaption></figure>

**インタラクションの実装**

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F8nrQckL2OjZkBCSCgIuD%2F2024-03-16_11-17-42.png?alt=media&#x26;token=c40aff4e-6fbf-44c6-8e91-eb5a16fd7acd" alt="" width="365"><figcaption></figcaption></figure>

**インタラクションの定義**

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

<table><thead><tr><th width="184.5">インタラクションタイプ</th><th>説明</th></tr></thead><tbody><tr><td><a href="../puropatipaneru/cao-zuo/tsutowo">トーストを表示</a></td><td>クリック後に短く情報を伝えるメッセージを表示します。アクションの確認や文脈の提供に最適です。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/yi-dong">ナビゲート</a></td><td>クリック時にユーザを別のページやリソースにリダイレクトします。関連コンテンツやリソースへ誘導するのに適しています。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/artomdaruwoku">アラートモーダルを開く</a></td><td>クリック後にアラートモーダルで情報や警告を提示します。重要な告知に便利です。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/furdaiaroguwoku">フローダイアログを開く</a></td><td>ダイアログで Salesforce フローを起動し、複雑なインタラクションを可能にします。ステップバイステップのプロセス誘導に役立ちます。</td></tr><tr><td><a href="../puropatipaneru/cao-zuo/woku">確認を開く</a></td><td>インタラクション後に確認ダイアログをトリガーします。ユーザの確認や承認が必要なアクションに不可欠です。</td></tr></tbody></table>

***

## 仕様

{% tabs %}
{% tab title="🎛️ プロパティ" %}

<table><thead><tr><th width="264">設定</th><th>説明</th></tr></thead><tbody><tr><td><strong>タイトル</strong></td><td>バナーの主要見出しを定義し、メインメッセージへの即時の注目を引きます。</td></tr><tr><td><strong>タイトルテキストスタイル</strong></td><td><p>さまざまなテキストスタイルでタイトルの外観をカスタマイズします:</p><ul><li><strong>見出し</strong>：強調の度合いを変えるために見出しレベル1から4を選択します。</li><li><strong>段落</strong>：適切なトーンと目立ち度のために段落スタイル1または2を選択します。</li></ul></td></tr><tr><td><strong>キャプション</strong></td><td>タイトルに簡潔なサブタイトルや説明を添えて、追加の文脈や次のコンテンツへのティーザーを提供します。</td></tr><tr><td><strong>キャプションテキストスタイル</strong></td><td><p>事前定義されたテキストスタイルでキャプションの見た目をカスタマイズします:</p><ul><li><strong>見出し</strong>：重要度に応じて見出し1〜4から選択します。</li><li><strong>段落</strong>：タイトルを補完するために段落1または2を選択します。</li></ul></td></tr><tr><td><strong>コンテンツ</strong></td><td>詳細なテキストでバナーを充実させ、包括的な洞察、説明、または行動喚起を提供します。ここでメッセージの詳細に踏み込むことができます。</td></tr><tr><td><strong>コンテンツの水平方向配置</strong></td><td>コンテンツテキストの水平方向の位置を調整します。左揃え、中央揃え、右揃えのいずれかを選んで、全体のデザイン方針と一致させます。</td></tr><tr><td><strong>CMS 背景</strong></td><td>コンテンツ管理システムの素材をバナーの背景として利用し、一貫性と更新のしやすさを確保します。</td></tr><tr><td><strong>背景 URL</strong></td><td>バナーの背景画像を取得する特定のウェブリンクを定義し、視覚的な文脈や強化を提供します。</td></tr><tr><td><strong>メディア URL</strong></td><td>バナーに併設または一部として配置したいマルチメディア要素へのリンクを指定します。これは動画、音声、または他のインタラクティブなメディアになり得ます。</td></tr><tr><td><strong>メディアを背景として表示</strong></td><td>メディアをバナーの背景として設定して、没入型のマルチメディア体験を提供しつつテキストコンテンツを前面に維持することを選択します。</td></tr><tr><td><strong>メディアの位置</strong></td><td>バナー上でのメディアの配置を指定します。中央、左、右、またはレイアウトに合うカスタム配置を選択できます。</td></tr><tr><td><strong>オーバーレイカラー</strong></td><td>バナーに色のオーバーレイを追加します。読みやすさを高めたり、雰囲気を設定したり、ブランドカラーに合わせたりするのに有用です。</td></tr><tr><td><strong>クリック可能</strong></td><td>バナーをインタラクティブ要素に変えます。有効にすると、バナー全体がクリック可能となり、指定のリンクへリダイレクトしたり定義されたアクションをトリガーしたりできます。</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ メディア属性" %}

| 設定             | 説明                                                            |
| -------------- | ------------------------------------------------------------- |
| **自動再生**       | ページの読み込み時にメディアを自動的に再生させ、即時にマルチメディア体験を提供します。                   |
| **ループ**        | メディアを連続ループで再生するようにし、終了時に自動で再開するようにします。                        |
| **コントロールを非表示** | よりクリーンな見た目のためにメディアプレーヤーのコントロールを非表示にし、ユーザによる中断なしで再生させるオプションです。 |
| **再生速度**       | メディアの再生速度を調整します。ユーザの好みやデザイン意図に応じてコンテンツのテンポを調整する際に役立ちます。       |
| **音量**         | メディアの音量レベルを制御し、さりげない背景音から目立つ音声ナレーションまで、提供したいユーザ体験に合わせます。      |

{% endtab %}

{% tab title="🎨 外観" %}

{% endtab %}
{% endtabs %}

### **ノート**

**オブジェクトフィット**:

* **`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`**：コンテンツをコンテナの右側に揃えます。