# ジャーニーキャンバスの可視化

AIに「オンボーディングジャーニーを表示して」と依頼すると、完全なビジュアルキャンバスがレンダリングされます。ステージは左から右へと流れ、デシジョンポイントはパスに分岐し、すべてのノードはクリック可能で、その下にあるセグメントルール、待機条件、またはアクティベーション設定を確認できます。

注意
ジャーニーキャンバスは、本番環境にプッシュされるのと同じYAML定義からレンダリングされます。キャンバスに表示されている内容が実際に実行される内容です。これにより、キャンバスは単なる可視化ツールではなく、バリデーションツールとしても機能します。誤って設定された分岐、欠落しているアクティベーション、または不正確な待機時間を、顧客がジャーニーに入る前に発見できます。

## 目的

ジャーニーキャンバスを使用して、顧客ジャーニーを可視化し、分岐ロジックを理解し、ステップの設定を確認し、デプロイ前にジャーニー定義を検証します。

## 前提条件

- Treasure AI Studioにサインイン済みであること（[はじめに](/ja/products/ai-studio/getting-started)）
- チャットインターフェースに慣れていること（[AIチャットインターフェース](/ja/products/ai-studio/chat/chat)）
- ジャーニー定義が作成済みまたは作成中であること（**journey**スキルについては[スキルとマーケットプレイス](/ja/products/ai-studio/skills/skills)を参照）


## ビジュアルジャーニーが重要な理由

ジャーニーのYAML定義は強力ですが、内容が密です。ネストされたデシジョンポイント、A/Bテスト、マージステップを含む200行のYAMLファイルは、テキスト形式では理解しにくいものです。キャンバスはこの問題を解決します。

- **全体のフローを一目で把握** — すべてのステージ、分岐、マージが空間的にレイアウトされます
- **ローンチ前に検証** — 欠落しているアクティベーション、到達不能なステージ、または非論理的な分岐条件を視覚的に発見できます
- **ステークホルダーへの説明** — マーケターや経営陣にYAMLを読ませることなく、ジャーニーを示せます
- **ライブジャーニーのデバッグ** — フローをトレースすることで、顧客が予期しないパスをたどっている理由を把握できます


## ジャーニーキャンバスのリクエスト方法

AIに任意のジャーニーの可視化を依頼できます。作成したばかりのジャーニー、Treasure AIアカウントから読み込んだジャーニー、またはゼロから設計中のジャーニーを対象にできます。

**リクエストの例：**


```
You: ウェルカムシリーズのジャーニーを表示して

You: 今作成したジャーニーを可視化して

You: 本番環境にプッシュする前にこのジャーニーをプレビューして
```

AIはファイルパネルにキャンバスをレンダリングします。会話の中でジャーニーを構築している場合、AIはYAML定義を生成した後に自動的にプレビューを提案します。

## キャンバスの読み方

キャンバスは**左から右**に読みます。各ジャーニーは**ステージ**で構成され、各ステージには**ステップツリー**（破線で接続されたステップのフロー）が含まれます。

### ステージ

ステージはトップレベルのコンテナです。各ステージには以下が表示されます。

| 要素 | 表示内容 |
|  --- | --- |
| **ステージタイトル** | 大きなグレーのテキストで表示されるステージ名 |
| **エントリー条件バッジ** | このステージへの入場を制御するセグメント条件 |
| **エグジット条件バッジ** | 顧客をステージから除外する条件 |
| **マイルストーンバッジ** | ステージの成功を示すイベントまたは条件 |


ステージは左から右へと流れ、顧客は順番に進んでいきます（ジャンプステップによってリダイレクトされる場合を除く）。

### ステップタイプ

各ステージ内で、ステップは個々のアクションとデシジョンです。各ステップタイプには固有のビジュアルアイデンティティがあります。

| ステップタイプ | 形状 | 色 | 機能 |
|  --- | --- | --- | --- |
| **エントリー** | 円 | 青 | 開始点 — 顧客がステージに入る場所 |
| **待機** | 円 | 赤 | 一定時間または条件が満たされるまで顧客を一時停止する |
| **アクティベーション** | 四角 | 緑 | 外部システム（メール、Webhook、Salesforce）にデータを送信する |
| **デシジョンポイント** | ひし形 | 黄 | セグメントメンバーシップに基づいて顧客を分岐させる |
| **A/Bテスト** | ひし形 | 黄 | 顧客をパーセンテージでテストバリアントに分割する |
| **マージ** | ひし形 | 黄 | 分岐を1つのパスに再統合する |
| **ジャンプ** | ひし形 | 紫 | 顧客を別のステージにリダイレクトする |
| **終了** | ひし形 | 紫 | 顧客のジャーニーを終了させる |


### 接続線

- **水平の破線**はパス内のステップを順番に接続します
- **分岐線**はデシジョンポイントとA/Bテストからサブパスへと下方向に分岐します
- **L字型のマージ線**は分岐をマージポイントで再統合します
- **垂直の点線**は複数分岐セクションの高さ全体にわたって伸びます


## ステップ詳細の確認

任意のステップノードまたは分岐バッジをクリックすると、詳細パネルに設定が表示されます。

### アクティベーションの詳細

アクティベーションステップをクリックすると以下が表示されます。

| フィールド | 表示内容 |
|  --- | --- |
| **接続先** | 外部システム（例：Salesforce Marketing Cloud、SendGrid） |
| **コネクター設定** | アクティベーションのフィールドマッピングと設定 |
| **カラム** | 送信される顧客属性 |


### 待機条件の詳細

待機ステップをクリックすると以下が表示されます。

| フィールド | 表示内容 |
|  --- | --- |
| **期間** | 顧客が待機する時間（例：7日間） |
| **条件** | 待機を早期終了させるセグメント条件 |
| **タイムアウト動作** | 条件が満たされないまま待機が終了した場合の動作 |


### デシジョンポイント / A/Bテストの詳細

分岐バッジをクリックすると以下が表示されます。

| フィールド | 表示内容 |
|  --- | --- |
| **セグメントルール** | 顧客がどの分岐に進むかを決定する条件 |
| **パーセンテージ**（A/Bテスト） | バリアント間のトラフィック分割 |
| **分岐名** | 各パスのラベル |


### エントリー条件の詳細

ステージのエントリー条件バッジをクリックすると、入場を制御するセグメント定義の全体（ネストされた条件と演算子を含む）が表示されます。

プロのヒント
詳細パネルを使用してジャーニーロジックを検証してください。各デシジョンポイントをクリックして、セグメントルールが意図したターゲティングと一致していることを確認します。これはYAMLを読むよりも速く、より確実です。

## キャンバスのレイアウトとナビゲーション

### スクロール

多くのステージや深くネストされた分岐を持つ大きなジャーニーは、表示領域を超えて広がります。水平および垂直スクロールを使用してキャンバス全体をナビゲートしてください。

### ビジュアル階層

キャンバスは一貫した空間的な文法を使用しています。

- **水平位置** = シーケンス（左が早く、右が遅い）
- **垂直位置** = 分岐（デシジョンポイントから下方向に分岐が積み重なる）
- **インデント** = ネストの深さ（サブ分岐は親からさらにインデントされる）


### テーマのサポート

キャンバスはStudioのテーマに適応します。

| 要素 | ライトモード | ダークモード |
|  --- | --- | --- |
| 背景 | 白 | ダークスレート |
| コネクター線 | ライトグレー | ミディアムグレー |
| ステージタイトル | ミュートグレー | ライトグレー |
| バッジテキスト | インディゴ | ライトインディゴ |
| ノードカラー | パステルパレット（緑、青、赤、黄、紫） | 同じパステルパレット（テーマ間で統一） |


## キャンバス上の一般的なジャーニーパターン

### リニアジャーニー

最もシンプルなパターン：エントリーが待機ステップとアクティベーションのシーケンスにつながります。


```mermaid
flowchart LR
    A([Entry]) --> B([Wait 3 days]) --> C[Send Welcome Email] --> D([Wait 7 days]) --> E[Send Follow-up] --> F{End}
```

### デシジョン分岐

デシジョンポイントがセグメントメンバーシップに基づいて2つ以上のパスに分岐し、その後マージされます。


```mermaid
flowchart LR
    A([Entry]) --> B{Decision}
    B --> C([Visited Pricing]) --> D[Send Pricing Email] --> F{Merge}
    B --> E([Excluded]) --> G[Send General Email] --> F
    F --> H{End}
```

### A/Bテスト分割

A/Bテストがパーセンテージでトラフィックを分割します。


```mermaid
flowchart LR
    A([Entry]) --> B{A/B Test}
    B -->|50%| C[Email Template A] --> E{Merge}
    B -->|50%| D[Email Template B] --> E
    E --> F{End}
```

### マルチステージジャーニー

ステージは順番に流れ、それぞれ独自のエントリー条件を持ちます。


```mermaid
flowchart LR
    subgraph S1[Stage 1: Awareness]
        A([Entry]) --> B[Ads] --> C([Wait])
    end
    subgraph S2[Stage 2: Consideration]
        D([Entry]) --> E[Email] --> F([Wait])
    end
    subgraph S3[Stage 3: Conversion]
        G([Entry]) --> H[Offer] --> I{End}
    end
    C --> D
    F --> G
```

## バリデーションへのキャンバスの活用

ジャーニーキャンバスはバリデーションツールです。`tdx journey push`で本番環境にジャーニーをプッシュする前に、キャンバスを使用して以下を確認してください。

| 確認項目 | 確認内容 |
|  --- | --- |
| **完全なパス** | すべての分岐が終了ステップ、マージ、またはジャンプのいずれかに到達しているか — デッドエンドがないか |
| **正しいアクティベーション** | 各アクティベーションステップが適切なフィールドマッピングで正しい外部システムに接続されているか |
| **論理的な分岐** | デシジョンポイントの条件がターゲティングの意図と一致しているか — 各分岐をクリックしてセグメントルールを確認する |
| **適切な待機時間** | 待機時間がキャンペーンのタイミングと一致しているか — 誤って長すぎたり短すぎたりする遅延がないか |
| **適切なマージ** | 分岐が期待どおりの場所で再統合されているか — 顧客が分岐内に無期限に留まらないか |
| **A/Bテストのパーセンテージ** | バリアントの分割が正しく合計され、コントロールグループが考慮されているか |


**ワークフロー：**

1. **journey**スキルを使用して会話の中でジャーニーを構築または修正する
2. AIに「このジャーニーをプレビューして」と依頼する
3. キャンバスを確認する — デシジョンポイントとアクティベーションをクリックして確認する
4. 問題がある場合は修正を説明する：「A/B分割を70/30に変更して」または「2番目のアクティベーションの前に3日間の待機を追加して」
5. 再度プレビューして確認する
6. 本番環境にプッシュする：AIに`tdx journey push`を実行するよう依頼する


## 確認事項

このガイドを読み終えると、以下のことができるようになります。

- [ ] AIにジャーニーキャンバスの可視化をリクエストする
- [ ] キャンバスのレイアウトを読む — ステージは左から右へ流れ、分岐は垂直に積み重なる
- [ ] 形状と色（円、四角、ひし形）でステップタイプを識別する
- [ ] ステップノードをクリックして設定を確認する（アクティベーションの詳細、待機条件、セグメントルール）
- [ ] 本番環境にプッシュする前にキャンバスを使用してジャーニーロジックを検証する


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

| 問題 | 解決策 |
|  --- | --- |
| キャンバスがレンダリングされない | ジャーニーのYAMLが有効であることを確認する — AIに「このジャーニーを検証して」と依頼するか、`tdx journey validate`を実行するよう依頼する |
| ステップが表示されない | すべてのステップが`next`参照で接続されていることを確認する。孤立したステップはキャンバスに表示されない |
| 分岐がマージされない | 分岐を参照するマージステップを追加する。キャンバスはマージされていない分岐をオープンエンドのパスとして表示する |
| キャンバスが非常に横長になる | 多くのステージを持つ大きなジャーニーは水平方向にスクロールする。スクロールバーまたはトラックパッドを使用してナビゲートする |
| 詳細パネルが開かない | ラベルテキストではなく、ステップノードの形状（円、四角、ひし形）を直接クリックする |


## 次のステップ

- [スキルとマーケットプレイス](/ja/products/ai-studio/skills/skills) — ジャーニーを構築するための**journey**および**validate-journey**スキルを有効化する
- [TDXコマンド](/ja/products/ai-studio/query/tdx-commands) — `tdx journey push`でジャーニーを本番環境にプッシュする
- [チャートとデータの可視化](/ja/products/ai-studio/visualization/charts) — ジャーニーのパフォーマンスデータを可視化する
- [アーティファクト出力](/ja/products/ai-studio/files/artifacts) — ジャーニードキュメントをPPTXまたはPDFとしてエクスポートする