すべてのプランをボトムシートに表示する
このテンプレートは、まず1つのハイライトされたオファーを前面に出し、プラン一覧への控えめなリンクを添えます。Show all plans をタップすると、他のプロダクト、購入ボタン、フッターリンクを含むボトムシートがスライドアップします。
特定のプランが突出したコンバージョン率を持つ場合に活用してください。ボトムシートにより、メイン画面をすっきり保ちながら、代替プランにワンタップでアクセスできます。
始める前に
- Adapty ダッシュボードでプロダクトを作成します。
- Adapty を App Store および Google Play に接続します。
1. 画面レイアウトを設定する
ヒーロー画像を画面の背景として使用し、残りのコンテンツを下部にグループ化することで、画像が画面の上部を占めるようにします。
画面プロパティの完全なリストについては、画面とレイヤー — 画面設定を参照してください。
画面を設定するには：
- キャンバスの空白領域をクリックして画面を選択します。
- System UI の下にある Safe area を無効にして、ヒーロー画像が画面の端まで広がるようにします。
- Fill の下で Image を選択し、ヒーロー画像をアップロードします。
- Layout の下で、方向、ギャップ、配置を設定して、コンテンツを好みの位置に固定します。このテンプレートでは、Vertical 方向に小さいギャップと bottom-middle 配置を使用して、見出しとボタンを画面下部にグループ化します。
2. CTAの見出しを追加する
見出しは画面の下部、サブスクライブボタンのすぐ上に配置されます。ヒーロー画像はその上の領域を埋めます。
- + > Text > H1 をクリックします。
- H1 を選択した状態で、Design タブを開き、Content フィールドのテキストを編集します。
3. ボトムシートとそのタイトルを追加する
ボトムシートは、画面の下部からスライドアップするレイアウトコンテナです。今は表示状態で追加してください — 次のいくつかのステップでコンテンツを追加してから、完成したら非表示にします。非表示の要素は編集できないため、コンテンツを追加し終えるまでシートを表示状態に保つ必要があります。
ボトムシートやその他のレイアウトコンテナの詳細については、エレメント — レイアウトを参照してください。
ボトムシートとそのタイトルを追加するには：
- + > Layout > Bottom Sheet をクリックします。
- Layers パネルでボトムシートを展開し、Title レイヤーを選択して、Design タブの Content フィールドを編集します（例：
Choose your plan）。
4. ボトムシート内にプロダクト一覧を追加する
すべてのプロダクトをボトムシート内に配置します。そのうちの1つはメインのCTAボタンに表示される価格にも使用されます。
プロダクトの管理について詳しくは、購入の設定を参照してください。
プロダクトを追加・設定するには：
- + > Products をクリックし、レイアウトプリセットを選択します。ほとんどの場合、Vertical List が適しています。要素が画面上に表示されますが、ボトムシートの外側になります。
- Layers パネルで、Products レイヤーをボトムシート内の Content コンテナにドラッグします。
- キャンバス上の各プロダクトカードを選択し、Design タブのドロップダウンからプロダクトを選択します。
5. ボトムシート内に購入ボタンを追加する
ボトムシートには、ユーザーがリストから選択したプランを購入するための専用の購入ボタンが必要です。
- + > Buttons をクリックし、ボタンプリセットを選択します。
- Layers パネルで、新しいボタンをボトムシート内の Content コンテナにドラッグします。
- ボタンを選択した状態で、右パネルの Interactions タブを開きます。
- Add trigger > On tap をクリックし、Add action をクリックします。
- Action を Purchase、Product を
products.selectedProductに設定します。
6. ボトムシート内にフッターリンクを追加する
ボタン内にネストされたテキストにはインラインリンクを使用しないでください。代わりに、ボタン自体に Open URL アクションを設定してください。
利用規約、プライバシーポリシー、購入の復元はシートの下部に配置されます — メイン画面はすっきりと保たれます。
- + > Buttons > Links をクリックします。これにより、Restore Purchases、Terms of Use、Privacy Policy の行が追加されます。
- Layers パネルで、Links の行をボトムシート内の Content コンテナにドラッグします。
- Layers パネルで、Terms of Use ボタンを選択します。Interactions タブを開き、Open URL フィールドに利用規約の URL を貼り付けます。
- Privacy Policy ボタンでも同様に、プライバシー URL を設定します。
- Restore Purchases リンクはそのままにしておきます。アクションは事前に設定されています。
7. ボトムシートを非表示にする
シートのコンテンツが揃ったら、デフォルトで画面に表示されないように非表示にします。ユーザーは最後のステップで Show all plans をタップすることで表示できます。
Layers パネルでボトムシートを選択し、状態を Hide に設定します。シートはレイヤーツリーに残りますが、キャンバスにはレンダリングされなくなります。
8. メインのサブスクライブボタンを追加する
画面上のメインボタンは、ワンタップでユーザーを月額プランに登録します。ラベルには月額プロダクトの価格変数を使用するため、ボタンは常にプロダクトと同期されます。
- Layers パネルでスクリーンをクリックして、新しい要素がボトムシート内ではなくルートに追加されるようにします。
- + > Buttons をクリックし、ボタンプリセットを選択します。
- ボタンを選択した状態で、Design タブを開き、Content フィールドにカーソルを置きます。
をクリックして、メインプロダクトの価格変数を選択します。残りのラベルで囲んでください — 例：Subscribe for {price}/month。
- Interactions タブに切り替え、Add trigger > On tap > Add action をクリックします。
- Action を Purchase、Product を必要なプロダクトに設定します。ボトムシートのボタンとは異なり、こちらは
products.selectedProductではなく特定のプロダクトを対象とします。
9. 「すべてのプランを表示」リンクを追加する
サブスクライブボタンの下にあるテキストリンクをタップすると、ボトムシートが表示されます。Button Label スタイルのテキスト要素として追加することで、見た目をミニマルに保ちながらアクションを設定できます。
Show/Hide アクションの詳細については、アクション — 要素の表示/非表示を参照してください。
リンクを追加するには：
- Layers パネルでスクリーンを選択した状態で、+ > Text > Button Label をクリックします。
- テキスト要素を選択した状態で、Content フィールドを
Show all plansに編集します。 - Interactions タブを開き、Add trigger > On tap > Add action をクリックします。
- Action を Show に設定し、ドロップダウンからボトムシート要素を選択します。
次のステップ
- フローを保存して公開する。
- プレースメントにフローを追加して、ユーザーへの表示を開始する。