---
title: "選択可能な要素とグループ"
description: "要素を選択可能にし、グループに整理して、フロー全体の条件でその状態を活用する方法を解説します。"
---

選択可能な要素とは、ユーザーがタップして選択・解除できるフロー要素のことです。その状態を使って、フロー全体のナビゲーション、表示/非表示、その他のロジックを制御できます。できることは以下の通りです：

- [デフォルトの選択可能な要素を使う](#default-selectable-elements) — クイズの選択肢、プロダクト、タブ、トライアルトグルは最初から選択可能
- [任意の要素を選択可能にする](#make-an-element-selectable) — 任意の要素を選択可能にして、グループに割り当てる
- [グループを作成・管理する](#create-a-group) — 選択可能な要素を単一選択、複数選択、またはトグルグループに整理する
- [条件で選択状態を使う](#use-selectable-state-in-conditions) — フロー内の任意の画面の条件からグループの値を参照する

## デフォルトの選択可能な要素 \{#default-selectable-elements\}

一部の要素タイプはデフォルトで選択可能です。自動作成されたグループにすでに属しており、追加設定は不要です：

- **クイズの選択肢**：各クイズの回答はクイズグループ内の選択可能な要素です。[クイズ](onboarding-quizzes)を参照してください。
- **プロダクト**：プロダクトグループ内のプロダクトカード。[プロダクトブロック](paywall-product-block)を参照してください。
- **タブ**：タブグループ内のタブアイテム。[タブ](builder-tabs)を参照してください。
- **トライアルトグル**：グループに属し、選択状態を持つコンテナ。[トグル](builder-toggles)を参照してください。

## 要素を選択可能にする \{#make-an-element-selectable\}

場合によっては、追加の要素を選択可能にしたいことがあります。たとえば、クイズグループ内の要素として機能する **Don't ask me again** チェックボックスを追加できます。

要素を選択可能にするには：

1. 画面上または **Layers** パネルで要素を選択します。
2. 右側の **Interactions** パネルに切り替えます。
3. **Turn into selectable element** を選択します。

4. **Group** ドロップダウンで、既存のグループを選択するか[新しいグループを作成](#create-a-group)します。
5. **Element ID** を設定します — グループ内でこの要素を一意に識別するIDです。
6. この要素をデフォルトで選択状態にしたい場合は、**Set as default in group** チェックボックスをオンにします。

## グループを作成する \{#create-a-group\}

グループは画面上の選択可能な要素を整理し、ユーザーが1つだけ選べるか、複数選べるか、トグルできるかといった選択の仕方を定義します。

グループを作成するには：

1. 要素を選択して[選択可能にします](#make-an-element-selectable)。
2. **Group** ドロップダウンで **Create group** を選択します。

3. **Group name** を入力します。
4. [グループタイプ](#group-types)を選択します。

これで、同じ画面上の他の選択可能な要素の **Group** ドロップダウンでこのグループが使えるようになります。

## グループタイプ \{#group-types\}

:::important
ほとんどの[クイズプリセット](onboarding-quizzes)はデフォルトで **multi-choice** になっています。1つだけ回答できるようにするには、[グループタイプ](#manage-groups)を変更してください。
:::

- **Single choice**：グループ内で一度に選択できる要素は1つだけです。新しい要素を選択すると、前の選択が解除されます。
- **Multi-choice**：複数の要素を同時に選択できます。
- **Toggle**：各要素はタップするたびに選択・解除を切り替え、他の要素とは独立して動作します。

## グループを管理する \{#manage-groups\}

グループを表示・編集するには、**Screen settings** パネルを開いて **Selectable groups** セクションを確認します。現在の画面上のすべてのグループが一覧表示されます。

グループIDをクリックすると：

- グループIDを変更できます
- [グループタイプ](#group-types)を変更できます
- グループ要素が条件でどのように参照されているかを確認できます

## 条件で選択状態を使う \{#use-selectable-state-in-conditions\}

グループの選択状態は、フロー内の任意の画面の条件から参照できます — グループが定義されている画面だけでなく、どの画面からでも参照可能です。たとえば：`IF quiz.photo is selected, THEN navigate to the Photo screen` のように使います。

:::important
グループ内のすべての要素は同じ画面上に配置する必要があります。異なる画面の要素を1つのグループに追加することはできません。ただし、グループの値はフロー内の任意の画面の条件から参照できます。
:::

選択状態は以下の場面で使えます：

- **[条件付きアクション](onboarding-actions#conditional-actions)**：選択された要素に基づいて、ユーザーを異なる画面にルーティングしたり、異なるアクションをトリガーしたりします。
- **[動的ナビゲーション](onboarding-navigation-branching)**：クイズの回答、トグルの状態、その他の選択に基づいてフローを分岐させます。
- **[条件付き表示](onboarding-element-visibility)**：前の画面でユーザーが選択した内容に基づいて要素を表示または非表示にします。