---
title: "エレメント"
description: "フロービルダーで利用できるすべてのビジュアルエレメント：レイアウトコンテナ、テキスト、メディア、リスト、ボタン、入力フィールド、プロダクトなど。"
---

エレメントライブラリを開いて新しいエレメントをスクリーンに追加するには、左パネルまたはデバイスプレビューの上にある Plus ボタンをクリックしてください。
要素は以下のカテゴリに分類されます：
- [基本要素](#basics)（レイアウトコンテナ、テキスト、メディア、リスト、バッジ、チェックマーク）
- [フォーム＆クイズ](#forms--quiz)（ボタン、入力欄、クイズ、タブ）
- [ペイウォール＆コマース](#paywall--commerce)（プロダクト、トライアルトグル、ユーザーエンゲージメント、カウントダウン）
- [進捗インジケーター](#progress)とローダー

各要素には、プレースホルダーコンテンツや事前定義されたインタラクションを備えた複数のプリセット（テンプレート）が用意されています。
## ベーシック \{#basics\}

### レイアウト \{#layout\}

:::link
メイン記事: [レイアウト要素](builder-containers)
:::

レイアウト要素は、内部の要素を整理するためのコンテナです。
- **縦コンテナ**：子要素を上から下へ並べる
- **横コンテナ**：子要素を左から右へ並べる
- **区切り線（縦・横）**：コンテンツセクションを視覚的に分ける線
- **カルーセル**：スワイプ可能なコンテナ
- **フッター**：スクロール領域の外側で、画面下部に固定されるパネル
- **ボトムシート**：画面下部に固定されたスライドアップパネル
### テキスト \{#text\}

:::link
メイン記事: [テキストコンテンツ](onboarding-text)
:::

テキストは静的にすることも、[変数](onboarding-variables)（ユーザー名など）や[ローカライズされたコンテンツ](paywall-localization)を含めることもできます。

以下のテキストプリセットが標準で用意されています。このリストを変更するには、[保存済みテキストスタイル](builder-styling#reusable-styles)を追加または削除してください:

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label
**テキスト**メニューには、**旧価格**要素も含まれています。これは、乗数から自動計算された取り消し線付きのプロダクト価格です。詳しくは[旧価格を追加する](onboarding-text#add-an-old-price)をご覧ください。
### メディア \{#media\}

:::link
メイン記事: [画像、動画、アイコン](custom-media)
:::

:::note
このセクションではフォアグラウンドのメディア要素について説明します。画面全体を画像や動画で埋めるには、[画面の背景](paywall-layout-and-products#screen-background)を変更してください。
:::

- **アイコン**: 組み込みアイコンライブラリのベクターアイコン（サイズと色をカスタマイズ可能）
- **画像**: 画像 — 自分でアップロードするか URL を指定
- **動画**: 最大 50MB のファイルに対応した埋め込み動画プレーヤー。ループ再生をサポート。

### リスト \{#list\}

リスト要素は、統一されたフォーマットのデータを行と列で表示するためにコンテンツを整理します。内部的には、リストは[コンテナ](manage-paywall-ui-elements#layout)です。

- **アイコンリスト**: 先頭にアイコンとテキストラベルが付いた行
- **タイムライン**: 接続されたステップインジケーターを持つ縦のシーケンス
- **イメージリスト**: 先頭に画像とテキストが付いた行
- **アイコンカード**: 中央揃えのアイコンを持つカードのグリッド
- **イメージカード**: 画像を持つカードのグリッド
- **比較テーブル**: プラン間で機能を比較する複数列のテーブル（例：Free vs Pro）

### バッジ \{#badge\}

要素を強調するための小さなオーバーレイラベルで、割引や特定のプランをアピールするために使われます（例: "5% 割引"）。[絶対配置](manage-paywall-ui-elements#absolute)を使って、別の要素の上にバッジを重ねて配置できます。

### チェックマーク \{#checkmarks\}

[選択可能な要素](flow-selectable-elements)内で使用する選択インジケーターアイコンです。各チェックマークプリセットにはオンとオフの状態が含まれており、ユーザーの選択に応じて自動的に更新されます。

- Checkbox
- Circle
- Radiobutton
- Toggle

## フォーム & クイズ \{#forms--quiz\}

### ボタン \{#buttons\}

:::link
メイン記事：[ボタン](paywall-buttons)
:::

ボタンはタップするとアクションが実行されます。別の画面への遷移、URLを開く、フローを閉じるなどの操作が可能です。

各プリセットはあくまでも出発点です。スタイルを変更したり、任意のアクションを割り当てたりできます。ボタンの動作は [Interactions](builder-ui#interactions-properties) タブで設定してください。
- **Base**: テキストが中央に配置されたボタン
- **Right Icon**: 右側にアイコンが付いたボタン
- **With Subtitle**: 2行のテキストを含むボタン
- **Pulse Animation**: アニメーションのパルスエフェクト付きボタン
- **Purchase**: 購入をトリガーするボタン
- **Secondary Outline**: セカンダリアクション用のアウトラインボタン
- **Back**: 前の画面に戻るボタン
- **Close flow**: フローを終了するボタン
- **View more plans**: 追加のプロダクトオプションを表示するボタン
- **Links**: フッターボタンのセット（Restore、Terms of Service、Privacy Policy）
### 入力 \{#inputs\}

:::link
メイン記事: [入力とフォーム](builder-inputs-and-forms)
:::

入力フィールドにより、ユーザーがデータを入力できます。各フィールドには適切な入力方式とバリデーションルールが適用されます。

- テキスト
- メールアドレス
- パスワード
- 数値
- 電話番号
- 日付
- 時刻
- 日付 & 時刻

日付、時刻、日付 & 時刻の入力フィールドをタップすると、デバイスのネイティブピッカー（ホイールまたはカレンダー）が開きます。

[変数](onboarding-variables)を使用してユーザーの入力を処理し、条件ロジックに影響を与えることができます。

### クイズ \{#quizzes\}

:::link
メイン記事: [アンケートとクイズ](onboarding-quizzes)
:::

クイズ要素は、アンケート、好みの収集、ユーザーセグメンテーションのための複数選択画面を提供します。ユーザーの回答に基づいてフローを分岐させるには、[インタラクション](onboarding-navigation-branching)を設定してください。

- **Icon Options**: アイコン付きの1カラムリスト
- **Emoji Options**: 絵文字付きの1カラムリスト
- **Image Options**: 画像付きの1カラムリスト
- **Icon Grid**: アイコン付きの複数カラムグリッド
- **Emoji Grid**: 絵文字付きの複数カラムグリッド
- **Image Grid**: 写真付きの複数カラムグリッド
- **Rating**: 数字によるスケール（例：1〜5）
### タブ \{#tabs\}

:::link
メイン記事: [タブ](builder-tabs)
:::

タブは、画面のセクションを切り替え可能なコンテンツパネルに分割します。ユーザーがタブを選択すると、下のコンテンツがそれに合わせて更新されます。プロダクトプランのグループ化や月額・年額料金の切り替えによく使われます。

- **セグメントコントロール**: 選択中のタブを丸みのあるコーナーで囲んだピル型のスイッチャー
- **ボタンタブ**: ボタンスタイルの個別タブ
- **アンダーライン**: 選択中のタブにアンダーラインが表示されるテキストラベル

## ペイウォール & コマース \{#paywall--commerce\}

### プロダクト \{#products\}

:::link
関連記事：[プロダクト](paywall-product-block)
:::

プロダクト要素はアプリ内課金の詳細を表示し、プロダクトの選択を処理します。各プリセットはプロダクトデータを異なるレイアウトで配置します。プロダクトをリンクすると、Adaptyの実際のデータで要素が自動的に入力されます。

- **Vertical List**: 縦に並んだプロダクトカード
- **Horizontal List**: 横に並んだプロダクトカード
- **Feature Carousel**: フィーチャーチェックリスト付きのスワイプ可能なカード
- **Feature Cards**: フィーチャーチェックリスト付きの静的カード
- **Banner List**: インラインバッジ付きのコンパクトな行
{/* Coming soon - **Bottom Sheet**: product selector inside a slide-up panel */}
### トライアルトグル \{#trial-toggle\}

:::link
メイン記事: [トグル](builder-toggles)
:::

表示されるプロダクトを通常価格と無料トライアルオファーの間で切り替えるトグルです。有効にすると、プロダクトの選択と要素の状態が自動的に更新されます。

### ユーザーエンゲージメント \{#user-engagement\}

信頼感を高めてコンバージョンを促すユーザーレーティング付きのスタイル済みブロックです。テンプレートはプレースホルダーコンテンツを持つ基本的なコンテナです。

- **レビュー**: レビューとレビュアー名を持つスター評価
- **レーティング**: スター表示付きの数値スコア
- **アプリレーティング**: スターバーとレビュー数を持つ大きなスコア
- **ソーシャルプルーフ**: ユーザー数付きのアバタースタック

### カウントダウン \{#countdown\}

:::link
メイン記事: [カウントダウンタイマー](paywall-timer)
:::

時間・分・秒がゼロに向けてカウントダウンされます。期間限定オファーに緊迫感を演出するのに最適です。タイマーはゼロになった際にアクションをトリガーできます。たとえば、別の画面への遷移や割引バッジの非表示などが可能です。
- **インライン**: コンパクトな数値表示
- **単位付きインライン**: 単位ラベル付きの数値表示
- **バッジ**: 小さなハイライト表示のタイマーオーバーレイ
- **ブロック**: 日・時・分・秒を個別のカードで表示
## プログレス \{#progress\}

:::link
メイン記事: [ローダーとプログレスバー](builder-loaders-and-progress-bars)
:::

### プログレスインジケーター \{#progress-indicators\}

複数画面のフローにおけるユーザーの位置を示すステップベースのプログレスバーです。残りのステップ数をユーザーに見せる必要があるオンボーディングシーケンスに便利です。

- **リニア**: ユーザーが進むにつれて満たされる1本の連続したバー
- **セグメント**: ステップごとに個別のセグメントに分割されたバー
- **コネクター**: 短いコネクターラインでつながれた番号付きステップマーカー

### ローダー \{#loaders\}

画面遷移時のアニメーションローディングインジケーターです。アプリがユーザーデータを処理する際 — たとえばクイズ送信後などに使用します。

- **スピナー**: 回転する円形インジケーター
- **ラベル付きスピナー**: テキストラベルとペアになったスピナー（例: "読み込み中..."）
- **ローダー**: 水平プログレスバー
{/* - **Loader with label**: progress bar paired with a text label and percentage */}