# AX - ボタン

## 概要

**AX - ボタン** Experience Cloud コンポーネントで、Experience Sites ページ上にクリック可能なボタンを作成し、ナビゲーション、フォーム送信、レコード作成、モーダルの表示などのアクションを実行します。

カスタムのコールトゥアクションを追加したり、フォームを送信したり、特定のページへ移動したり、レコードを作成したり、フローを起動したりするために使用します。ボタンのラベル、スタイリング、アイコン、アクションは Experience Builder 内でコード不要で設定できます。

ポータルの CTA、カスタムナビゲーション、「お問い合わせ」アクション、レコード作成ワークフロー、または明確でブランド化されたボタンを必要とするあらゆるユーザー操作に最適です。

***

## **ボタンの設定**

Experience Builder で AX - ボタンをページにドラッグした後、主に 2 つの点を設定します：ボタンの外観と、ユーザーがクリックしたときに何が起こるかです。

### **ボタンの外観**

これらの設定はページ上でのボタンの見た目を制御します。

**ラベル** – ボタンに表示されるテキスト。短く行動を促す表現にしてください（例：「リクエストを送信」「詳細を見る」「お問い合わせ」）。

**アイコン名** – ラベルの横にアイコンを追加して、ユーザーがアクションを素早く理解できるようにします。Salesforce のアイコンライブラリから選択できます。よく使われる例はダウンロード用の「utility:download」や連絡用の「utility:email」です。

**アイコン位置** – アイコンをラベルの左または右に配置します。左配置はほとんどのケースで適しており、右配置は前方へのナビゲーションを示唆する場合に有効です。

**バリアント** – ボタンの視覚スタイル。一般的にはプライマリ（太く目立つ）、セカンダリ（控えめ）、破壊的（削除アクション用の赤）などがあります。アクションの重要度に応じて選択してください。

**水平揃え** – コンテナ内でのボタンの位置（左・中央・右）。単独の CTA には中央揃えが適し、フォーム内のボタンには左揃えが向きます。

**ストレッチ** – 有効にすると、ボタンはコンテナの幅いっぱいに広がります。目立つ CTA や、上にあるフォームフィールドの幅に合わせたい場合に使用します。

**無効** – ユーザーがボタンをクリックできないようにします。アクションがまだ利用できない場合（例：必須項目が入力されるまで「送信」ボタンを無効にする）に使用します。

### **ボタンのアクション（リンク先）**

この **リンク先** 設定はユーザーがボタンをクリックしたときに何が起こるかを決定します。達成したい目的に合ったアクションタイプを選択してください。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FphrzGIbbvwKL5nPkf8au%2F2023-12-30_11-30-24.png?alt=media&#x26;token=d120109a-df6d-4e7b-8253-4592ce66bde2" alt="" width="188"><figcaption></figcaption></figure>

[**トーストを表示**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/tsutowo)

ページ上部に短時間表示され、数秒後に自動的に消える簡潔な通知メッセージを表示します。

使用タイミング：ユーザーの操作を必要としない「変更を保存しました」や「リクエストを送信しました」のような確認メッセージ。トーストはユーザーの作業を中断せずにフィードバックを提供します。

[**ナビゲート**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/yi-dong)

ユーザーを別のページにリダイレクトします—Experience Site 内のページでも外部 URL でも可。

使用タイミング：「詳細を見る」ボタンで詳細ページに移動する場合、「ホームに戻る」ナビゲーション、または外部リソースへのリンクなど。標準ページ、レコードページ、カスタム URL に移動できます。

[**アラートモーダルを開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/artomdaruwoku)

ユーザーが続行する前に確認する必要があるメッセージを含むポップアップウィンドウを開きます。

使用タイミング：利用規約、プライバシー開示、または操作を続行する前の警告など、ユーザーに読んでもらう必要がある重要なお知らせ。

[**確認を開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/woku)

ユーザーにアクションを確認またはキャンセルするかを尋ねる確認ダイアログを表示します。

使用タイミング：取り消せない結果を伴うアクション（レコードの削除、送信の取り消し、アクセスの削除など）の場合。ダイアログはユーザーに実行前に再考する機会を与えます。

[**フローダイアログを開く**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/puropatipaneru/cao-zuo/furdaiaroguwoku)

Salesforce フローをポップアップモーダルウィンドウで起動します。

使用タイミング：サポートケースの提出、アンケートの完了、アカウント情報の更新、またはガイド付きワークフローなどの複数ステップのプロセス。Flow Builder でフローを作成し、ボタンに接続します—フローは現在のページを離れることなくモーダル内で実行されます。

***

## 仕様

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

| 名前           | 説明                          | 使い方                                                    |
| ------------ | --------------------------- | ------------------------------------------------------ |
| **ラベル**      | ボタンに表示されるテキストを定義します。        | ボタンのアクションをユーザーに示す簡潔で明確なラベルを入力してください。                   |
| **アイコン名**    | ボタンに表示するアイコンを選択します。         | ボタンのアクションを視覚的に表現し、ユーザーの理解を助ける適切なアイコンを選んでください。          |
| **アイコン位置**   | ボタン内でのアイコンの位置を決定します。        | ボタンの見た目のバランスを取り、ウェブページのデザイン方針と整合する位置を選択してください。         |
| **バリアント**    | ボタンの既定スタイルバリアントを選択します。      | ボタンのアクションの文脈やページ全体のデザイン言語に合うバリアントを選んでください。             |
| **水平揃え**     | コンテナ内でのボタンの水平方向の配置を定義します。   | 視覚的な調和を図り、ページのレイアウト要件を満たすようボタンを配置してください。               |
| **ストレッチ**    | ボタンがコンテナに合わせて伸びるかどうかを決定します。 | このオプションを有効にすると、ボタンは横方向に拡張してコンテナ内の利用可能なスペースを埋めます。       |
| **無効**       | ボタンの有効/無効状態を制御します。          | 特定のアクションが適用されない、または一時的に防止すべき場合にユーザー操作を防ぐためにボタンを無効化します。 |
| {% endtab %} |                             |                                                        |

{% tab title="外観" %}

### **間隔（上、下、左、右）**

* **マージントップ、マージンボトム、マージンレフト、マージンライト：** これらは各方向のボタンの周囲の余白を制御します。他の要素と重ならないようにボタンを正確に配置したり、余白を確保したりするために使用します。

### **ラベル／アイコン**

* **色：** ボタンのテキストまたはアイコンの既定の色。
* **アクティブ時の色：** ボタンがクリックまたはタップされたときにテキスト/アイコンが変わる色。
* **ホバー時の色：** ユーザーがマウスをボタン上に重ねたときにテキスト/アイコンが変わる色。
* **フォントファミリー：** ボタンのテキストラベルに使用される書体を指定します。サイト全体のデザインと整合し、読みやすいものを選んでください。
* **フォントサイズ：** ラベルのテキストサイズを制御します。可読性や強調のために調整してください。
* **フォントスタイル：** 通常、斜体、またはオブリークなどテキストのスタイルを設定します。特別な強調にのみ慎重に使用してください。
* **フォントウェイト：** テキストの太さを決めます。プライマリとセカンダリのボタンを区別するために異なるウェイトを検討してください。

### **背景**

* **背景色：** ボタンの背景の既定色。
* **アクティブ時の背景色：** ボタンがクリックまたはタップされたときの背景色。
* **ホバー時の背景色：** ユーザーがマウスをボタン上に重ねたときの背景色。

### **ボーダー**

* **ボーダー色：** ボタンの境界線の色。
* **アクティブ時のボーダー色：** ボタンがアクティブなときの境界線の色。
* **ホバー時のボーダー色：** ユーザーがマウスをボタン上に重ねたときの境界線の色。
* **ボーダーサイズ：** 境界線の太さ（ピクセル）。
* **ボーダースタイル：** 境界線の種類：solid、dotted、dashed など。
* **ボーダー半径：** ボタンの角の丸みを制御します。値が大きいほど柔らかく丸いボタンになります。
  {% endtab %}
  {% endtabs %}