ペイウォールは、ユーザーに商品の購入を促す画面です。RevenueCatのペイウォールシステムはサーバードリブンUIに基づいて構築されており、新しいアプリバージョンをリリースすることなく、ペイウォールエディターを使用してレイアウトを即座に更新できます。

これにより、チームはアプリ更新の遅延なしに、A/Bテスト、オファリングの改良、サブスクリプションを増やすためのメッセージング最適化に集中できます。

前提条件：Offeringの設定

ペイウォールを作成する前に、パッケージが含まれたOfferingが少なくとも1つ設定されている必要があります。ペイウォールはOfferingにリンクされ、そのOffering内のパッケージがユーザーに表示される商品を決定します。

ペイウォールとOfferingの関係

ペイウォールとOfferingの関係を理解することが重要です：

• Offering = パッケージ（商品）を格納するコンテナ
• ペイウォール = それらのパッケージを表示するビジュアルプレゼンテーションレイヤー
• 1つのOfferingには一度に1つのアクティブなペイウォールのみ設定可能
• ペイウォールにOfferingを選択すると、そのOffering内のすべてのパッケージに自動的にアクセスできます

新しいペイウォールの作成

構築を開始するには、プロジェクトのPaywallsページに移動し、+ New Paywallをクリックします。

開始点の選択

3つのオプションから始められます：

1. プリビルトテンプレート（推奨）: プロがデザインしたテンプレートから始めてカスタマイズ。
2. ゼロから始める: 空白のキャンバスからペイウォールを構築。
3. Figmaからインポート: Figmaから直接デザインをインポート。

ペイウォールエディターの使用

ペイウォールエディターは3つの主要エリアで構成されています：

• 左サイドバー: コンポーネントの追加、レイヤー階層の表示、ブランディングとメディアアセットの管理。
• 中央プレビュー: ペイウォールのリアルタイムビジュアライゼーション。
• 右パネル: 選択したコンポーネントのプロパティ設定（サイズ、スタイル、動作）。

主な設定手順

1. ペイウォール名の設定: ペイウォールに説明的な名前を付ける（例：「メインサブスクリプションペイウォール」）。
2. Offeringの選択: このペイウォールで表示するOfferingを選択。識別子がペイウォールをOfferingにリンクします。
3. コンポーネントの設定: テキスト、画像、アイコン、パッケージセレクター、購入ボタンを追加・配置。
4. デザインのスタイリング: アプリのブランディングに合わせて色、フォント、間隔、画像をカスタマイズ。
5. 購入ボタンの設定: 購入ボタンが選択したパッケージのチェックアウトをトリガーするよう接続。

利用可能なコンポーネント

RevenueCatはペイウォール用のさまざまなビルディングブロックを提供しています：

• テキスト＆画像: ヘッドライン、説明、機能リスト、ビジュアルアセット。
• パッケージセレクター: リンクされたOfferingのサブスクリプションオプションを表示。
• 購入ボタン: 選択したパッケージの購入フローをトリガー。
• フッター: 利用規約、プライバシーポリシー、購入復元リンク。
• スタック＆コンテナ: 他の要素を整理するレイアウトコンポーネント。
• カルーセル: スワイプ可能なコンテンツセクション。

プレビューオプション

エディターのプレビューコントロールを使用してペイウォールをテストしてください：

• ライトモードとダークモードの切り替え
• 異なるデバイスサイズ（iPhone、iPad）間の切り替え
• ローカライズされたコンテンツがある場合は異なるロケールのプレビュー

下書き vs 公開

ペイウォールには2つの状態があります：

状態	説明	ユーザーに表示
下書き	作業中、保存済みだがアクティブでない	いいえ
公開済み	ライブ状態でSDK経由でユーザーに提供	はい

ワークフロー：

1. 変更を加え、「下書きに保存」をクリックしてライブユーザーに影響を与えずに作業を保存
2. 準備ができたら、「変更を公開」をクリックしてペイウォールをライブにする
3. 公開されたペイウォールはいつでも非アクティブ状態に切り替え可能

App Store商品とRevenueCatダッシュボードの設定に必要なすべての設定手順を完了しました！次に、すべてが正しく動作することを確認するためにサンドボックステストを設定しましょう。