ソーシャルネットワークで利用されているブランドアセットを揃えておくと、デザインに正しく取り入れることができて便利です。FacebookやTwitter、Google+などの人気のソーシャルネットワークに使用されているフォントや色を押さえることで、ソーシャルログインボタンやアイコンのリンク、ソーシャルチャネルなど認知されやすいデザインができます。
Facebook、Twitter、Google+、Pinterest、Snapchat、Instagram、Facebook Messenger、LinkedInに使用されているさまざまなフォントと色（HexとRGB色コードの両方を表示します）を紹介します。
Facebookのフォント
- Windows：Segoe UI（または旧バージョンのWindowsではTahoma）
- macOS：San Francisco
- iOS：San Francisco
- Android：Roboto
Facebookは、Windows版デスクトップ用WebサイトにSegoe UIを、macOS版にはApple製のSan Franciscoフォントを使用しています。同社は以前Lucida Grandeを使用していましたが、近年はデフォルトシステムのフォントの使用を試みています。AndroidにRobotoを採用し、iOSにSan Franciscoを利用しています。Lucida GrandeやHelvetica Neueは使用しません。
Facebook Hex/RGBの色
- Hex：#3B5998
- RGB：rgb（59、89、152）
Facebook Color Paletteを見ると全体が把握できます。このリソースができてからもう5年になりますが、色使いは変わっていません。ただし、メインのFacebook BlueはHex：#3B5998、RGB：rgb（59、89、152）です。
詳しく知りたい人はFacebookのBranding Guidelinesを参考にしてください。
Twitterのフォント
- Windows：Helvetica Neue
- macOS：Helvetica Neue
- iOS：San Francisco
- Android：Roboto
Twitterもモバイルアプリにデフォルトでシステムフォントを採用しています（ほとんどのソーシャルネットワークが同様です）。iOSとAndroidの両方にSan Franciscoを使用しています。デスクトップ用のWebサイトではHelvetica Neueを使用しています。
TwitterがGotham Narrowへの切り替えをしたときのことを覚えていますか？ すぐに元に戻りました。評判が悪かったのでしょうか？
Twitter Hex/RGBの色
- Hex：#1DA1F2
- RGB：rgb（29、161、242）
TwitterはTwitter Greyの変化形（青、黒、白のトーンを含む）の組み合わせて同社の基本ブランドカラーに明るい青を使用しています。詳しく知りたい人はTwitterのBrand Guidelinesを参考にしてください。
Google+
Google+のフォント
GoogleはRobotoを全面的に採用しています。Android、Google Maps、Google Translateを含めすべてのGoogleアプリやサービスで使用されています。Robotoフォントを使用していないのはGoogle.comだけだと思います。
Googleアプリで使用されているRobotoや色は、Material Design languageが適用されています。
Google+ Hex/RGBの色
- Hex：#DB4437
- RGB：rgb（219、68、55）
以前のGoogle+のロゴは明るい色の組み合わせでした（Google Chromeのロゴと同じような色です）が、いまはHex：#DB4437、RGB：rgb（219、68、55）を使用しています。Googleは、この色をGoogle+Redと呼んでいます。Google+は黄色以外のほかの色をWebサイトに使用しています。
- Google+Red：#DB4437ーrgb（219、68、55）
- Google+ Green：#0F9D58ーrgb（0、128、0）
- Google+Blue：#2962FFーrgb（41、98、255）
詳しく知りたい人はGoogle Brand Guidelinesを参考にしてください。
Pinterestのフォント
- Windows：Helvetica Neue
- macOS：Helvetica Neue
- iOS：San Francisco
- Android：Roboto
注目点：Pinterestはほかのソーシャルネットワークと同様、ほぼ標準のフォントを使用していますが、日本語をはじめ東洋言語はHiraginoフォントを使用しています。理由は、ローマ字と一緒に使用するより、東洋言語はこのフォントが読みやすいためです。
You can read more about Pinterest’s Brand Guidelines here.
詳しく知りたい人はPinterestのBrand Guidelinesを参考にしてください。
Pinterest Hex/RGBの色
- Hex：#BD081C
- RGB：rgb（189、8、28）
Pinterestが使っている赤いhexの色は昔から変わりません。
Snapchat
Snapchatのフォント
- Windows：Avenir Next
- macOS：Avenir Next
- iOS：Helvetica Neue
- Android：Roboto
多くのソーシャルネットワークがデフォルトのシステムフォントに回帰する中、Snapchatはデスクトップ向けのWebサイトに少し異なったフォント「Avenir Next」を使っています。
Snapchat Hex/RGBの色
- Hex：#FFFC00
- RGB：rgb（255、252、0）
Instagramのフォント
- Windows：Segoe UI
- macOS：San Francisco
- iOS：San Francisco
- Android：Roboto
Instagramが使用するフォントはOSのデフォルトシステムを検知して変わります。WindowsはSegoe UI、macOSはSan Francisco、AndroidはRobotoといった感じです。過去にはFreight Sans（ロゴや全体的なビジュアルがもっとかっこよかった頃の話）やProxima Novaを使用していました。
Instagram Hex/RGBの色
- Hex：#262626
- RGB：rgb（76、76、76）
Instagramは2016年にブランドを刷新したとき、Hex色コード#222222、つまり、RGB：rgb（76、76、76）の使用を決定しました。写真がメインになるWebサイトでは画像を引き立たせるため白黒のレイアウトが効果的です。Instagramのロゴは、文字どおり「すべての色」を使っています（世界中のInstagramユーザーにとっては残念なことですが）。
Facebook Messenger
Facebook Messengerのフォント
Facebook Messengerは、デスクトップとモバイルの標準Facebookアプリと同じフォントを使用しています。
- Windows：Segoe UI
- macOS：San Francisco
- iOS：San Francisco
- Android：Roboto
Facebook Messenger Hex/RGBの色
Facebook Messengerが使用している青色はFacebookアプリの青色とは少し違います。
- Hex：#0084FF
- RGB：rgb（0、132、255）
ロゴにもグラデーションが使用されています。
- Hex：#00C6FF
- RGB：rgb（0、198、255）
LinkedInのフォント
LinkedInはデスクトップ向けWebサイトではSource Sansを使用しています。詳しく知りたい人はLinkedinのBrand Guidelinesを参考にしてください。
LinkedIn Hex/RGBの色
- Hex：#0077B5
- RGB：rgb（0、119、181）
（原文：Fonts and Colors Used by Facebook, Twitter, Google+ and More）
［翻訳：中村文也／編集：Livit］
image:Shutterstock.com
