【2020年度版】各SNSログインボタンのガイドラインまとめ

*2023/6/9更新*

昨今、ソーシャルログイン（SNSアカウントでログインできる機能）に対応されているサービスが増えておりますが、去年のWWDCでAppleアカウントでアプリのサインアップやサインインができる `「Sign in with Apple」` が発表されました📱
今回は、「Sign in with Apple」のログインボタンを中心に、各SNSのログインボタンおよびガイドラインをまとめます👌（ガイドラインに沿ったカスタマイズボタンのサンプルも掲載❤️）
このブログを読めば「公式のソーシャルログイン用のボタンをどこからダウンロードすればいいの❓」「カスタマイズってどこまでOKなの❓」という疑問が解決できます🎉🎉

*※本記事はあくまでもわかりやくガイドラインをまとめたものです。実際にロゴを使用される際は各サービスのロゴガイドラインをご確認ください。*

<h1>Sign in with Apple</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/6a519443-d33b-f44d-c795-23056787342e.png)

▼公式サイト
<a href="https://developer.apple.com/sign-in-with-apple/" target=”_blank” >https://developer.apple.com/sign-in-with-apple/</a>

▼Sign in with Appleガイドライン
<a href="https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/" target="blank_">https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/</a>

▼開発者向けガイダンス
ガイダンスの中にAppleボタンでサインインを追加したり、Apple IDで承認を要求するためのサンプルコードが掲載されています。
<a href="https://developer.apple.com/documentation/authenticationservices" target="blank_">https://developer.apple.com/documentation/authenticationservices</a>

<h3>⭐️ガイドラインまとめ⭐️</h3>
<b>「Sign in with Apple」という文字が入っているボタンとAppleロゴだけのボタンの2種類が使用可能</b>
※watchOS の場合別のロゴを使用します

<b>「Sign in with Apple」という文字が入っているボタン</b>

* プラットフォームに応じて、Appleボタンを`白、アウトライン付きの白、および黒` に変更可能
* 他のSNSロゴに合わせて `ボタンサイズとコーナー半径` （四角か丸か）を変更可能
* ボタンの高さに基づいて、ロゴファイルの形式を選択
    * `SVG`と`PDF`は任意の高さでボタンをカスタマイズ可能
    * `PNG`は高さが44ポイントのボタンでのみ使用
* カスタムボタンのタイトルとボタンの高さは、システムが使用するのと同じ比率を使用
    * タイトルのフォントサイズはボタンの高さの`43％`、つまりボタンの高さは、タイトルのフォントサイズの`233％`であり、最も近い整数丸めることができる
* マージンは、ボタンの幅の少なくとも`8％`を測定する必要がある

<b>Appleロゴだけのボタン</b>

* <a href="https://developer.apple.com/design/resources/" target="blank_">ここ</a>からダウンロード
    * ロゴのみの使用はNG、サイトに記載があるように背景をつけなければいけない
    * ダウンロードしたロゴアートワークのみを使用可能
* デフォルトの正方形の形状を変更可能
    * 円形または角丸、四角形に変更可能
    * マージンは、ボタンの高さの少なくとも`1/10`である必要がある


<h1>Google</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/f26a500a-e7e7-93d8-b0a7-7a6b8f026394.png)

「Sign in with Google」ロゴは<a href="https://developers.google.com/identity/branding-guidelines?fbclid=IwAR0oyedruG1mHbETsSGIh-w1cIUU7ya4y2BTXVvR1fezUuR6nAHz_H3yL2s" target="blank_">こちら</a>からダウンロードできます📦
標準デザインを使用することを強く推奨されていますが、アプリのデザインに合うようにカスタマイズすることも可能です👍


▼ログインにおけるブランドの取り扱いガイドライン（こちらからもロゴダウンロード可能）
<a href="https://developers.google.com/identity/branding-guidelines?fbclid=IwAR0oyedruG1mHbETsSGIh-w1cIUU7ya4y2BTXVvR1fezUuR6nAHz_H3yL2s" target="blank_">https://developers.google.com/identity/branding-guidelines?fbclid=IwAR0oyedruG1mHbETsSGIh-w1cIUU7ya4y2BTXVvR1fezUuR6nAHz_H3yL2s</a>

<h3>⭐️ガイドラインまとめ⭐️</h3>
* Google ロゴが変形しないようにアスペクト比を維持すればサイズ変更可能
* `「Sign in with Google」`または`「Sign up with Google」`という文言を推奨
* 押されていないライトボタンの色は `#FFFFFF（白）`。押されていないダークボタンの色は `#4285F4 （青）`
* ボタンの背景は青または白にできるが、ボタンには白いタイル上に標準色、Google の「G」は常に表示させる
*  フォントはアプリに合わせる必要がない限りは指定のものを使用
*  テキストの左右へのパディングは` 8 dp` ロゴは` 18 dp`ロゴとボタンテキストの間隔は `24 dp` 
*  Googleアイコンを単独で使用して、Googleへのログインを表すことはでできない

<h1>Twitter</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/b09823be-2a7d-cdd2-83ef-a48fe005ddbc.png)

▼「Sign in with Twitter」ロゴダウンロード（画像保存）
<a href="https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter" target="blank_">https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter</a>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/4efcda2b-8846-91f2-51e9-be098a2e6e03.png)

上記に記載しているように、規定のボタンを推奨されていますが、<b>必須ではない</b>ようです😌
カスタマイズしたい方は<a href="https://about.twitter.com/ja/who-we-are/brand-toolkit" target="blank_">ブランドツールキット</a>よりロゴとガイドラインをダウンロードし、ガイドラインに沿ってサインインボタンを作成しましょう。

<h3>⭐️ガイドラインまとめ⭐️</h3>

* `#1DA1F2(Twitter blue)`か`#FFFFFF(白)`を使用
* 画像に鳥のロゴを被せる場合はアイコンの色は`白`を使用
* 囲みを付ける場合は、`丸`、`正方形`、`角丸正方形`のいずれかを使用
* ロゴの横幅を100%としたときに`150%`になる余白が必要
* 最小でも横幅`16px`にする


<h1>Facebook</h1>

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/496b7410-0eb0-8e4e-6d60-34c04fb6273f.png)

▼ログインボタンダウンロード
<a href="https://developers.facebook.com/docs/facebook-login/web/login-button?locale=ja_JP" target="blank_">https://developers.facebook.com/docs/facebook-login/web/login-button?locale=ja_JP</a>

上記ページ内`プラグイン設定ツール`にて作成しましょう。
カスタマイズする場合は、<a href="https://ja.facebookbrand.com/facebookapp/?fbclid=IwAR1AtqEfUlAnwpLhNbQu8uOXB2QtcOCiPPqINjqRLik_pDIHfJyBG46FM00" target="blank_">ブランドリソースセンター</a>にてロゴをダウンロードしてください。

▼ブランドリソースセンター
<a href="https://ja.facebookbrand.com/facebookapp/?fbclid=IwAR1AtqEfUlAnwpLhNbQu8uOXB2QtcOCiPPqINjqRLik_pDIHfJyBG46FM00" target="blank_">https://ja.facebookbrand.com/facebookapp/?fbclid=IwAR1AtqEfUlAnwpLhNbQu8uOXB2QtcOCiPPqINjqRLik_pDIHfJyBG46FM00</a>

▼Operation design（ガイドライン）
<a href="https://developers.facebook.com/docs/facebook-login/userexperience" target="blank_">https://developers.facebook.com/docs/facebook-login/userexperience</a>

<h3>⭐️ガイドラインまとめ⭐️</h3>
* `#FFFFFF(白)`と`#4267B2(Facebookブルー)`を推奨
*  "Continue with Facebook" and "Log in with Facebook."という文言を推奨するが、アプリに適したものであれば良い
*  フォント、フォントの太さ、カーニングなども、アプリに最も適したものであれば良い
*  モバイル機器では、親指の近くに配置
*  <a href="https://ja.facebookbrand.com/" target="blank_">Facebookブランドリソースセンター</a>から取得した、正しい「f」のロゴを使用。比率やタイポグラフィのスタイルは維持
*  白または淡い色の背景には`青色のボックスが付いた「f」ロゴのバージョン`、青色または濃い背景には`白のボックスが付いたバージョン`を使用
*  Facebookログインであることを示す際は、「f」のロゴか、「Facebook」の単語のいずれか1つのみ
*  その他のロゴ、古いロゴ、改変されたバージョンは、アプリが古い、または信頼できないという印象を与える可能性があるため使用してはいけない
*  「f」ロゴは、デザイン、サイズ、色などに、いかなる変更も加えてはいけない。技術的な制約により正しい色を使用できない場合は、白黒で使用

<h1>SNSサインイン画面サンプル</h1>
ガイドラインに乗っ取って作成したサインインボタンです👍

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492105/62ca0970-3e27-8db6-2d7b-8883ff4ddd53.png)

 [参照：ニフクラ mobile backend](https://mbaas.nifcloud.com/function.htm "ニフクラ mobile backend")


<h3>ボタン完成したらこちらもみてね☺️</h3>
<h5>・Sign in with Apple を実装するために必要な証明書の作り方</h5>
ボタンが完成したら「Sign in with Apple」を実装しなければいけませんね😉💦
ニフクラ mobile backend の SNS連携機能にも 「Sign in With Apple」連携機能が無事リリースされています。ここでは、「Sign in with Apple」を実装するために必要な証明書類の作り方について解説します。
<a href="https://qiita.com/natsumo/items/4f209a0efa0d488f1de0" target="blank_">https://qiita.com/natsumo/items/4f209a0efa0d488f1de0</a>
<h5>・【Sign in with Apple】 SwiftUI×NCMBを使って実装する</h5>
証明書類の準備ができた方は<a href="https://qiita.com/natsumo/items/91fdb1d53190719e8a22" target="blank_">【Sign in with Apple】 SwiftUI×NCMBを使って実装する</a>へ進んで、実装を進めましょう！
<a href="https://qiita.com/natsumo/items/91fdb1d53190719e8a22" target="blank_">https://qiita.com/natsumo/items/91fdb1d53190719e8a22</a>