## 対話型ステップバイステップ構成ガイド
{% @arcade/embed flowId="Q5libBUKTVUpYqPkUrGJ" url="" %}
### バナーの追加
1. **バナーコンポーネントを配置：**
* Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。
2. **メディアを設定する:**
* バナー設定内で画像やイラストを追加するオプションを見つけます（CMS メディア または メディア URL）
* 使用したいイラストをアップロードまたは選択し、バナーの左側または右側に配置します（Media Position 属性を使用）
### ボタンの設定
3. **ビデオモーダルを開くボタンを追加：**
* Avonni レイアウトをドラッグして2列のレイアウトを作成し、各列内にボタンを追加します。
* Avonni Button Dialog コンポーネントをドラッグします。
* ボタンの設定（ラベル、バリアント、配置）を調整します。
* ボタンに「ビデオを見る」など適切なラベルを付けます。
* モーダルを開くにはボタンをクリックします。
* モーダルの内部に、次を使用してビデオプレーヤーをドラッグします： [Avonni Video コンポーネント](/experience-cloud/experience-cloud-ja/experience-components/ax-bideo.md) （dialogContent ゾーン内）
* Avonni Video コンポーネントを設定します。
4. **ページにリダイレクトするボタンを追加：**
* 先に作成した Avonni レイアウトバナーのもう一方の列に追加のボタンを含めます。
* このボタンに「詳細を見る」などのコールトゥアクションのラベルを付けます。
* ボタンの [ナビゲート操作](/experience-cloud/experience-cloud-ja/puropatipaneru/intarakushon/yi-dong.md#overview) 'リンク先' セクションでユーザーのリダイレクト先ページを指定して設定します。
## 実装例
新製品の発売を告知するプロモーションバナーを作成しているとしましょう：
1. **イラスト：**
* バナーの左側に新製品の目を引くイラストを追加して注目を集めます。
2. **ビデオモーダルボタン：**
* 最初のボタンは「デモを見る」と表示されます。製品デモビデオが埋め込まれたモーダルダイアログを開くように設定されています。これには、次を使用できます。 [Avonni Button Dialog](/experience-cloud/experience-cloud-ja/experience-components/ax-botandaiarogu.md) そのための
3. **リダイレクトボタン：**
* 2番目のボタン「製品詳細」はクリックされると、 [ページへ移動します](/experience-cloud/experience-cloud-ja/puropatipaneru/intarakushon/yi-dong.md#named-page) 製品に関する詳細情報が表示されます。
4. **スタイリングとテスト：**
* バナーとボタンを会社のブランディングに合わせてスタイル設定します。
* 両方のボタンをテストして、1つがビデオを正しく開き、もう1つが期待どおりにリダイレクトすることを確認します。
5. **公開：**
* すべてが問題なく動作することを確認したら、変更を公開します。
### 効果的にするためのヒント
* イラストが関連性を持ち、バナーのメッセージを強化していることを確認してください。
* ビデオは短く、魅力的で、情報に富んだものであるべきです。
* 「詳細を見る」ボタンは、バナーの説明を引き継ぐページにユーザーを誘導するべきです。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/ban/irasutotobotanki.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.