# イラストとボタン付き

## 概要

その [Avonni バナー](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-ban) このコンポーネントは、魅力的なビジュアルとインタラクティブなボタンでユーザーの注意を引くように設計されています。 

イラストを左または右に配置し、ビデオを視聴するダイアログを起動するボタンと別のページにリダイレクトするボタンを含むバナーを構成する方法は次のとおりです。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FuyhENfprFjwyDH79nUPq%2F2023-11-07_15-33-26%20(1).gif?alt=media&#x26;token=c082d68a-34b2-4cf0-b72f-37c881bdcef9" alt=""><figcaption><p>ライブ結果</p></figcaption></figure>

## 対話型ステップバイステップ構成ガイド

{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" %}

### バナーの追加

1. **バナーコンポーネントを配置：**
   * Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。
2. **メディアを設定する:**
   * バナー設定内で画像やイラストを追加するオプションを見つけます（CMS メディア または メディア URL）
   * 使用したいイラストをアップロードまたは選択し、バナーの左側または右側に配置します（Media Position 属性を使用）

### ボタンの設定

3. **ビデオモーダルを開くボタンを追加：**
   * Avonni レイアウトをドラッグして2列のレイアウトを作成し、各列内にボタンを追加します。
   * Avonni Button Dialog コンポーネントをドラッグします。
   * ボタンの設定（ラベル、バリアント、配置）を調整します。
   * ボタンに「ビデオを見る」など適切なラベルを付けます。
   * モーダルを開くにはボタンをクリックします。
   * モーダルの内部に、次を使用してビデオプレーヤーをドラッグします： [Avonni Video コンポーネント](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-dong-hua) （dialogContent ゾーン内）
   * Avonni Video コンポーネントを設定します。
4. **ページにリダイレクトするボタンを追加：**
   * 先に作成した Avonni レイアウトバナーのもう一方の列に追加のボタンを含めます。
   * このボタンに「詳細を見る」などのコールトゥアクションのラベルを付けます。
   * ボタンの [ナビゲート操作](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/yi-dong#overview) 'リンク先' セクションでユーザーのリダイレクト先ページを指定して設定します。

## 実装例

新製品の発売を告知するプロモーションバナーを作成しているとしましょう：

1. **イラスト：**
   * バナーの左側に新製品の目を引くイラストを追加して注目を集めます。
2. **ビデオモーダルボタン：**
   * 最初のボタンは「デモを見る」と表示されます。製品デモビデオが埋め込まれたモーダルダイアログを開くように設定されています。これには、次を使用できます。 [Avonni Button Dialog](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-botandaiarogu) そのための
3. **リダイレクトボタン：**
   * 2番目のボタン「製品詳細」はクリックされると、 [ページへ移動します](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/yi-dong#named-page) 製品に関する詳細情報が表示されます。
4. **スタイリングとテスト：**
   * バナーとボタンを会社のブランディングに合わせてスタイル設定します。
   * 両方のボタンをテストして、1つがビデオを正しく開き、もう1つが期待どおりにリダイレクトすることを確認します。
5. **公開：**
   * すべてが問題なく動作することを確認したら、変更を公開します。

### 効果的にするためのヒント

* イラストが関連性を持ち、バナーのメッセージを強化していることを確認してください。
* ビデオは短く、魅力的で、情報に富んだものであるべきです。
* 「詳細を見る」ボタンは、バナーの説明を引き継ぐページにユーザーを誘導するべきです。