2023/6/9更新
昨今、ソーシャルログイン（SNSアカウントでログインできる機能）に対応されているサービスが増えておりますが、去年のWWDCでAppleアカウントでアプリのサインアップやサインインができる 「Sign in with Apple」 が発表されました📱
今回は、「Sign in with Apple」のログインボタンを中心に、各SNSのログインボタンおよびガイドラインをまとめます👌（ガイドラインに沿ったカスタマイズボタンのサンプルも掲載❤️）
このブログを読めば「公式のソーシャルログイン用のボタンをどこからダウンロードすればいいの❓」「カスタマイズってどこまでOKなの❓」という疑問が解決できます🎉🎉
※本記事はあくまでもわかりやくガイドラインをまとめたものです。実際にロゴを使用される際は各サービスのロゴガイドラインをご確認ください。
Sign in with Apple
▼公式サイト
https://developer.apple.com/sign-in-with-apple/
▼Sign in with Appleガイドライン
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/
▼開発者向けガイダンス
ガイダンスの中にAppleボタンでサインインを追加したり、Apple IDで承認を要求するためのサンプルコードが掲載されています。
https://developer.apple.com/documentation/authenticationservices
⭐️ガイドラインまとめ⭐️
「Sign in with Apple」という文字が入っているボタンとAppleロゴだけのボタンの2種類が使用可能 ※watchOS の場合別のロゴを使用します「Sign in with Apple」という文字が入っているボタン
- プラットフォームに応じて、Appleボタンを
白、アウトライン付きの白、および黒に変更可能 - 他のSNSロゴに合わせて
ボタンサイズとコーナー半径（四角か丸か）を変更可能 - ボタンの高さに基づいて、ロゴファイルの形式を選択
-
SVGとPDFは任意の高さでボタンをカスタマイズ可能 -
PNGは高さが44ポイントのボタンでのみ使用
-
- カスタムボタンのタイトルとボタンの高さは、システムが使用するのと同じ比率を使用
- タイトルのフォントサイズはボタンの高さの
43％、つまりボタンの高さは、タイトルのフォントサイズの233％であり、最も近い整数丸めることができる
- タイトルのフォントサイズはボタンの高さの
- マージンは、ボタンの幅の少なくとも
8％を測定する必要がある
Appleロゴだけのボタン
-
ここからダウンロード
- ロゴのみの使用はNG、サイトに記載があるように背景をつけなければいけない
- ダウンロードしたロゴアートワークのみを使用可能
- デフォルトの正方形の形状を変更可能
- 円形または角丸、四角形に変更可能
- マージンは、ボタンの高さの少なくとも
1/10である必要がある
「Sign in with Google」ロゴはこちらからダウンロードできます📦
標準デザインを使用することを強く推奨されていますが、アプリのデザインに合うようにカスタマイズすることも可能です👍
▼ログインにおけるブランドの取り扱いガイドライン（こちらからもロゴダウンロード可能）
https://developers.google.com/identity/branding-guidelines?fbclid=IwAR0oyedruG1mHbETsSGIh-w1cIUU7ya4y2BTXVvR1fezUuR6nAHz_H3yL2s
⭐️ガイドラインまとめ⭐️
* Google ロゴが変形しないようにアスペクト比を維持すればサイズ変更可能 * `「Sign in with Google」`または`「Sign up with Google」`という文言を推奨 * 押されていないライトボタンの色は `#FFFFFF（白）`。押されていないダークボタンの色は `#4285F4 （青）` * ボタンの背景は青または白にできるが、ボタンには白いタイル上に標準色、Google の「G」は常に表示させる * フォントはアプリに合わせる必要がない限りは指定のものを使用 * テキストの左右へのパディングは` 8 dp` ロゴは` 18 dp`ロゴとボタンテキストの間隔は `24 dp` * Googleアイコンを単独で使用して、Googleへのログインを表すことはでできない▼「Sign in with Twitter」ロゴダウンロード（画像保存）
https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter
上記に記載しているように、規定のボタンを推奨されていますが、必須ではないようです😌
カスタマイズしたい方はブランドツールキットよりロゴとガイドラインをダウンロードし、ガイドラインに沿ってサインインボタンを作成しましょう。
⭐️ガイドラインまとめ⭐️
-
#1DA1F2(Twitter blue)か#FFFFFF(白)を使用 - 画像に鳥のロゴを被せる場合はアイコンの色は
白を使用 - 囲みを付ける場合は、
丸、正方形、角丸正方形のいずれかを使用 - ロゴの横幅を100%としたときに
150%になる余白が必要 - 最小でも横幅
16pxにする
▼ログインボタンダウンロード
https://developers.facebook.com/docs/facebook-login/web/login-button?locale=ja_JP
上記ページ内プラグイン設定ツールにて作成しましょう。
カスタマイズする場合は、ブランドリソースセンターにてロゴをダウンロードしてください。
▼ブランドリソースセンター
https://ja.facebookbrand.com/facebookapp/?fbclid=IwAR1AtqEfUlAnwpLhNbQu8uOXB2QtcOCiPPqINjqRLik_pDIHfJyBG46FM00
▼Operation design（ガイドライン）
https://developers.facebook.com/docs/facebook-login/userexperience
⭐️ガイドラインまとめ⭐️
* `#FFFFFF(白)`と`#4267B2(Facebookブルー)`を推奨 * "Continue with Facebook" and "Log in with Facebook."という文言を推奨するが、アプリに適したものであれば良い * フォント、フォントの太さ、カーニングなども、アプリに最も適したものであれば良い * モバイル機器では、親指の近くに配置 * Facebookブランドリソースセンターから取得した、正しい「f」のロゴを使用。比率やタイポグラフィのスタイルは維持 * 白または淡い色の背景には`青色のボックスが付いた「f」ロゴのバージョン`、青色または濃い背景には`白のボックスが付いたバージョン`を使用 * Facebookログインであることを示す際は、「f」のロゴか、「Facebook」の単語のいずれか1つのみ * その他のロゴ、古いロゴ、改変されたバージョンは、アプリが古い、または信頼できないという印象を与える可能性があるため使用してはいけない * 「f」ロゴは、デザイン、サイズ、色などに、いかなる変更も加えてはいけない。技術的な制約により正しい色を使用できない場合は、白黒で使用SNSサインイン画面サンプル
ガイドラインに乗っ取って作成したサインインボタンです👍