Blog
CODE
CSS
HTML
LIFE

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

こんにちは!ニタマサ(@NewM07x2)です。

今回は「SNSで使用されているフォントとカラー」についてまとめました。
よく使用されるのは以下の通り。

  • Facebook
  • Twitter
  • Google+
  • Instagram
  • Facebook Messenger

これらの主要なデザインに知っておくととても便利です。使用用途としてはソーシャルログインボタンやアイコンのリンク、ソーシャルチャネルなど認知されやすいデザインができます。

Facebook

Facebookのフォント

  • Windows:Segoe UI(または旧バージョンのWindowsではTahoma)
  • macOS:San Francisco
  • iOS:San Francisco
  • Android:Roboto

Facebookのカラー

  • Hex:#3B5998
  • RGB:rgb(59、89、152)

Twitter

Twitterのフォント

  • Windows:Helvetica Neue
  • macOS:Helvetica Neue
  • iOS:San Francisco
  • Android:Roboto

Twitterのカラー

  • Hex:#1DA1F2
  • RGB:rgb(29、161、242)

Google+

Google+のフォント

GoogleはRobotoを全面的に採用しています。

Android、Google Maps、Google Translateを含めすべてのGoogleアプリやサービスで使用されています。

Google+のカラー

  • Hex:#DB4437
  • RGB:rgb(219、68、55)

Instagram

Instagramのフォント

  • Windows:Segoe UI
  • macOS:San Francisco
  • iOS:San Francisco
  • Android:Roboto

Instagramのカラー

  • Hex:#262626
  • RGB:rgb(76、76、76)

Facebook Messenger

Facebook Messengerのフォント

  • Windows:Segoe UI
  • macOS:San Francisco
  • iOS:San Francisco
  • Android:Roboto

Facebook Messengerのカラー

Facebook Messengerが使用している青色はFacebookアプリの青色とは少し違います。

  • Hex:#0084FF
  • RGB:rgb(0、132、255)

ロゴにもグラデーションが使用されています。

  • Hex:#00C6FF
  • RGB:rgb(0、198、255)

まとめ

いかがだったでしょうか。

今回は『SNSで使用されているフォントとカラー』についてまとめました。

webデザイン等で便利になれれば幸いです。ぜひ試してみてください。

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)

では!See you again!(´∀`)