【保存版】Facebook、Twitter、インスタ…主要SNSのフォント、カラー総まとめ

2017/07/26

Daniel Schwarz

FREE
74
Facebook、Twitterなどソーシャルネットワーキングサービスで利用されているフォントとキーカラーをまとめました。

ソーシャルネットワークで利用されているブランドアセットを揃えておくと、デザインに正しく取り入れることができて便利です。FacebookやTwitter、Google+などの人気のソーシャルネットワークに使用されているフォントや色を押さえることで、ソーシャルログインボタンやアイコンのリンク、ソーシャルチャネルなど認知されやすいデザインができます。

Facebook、Twitter、Google+、Pinterest、Snapchat、Instagram、Facebook Messenger、LinkedInに使用されているさまざまなフォントと色(HexとRGB色コードの両方を表示します)を紹介します。

Facebook

Fonts and colors used by Facebook

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

Fonts and colors used by Twitter

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+

Fonts and colors used by Google Plus

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

Fonts and colors used by Pinterest

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

Fonts and colors used by 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

Fonts and colors used by Instagram

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

Fonts and colors used by 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

Fonts and colors used by LinkedIn

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

Daniel Schwarz

Daniel Schwarz

Airwalk Studiosの創業者で、SitePoint Designチャネルの共同編集者です。コンテンツクリエイター、ライター、デザイナー、コーダー、デジタルノマドでもあります。食べ物や旅行、リモートワークに関心を持っています。I'm Daniel

Loading...