Blog
CODE
CSS
HTML
LIFE
【保存版】Facebook,Twitter,Insta…主要SNSのフォント、カラー総まとめ
![](https://newmtube07.com/wp-content/uploads/2022/05/715cf7d93cc2e41f7012f9d32b2aeb12.jpeg)
こんにちは!ニタマサ(@NewM07x2)です。
今回は「SNSで使用されているフォントとカラー」についてまとめました。
よく使用されるのは以下の通り。
- Google+
- Facebook Messenger
これらの主要なデザインに知っておくととても便利です。使用用途としてはソーシャルログインボタンやアイコンのリンク、ソーシャルチャネルなど認知されやすいデザインができます。
目次
![](https://newmtube07.com/wp-content/uploads/2022/05/facebook.jpeg)
Facebookのフォント
- Windows:Segoe UI(または旧バージョンのWindowsではTahoma)
- macOS:San Francisco
- iOS:San Francisco
- Android:Roboto
Facebookのカラー
- Hex:#3B5998
- RGB:rgb(59、89、152)
![](https://newmtube07.com/wp-content/uploads/2022/05/twitter.jpeg)
Twitterのフォント
- Windows:Helvetica Neue
- macOS:Helvetica Neue
- iOS:San Francisco
- Android:Roboto
Twitterのカラー
- Hex:#1DA1F2
- RGB:rgb(29、161、242)
Google+
![](https://newmtube07.com/wp-content/uploads/2022/05/google-1.jpeg)
Google+のフォント
GoogleはRobotoを全面的に採用しています。
Android、Google Maps、Google Translateを含めすべてのGoogleアプリやサービスで使用されています。
Google+のカラー
- Hex:#DB4437
- RGB:rgb(219、68、55)
![](https://newmtube07.com/wp-content/uploads/2022/05/instagrem-1.jpeg)
Instagramのフォント
- Windows:Segoe UI
- macOS:San Francisco
- iOS:San Francisco
- Android:Roboto
Instagramのカラー
- Hex:#262626
- RGB:rgb(76、76、76)
Facebook Messenger
![](https://newmtube07.com/wp-content/uploads/2022/05/masage-1.jpeg)
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)
まとめ
![](https://newmtube07.com/wp-content/uploads/2022/05/shutterstock_1097947535-e1560618144131-1024x712.jpg)
いかがだったでしょうか。
今回は『SNSで使用されているフォントとカラー』についてまとめました。
webデザイン等で便利になれれば幸いです。ぜひ試してみてください。
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)
では!See you again!(´∀`)