RevenueCatを試してみて、（正直かなり高い）使いやすさへの期待を満たしていないことを（公に）発見した後、自分でこの問題に取り組むことにし、オープンソースライブラリFreemiumKitの開発を始めました。アプリ内課金を支援するフレームワークにおける「使いやすさ」とは、私にとって3つのことを意味します：
App Store Connectを含む、始め方のわかりやすいステップバイステップガイド。
現在のユーザーの購入状況に基づく、シンプルだけど柔軟なパーミッションシステム。
再利用可能な共通ペイウォールUIコードのための統一されたペイウォールデザインフレームワーク。
最初の2つはライブラリのREADMEでカバーする予定です。この記事は3つ目の側面に焦点を当てます：FreemiumKitはどうやって成功するペイウォールを素早く構築する手助けをするのか？そしてA/Bテストにどう役立つのか？
FreemiumKitはStoreKit 2の統合を簡単にします。ペイウォールとパーミッション機能を内蔵。
基本的なアイデア
RevenueCatに期待していたことの1つ――みんながあまりにも肯定的だったからこそ期待していたこと――は、Swift SDKにすぐに使えるUIコンポーネントが含まれていることでした。しかし実際にはありませんでした。（UPDATE: 私の不満の後、彼らは開発に着手しました！）彼らがやっているのは、ペイウォールの提供とデザインの最適化に特化した別のサービスSuperwallとの連携だけです。ちなみに、A/Bテストとは何かご存じない方のために説明すると、異なるデザインを試してデータを評価して何が最も効果的かを確認すること――これがまさにA/Bテストの定義です。ペイウォールはおそらくA/Bテストが最も重要な画面です。このサービスのアイデア自体はとても気に入っていますが、価格設定はスモールビジネスには合いません：各購入あたり$0.20が必要で、月額$1のサブスクリプションだと収入の20%にあたります。これはSmall Businessプログラムで Appleが受け取る15%よりも高いのです！
また、個人的に多くのサードパーティサービスを使うのはあまり好きではありません。アプリのプライバシーポリシーを短くシンプルに保ちたいのですが、サービスが増えるほど難しくなります。そのため、A/Bテスト機能を含む（他のことも含めて）より「汎用的な」アナリティクスサービスを選んで賢く使う方が好みです。もちろん、これは個人の好みなので、あなたは違う選択をするかもしれません。ただ、Superwallについて本当に気に入っていることが1つあります：彼らはPaywallScreensというウェブサイトを運営していて、各アプリの推定収入順にソートされた何千もの実際のペイウォールを見ることができます。現在はYouTube、TikTok、Disney+がトップです。
FreemiumKitの最初のリリースでは、成功するペイウォールUIを素早く構築するために必要なものをすべて出荷したかったので、月間推定収入$500,000以上のアプリの全312個のペイウォール画面をスクロールして確認し、最も魅力的でクリーンだと感じた20個を選んで、共通点を分析しました。そして、その学びに基づいて、分析したバリエーションの大半を再現できる、高度にカスタマイズ可能な2つのUIコンポーネントを開発しました！
以下が、収益の高い順に選んだ20個の画面です：
よく見られるデザインの選択
少なくとも50%（同種のうち）で共通していると認識したすべての要素：
100%が月額または週額の「短期」プランを提供している。
100%が年額または買い切りの「長期」プランを提供している。
100%がプランやアンロック機能リストにプレーンな白または黒のテキストを使用している。
95%が関連のないナビゲーション要素なしで画面全体をカバーしている。
95%がスクロールなしで重要な情報がすべて1画面に収まっている。
90%がメインのコールトゥアクションボタンを強調するために背景色を使用している。
85%が画面の下半分に料金プランを配置している。
80%が現在選択されているオプションを強調するために丸みのあるボーダーアウトラインを使用している。
80%が画面を離れるための戻る矢印または「X」ボタンを上部に配置している。
「X」ボタンの61%が左上隅に配置されている（大多数の人にとって届きにくい）。
80%が画面最下部に明確に強調されたコールトゥアクションボタンを配置している。
コールトゥアクションボタンの75%がカプセル型（端が100%丸い）。
コールトゥアクションボタンの56%がまったく同じタイトル「Continue」を使用している。
70%がプランオプションにボタンの縦リストを使用している。
プリセレクションがあるもののうち70%が長期の定期オプションを選択している。
60%がプラン選択リストの背景に白を使用している。
55%が上半分のどこかにアプリ名を記載している。
65%が2～6個（平均4個）のアンロック機能をリスト、グリッド、またはページビューで表示している。
リストを提供しているもののうち77%が各機能の前にチェックマークアイコンを使用している。
55%が画面上端まで伸びる背景画像を使用している。
50%が少なくとも1つの有料プランに無料トライアルを提供している。
50%が他のオプションとの割引率を表示している。
あまり見られないデザインの選択
一部のペイウォールで見られたが、大多数は採用していないもの：
45%が現在選択されているプランに異なる背景色を使用している。
35%が購入オプションの1つに「人気」/「おすすめ」タグを付けている。
30%がドットやチェックボックスのようなラジオボタンで選択を強調している。
30%がプランオプションにボタンの横リストを使用している。
30%がペイウォール内に（控えめな）「復元」ボタンを提供している。
30%が利用規約とプライバシーポリシーへの（控えめな）リンクを提供している。
15%が購入でアンロックされる機能を表示するためにページビューを使用している。
10%が月額/年額などを切り替えるためのセグメンテッドコントロールを提供している。
5%がコールトゥアクションボタン（または他の場所）にアニメーションを付けている。
ペイウォールのブループリント
上記の学びを踏まえて、すべてを網羅した「ブループリント」を構築しました：
私はプロのデザイナーではありませんが、FreemiumKitの最初のパブリックリリースとしては十分だと思います。私よりも優れたデザイナーのコミュニティメンバーには、凝った改善やまったく異なるデザインの貢献を歓迎します。READMEにはカスタムUIの構築方法を説明する専用セクションがあります。この画面全体の見た目と、チェックした20個のペイウォールデザインを見比べると、フレームワークはより多くのロジックが関わる部分に焦点を当てるのが賢明だと思います。画面上半分はSwiftUIで非常にシンプルに作れます（Imageに.overlay、Button、TextビューのListだけ）。そして画面最下部の控えめな「利用規約」「復元」「プライバシーポリシー」ボタンも同様です。
ペイウォールのブループリントでロジックが複雑な唯一の部分。
では、利用可能な商品の読み込みと一覧表示、現在の選択の強調、利用可能なトライアル期間の表示、長期プランの割引、価格タグ、比較用の月額価格、「ベストバリュー」や「人気」バッジ、現在のプラン選択のハンドリング、「Continue」ボタンの表示・無効化ロジックなどを担う部分に集中しましょう。ご覧の通り、この部分は正しく実装するのがかなり複雑で、（ほぼ）すべての情報が実際にはStoreKitからアプリに提供されるため、簡素化する絶好の機会です。画面の残りの部分を上記の学びとブループリントとともに開発者やデザイナーに委ねることで、ライブラリのユーザーは自分のアプリのペイウォールにユニークな見た目を作る完全な自由と柔軟性を持てます。
もう少し楽しくするため、そしてFreemiumKitの初回リリースでもA/Bテストを可能にするために、このような横並びリストのバリエーションも作りましょう：
両方をフルスクリーンの状態で並べると、このように比較できます：
縦型（左）と横型（右）のペイウォールブループリントの比較。
縦型＆横型プロダクトスタイル
FreemiumKitにはAsyncProductsというSwiftUIビューが付属しており、AsyncImageと似たような動作をします。ペイウォールに表示したい商品識別子を指定すると（AsyncImageに画像のURLを指定するように）、AsyncProductsがApp Storeから商品を取得し（AsyncImageがWebから画像を取得するように）、データ読み込み中にプレースホルダーを表示し、ネットワーク問題があればリロードボタン付きのエラーメッセージも表示します。つまり、面倒な作業はすべてやってくれます。あなたはペイウォールのどこに配置するか、どのサイズが最適かを決めるだけです：
AsyncProducts(
style: PlainProductsStyle(),
productIDs: ProductID.allCases,
inAppPurchase: AppDelegate.inAppPurchase
)AsyncProductsの使用例。
productIDsとinAppPurchaseパラメータはREADMEのステップバイステップGetting Startedガイドで説明されています。この記事で注目するのは、UIコンポーネントに異なるデザインを渡せるstyleパラメータです。PlainProductsStyleは独自のスタイルを作りたい人のための最小限の実装を示すデモスタイルで、直接使うことは想定していません。FreemiumKitが1.0で出荷する2つの本番スタイルは：
VerticalPickerProductsStyle：上の左側のデザイン用HorizontalPickerProductsStyle：上の右側のデザイン用（WIP）
また、Appleの最新アプリFinal Cut Pro for iPadのペイウォールのような「Continue」ボタンのないUIを実装するHorizontalButtonsProductStyleのようなスタイルも少なくとも1つ追加する予定です：
AppleのFinal Cut Pro for iPadアプリのペイウォール。
ただし、今日利用可能なスタイルに焦点を当てて、縦型ピッカーを使ってみましょう：
AsyncProducts(
style: VerticalPickerProductsStyle(
preselectedProductID: ProductID.proYearly,
tintColor: .blue
),
...
)2つの引数を取ります。1つはプリセレクションとして強調したい商品を指定できます。上の分析の学び#15から、70%が長期の定期オプションをプリセレクトしていることがわかっています。もう1つの引数はティントカラーの選択で、「Continue」ボタンの背景色とユーザーの現在の選択の強調表示の両方に使われます。「Continue」ボタンのテキスト色は白なので、白とのコントラストが良い色を選んでください。
異なるペイウォールデザインをテストしたい場合、A/Bテスト用にスタイルを切り替えるのは非常に簡単です。VerticalPickerProductsStyleをHorizontalPickerProductsStyleに置き換えるだけで、すべてそのまま動きます。これら2つのスタイルは同じ引数を取るので、本当に簡単です。計画中のHorizontalButtonsProductsStyleのような他のスタイルには異なる引数がありますが（ボタンのみの直接的なスタイルには「選択」の概念がないため）、変更は十分簡単なはずです。すべてのスタイルはAsyncProductsStyleプロトコルに準拠しているので、A/Bテストグループに基づいて異なるスタイルを割り当てる変数を作りたい場合は、any AsyncProductsStyleを型として使用できます。
まとめ
以上が、20個の成功しているペイウォールを分析して得た学びです。すべての学びをFreemiumKitに同梱されるVerticalPickerProductsStyleに組み込んだので、複雑なロジックに対処する代わりにSwiftUIのAsyncProductsビューを簡単に使えます。覚えておくべきことは、AsyncProductsを画面の下半分に配置すること、短期と長期の両方のサブスクリプションを提供すること、上半分にアンロックされる機能のリストを表示することなど、それほど複雑でない学びを適用することです。