エレメント

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

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

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

ベーシック

レイアウト

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

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

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

テキスト

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

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

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

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

メディア

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

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

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

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

バッジ

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

チェックマーク

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

Checkbox
Circle
Radiobutton
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）

タブ

メイン記事: タブ

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

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

ペイウォール & コマース

プロダクト

トライアルトグル

メイン記事: トグル

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

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

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

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

カウントダウン

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

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

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

プログレス

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

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

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

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

ローダー

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

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