> 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) このコンポーネントは、魅力的なビジュアルとインタラクティブなボタンでユーザーの注意を引くように設計されています。

左または右に配置したイラスト、動画を視聴するためのダイアログを開くボタン、そしてユーザーを別のページにリダイレクトする別のボタンを備えたバナーを設定する方法は次のとおりです。

<figure><img src="/files/369b0175645cf08d72c4a1a82bcf5fddc5443f69" alt=""><figcaption><p>ライブ結果</p></figcaption></figure>

## インタラクティブなステップバイステップ設定ガイド

{% @arcade/embed url="<https://app.arcade.software/share/Q5libBUKTVUpYqPkUrGJ>" 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 バナーのもう一方の列に、追加のボタンを入れます。
   * このボタンには、「詳しく見る」などのCTAラベルを付けます。
   * ボタンの [ナビゲートインタラクション](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md#overview) を「Link To」セクションで、ユーザーを転送する先のページを指定して設定します。

## 実装例

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

1. **イラスト:**
   * 注目を集めるために、バナーの左側に新製品の目を引くイラストを追加します。
2. **動画モーダルボタン:**
   * 1つ目のボタンには「デモを見る」と表示されています。製品デモ動画が埋め込まれたモーダルダイアログを開くように設定されています。これには [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. **スタイリングとテスト:**
   * バナーとボタンを会社のブランディングに合わせてスタイル設定します。
   * 両方のボタンをテストし、一方が動画を正しく開き、もう一方が期待どおりにリダイレクトすることを確認します。
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=<question>&goal=<endgoal>
```

`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.