Rork アプリのペイウォール最適化 & オンボーディング設計ガイド — フリートライアル戦略・課金心理学・A/Bテストで転換率を3倍にする

// Rork でプレ・パーミッション画面を実装する例
const PrePermissionScreen = ({ onAllow, onSkip }) => {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/notification-icon.png')} style={styles.icon} />
      <Text style={styles.title}>通知を有効にして、学習を続けよう</Text>
      <Text style={styles.description}>
        毎日のリマインダーで継続率が2倍に。
        大切な情報をいち早くお届けします。
      </Text>
      <TouchableOpacity style={styles.primaryButton} onPress={onAllow}>
        <Text style={styles.primaryButtonText}>通知を許可する</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.secondaryButton} onPress={onSkip}>
        <Text style={styles.secondaryButtonText}>あとで設定する</Text>
      </TouchableOpacity>
    </View>
  );
};

// RevenueCat の初期化（App.jsxまたはApp.tsx）
import Purchases from 'react-native-purchases';
 
async function initRevenueCat() {
  if (Platform.OS === 'ios') {
    await Purchases.configure({ apiKey: 'appl_YOUR_API_KEY' });
  } else {
    await Purchases.configure({ apiKey: 'goog_YOUR_API_KEY' });
  }
}
 
// フリートライアル付きサブスクリプションの購入
async function startFreeTrial() {
  try {
    const offerings = await Purchases.getOfferings();
    const currentOffering = offerings.current;
    
    if (!currentOffering) {
      console.log('利用可能なオファリングがありません');
      return;
    }
    
    // 7日間フリートライアル付きのパッケージを取得
    const trialPackage = currentOffering.availablePackages.find(
      pkg => pkg.product.introductoryPrice !== null
    );
    
    if (trialPackage) {
      const { customerInfo } = await Purchases.purchasePackage(trialPackage);
      
      // 試用期間の確認
      const entitlements = customerInfo.entitlements.active;
      if (entitlements['premium']) {
        console.log('フリートライアル開始！期限:', entitlements['premium'].expirationDate);
        // Premium UIを表示する処理
        navigateToPremiumExperience();
      }
    }
  } catch (error) {
    if (!error.userCancelled) {
      console.error('購入エラー:', error);
    }
  }
}

// src/components/PremiumPaywall.jsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import Purchases from 'react-native-purchases';
 
const PremiumPaywall = ({ onDismiss, context }) => {
  const [selectedPlan, setSelectedPlan] = React.useState('annual');
  const [loading, setLoading] = React.useState(false);
  const [offerings, setOfferings] = React.useState(null);
 
  React.useEffect(() => {
    loadOfferings();
  }, []);
 
  const loadOfferings = async () => {
    const result = await Purchases.getOfferings();
    setOfferings(result.current);
  };
 
  const handlePurchase = async () => {
    setLoading(true);
    try {
      const pkg = offerings?.availablePackages.find(p =>
        selectedPlan === 'annual'
          ? p.packageType === Purchases.PACKAGE_TYPE.ANNUAL
          : p.packageType === Purchases.PACKAGE_TYPE.MONTHLY
      );
 
      if (!pkg) return;
      const { customerInfo } = await Purchases.purchasePackage(pkg);
      
      if (customerInfo.entitlements.active['premium']) {
        onDismiss('purchased');
      }
    } catch (error) {
      if (!error.userCancelled) {
        Alert.alert('エラー', '購入処理中にエラーが発生しました。');
      }
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <View style={styles.container}>
      {/* ソーシャルプルーフ */}
      <Text style={styles.socialProof}>⭐⭐⭐⭐⭐ 50,000人以上が利用中</Text>
      
      <Text style={styles.title}>プレミアムで{'\n'}すべての機能を解放</Text>
      
      {/* 機能リスト */}
      <View style={styles.features}>
        {['広告なし', '無制限で使える', 'プレミアム機能へのアクセス', 'バックアップ＆同期'].map(f => (
          <Text key={f} style={styles.feature}>✓ {f}</Text>
        ))}
      </View>
      
      {/* プラン選択 */}
      <View style={styles.planSelector}>
        <TouchableOpacity
          style={[styles.plan, selectedPlan === 'annual' && styles.planSelected]}
          onPress={() => setSelectedPlan('annual')}
        >
          <Text style={styles.planBadge}>お得</Text>
          <Text style={styles.planName}>年間プラン</Text>
          <Text style={styles.planPrice}>¥980 / 年</Text>
          <Text style={styles.planPerMonth}>月あたり ¥82</Text>
        </TouchableOpacity>
        
        <TouchableOpacity
          style={[styles.plan, selectedPlan === 'monthly' && styles.planSelected]}
          onPress={() => setSelectedPlan('monthly')}
        >
          <Text style={styles.planName}>月額プラン</Text>
          <Text style={styles.planPrice}>¥350 / 月</Text>
        </TouchableOpacity>
      </View>
      
      {/* CTA ボタン */}
      <TouchableOpacity
        style={styles.ctaButton}
        onPress={handlePurchase}
        disabled={loading}
      >
        <Text style={styles.ctaText}>
          {loading ? '処理中...' : '7日間無料で始める'}
        </Text>
      </TouchableOpacity>
      
      <Text style={styles.trialNote}>
        無料期間終了後、自動更新されます。いつでもキャンセル可能。
      </Text>
      
      <TouchableOpacity onPress={() => onDismiss('dismissed')}>
        <Text style={styles.dismissText}>今は無料版を使う</Text>
      </TouchableOpacity>
    </View>
  );
};

// Rork でのA/Bテスト対応コード
import Purchases from 'react-native-purchases';
 
const getCurrentOffering = async () => {
  const offerings = await Purchases.getOfferings();
  
  // RevenueCat Experiments が自動的に A/B グループを割り当てる
  // offerings.current に実験対象のオファリングが入る
  const offering = offerings.current;
  
  if (!offering) return null;
  
  // オファリング名をログに残してデバッグに活用
  console.log('Current offering:', offering.identifier);
  
  return offering;
};

// 試用終了前の通知スケジューリング（Expo Notifications）
import * as Notifications from 'expo-notifications';
 
const scheduleTrialEndNotification = async (trialEndDate) => {
  const dayBefore = new Date(trialEndDate);
  dayBefore.setDate(dayBefore.getDate() - 1);
  
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '無料体験が明日終了します',
      body: '継続して使い続けるにはプレミアムへのアップグレードをご検討ください',
      data: { screen: 'paywall', context: 'trial_ending' },
    },
    trigger: {
      date: dayBefore,
    },
  });
};