> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/components/banner/with-illustration-and-buttons.md).
# イラストとボタン付き
## 概要
この [Avonniバナー](/experience-cloud/experience-cloud-ja/experience-components/ax-banner.md) コンポーネントは、魅力的なビジュアルとインタラクティブなボタンでユーザーの注意を引くように設計されています。
左または右に配置されたイラスト、動画を見るためのダイアログを開くボタン、そしてユーザーを別のページへリダイレクトするもう一つのボタンを備えたバナーを設定する方法は次のとおりです。
ライブ結果
## インタラクティブなステップバイステップ設定ガイド
{% @arcade/embed url="" flowId="Q5libBUKTVUpYqPkUrGJ" %}
### バナーの追加
1. **バナーコンポーネントを配置します:**
* Experience Builder で、バナーを表示したいページ上の場所に Avonni Banner コンポーネントをドラッグします。
2. **メディアを設定する：**
* バナー設定内で画像またはイラストを追加するオプションを見つけます（CMS Media または Media URL）
* 使用したいイラストをアップロードまたは選択し、バナーの左側または右側に配置します（Media Position 属性を使用）
### ボタンの設定
3. **動画モーダルを開くボタンを追加します:**
* Avonni Layoutをドラッグして2列のレイアウトを作成し、各列の中にボタンを追加します。
* Avonni Button Dialogコンポーネントをドラッグします。
* ボタンの設定（ラベル、バリアント、配置）を調整します
* ボタンには、たとえば「動画を見る」のように適切なラベルを付けます。
* ボタンをクリックしてモーダルを開きます。
* モーダル内で、次を使用して動画プレーヤーをドラッグします [Avonni Videoコンポーネント](/experience-cloud/experience-cloud-ja/experience-components/ax-video.md) （dialogContentゾーン内）
* Avonni Videoコンポーネントを設定します。
4. **ページへリダイレクトするボタンを追加します:**
* 先ほど作成したAvonni Layoutバナーの別の列に、追加のボタンを含めます。
* このボタンには、「詳細を見る」などの行動喚起ラベルを付けます。
* ボタンの [ナビゲートのインタラクション](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md#overview) を「Link To」セクションで設定し、ユーザーをリダイレクトする先のページを指定します。
## 実装例
新製品発表のプロモーションバナーを作成しているとしましょう:
1. **イラスト:**
* 注目を引くために、バナーの左側に新製品の目を引くイラストを追加します。
2. **動画モーダルボタン:**
* 最初のボタンには「デモを見る」と表示されます。これは、製品デモ動画が埋め込まれたモーダルダイアログを開くように設定されています。次を使用できます [Avonni Button Dialog](/experience-cloud/experience-cloud-ja/experience-components/ax-button-dialog.md) そのために。
3. **リダイレクトボタン:**
* 2つ目のボタン「製品詳細」は、クリックすると [ページへ移動し](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md#named-page) 製品に関する詳細情報が表示されます。
4. **スタイリングとテスト:**
* バナーとボタンを会社のブランディングに合わせてスタイル設定します。
* 両方のボタンをテストして、1つが動画を正しく開き、もう1つが期待どおりにリダイレクトすることを確認します。
5. **公開:**
* すべてが問題なく動作することを確認したら、変更を公開します。
### 効果を高めるためのヒント
* イラストが関連性を持ち、バナーのメッセージを強化していることを確認します。
* 動画は短く、魅力的で、情報価値があるものにしてください。
* 「詳細を見る」ボタンは、バナーから続くストーリーを伝えるページへユーザーを誘導する必要があります。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/components/banner/with-illustration-and-buttons.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
.gif?alt=media)