WEBデザイナーになるまでのロードマップ無料配布中 >受け取りはこちら

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

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

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

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

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

この記事で解説するSNSロゴ(アイコン)
  • X(Twitter)
  • Instagram
  • Facebook
  • LINE
  • YouTube
  • Chatwork
  • slack
  • LinkedIn
  • note
  • はてなブックマーク

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

目次

X(旧Twitter)

X(旧Twitter)のアイコンOK例とNG例

基本のガイドライン

データ

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

カラー

ブラック(#000000) 、白(#FFFFFF)

サイズ

公式に記載なし

旧Twitterのサイズ
  • ロゴは16px以上
  • ソーシャルアイコンは32px以上

余白

公式に記載なし

旧Twitterの余白

ロゴサイズの150% 以上

禁止事項

公式に記載なし

旧Twitterの禁止事項
  • 変形させること(縦に伸ばす、回転させる)
  • 装飾を加えること(影をつける、縁取りをする)
  • ロゴの周りにコピーをつける

X(旧Twitter)のロゴをダウンロードする

Instagram

InstagramのロゴOK例・NG例

基本のガイドライン

データ

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

カラー

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

サイズ

29px以上

余白

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

禁止事項

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

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

Facebook

FacebookのロゴOK例・NG例

基本のガイドライン

データ

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

カラー

ブルー(#1877f2) 、白(#FFFFFF)

サイズ

特別な指定なし

余白

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

禁止事項

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

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

LINE

LINEのロゴOK例・NG例

基本のガイドライン

データ

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

カラー

グリーン(#06C755)、白(#FFFFFF)

サイズ

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

余白

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

禁止事項

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

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

YouTube

YouTubeロゴのNG例・OK例

基本のガイドライン

データ

公式サイトのものを利用

カラー

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

サイズ

20px以上

余白

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

禁止事項

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

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

Chatwork

基本のガイドライン

データ

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

カラー

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

サイズ

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

余白

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

禁止事項

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

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

slack

slackロゴのOK例・NG例

基本のガイドライン

データ

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

カラー

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

サイズ

 特になし

余白

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

禁止事項

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

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

LinkedIn

LinkedInロゴのOK例・NG例

基本のガイドライン

データ

公式サイトのものを利用

カラー

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

サイズ

21px以上

余白

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

禁止事項

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

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

note

noteロゴのOK例・NG例

基本のガイドライン

データ

公式サイトのものを利用

カラー

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

サイズ

横幅30px以上

余白

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

禁止事項

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

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

はてなブックマーク

はてなブックマークロゴのOK例・NG例

基本のガイドライン

データ

公式サイトのものを利用

カラー

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

サイズ

16px以上

余白

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

禁止事項

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

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

まとめ

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

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

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

▼ ▼ 限定公開中 ▼ ▼

当メディアを運営している日本デザインスクールは、これまで14364人WEBデザイナーの仕事についてお伝えする無料セミナーを開催してきました。

その中で気づいたのが、WEBデザイナーへの誤解がある方が多いということ。中には一度勉強に失敗してからセミナーに来て「先に知りたかった」という方もいらっしゃいます。

そのような方が増えないために、特に多かった15の誤解を1つの資料にまとめました。勉強を始めてから後悔しないよう、ぜひ受け取ってください。

※非常に人気の資料であり、今後有料化する可能性もあるのでお早めに手に取ってくださいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

質問や感想があればご記入ください

コメントする

目次