AX - Button

概要

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

カスタムの CTA の追加、フォーム送信、特定ページへの移動、レコード作成、フローの起動に使用します。Experience Builder でコードなしで、ボタンのラベル、スタイル、アイコン、アクションを設定できます。

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

---

ボタンの設定

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

ボタンの外観

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

ラベル – ボタンに表示されるテキストです。短く、アクションを示すものにしてください（例：「リクエストを送信」「詳細を表示」「お問い合わせ」）。

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

アイコンの位置 – アイコンをラベルの左または右に配置します。左配置は多くの場合に適しており、右配置は前進するナビゲーションを示すのに使えます。

バリアント – ボタンの視覚スタイルです。通常、primary（強調表示で目を引く）、secondary（控えめ）、destructive（赤、削除アクション用）などがあります。アクションの重要度に応じて選択します。

水平方向の配置 – コンテナ内でのボタンの位置を左、中央、右から選択します。中央揃えは単独の CTA に適しており、左揃えはフォームのボタンに向いています。

拡張 – 有効にすると、ボタンがコンテナの全幅に合わせて広がります。目立たせたい CTA や、上にあるフォーム項目の幅にボタンを合わせたい場合に使用します。

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

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

この リンク先 設定で、ユーザーがボタンをクリックしたときに何が起こるかが決まります。実現したい内容に合ったアクションタイプを選択してください。

トーストを表示

ページ上部に表示され、数秒後に消える簡単な通知メッセージを表示します。

使用する場面: 「変更を保存しました」や「リクエストを送信しました」など、ユーザー操作を必要としない確認メッセージ。トーストは、ユーザーの作業を中断せずにフィードバックを提供します。

移動

ユーザーを別のページに移動します。Experience Site 内のページにも、外部 URL にも移動できます。

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

アラートモーダルを開く

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

使用する場面: 利用規約、プライバシー開示、または操作を進める前に読んでもらう必要がある警告など、ユーザーが確認すべき重要なお知らせ。

確認ダイアログを開く

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

使用する場面: レコードの削除、送信のキャンセル、アクセス権の削除など、取り消せない結果を伴うアクション。ダイアログによって、続行する前にユーザーが再考できます。

フロー ダイアログを開く

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

使用する場面: サポートケースの送信、アンケートの完了、アカウント情報の更新など、複数ステップのプロセスや、案内付きのワークフロー。Flow Builder でフローを作成し、それをボタンに接続します。フローは現在のページから移動せずにモーダル内で実行されます。

---

仕様

プロパティ

名前	説明	使用方法
ラベル	ボタンに表示するテキストを定義します。	ユーザーに対してボタンのアクションを示す、簡潔でわかりやすいラベルを入力してください。
アイコン名	ボタンに表示するアイコンを選択します。	ボタンのアクションを視覚的に表す適切なアイコンを選択して、ユーザーの理解を高めます。
アイコンの位置	ボタン内でのアイコンの位置を決定します。	ボタンの視覚的なバランスを取り、Web ページのデザイン方針に合う位置を選択します。
バリアント	ボタンの事前定義済みスタイルバリエーションを選択します。	ボタンのアクションの文脈と、Web ページ全体のデザイン言語に合うバリエーションを選択します。
水平方向の配置	コンテナ内でのボタンの水平方向の配置を定義します。	視覚的な調和を実現し、Web ページのレイアウト要件を満たすようにボタンを配置します。
ストレッチ	ボタンをコンテナいっぱいに広げるかどうかを決定します。	このオプションを有効にすると、ボタンが水平方向に拡張され、コンテナ内の使用可能なスペースを埋めます。
無効	ボタンの有効状態または無効状態を制御します。	ボタンを無効にしてユーザー操作を防止します。特定のアクションが適用されない場合や、一時的に防ぐ必要がある場合に便利です。

外観