# プロダクトツアーを作成する
このページでは、プロダクトツアー（ツールチップによるアプリ内ガイド）を作成し、ユーザーにアプリの使い方やアップデートを伝える方法を学びます。
{% hint style="success" %}
このセクションで学ぶこと
アプリに初回来訪したユーザーに、プロダクトの使い方を伝え、リテンションアップにどれだけ寄与したかを計測する。
{% endhint %}
***
### Step 1. やりたいことを思い浮かべる
ここでは、初回来訪したユーザーに対して、アプリ内で任意の要素をユーザーにハイライトし、実際に触れてもらうことを目的とします。メッセージの内容は次のようにデザインします：
* 「初回来訪ユーザー向けのプロダクトツアー」
* 全部で下記3つのガイドを順番に表示させるツアーを作成する。
* それぞれのガイドは、特定のボタンやUIをハイライトするものとする。
* 現段階ではイメージとして、ピンク色の部分で示しています。
また、今回はハイライトされたボタンやバナーなどの要素自体を押下してもらうことで、次のガイドに進めるような設定にします。\
これにより、ユーザーの体験を可能な限り阻害しない形で、「アプリ内のKPIを意図的に上昇させる」ことが可能となります。
***
### Step 2. アプリ側でガイドしたいUIに、アンカーをつける
（下記はFlutterでの例になります）
[アンカーに関するドキュメント](/reference/flutter/nubrickanchor.md)を参考に、アプリ内でガイドを挿入したい部分に、NubrickAnchorのコードを挿入します。
{% hint style="info" %}
ハイライトしたい要素ごとにアンカーのIDを事前に設定しておくことをお勧めします。これにより、その後はコードを編集せずに、`Nubrick` の管理画面で柔軟にプロダクトツアーを変更できます。
{% endhint %}
下記では、対象のUIウィジェットに任意のIDのアンカーをつけています。今回であれば、3つのガイドを作成するので、`FLOAT_BUTTON`、`SEARCH_BUTTON` 、`HABIT_CARD` という名前のアンカーを作成しておきましょう。
```dart
// 例：1つ目（左）の、フローティングボタンに対するガイド
NubrickAnchor(
"FLOAT_BUTTON",
child: ElevatedButton(
child: Text('FLOAT_BUTTON anchor'),
),
)
```
```dart
// 例：2つ目（中央）の、検索ボタンに対するガイド
NubrickAnchor(
"SEARCH_BUTTON",
child: ElevatedButton(
// それぞれの子要素
),
)
```
```dart
// 例：3つ目（右）の、習慣化バナーカードに対するガイド
NubrickAnchor(
"HABIT_CARD",
child: ElevatedButton(
// それぞれの子要素
),
)
```
***
### Step 3. エクスペリメントを作成・設定する
ログイン後、ダッシュボードページにアクセスし、以下の手順に従って実験を作成します。
1. **「エクスペリメント」ページに移動**します。
2. **「新規作成」ボタン**をクリックし、**「プロダクトツアー」**を選択します。
3. エクスペリメント設定ページが表示されるので、以下の設定を行います：
* エクスペリメント名に「新規ユーザー向けのプロダクトツアー」と入力
* トリガーで 「Only once」、「User visits for the first time」 を選択
* 配信割合を「100%」に設定
* 配信スケジュールで、Immediate（今すぐ）を選択
* 配信期間で、配信する日数を入力
4. 次に、`「バリアント」`の「ツールチップを新規作成」をクリックし、ツールチップのデザインを行います。
* まず、左のフローティングバーの上部をホバーし、`Tooltip` を選択しエディタに配置します。
* その後、配置したそれぞれのTooltipに対し、コード側で設定したAnchor IDを入力します。
* 今回であれば、それぞれのTooltipに対して、3つのIDを付与します。
* 配置したTooltipをそれぞれ矢印で繋ぎ、最後のTooltipは`x` ボタンに繋ぎます。
* また、各Tooltipを選択し、右バーの`Tooltip Navigate On Tap`の部分で、Targetに対し`On Anchor Tap (default)` を設定し、対象の要素が押下された際にガイドを進めるようにします。
* Targetに対し、On Screen Tapを設定すると、画面上のどこかをタップするとガイドが進むようになります。
5. 各Tooltipの流れが作れたら、配置したTooltipの中身のデザインや文言を修正していきます。
{% hint style="warning" %}
Nubrickでは、テキストのColorを指定しない際、\
iOS, Androidの外観モードに合わせて文字色を変更する仕様となっております。
エディタ上では黒色のテキストも、アプリユーザーの端末がダークモードの場合は、文字色が白色になりますので、\
アプリ側でダークモードの対応をされていない場合は、お手数ですがエディタ上部のボタンを切り替えながら確認し、明示的にColorの指定をお願いいたします。
{% endhint %}
最後に、「Confirm」 ボタンをクリックしてデザインを保存し、エクスペリメントを 「保存」 ボタンをクリックして設定を完了します。
***
### Step 4. エクスペリメントを実行する
エクスペリメント設定ページに戻ると、作成したエクスペリメントの設定内容とそのアナリティクスが表示されます。
**「配信する」ボタン**をクリックすると、エクスペリメントが開始され、対象期間にアプリに反映されます。
***
### Step 5. iOS/Androidアプリで確認する
エクスペリメントが反映されたら、実際にiOSまたはAndroidのアプリでプロダクトガイドが表示されるか確認します。
アプリを起動すると、ガイド内で指定した要素がハイライトされ、それぞれのTooltipが、アニメーションのように順番に表示されます🎉
---
# Agent Instructions: 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:
```
GET https://docs.nubrick.app/start/quickstart-1/tour.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.