WEBデザイナーはWEBサイトなどを作成するときに、SNSのロゴ(アイコン)を使用することは少なくないと思います。
ただ、実際に使うときに「この使い方で大丈夫なのかな…」と疑問に思うこともあるはず。
そこで、今回は2024年3月時点でのSNSロゴ(アイコン)に関するガイドラインを紹介していきます。今回ご紹介するSNSロゴ(アイコン)は次の通り。
- X(Twitter)
- LINE
- YouTube
- Chatwork
- slack
- note
- はてなブックマーク
それぞれ、ダウンロード先も紹介しているので、ぜひこちらの記事を参考にSNSロゴを使ってみてくださいね。
【お知らせ】
2000名以上の人生を変えるキッカケになった「好きなことで生きていく!WEBデザイナーという働き方セミナー」では、
などをお伝えしています。今だけ無料で開催しているので「WEBデザインの学び方がわからない」「WEBデザイン業界について知りたい」という方はぜひご参加ください。
>>詳しくはこちら
X(旧Twitter)
![X(旧Twitter)のアイコンOK例とNG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/6-1-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
ブラック(#000000) 、白(#FFFFFF)
サイズ
公式に記載なし
- ロゴは16px以上
- ソーシャルアイコンは32px以上
余白
公式に記載なし
ロゴサイズの150% 以上
禁止事項
公式に記載なし
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- ロゴの周りにコピーをつける
![InstagramのロゴOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/7-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
色は自由に変更可能だが白黒がおすすめ
サイズ
29px以上
余白
ロゴの大きさの半分以上は上下左右に余白を取る
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- ロゴの周りにコピーをつける
![FacebookのロゴOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/8-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
ブルー(#1877f2) 、白(#FFFFFF)
サイズ
特別な指定なし
余白
ロゴの大きさの1/4以上は上下左右に余白を取る
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- オブジェクトやアニメーションの作成
- ロゴとして「f」の文字だけ使用すること
- ロゴの横に「Facebook」と記載すること
- 他の要素(イラスト等)をつけること
- 色を勝手に変更すること
【お知らせ】
まずは無料でWEBデザインを学びませんか?
デザインに少しだけ興味がある方に向けて、豪華な無料プレゼントを用意しました。
✔️ WEBデザイン20レッスン
✔️ WEBデザイナータイプ診断
✔️ 60分でバナーが作れるレッスン動画
✔️ 月収3万円が叶う!副業ロードマップ
✔️月100万稼いだデザイナーによる特別動画講座
LINE
![LINEのロゴOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/9-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
グリーン(#06C755)、白(#FFFFFF)
サイズ
パソコンの場合は20px以上、スマートフォンの場合は40px以上
余白
ロゴの大きさの半分以上は上下左右に余白を取る
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- 他の要素(イラスト等)をつけること
- 要素の間隔を変更すること
- 色を変更させること
- LINEの文字の書体変更すること
- 文章の途中で使用すること
- 視認性が落ちる背景を使用すること
YouTube
![YouTubeロゴのNG例・OK例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/10-1024x576.webp)
基本のガイドライン
データ
公式サイトのものを利用
カラー
- レッド(#FF0000)、ブラック(#212121)、ホワイト(#FFFFFF)を必ず使用する
- レッドベースのアイコンの三角形にはホワイトを使用する
- 背景の関係でレッドが使えない場合はモノクロを使う
サイズ
20px以上
余白
三角形のサイズ以上のスペースを確保
禁止事項
- レッド、ブラック、ホワイト以外の色を使うこと
- 文章の途中で使用すること
Chatwork
![](https://japan-design.jp/jd3/wp-content/uploads/2024/03/11-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
- レッド(#F03748)、ブラック(#13202F)、グレー(#E1E3E6)
- レッドベースのアイコンの三角形にはホワイトを使用する
- 背景の関係でレッドが使えない場合はモノクロを使う
サイズ
- 横に並べる場合は横幅60px以上
- 縦に並べる場合は横幅80px以上
- ロゴマーク単体が16px以上
- チャットバブル単体 8px以上
余白
ロゴマークによって違うためガイドラインを確認した上で使用
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- ロゴと文字の相対サイズを変更すること
- ロゴと文字の配置を変更すること
- 3D効果を付け加えること
- 他の要素(イラスト等)をつけること
- 色を変更させること
- 視認性が落ちる背景を使用すること
slack
![slackロゴのOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/12-1024x576.webp)
基本のガイドライン
データ
公式サイトのロゴ使用を推奨
カラー
レッド(#E01E5A)、イエロー(#ECB22E)、グリーン(2EB67D)、ブルー(#x36C5F0)
サイズ
特になし
余白
ロゴマークによって違うためガイドラインを確認した上で使用
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- ロゴと文字の相対サイズを変更すること
- ロゴと文字の配置を変更すること
- 3D効果を付け加えること
- 他の要素(イラスト等)をつけること
- 色を変更させること
- 視認性が落ちる背景を使用すること
- ロゴマークなしでslackという文字を使うこと
![LinkedInロゴのOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/13-1024x576.webp)
基本のガイドライン
データ
公式サイトのものを利用
カラー
- ブルー(#0B66C2)、ブラック(#000000)、ホワイト(#FFFFFF)
- 白と黒のみのレイアウトは黒または白を利用
サイズ
21px以上
余白
最小の余白は「i」の幅の×2にする
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- 他の要素(イラスト等)をつけること
- 色を変更させること
- 視認性が落ちる背景を使用すること
- 文章の途中で使用すること
note
![noteロゴのOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/14-1024x576.webp)
基本のガイドライン
データ
公式サイトのものを利用
カラー
ブラック(#000000)とホワイト(#FFFFFF)を必ず使用する
サイズ
横幅30px以上
余白
nとoの間のスペースの1.7倍の余白を上下左右に確保
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- 他の要素(イラスト等)をつけること
- 色を変更させること
はてなブックマーク
![はてなブックマークロゴのOK例・NG例](https://japan-design.jp/jd3/wp-content/uploads/2024/03/WEBデザイン-1-1024x576.webp)
基本のガイドライン
データ
公式サイトのものを利用
カラー
ブルー(#00A4DE)、ブラック(#444444)、ホワイト(#FFFFFF)を必ず使用する
サイズ
16px以上
余白
ロゴマークの1/3以上を上下左右に確保
禁止事項
- 変形させること(縦に伸ばす、回転させる)
- 装飾を加えること(影をつける、縁取りをする)
- 他の要素(イラスト等)をつけること
- 色を変更させること
まとめ
今回は各種SNSロゴ(アイコン)について、使用上のルールとロゴのダウンロード先をご紹介してきました。
SNSロゴを間違って使用してしまうと商標権侵害となり、最悪の場合、企業から訴えられる可能性が発生します。
可能性自体はものすごく低いものの、クライアントにリスクを背負わせてしまうことになるので、必ず今回ご紹介した基本事項や禁止事項を押さえたうえでSNSロゴ(アイコン)を使用しましょう。
質問や感想があればご記入ください