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

エレメントは次のカテゴリーに分類されます:

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

各エレメントには複数のプリセットが用意されており、プレースホルダーコンテンツや事前定義されたインタラクションを含むテンプレートとして利用できます。

ベーシック

レイアウト

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

• 垂直コンテナ: 子要素を上から下へ並べます
• 水平コンテナ: 子要素を左から右へ並べます
• 区切り線（水平・垂直）: コンテンツセクションを視覚的に分割する線
• カルーセル: スワイプ可能なコンテナ
• ボトムシート: 画面下部に固定されたスライドアップパネル

テキスト

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

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

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

メディア

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

リスト

リスト要素は、コンテンツを行と列に整理して均一にフォーマットされたデータを表示します。内部的には、リストはコンテナです。

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

バッジ

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

チェックマーク

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

• Checkbox
• Circle
• Radiobutton
• Toggle

フォーム & クイズ

ボタン

ボタンはタップすることでアクションを実行します — 別の画面へのナビゲーション、URL を開く、フローを閉じるなど。

すべてのプリセットは出発点です — スタイルを変更して任意のアクションを割り当てられます。ボタンの動作は インタラクション タブで設定します。

• ベース: 中央揃えのテキストを持つ通常のボタン
• 右アイコン: 右側にアイコンを持つボタン
• サブタイトル付き: 2行のテキストを含む
• パルスアニメーション: アニメーションのパルスエフェクトを含む
• 購入: 購入をトリガーする
• セカンダリアウトライン: セカンダリアクション用のアウトラインボタン
• 戻る: 前の画面に戻る
• フローを閉じる: フローを終了する
• さらにプランを表示: 追加のプロダクトオプションを表示する
• リンク: フッターボタンのセット（復元、利用規約、プライバシーポリシー）

入力

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

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

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

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

クイズ

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

• アイコンオプション: アイコン付きの1列リスト
• 絵文字オプション: 絵文字付きの1列リスト
• 画像オプション: 画像付きの1列リスト
• アイコングリッド: アイコン付きの複数列グリッド
• 絵文字グリッド: 絵文字付きの複数列グリッド
• 画像グリッド: 写真付きの複数列グリッド
• レーティング: 数値スケール（例: 1〜5）

タブ

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

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

ペイウォール & コマース

プロダクト

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

• 縦リスト: 積み重ねられたプロダクトカード
• 横リスト: 横並びのプロダクトカード
• フィーチャーカルーセル: 機能チェックリスト付きのスワイプ可能なカード
• フィーチャーカード: 機能チェックリスト付きの静的カード
• バナーリスト: インラインバッジ付きのコンパクトな行

トライアルトグル

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

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

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

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

カウントダウン

ゼロに向けてカウントダウンする時間、分、秒を表示します。期間限定オファーの緊急感を演出するために使います。タイマーがゼロになったときにアクションをトリガーできます — 別の画面へのナビゲーションや割引バッジの非表示など。

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

プログレス

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

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

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

ローダー

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

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