> 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/puropatipaneru/interactions/navigate.md).

# 移動

## 概要

Navigate インタラクションでは、ユーザーがボタンのクリックなどでコンポーネントを操作した際のナビゲーションアクションを定義できます。この機能により、さまざまなページタイプへシームレスにリダイレクトでき、ユーザーエンゲージメントを高め、サイト全体でスムーズな閲覧体験を実現します。

<figure><img src="/files/4e42b87fe6eabf27876e6e766947ce524a19c89d" alt="" width="563"><figcaption></figcaption></figure>

### **主な機能**

* 複数のページ参照タイプをサポート
* カスタマイズ可能なナビゲーションアクション
* サイトのナビゲーションフローを改善

### ユースケース

* **製品ページ:** 詳細な製品仕様ページへリダイレクトします。
* **サポートページ:** ヘルプ記事または問い合わせフォームへ移動します。
* **コミュニティページ:** メンバープロフィールまたはディスカッションスレッドへリンクします。
* **イベントページ:** イベント登録フォームへ誘導します。
* **ランディングページ:** キャンペーン詳細ページへ案内します。
* **プロフィールページ:** 関連する取引先責任者レコードへ移動します。

## 設定

Experience Cloud サイトページ上のコンポーネント（例: Button）に Navigate インタラクションを追加し、Experience Builder の Interactions タブから設定します。

### **利用可能なナビゲーションタイプ**

これらのページ参照タイプは、ユーザーがどこへ移動するかを指定します。

| ナビゲーションタイプ             | 説明                                   | 使用例                          |
| ---------------------- | ------------------------------------ | ---------------------------- |
| **Aura - 外部レコードページ**   | Aura フレームワークを使用して特定のレコードページにリンクします。  | 取引先責任者の詳細を表示します。             |
| **Aura - 外部レコード関連ページ** | 関連レコード（例: 取引先の取引先責任者）にリンクします。        | 取引先の商談を表示します。                |
| **Aura - ログインページ**     | ログインまたはログアウトのアクションを実行します。            | 制限されたコンテンツにアクセスするためにログインします。 |
| **ナレッジ記事**             | 特定のナレッジ記事へ移動します。                     | サポート記事にアクセスします。              |
| **管理対象コンテンツページ**       | CMS で管理されたコンテンツページにリンクします。           | ニュース記事を表示します。                |
| **名前付きページ**            | Experience Builder の内部ページへリダイレクトします。 | 「Support」という名前付きページへ移動します。   |
| **オブジェクトページ**          | オブジェクトのリストビューまたは新規レコードページへ移動します。     | 取引先責任者のリストビューを開きます。          |
| **レコードページ**            | 特定レコードの詳細ページにリンクします。                 | 取引先レコードを表示します。               |
| **レコード関連ページ**          | 関連リスト（例: 取引先責任者の商談）へ移動します。           | 取引先のケースを表示します。               |
| **Web ページ**            | 外部または内部の Web ページへリダイレクトします。          | パートナーサイトへリンクします。             |

*<mark style="background-color:green;">**ベストプラクティス**</mark>:* 対象に応じてタイプを選択します（例: レコードには Record Page）。プレビューでナビゲーションをテストしてください。

**特定ページへのナビゲーションの設定**

特定のページまたはリソースへのナビゲーションを設定するには、ユースケースに応じて次の手順に従ってください。

### **名前付きページへ移動する**

1. Button コンポーネントを追加し、 **Interactions** タブに移動します。
2. 選択 **移動** を選択し、 **名前付きページ**.
3. **ページ名:** 対象ページの API 名を入力します（例: Content\_Document\_\_c）。
4. *なぜこれが必要なのですか？* Experience Builder で定義された内部ページ（例: コンテンツドキュメントページ）へユーザーを移動させます。

<figure><img src="/files/8a69d38f1056e5b8bf56f33f33f9df52b07343ee" alt=""><figcaption></figcaption></figure>

### **レコードページへ移動する**

このオプションは、ボタンまたはコンポーネントで Experience Cloud サイト内の特定レコードの詳細ページを開きたい場合に使用します

#### 設定手順

1. 選択 **移動** を選択し、 **レコードページ**.
2. **オブジェクト API 名:** オブジェクトを入力します（例: Contact）。
3. **レコード ID:** リダイレクト用に正しいレコード ID フィールドを選択します。通常は「**`レコード: Id`**」です。
4. **アクション名:** View に設定します（詳細表示の既定値）。

*なぜこれが必要なのですか？* ユーザーを特定レコード（例: Contact レコード）の詳細ページへ移動させます。

<figure><img src="/files/da227c63e05b721e24b1d095097da0bed142400c" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### 重要

レコードページへのナビゲーションが正しく機能するようにするには、まず Navigate インタラクションの遷移先となる Object Page を Experience サイト上に作成してください。このページが存在しない場合、Navigate to Record Page インタラクションは機能しません。
{% endhint %}

### **外部 Web ページへ移動する**

このオプションは、ボタンまたはコンポーネントで外部サイトや別の Web リソース（メイン Web サイト、パートナーポータル、ドキュメントページなど）を開きたい場合に使用します

#### 設定手順

1. 次を選択します **移動** インタラクションを選択し、 **Web ページ** オプション。
2. **対象 URL:** 次のいずれかを実行できます:
   * フィールド（例: URL を保存するレコード上の数式フィールド）を選択して、リダイレクト先を動的に設定します。
   * または、 **カスタム** を選択し、外部 URL（例: <https://www.example.com）を手動で入力します。>
3. **なぜこれが必要なのですか？** このオプションは、ユーザーを外部 Web サイトまたはリソースへリダイレクトし、サイトの接続性を高めます。
4. **トラブルシューティング:** ナビゲーションが機能しない場合は、URL または選択したフィールド値が有効であることを確認し、ユーザーに対象サイトへアクセスするための必要な権限があることを確かめてください。

### **Navigate to Named Page で URL パラメーターを渡す**

この機能を使うと、動的データ（例: レコード ID）を対象ページへ送信し、ユーザーのコンテキストに基づいてその内容をカスタマイズできます。新しいページで特定レコードの詳細を表示するなど、パーソナライズされた体験を作成するのに最適です。

<figure><img src="/files/f742c14581d7fb8bae13e92d9dfb02563e4a1457" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **対象ページを設定する**

Avonni Record Detail のようなコンポーネントを対象ページ（例: CustomerDetails）に追加します。その「Record ID」属性に、recordId という URL パラメーターを受け取るための式 {!Route.recordId} を使用します。

<figure><img src="/files/246968a3b21ec095f65dcf9a47f080ae3829e7f2" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **ボタンを設定する**

元のページ（例: ホームページ）に Avonni Button を追加します。 **移動** 設定で、 **名前付きページ** を選択し、API 名（例: CustomerDetails）を入力します。
{% endstep %}

{% step %}

#### **パラメーターを追加する**

* **名前:** recordId を入力します（対象コンポーネントの属性名と一致させます）。
* **値：** フィールド（例: {!Record.Id}）を選択するか、渡す特定のレコード ID を入力します。

<figure><img src="/files/e0269e5b0e780e5b5bc3ec81fc764bb259d36202" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*これが役立つ理由*

この機能を使うと、動的データ（例: レコード ID）を対象ページに送信して、その内容をカスタマイズできます。たとえば、ホームページ上のボタンをクリックすると、渡された recordId に基づいて特定の取引先責任者情報を表示する CustomerDetails ページへユーザーを移動させることができます。
{% endstep %}

{% step %}
*たとえ*

手紙の宛先を書くことをイメージしてください。Navigate to Named Page は封筒であり、URL パラメーター（例: recordId）は宛先で、システムにどこへ行き、どのデータを持っていくかを伝えます
{% endstep %}

{% step %}
*トラブルシューティング*

対象ページが正しく読み込まれない場合は、recordId パラメーターが対象コンポーネントの属性と一致していること、および ID が有効であることを確認してください。
{% endstep %}
{% endstepper %}

### **ナレッジ記事へ移動する**

1. 選択 **移動** を選択し、 **ナレッジ記事**.
2. **URL 名:** 式 `{{Record.UrlName}}` を入力して、現在のレコードに関連付けられたナレッジ記事へ動的にリンクします。
3. *なぜこれが必要なのですか？* 現在のレコードの `UrlName` フィールドに基づいて、ユーザーを特定のナレッジ記事ページへ移動させ、サポートコンテンツへのアクセスを簡素化します。
4. *ヒント:* この `{{Record.UrlName}}` この式は、LWR 構文を使用してナレッジ記事の一意の URL 名（例: 関連レコードから取得）を取得します。有効な `UrlName` フィールドに値が設定されていることを確認してください。
5. *トラブルシューティング:* ナビゲーションに失敗する場合は、 `UrlName` フィールドが存在し、有効なナレッジ記事の URL セグメント（例: article-title）が含まれていることを確認してください。あわせて、ユーザーにその記事へアクセスする権限があるか確認してください。

***

## 例

### **例 1: サポートページへ移動する**

この例では、Experience Cloud サイト上のサポートページへ移動するためのボタンを追加します。

1. **ボタンを設定:**
   * **ラベル:** 「サポートを受ける」
   * **アイコン名:** utility:help
   * **バリアント:** neutral
   * *なぜこれが必要なのですか？* ユーザー支援のためのヘルプボタンを作成します。
2. **Link To インタラクションを設定:**
   * **Navigate:**
     * **タイプ:** 名前付きページ
     * **ページ名:** Customer\_Support\_\_c
     * *なぜこれが必要なのですか？* Experience Builder で定義された CustomerSupport ページへリダイレクトします。

**結果:** ユーザーは任意のページでボタンをクリックし、サポートページへ移動します。

<figure><img src="/files/91cbecbd8342d2824ea4a513907668e619d32843" alt="" width="375"><figcaption></figcaption></figure>

***

## 重要な考慮事項

* **対象の正確性:** ページ名または ID が完全に一致していることを確認してください。
* **パフォーマンス:** ナビゲーション先は軽量に保ってください。
* **アクセシビリティ:** ボタンのフォーカスとコントラストをテストしてください。
* **セキュリティ:** 問題を防ぐため、外部 URL を検証してください。

***

## 一般的な問題のトラブルシューティング

* **ナビゲーションが機能しない:** 選択したタイプと対象（例: 正しいページ名またはレコード ID）を確認し、権限も検証してください。
* **ページが見つかりません:** 名前付きページまたはオブジェクトが Experience Builder に存在することを確認してください。
* **動的 ID が失敗する:** レコード ID のソース（例: {!Record.Id}）が有効であることを確認してください。
* **問題が解決しない場合:** サポートチームまでご連絡ください： <support@avonni.com> サポートが必要な場合は。

***

## 概要

Avonni Navigate コンポーネントは、カスタマイズ可能なナビゲーションアクションによって Experience Cloud サイトを強化します。ページやリソースへユーザーを誘導するのに最適です


---

# 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/puropatipaneru/interactions/navigate.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.
