Rorkアプリの無料ユーザーが定額会員に変わる瞬間 — 個人開発で確かめた価格設計とペイウォールの置きどころ

// プランカードコンポーネントの例
const PlanCard = ({ plan, isRecommended }) => {
  return (
    <View style={[
      styles.card,
      isRecommended && styles.recommendedCard // 推奨プランを強調
    ]}>
      {isRecommended && (
        <View style={styles.badge}>
          <Text style={styles.badgeText}>最も人気</Text>
        </View>
      )}
      <Text style={styles.planName}>{plan.name}</Text>
      <Text style={styles.price}>¥{plan.price}<Text style={styles.period}>/月</Text></Text>
      {plan.features.map((feature, index) => (
        <View key={index} style={styles.featureRow}>
          <Text style={styles.checkmark}>✓</Text>
          <Text style={styles.featureText}>{feature}</Text>
        </View>
      ))}
      <TouchableOpacity
        style={[styles.button, isRecommended && styles.primaryButton]}
        onPress={() => handleSubscribe(plan.id)}
      >
        <Text style={styles.buttonText}>
          {isRecommended ? '今すぐ始める' : '選択する'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

// 機能ロック型ペイウォールの実装例
const FeatureGate = ({ featureName, requiredPlan, children }) => {
  const { userPlan, showUpgradeModal } = useSubscription();
 
  // ユーザーが必要なプランを持っているか確認
  const hasAccess = checkPlanAccess(userPlan, requiredPlan);
 
  if (hasAccess) {
    return children;
  }
 
  return (
    <TouchableOpacity
      style={styles.lockedFeature}
      onPress={() => showUpgradeModal({
        feature: featureName,
        requiredPlan,
        // どの機能のためにアップグレードを促しているかをトラッキング
        source: `feature_gate_${featureName}`
      })}
    >
      <View style={styles.lockOverlay}>
        <Text style={styles.lockIcon}>🔒</Text>
        <Text style={styles.lockText}>{featureName}</Text>
        <Text style={styles.upgradeHint}>プレミアムプランで解放</Text>
      </View>
    </TouchableOpacity>
  );
};

// PostHogを使ったコホート追跡
import PostHog from 'posthog-react-native';
 
// サブスクリプション開始時のイベント
const trackSubscriptionStart = (plan, source) => {
  PostHog.capture('subscription_started', {
    plan_name: plan.name,
    plan_price: plan.price,
    billing_period: plan.period, // 'monthly' or 'yearly'
    conversion_source: source, // どのペイウォールから転換したか
    days_since_install: getDaysSinceInstall(), // インストールからの経過日数
    features_used: getTopFeaturesUsed(), // 転換前に使った機能
  });
};
 
// サブスクリプションキャンセル時のイベント
const trackSubscriptionCancelled = (reason) => {
  PostHog.capture('subscription_cancelled', {
    reason: reason, // 'too_expensive', 'not_using', 'missing_feature', etc.
    subscription_duration_days: getSubscriptionDurationDays(),
    last_active_feature: getLastUsedFeature(),
  });
};

// シンプルなA/Bテスト基盤の実装
import { useEffect, useState } from 'react';
import PostHog from 'posthog-react-native';
 
// A/Bテストフックの実装
const useABTest = (testName, variants) => {
  const [variant, setVariant] = useState(null);
 
  useEffect(() => {
    // PostHogのFeature Flagsを使用してバリアントを決定
    const assignedVariant = PostHog.getFeatureFlag(testName);
 
    if (assignedVariant && variants[assignedVariant]) {
      setVariant(assignedVariant);
      // バリアント割り当てをトラッキング
      PostHog.capture('ab_test_variant_assigned', {
        test_name: testName,
        variant: assignedVariant,
      });
    } else {
      // デフォルトバリアント
      setVariant(variants.control ? 'control' : Object.keys(variants)[0]);
    }
  }, [testName]);
 
  return { variant, config: variant ? variants[variant] : null };
};
 
// ペイウォール価格テストの例
const PaywallScreen = () => {
  const { config } = useABTest('paywall_price_test', {
    control: { price: 980, trialDays: 7, cta: '今すぐ始める' },
    variant_a: { price: 780, trialDays: 7, cta: '今すぐ始める' },
    variant_b: { price: 980, trialDays: 14, cta: '2週間無料で試す' },
  });
 
  if (!config) return <LoadingSpinner />;
 
  return (
    <View>
      <Text>月額 ¥{config.price}</Text>
      {config.trialDays > 0 && (
        <Text>{config.trialDays}日間無料トライアル</Text>
      )}
      <Button
        title={config.cta}
        onPress={() => handleSubscribe(config)}
      />
    </View>
  );
};

// エンゲージメントスコア計算ロジック
const calculateEngagementScore = (userEvents) => {
  const now = new Date();
  const last30Days = userEvents.filter(
    e => (now - new Date(e.timestamp)) / (1000 * 60 * 60 * 24) <= 30
  );
 
  // 重み付きスコア計算
  const score = last30Days.reduce((total, event) => {
    const weights = {
      'app_open': 1,
      'feature_used': 3,
      'content_created': 5,
      'share_action': 4,
      'settings_updated': 2,
    };
    return total + (weights[event.type] || 1);
  }, 0);
 
  // スコアに基づいてセグメントを返す
  if (score >= 50) return 'high';
  if (score >= 20) return 'medium';
  return 'low';
};

// Stripe課金フローの統合実装例
import { useState } from 'react';
 
const useSubscriptionFlow = () => {
  const [isLoading, setIsLoading] = useState(false);
 
  // サブスクリプション開始（トライアル付き）
  const startSubscription = async ({ planId, trialDays, source }) => {
    setIsLoading(true);
 
    try {
      // サーバーサイドでStripe Checkout Sessionを作成
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          priceId: planId,
          trialDays: trialDays,
          metadata: {
            plan_type: 'subscription',
            source: source, // A/Bテストのバリアントやペイウォールの場所
            ab_variant: getCurrentABVariant(), // テスト追跡
          }
        })
      });
 
      const { url } = await response.json();
 
      // Stripe Checkoutへリダイレクト
      await Linking.openURL(url);
 
      // 転換イベントをトラッキング
      PostHog.capture('checkout_initiated', {
        plan_id: planId,
        trial_days: trialDays,
        source: source,
      });
 
    } catch (error) {
      console.error('Checkout failed:', error);
      // エラーハンドリング
    } finally {
      setIsLoading(false);
    }
  };
 
  // プラン変更（アップグレード/ダウングレード）
  const changePlan = async ({ currentPlanId, newPlanId }) => {
    // アップグレードは即時反映、ダウングレードは次回更新時に反映
    const isUpgrade = getPlanTier(newPlanId) > getPlanTier(currentPlanId);
 
    const response = await fetch('/api/subscription/change', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        newPriceId: newPlanId,
        prorationBehavior: isUpgrade ? 'always_invoice' : 'none',
      })
    });
 
    return response.json();
  };
 
  return { startSubscription, changePlan, isLoading };
};

// キャンセルフロー実装例
const CancellationFlow = () => {
  const [step, setStep] = useState('reason');
  const [reason, setReason] = useState(null);
 
  const reasons = [
    { id: 'too_expensive', label: '料金が高い', offer: 'downgrade' },
    { id: 'not_using', label: 'あまり使わない', offer: 'pause' },
    { id: 'missing_feature', label: '機能が足りない', offer: 'feedback' },
    { id: 'temporary', label: '一時的な利用だった', offer: 'discount' },
  ];
 
  const handleReasonSelected = (selectedReason) => {
    setReason(selectedReason);
 
    // 理由に応じて引き留め施策のステップへ
    if (selectedReason.offer === 'pause') {
      setStep('pause_offer');
    } else if (selectedReason.offer === 'discount') {
      setStep('discount_offer');
    } else if (selectedReason.offer === 'downgrade') {
      setStep('downgrade_offer');
    } else {
      setStep('final_confirm');
    }
 
    // 解約理由をトラッキング
    PostHog.capture('cancellation_reason_selected', {
      reason: selectedReason.id,
    });
  };
 
  // 一時停止オファー
  const PauseOffer = () => (
    <View>
      <Text style={styles.offerTitle}>サブスクリプションを一時停止しますか？</Text>
      <Text>1〜3ヶ月間、料金をかけずにデータを保持できます。</Text>
      <Text>再開するといつでも続きから使えます。</Text>
      <Button title="1ヶ月停止する" onPress={() => handlePause(1)} />
      <Button title="3ヶ月停止する" onPress={() => handlePause(3)} />
      <TextButton title="やはりキャンセルする" onPress={() => setStep('final_confirm')} />
    </View>
  );
 
  // ...各ステップのレンダリング
};