【2024年最新】SNSロゴのガイドライン・ダウンロードまとめ

WEBデザイナーはWEBサイトなどを作成するときに、SNSのロゴ（アイコン）を使用することは少なくないと思います。

ただ、実際に使うときに「この使い方で大丈夫なのかな…」と疑問に思うこともあるはず。

そこで、今回は2024年3月時点でのSNSロゴ（アイコン）に関するガイドラインを紹介していきます。今回ご紹介するSNSロゴ（アイコン）は次の通り。

それぞれ、ダウンロード先も紹介しているので、ぜひこちらの記事を参考にSNSロゴを使ってみてくださいね。

▼ ▼ 期間限定で無料プレゼント ▼ ▼

デザインをするときによく使うフリー素材イラスト。ただ、毎回イラストを探すのは大変、、、。そこでイラスト素材サイトを54個まとめた資料を作りました！無料でプレゼントしているのでぜひ受け取ってください。

プレゼントを受け取る

X（旧Twitter）

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

ブラック（#000000） 、白（#FFFFFF）

サイズ

公式に記載なし

余白

公式に記載なし

禁止事項

公式に記載なし

X（旧Twitter）のロゴをダウンロードする

Instagram

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

色は自由に変更可能だが白黒がおすすめ

サイズ

29px以上

余白

ロゴの大きさの半分以上は上下左右に余白を取る

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• ロゴの周りにコピーをつける

Instagramのロゴをダウンロードする

Facebook

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

ブルー（#1877f2） 、白（#FFFFFF）

サイズ

特別な指定なし

余白

ロゴの大きさの1/4以上は上下左右に余白を取る

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• オブジェクトやアニメーションの作成
• ロゴとして「f」の文字だけ使用すること
• ​​ロゴの横に「Facebook」と記載すること
• 他の要素（イラスト等）をつけること
• 色を勝手に変更すること

Facebookのロゴをダウンロードする

LINE

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

グリーン（#06C755）、白（#FFFFFF）

サイズ

パソコンの場合は20px以上、スマートフォンの場合は40px以上

余白

ロゴの大きさの半分以上は上下左右に余白を取る

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• 他の要素（イラスト等）をつけること
• 要素の間隔を変更すること
• 色を変更させること
• LINEの文字の書体変更すること
• 文章の途中で使用すること
• 視認性が落ちる背景を使用すること

LINEのロゴをダウンロードする

YouTube

基本のガイドライン

データ

公式サイトのものを利用

カラー

• レッド（#FF0000）、ブラック（#212121）、ホワイト（#FFFFFF）を必ず使用する
• レッドベースのアイコンの三角形にはホワイトを使用する
• 背景の関係でレッドが使えない場合はモノクロを使う

サイズ

20px以上

余白

三角形のサイズ以上のスペースを確保

禁止事項

• レッド、ブラック、ホワイト以外の色を使うこと
• 文章の途中で使用すること

YouTubeのロゴをダウンロードする

Chatwork

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

• レッド（#F03748）、ブラック（#13202F）、グレー（#E1E3E6）
• レッドベースのアイコンの三角形にはホワイトを使用する
• 背景の関係でレッドが使えない場合はモノクロを使う

サイズ

• 横に並べる場合は横幅60px以上
• 縦に並べる場合は横幅80px以上
• ロゴマーク単体が16px以上
• チャットバブル単体 8px以上

余白

ロゴマークによって違うためガイドラインを確認した上で使用

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• ロゴと文字の相対サイズを変更すること
• ロゴと文字の配置を変更すること
• 3D効果を付け加えること
• 他の要素（イラスト等）をつけること
• 色を変更させること
• 視認性が落ちる背景を使用すること

Chatworkのロゴをダウンロードする

slack

基本のガイドライン

データ

公式サイトのロゴ使用を推奨

カラー

レッド（#E01E5A）、イエロー（#ECB22E）、グリーン（2EB67D）、ブルー（#x36C5F0）

サイズ

 特になし

余白

ロゴマークによって違うためガイドラインを確認した上で使用

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• ロゴと文字の相対サイズを変更すること
• ロゴと文字の配置を変更すること
• 3D効果を付け加えること
• 他の要素（イラスト等）をつけること
• 色を変更させること
• 視認性が落ちる背景を使用すること
• ロゴマークなしでslackという文字を使うこと

slackのロゴをダウンロードする

LinkedIn

基本のガイドライン

データ

公式サイトのものを利用

カラー

• ブルー（#0B66C2）、ブラック（#000000）、ホワイト（#FFFFFF）
• 白と黒のみのレイアウトは黒または白を利用

サイズ

21px以上

余白

最小の余白は「i」の幅の×2にする

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• 他の要素（イラスト等）をつけること
• 色を変更させること
• 視認性が落ちる背景を使用すること
• 文章の途中で使用すること

LinkedInのロゴをダウンロードする

note

基本のガイドライン

データ

公式サイトのものを利用

カラー

ブラック（#000000）とホワイト（#FFFFFF）を必ず使用する

サイズ

横幅30px以上

余白

nとoの間のスペースの1.7倍の余白を上下左右に確保

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• 他の要素（イラスト等）をつけること
• 色を変更させること

noteのロゴをダウンロードする

はてなブックマーク

基本のガイドライン

データ

公式サイトのものを利用

カラー

ブルー（#00A4DE）、ブラック（#444444）、ホワイト（#FFFFFF）を必ず使用する

サイズ

16px以上

余白

ロゴマークの1/3以上を上下左右に確保

禁止事項

• 変形させること（縦に伸ばす、回転させる）
• 装飾を加えること（影をつける、縁取りをする）
• 他の要素（イラスト等）をつけること
• 色を変更させること

はてなブックマークのロゴをダウンロードする

まとめ

今回は各種SNSロゴ（アイコン）について、使用上のルールとロゴのダウンロード先をご紹介してきました。

SNSロゴを間違って使用してしまうと商標権侵害となり、最悪の場合、企業から訴えられる可能性が発生します。

可能性自体はものすごく低いものの、クライアントにリスクを背負わせてしまうことになるので、必ず今回ご紹介した基本事項や禁止事項を押さえたうえでSNSロゴ（アイコン）を使用しましょう。