ソーシャルログインボタン、ソーシャルメディアチャンネルへのリンクなど、2020年になってもウェブデザインやアプリデザインではこのようなことが行われています。 つまり、最近ではソーシャルメディアを利用していないビジネスはないということです。
ソーシャルネットワークで使われているさまざまなフォントや色を知っていると、デザインに生かすことができて便利です。 アプリやウェブサイトをデザインするときには必ず「ググる」ことにしています。
実際、あなたはそうやってこの記事を見つけたに違いありません！
さて、これ以上あなたをお待たせすることはありません。
この記事は2020年に更新され、Facebook、Twitter、Instagram、その他さまざまなソーシャルネットワークで使用されている、より新しいフォントと色を紹介しています。 Google+はカムバックしませんでした。
What’s the font used by ? 🤔
クイックノート：システムフォント（CSSの: system-uiなど）は、特に明記されていない限り標準的なものです。
- Android の Roboto
- Windows の Segoe UI
- iOS/macOS の San Francisco
マテリアル デザイン (YouTube やその他の Google アプリ) にも Roboto が使用されています。
Messenger, by Facebook
Messengerの色の値
- Messengerの16進数の値。
#0084FF - MessengerのRGB値。
rgb(0 132 255)
Messengerのフォント
macOSのMessengerはSan Franciscoの代わりにHelvetica Neueを使用していますが、その他はすべてシステムのデフォルトに従っています。
Instagram, by Facebook
Instagramの色の値
- Instagramの16進数の値です。
#E1306C - InstagramのRGB値。
rgb(225 48 108)
Instagramはブランディングに多くの色を使用していますが、上記の色の値は自社の例で使用されているものです。
WhatsApp, by Facebook
WhatsAppのカラーバリュー
- WhatsAppの16進数の値です。
#25D366 - WhatsAppのRGB値。
rgb(37 211 102)
Facebook、Facebookによる（笑）
Facebookのカラーバリュー
- Facebookの16進数値。
#1877F2 - FacebookのRGB値。
rgb(24 119 242)
Twitterの色の値
- Twitterの16進数の値。
#1DA1F2 - TwitterのRGB値。
rgb(29 161 242)
Pinterestのカラーバリュー
- Pinterestの16進数値。
#E60023 - PinterestのRGB値。
rgb(230 0 35)
Pinterestのフォント
Pinterestでは、ウェブサイトにはHelvetica/Neue Haas Groteskを使用していますが、それ以外はデフォルトのシステムフォントを使用しています。
LinkedInのカラーバリュー
- Hex:
#1666C5 - RGB:
rgb(22 102 197)
LinkedInのフォント
LinkedInはウェブサイトで: Sans-Serifを使用しており、それ以外はHelvetica first/Arial second/system defaultとなっています。
Snapchat
Snapchatの色の値
- Hex:
#FFFC00 - RGB:
rga(255 252 0)
Snapchatのフォント
群を抜いて、SnapchatはGraphikフォントを使っています!
YouTube
AndroidやGoogle、Googleが運営するYouTubeなどのアプリでは、Material Designと呼ばれるデザインシステムが採用されており、いくつかの色が参照されているほか、Robotoフォントの使用が推奨されています。
YouTubeの色の値
- Hex:
#FF0000 - RGB:
rgb(255 0 0)
Googleブルーのカラーバリュー
- Hex:
#4285F4 - RGB:
rgb(66 133 244)
Google 赤の色の値
- Hex:
#EA4335 - RGB:
rgb(234 67 53)
Google 黄色の色の値
- Hex:
#FBBC05 - RGB:
rgb(251 188 5)
Google グリーンのカラーバリュー
- Hex:
#34A853 - RGB:
rgb(52 168 83)
Alphabet Red Color Value
AlphabetはGoogleを所有する会社です
- Hex:
#ED1C24 - RGB:
rgb(52 168 83)
Social Media Colors as CSS Variables
前述のソーシャルメディアのブランドカラー（RGB）をCSS変数として使用するには、このコードスニペットをCSSファイルの先頭に配置します。
:root { --messenger: 0 132 255; --instagram: 225 48 108; --whatsapp: 37 211 102; --facebook: 24 119 242; --twitter: 29 161 242; --pinterest: 230 0 35; --linkedin: 22 102 197; --snapchat: 255 252 0; --youtube: 255 0 0;}そして、次のように呼び出します。
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}まだお探しのものが見つかりませんか？
まだお探しのものが見つかりませんか？ご安心ください。フリーフォントのガイドをご用意しています。