31.4K Views
March 08, 21
スライド概要
~リジェクトされないための課金ページ~
課金ページの実装を専属で担当し、課金ページのレイアウト改変やA/Bテストを頻繁に行った結果、毎月のようにAppleからのリジェクトを経験しました。
メッセージで多くのやりとりを行ない、一般的には公開されていないような課金ページの細かなアンチパターンが蓄積してきたので、紹介していきたいと思います。
- iOSDC2020の登壇と裏話
https://note.com/hcrane/n/nfc4832602c6f
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
課金ページを実装する上で、 守らなければならないこと
Apple Developer App Store Review Guidelines 3.1.2 Subscriptions
Apple Developer Auto-renewable Subscriptions
サブスクリプションでは ① 名前、期間、提供されるサービスを記載すべし ② 価格を記載すべし ③ サインインまたは購入を復元できるべし ④ 利用規約、プライバシーポリシーを記載すべし
1 2 3 4 Quate: Apple Developer Auto-renewable Subscriptions https://developer.apple.com/jp/app-store/subscriptions/
実はもっと守るべきこと がある
Paid Applications Agreement
サブスクリプションでは ① 名前、期間、提供されるサービスを記載すべし ② 価格を記載すべし ③ サインインまたは購入を復元できるべし ④ 利用規約、プライバシーポリシーを記載すべし ⑤ 自動継続についての説明を載せるべし etc.
5 Quate: Apple Developer Auto-renewable Subscriptions https://developer.apple.com/jp/app-store/subscriptions/
食べログ Tastmade 駅すぱあと 5 Quate: App Store https://apps.apple.com/jp/app/tastemade/id971197898 https://apps.apple.com/jp/app/%E9%A3%9F%E3%81%B9%E3%83%AD%E3%82%B0/id763377066 https://apps.apple.com/jp/app/%E9%A7%85%E3%81%99%E3%81%B1%E3%81%82%E3%81%A8/id463431091 ※ 2020年8月時点
大枠のルールとして、これらを守っておく必要がある
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
課金ページのデザインは 各社がいろんな 型を考案してきた Quote: https://www.nicovideo.jp/watch/sm35688141
通 常 型 説 明 型 遷 移 型
通 常 型 BeautyPlus Pixaloop ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id622434129 https://apps.apple.com/jp/app/id1381206010 https://apps.apple.com/jp/app/id1485352913 Pokémon HOME
説 明 型 freee audiobook 日経電子版 ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id396855834 https://apps.apple.com/jp/app/id811207074 https://apps.apple.com/jp/app/id1357581573
遷 移 型 Pocket List yenta ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id1062187493 https://apps.apple.com/jp/app/id1272049520
型はさらに派生する
通 常 型 下 部 固 定 型 半 モ | ダ ル 型 下部UI 説 明 型 列 挙 型 カ ル | セ ル 型 遷 移 型 タ ブ 型 課金UI 比 較 型 階 層 構 造 型
下 部 固 定 型 Zaim Lake ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id445850671 https://apps.apple.com/jp/app/id1183717726 https://apps.apple.com/jp/app/id1357581573 audiobook
半 モ | ダ ル 型 LinkedIn Dropbox ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id288429040 https://apps.apple.com/jp/app/id327630330
列 挙 型 YouTube Bear ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id544007664 https://apps.apple.com/jp/app/id1091189122 https://apps.apple.com/jp/app/id920856839 mikan
カ ル | セ ル 型 Any.do Spend Together ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id497328576 https://apps.apple.com/jp/app/id1446549608 https://apps.apple.com/jp/app/id1227402276 Actions
タ ブ 型 Dashlane CamScanner ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id517914548 https://apps.apple.com/jp/app/id388627783 https://apps.apple.com/jp/app/id281796108 Evernote
比 較 型 AWA Scene ※ 2020年8月時点 Quate: App Store, ScreenShot https://apps.apple.com/jp/app/id980578855 https://apps.apple.com/jp/app/id688109786 https://apps.apple.com/jp/app/id1495136847 DecoLu
階 層 構 造 型 Money Forward Tinder 詳細ページ 詳細ページ ※ 2019年1月時点 Quote: あき | デザインの図書館 課金 UI まとめてみた https://note.com/telq/n/n836e139e0a6b
基本的にどれか1つの型に分類はできない 多くのUIで複数の型を組み合わせて 出来ている
課金ページのデザインも アプリの1ページとして 進化してきている
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
iOSリジェクト戦記
注 意 文 言 の 乱 金 額 表 記 の 乱 無 料 表 記 の 乱
それは、ある戦い(申請)を行った日のことだった。。。
Developer くらえ! (申請) Apple
Developer 効かぬわ! (サブスクリプションページに 注意文言がな いからリジェクト!) Apple ※注意文言:ガイドラインに沿った必要な課金の説明文言など
Developer まだまだー! (いやいや下の方にある じゃん とメッセージを送る) Apple
Developer 効かぬわ! (サブスクリプションページに 注意文言がな いからリジェクト!(2回目)) Apple
Developer あーこれはAppleあるあるの RPGゲームの 村人返しや。。 ※村人返し:ゲームの村人のように同じことしか返さない 様 → AppleはDeveloperが送ったメッセージに対して、詳細なリジェクトの理由を明かさず、 一方的に規約違反とだけ述べ、同じことしか言ってこないことが多々有る。
注意文言がない 課金UI上に 課金ボタンが複数 配 置されているパターン Quate: http://i.meet-i.com/?p=244766 ・ ・ ・ 注意文言がない ・ ・ ・ 最下部のボタンにのみ注 意文言を掲載
課金ページが長すぎる と 最下部に注意文言の掲載があっても、審査で 認知されない
・ ・ ・ ・ ・ ・ Quate: http://i.meet-i.com/?p=244766 ・ ・ ・ 各ボタンごとに注 意文言を追加
Developer これでどうだ! (再申請) Apple
Developer うわ! (申請が通った) Apple
ちなみに
・ ・ ・ ・ ・ ・ ・ ・ ・ ページの長さを 短くしたデザイン 最下部のボタンにのみ注 意文言を掲載 Quate: http://i.meet-i.com/?p=244766
課金ページを短くすると 最下部だけの注意文言が審査で 認知された
Developer もしや審査員ガチャ だったの かなぁ。。 ※審査員ガチャ:審査員のサジ加減によってリジェクトかどうか決まること → リジェクトされたアプリを、同じ状態で上げ直しただけなのに通ることがある。 逆に申請が通ったものを、再度上げ直してリジェクトされることもある。
各ボタンに文言を入れておくほうが無難
注 意 文 言 の 乱 金 額 表 記 の 乱 無 料 表 記 の 乱
それは、ある戦い(申請)を行った日のことだった。。。
Developer くらえ! (申請) Apple
Developer 効かぬわ! (金額の表記が最も目立ってない からリ ジェクト!) Apple
「金額 」が目立たないデザイン Quate: ScreenShot
Quate: ScreenShot
Developer これでどうだ! (再申請) Apple
Developer うわ! (申請が通った) Apple
Developer あれ?これも審査員ガチャ だったのかなぁ。。
金額の表記は目立たせよう!
注 意 文 言 の 乱 金 額 表 記 の 乱 無 料 表 記 の 乱
それは、ある戦い(申請)を行った日のことだった。。。
Developer くらえ! (申請) Apple
Developer 効かぬわ! (金額の表記が最も目立ってない からリ ジェクト!) Apple
Developer まだまだー! (いやいやそれ前に直しました やん? とメッセージを送る) Apple
Developer 効かぬわ! (「無料」という文言が 目立ちすぎでリジェク ト!) Apple
Developer Current purchase page displays "Free Trial" most prominently and repeatedly. Apple
※画像は 枠の指摘 も含めて実際にAppleから送られてきたスクリーンショット → Appleが具体的に修正が必要な部分を指摘してきた Quate: ScreenShot
「無料」というワードに問題がありそう
Quate: ScreenShot
Developer これでどうだ! (再申請) Apple
Developer うわ! (申請が通った) Apple
ちなみに
2019年6月6日 サブスクリプションの ガイドラインに改定 があった
3.1.2(a) Permissible uses Quate: https://www.appstorereviewguidelineshistory.com/
Apps that attempt to scam users ユーザーを 騙そう とするアプリ 無料が誇張 されているアプリ
ちなみに (2回目)
Apple製アプリの課金ページを見てみると
Apple Store 「無料 」が目立つデザイン 「金額 」が目立たないデザイン ※ 2020年8月時点 Quate: ScreenShot https://developer.apple.com/jp/app-store/
Apple Music 「無料 」が目立つデザイン 「金額 」が目立たないデザイン ※ 2020年8月時点 Quate: ScreenShot https://apps.apple.com/jp/app/id1108187390
Developer Appleさん自らが全くガイドライン を守ってないやん。。
「無料」というワードを使う時は慎重に
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
いろんな戦(申請)を乗り越えてきたが 他の部隊(他社)はどうしているのだろうか?
課金ページを 過去と比較 しながら見ていこう
NewsPicks 2019/03 「無料 」が目立つデザイン 「無料 」を含むボタン Quate: ScreenShot https://apps.apple.com/jp/app/id640956497 2020/08 「無料 」が目立たなくなった 「金額 」を含むボタン
Cookpad 2019/03 2020/08 「金額 」が目立つデザイン 「無料 」が目立つデザイン 「無料 」を含まないボタン 「無料 」を含むボタン Quate: ScreenShot https://apps.apple.com/jp/app/id340368403
Kurashiru 2019/03 2020/08 「金額 」が目立つデザイン 「金額 」が目立たないデザイン 「無料 」を含むボタン 「無料 」を含まないボタン ※ ステータスによって表示が異なる場合があります Quate: ScreenShot https://apps.apple.com/jp/app/id1059134258
ABEMA 2019/03 「¥0 」を含むボタン Quate: ScreenShot https://apps.apple.com/jp/app/id1074866833 2020/08 「金額 」を含むボタン
MoneyForward 2019/03 「無料 」を含むボタン 2020/08 ・ ・ 「無料 」を含まないボタン ・ ・ 遷移型の課金ページ Quate: ScreenShot https://apps.apple.com/jp/app/id594145971
どこも「無料」の表記が目立たなくなっている
他の地域(アプリ外のサブスクリプション)の 部隊(他社)はどうしているのだろうか?
menu 「無料 」を含むボタン 「無料 」を含まないボタン ※ 2020年8月時点 Quate: ScreenShot https://apps.apple.com/jp/app/id1443466646
UberEats 「金額 」が目立たないデザイン 「無料 」が目立つデザイン 「無料 」が目立つデザイン 「金額 」が目立たないデザイン 「無料 」を含むボタン 「無料 」を含むボタン ※ 2020年8月時点 Quate: ScreenShot https://apps.apple.com/jp/app/id1058959277
Spotify 「無料 」が目立つデザイン 課金ボタンはなし ※ 2020年8月時点 Quate: ScreenShot https://apps.apple.com/jp/app/id324684580
U-NEXT 課金ボタンはなし 「無料 」を含むボタン ※ 2020年8月時点 Quate: ScreenShot https://apps.apple.com/jp/app/id882477693
アプリ外の課金 ではデザイン上 そんなに「無料」には敏感ではなさそう
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
負けて帰ってくる( リジェクトされる)のは辛い
リジェクトを切り抜けるための回避策
Developer Apple 申請 App Store リリース 申請用 Server リリース用 デザインを申請時だけ ルールに従ったものに し、リリース時には違うも のにする
Developer Apple 申請 App Store リリース iPadのデザインのみルー ルに準拠する → 基本的に審査はiPad で行われるため
動的な遷移 画面遷移例 審査範囲外の課金ページ ホーム画面 審査範囲内のデザインの みルールに準拠する 審査範囲内の課金ページ ex 動的ページは確認さ れない(できない)ため
全てグレーゾーン なので、導入するかどうかは よく考えよう
規約を守らないと BANされる可能性 だってある
理由 ガイドラインを破り、ユーザーが直接料金を支払う方法を外部に 提供した。 Image Credit: Epic Games Quate: https://thebridge.jp/2020/08/microsoft-legal-filing-supports-unreal-engines-continued-access-to-apple-tools-the-firstpart
理由 ガイドラインを破り、ユーザーが直接料金を支払う方法を外部に 提供した。 Quate: https://hey.com/
理由 ガイドラインを破り、ユーザーがシリアルコードを入力して対価を 得られる機能を提供した。 Quate: https://mixi.co.jp/press/2019/0508/3804/index.html
Appleのルールには従っておくほうが無難
ちなみに
リジェクトによって 開発が止まらない 仕組みをAppleが提案
Quate: https://www.apple.com/newsroom/2020/06/apple-reveals-new-developer-technologies-to-foster-the-next-generation-of-apps/
developers will not only be able to appeal decisions about whether an app violates a given guideline of the App Store Review Guidelines, but will also have a mechanism to challenge the guideline itself. Quate: https://www.apple.com/newsroom/2020/06/apple-reveals-new-developer-technologies-to-foster-the-next-generation-of-apps/
開発者は - ガイドライン違反によるバグ修正が遅れることはなくなる - 代わりに次回の申請に問題を持ち越すことができる
序 章 第 一 章 第 二 章 第 三 章 第 四 章 第 五 章 規 約 デ ザ イ ン 戦 記 比 較 申 請 終 章
ガイドラインは 随時 更新され続ける それを追いかけ続けるしかない
課金ページのデザインに 正解はない