AppleがSign in With Appleという認証機能を提供開始しています。コロナウイルスの影響で期限が延びていますが、6月末での対応が迫られています。これはすでにFacebookやTwitterといったサービスの認証機能を提供している場合、Appleにも対応しなければならないというものです。ニフクラ mobile backendでもすでにSwift/Objective-C/JavaScriptが対応しています。
- SNS連携 (Swift) : Apple ID連携 | ニフクラ mobile backend
- SNS連携 (iOS) : Apple ID連携 | ニフクラ mobile backend
- SNS連携 (JavaScript) : Apple連携 | ニフクラ mobile backend
Sign in with Appleのボタンは細かいデザイン上の規定があります。そこで、他のサービスとまとめてどのような規定があるのかをまとめてみました。
Apple
ボタンのデザインについては、Objective-CやSwiftで実装する場合にはあらかじめ専用のコンポーネントが用意されていますので、それを使うのが簡単です。
let appleLoginButton = ASAuthorizationAppleIDButton( authorizationButtonType: .default, authorizationButtonStyle: .whiteOutline )
もちろんダークモード、ライトモードの両方に対応しています。
標準のボタンでは角の丸みくらいしかオプションがなく、デザイン上の自由度は低いといっていいでしょう。自分でカスタムデザインもできますが、細かいデザインガイドラインがButtons - Sign in with Apple - Human Interface Guidelines - Apple Developerにて公開されています。これに沿って作成する必要があります。
Sign in with Appleが他のサービスよりも上になければいけないといった話がありましたが、これはあくまでも推奨といったレベルのようです（現在のガイドライン上でそのような記述は見当たりませんでした）。ただ、他のサービスのボタンと比べて小さくしてはいけないといった指定はあります。
Googleの場合はボタンのデザイン、カラーリングが提供されています。
ログインにおけるブランドの取り扱いガイドライン | Google Identity Platform | Google Developers
他のサービスアイコンと並べた時の視認性については、同等であるようにと言う指定があります。
Facebookはボタンの色や文言、サイズ、形といった指定があります。
しかし、それ以上にユーザ体験がどうあるべきかと言った記述が印象的です。
- アプリの内容を明確かつ簡潔に説明する
- ログイン後に利用できるコンテンツを少しだけ見せる
- 新しい使用感を実現する
- ログイン前にアプリを試せるようにする
Twitterはデザインガイドラインくらいしか確認できませんでした。
ロゴや文字との配置などについてはこちらのPDFでも確認できます。
LINE
サイズ、カラー、テキストなどについて規定があります。
LINEログインボタン デザインガイドライン | LINE Developers
必要なアセットも提供されていますので、ダウンロードして指定するのがいいでしょう。
まとめ
他サービスのアイコンや機能を使う場合には、そのサービスが指定するガイドラインに沿って進めなければなりません。間違った利用によって、利用停止になってしまったり、審査に通らなくなる可能性もあります。注意した上で利用してください。
