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

# ナビゲート

コンポーネントに対する操作時に、ユーザーをページ（レコード、オブジェクトページ、名前付きページ、外部URLなど）へリダイレクトします。

## 概要

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-b76cdd189cdf5f4bc6b29a9931ea057133c580fd%2F2023-11-06_11-26-43.png?alt=media" 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. 選択します **Navigate** を選び、 **名前付きページ**.
3. **ページ名:** 対象ページの API 名を入力します（例: Content\_Document\_\_c）。
4. *なぜこれを使うのか?* Experience Builder で定義された内部ページ（例: コンテンツドキュメントページ）へユーザーを誘導します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-e9561697b8d10bf218981515183b03208b8db1c6%2F2025-09-05_15-36-22.png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

#### 設定手順

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

*なぜこれを使うのか?* 特定レコードの詳細ページへユーザーを移動します（例: 連絡先レコード）。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-c4d70da683e39ea1bb32268b0779996cd6128cbc%2F2025-09-05_15-41-52.png?alt=media" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### 重要

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

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

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

#### 設定手順

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

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-ae4dd3b64c530bed1bab9f5cfa5a581985f4c167%2F2024-10-17_15-22-41.png?alt=media" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **ターゲットページを設定する**

ターゲットページ（例: CustomerDetails）に Avonni Record Detail のようなコンポーネントを追加します。その "Record ID" 属性で、式 {!Route.recordId} を使用して recordId という名前の URL パラメータを取得します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-67906ac9c31e38326caa838ca3563a069cd78933%2F2024-10-17_15-21-19.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

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

{% step %}

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-eed5b139b882ece8e987c1489203359113df215d%2Fimage%20-%202025-09-05T160337.867.avif?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*なぜこれが便利なのか*

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

{% step %}
*たとえ*

手紙の宛名を書くようなものだと考えてください。Navigate to Named Page は封筒で、URL パラメータ（例: recordId）は住所です。システムに「どこへ行くか」「どのデータを持っていくか」を伝えます
{% endstep %}

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

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

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

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

***

## 例

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

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

1. **ボタンを設定:**
   * **ラベル:** "Get Support"
   * **アイコン名:** utility:help
   * **バリアント:** neutral
   * *なぜこれを使うのか?* ユーザー支援用のヘルプボタンを作成します。
2. **リンク先インタラクションを設定:**
   * **Navigate:**
     * **タイプ:** 名前付きページ
     * **ページ名:** Customer\_Support\_\_c
     * *なぜこれを使うのか?* Experience Builder で定義された CustomerSupport ページへリダイレクトします。

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-d0e9c60e20d1a81967af5bdb9e08d6e8111f716d%2F2025-09-05_15-49-24.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

***

## 重要な考慮事項

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

***

## トラブルシューティング

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


---

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