エレメント

エレメントライブラリを開いて画面に新しいエレメントを追加するには、左パネルまたはデバイスプレビューの上にあるプラスボタンをクリックしてください。

要素は以下のカテゴリーに分類されます：

基本（レイアウトコンテナ、テキスト、メディア、リスト、バッジ、チェックマーク）
フォームとクイズ（ボタン、入力欄、クイズ、タブ）
ペイウォールとコマース（プロダクト、トグル、ユーザーエンゲージメント、カウントダウン）
進捗インジケーターとローダー

各要素に対して、Adapty はプレースホルダーコンテンツや事前定義されたインタラクションを含む複数のプリセット（テンプレート）を提供しています。

ベーシック

レイアウト

メイン記事: レイアウト要素

レイアウト要素は、内部の要素を整理するためのコンテナです。

縦コンテナ: 子要素を上から下へ並べる
横コンテナ: 子要素を左から右へ並べる
区切り線（水平・垂直）: コンテンツセクションを視覚的に分割する線
カルーセル: スワイプ可能なコンテナ
フッター: スクロール領域の外側で画面下部に固定されるパネル
スライディングシート: メインコンテンツをヒーロー画像の上に重ねるパネル
ボトムシート: 画面下部に固定されたスライドアップ式パネル

テキスト

メイン記事: テキストコンテンツ

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

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

H1
H2
H3
Button Label
Body
Caption
Small Label

テキストメニューには、旧価格要素も含まれています。これは、乗数から自動計算された取り消し線付きのプロダクト価格です。詳しくは旧価格を追加するをご覧ください。

メディア

メイン記事: 画像、動画、アイコン

Note

このセクションではフォアグラウンドのメディア要素について説明します。画面全体を画像や動画で埋めるには、画面の背景を変更してください。

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

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

バッジ

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

チェックマーク

選択可能な要素（プロダクトカードなど）の内部で使用するインジケーターアイコンです。各形状はオンとオフの2種類のプリセットとして提供されます。

Checkbox
Circle
Radiobutton
Toggle

ユーザーが直接タップするスイッチやチェックボックスには、代わりに Toggle 要素を使用してください。

フォーム & クイズ

ボタン

メイン記事：ボタン

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

各プリセットはあくまでも出発点です。スタイルを変更したり、任意のアクションを割り当てたりできます。ボタンの動作は Interactions タブで設定してください。

Base: テキストが中央に配置されたボタン
Right Icon: 右側にアイコンが付いたボタン
With Subtitle: 2行のテキストを含むボタン
Pulse Animation: アニメーションのパルスエフェクト付きボタン
Purchase: 購入をトリガーするボタン
Secondary Outline: セカンダリアクション用のアウトラインボタン
Back: 前の画面に戻るボタン
Close flow: フローを終了するボタン
View more plans: 追加のプロダクトオプションを表示するボタン
Links: フッターボタンのセット（Restore、Terms of Service、Privacy Policy）

入力

メイン記事: 入力とフォーム

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

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

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

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

クイズ

メイン記事: アンケートとクイズ

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

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

タブ

メイン記事: タブ

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

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

ペイウォール & コマース

プロダクト

トグル

メイン記事：トグルとチェックボックス

ユーザーがタップしてオン・オフを切り替えるスイッチとチェックボックスです。それぞれが選択可能な要素であるため、他の要素がその状態に応じて変化できます。

Trial toggle：表示されているプロダクトを通常価格と無料トライアルオファーの間で切り替えます
Checkbox：テキストラベル付きのチェックボックスで、利用規約・プライバシーポリシーへの同意文があらかじめ入力されています
Toggle：テキストラベル付きのスイッチ

ユーザーエンゲージメント

カウントダウン

メイン記事：カウントダウンタイマー

時間・分・秒をゼロに向けてカウントダウン表示します。期間限定オファーに緊迫感を演出するのに活用できます。タイマーがゼロに達したときに、別の画面への遷移や割引バッジの非表示など、アクションをトリガーできます。

インライン: コンパクトな数値表示
単位付きインライン: 単位ラベル付きの数値表示
バッジ: 小さなハイライト表示のタイマーオーバーレイ
ブロック: 日・時・分・秒を個別のカードで表示

プログレス

メイン記事: ローダーとプログレスバー

プログレスインジケーター

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

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

ローダー

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

スピナー: 回転する円形インジケーター
ラベル付きスピナー: テキストラベルとペアになったスピナー（例: “読み込み中…”）
ローダー: 水平プログレスバー