ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

各SNSサービスのログインボタンデザイン規定(ガイドライン)

f:id:mbaasdevrel:20200515184818p:plain

AppleがSign in With Appleという認証機能を提供開始しています。コロナウイルスの影響で期限が延びていますが、6月末での対応が迫られています。これはすでにFacebookやTwitterといったサービスの認証機能を提供している場合、Appleにも対応しなければならないというものです。ニフクラ mobile backendでもすでにSwift/Objective-C/JavaScriptが対応しています。

Sign in with Appleのボタンは細かいデザイン上の規定があります。そこで、他のサービスとまとめてどのような規定があるのかをまとめてみました。

Apple

f:id:mbaasdevrel:20200515184405p:plain

ボタンのデザインについては、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の場合はボタンのデザイン、カラーリングが提供されています。

f:id:mbaasdevrel:20200515184418p:plain

ログインにおけるブランドの取り扱いガイドライン | Google Identity Platform | Google Developers

他のサービスアイコンと並べた時の視認性については、同等であるようにと言う指定があります。

Facebook

Facebookはボタンの色や文言、サイズ、形といった指定があります。

f:id:mbaasdevrel:20200515184426p:plain

操作設計 - Facebookログイン

しかし、それ以上にユーザ体験がどうあるべきかと言った記述が印象的です。

  • アプリの内容を明確かつ簡潔に説明する
  • ログイン後に利用できるコンテンツを少しだけ見せる
  • 新しい使用感を実現する
  • ログイン前にアプリを試せるようにする

Twitter

Twitterはデザインガイドラインくらいしか確認できませんでした。

f:id:mbaasdevrel:20200515184434p:plain

Twitterのブランドリソース

ロゴや文字との配置などについてはこちらのPDFでも確認できます。

LINE

サイズ、カラー、テキストなどについて規定があります。

f:id:mbaasdevrel:20200515184444p:plain

LINEログインボタン デザインガイドライン | LINE Developers

必要なアセットも提供されていますので、ダウンロードして指定するのがいいでしょう。

まとめ

他サービスのアイコンや機能を使う場合には、そのサービスが指定するガイドラインに沿って進めなければなりません。間違った利用によって、利用停止になってしまったり、審査に通らなくなる可能性もあります。注意した上で利用してください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。