WebサイトやモバイルアプリにSNSへのリンクやシェアボタンを設置する際に必要となるのが、各SNSのアイコン画像です。最近ではTwitterがXへと名前を変えたことにより、サービス内で使用しているSNSアイコンのアップデート対応をした方も多いのではないでしょうか?
このような用途で使用されるSNSのロゴアイコンは、それぞれのSNSによって管理されており、利用方法についてもガイドラインが設けられています。とはいえ、ガイドラインは英語でのみ提供されていることも多く、最新ガイドラインやアイコンの公式ダウンロードリンクを見つけるのが難しいというようなことも。本記事では、そのようなSNSアイコンの素材ダウンロードリンクと利用ガイドラインをまとめています。
X(旧Twitter)のSNSアイコン
Twitterから名前を変更したXは、ロゴ・アイコンの利用に関する詳しいガイドラインをまだ一般公開しておらず、ロゴの画像データのみ先立って提供しています。
Xアイコンのダウンロードリンクと配布形式
https://about.twitter.com/en/who-we-are/brand-toolkit
Xのロゴは、公式サイトの「ブランドツールキット」よりダウンロードすることができます。
黒色(PNG)
白色(PNG)
SVG
Xアイコンの利用ガイドライン
Xロゴのガイドラインは現時点では一般公開されていないものの、ブランドガイドラインに関する問い合わせ窓口を設けているようです。不明な点があれば、『trademarks@x.com』にメールで問い合わせをすることが可能です。
InstagramのSNSアイコン
Instagramは公式サイトにてブランドガイドラインとブランドアセットを提供しています。Instagramのグリフアイコンは、ガイドラインに沿った形であればサイトからダウンロードして使用することができます。しかし、ライブ配信やラジオ、屋外広告、A4サイズ以上の印刷物で使用する場合には利用イメージを共有の上、使用許可を得る必要があるとのことです。
Instagramアイコンのダウンロードリンクと配布形式
https://about.meta.com/ja/brand/resources/instagram/instagram-brand/
Instagramのアイコンは「Instagramブランドリソースサイト」にて配布されています。背景にグラデーションのついたアプリアイコンではなく、線のみのグリフアイコンが配布されており、SNSアイコンとしてはこちらを使用するようにと定められています。配布されているグリフアイコンと形式は以下の通りです。
グラデーション(Illustrator, PNG, SVG)
黒色(Illustrator, PNG, JPEG, SVG)
白色(Illustrator, PNG, SVG)
Instagramアイコンの利用ガイドライン
Instagramのアイコンに関する詳しいガイドラインは、「グリフアイコンに関するガイドライン」にて日本語で確認することができます。基本的に押さえておきたいポイントは以下の通りです。
利用可能な色
基本的に白か黒が推奨されているものの、周りの色に合わせて自由に変更することも可能
余白
グリフの上下左右に、最低でもグリフ半分のサイズの余白が必要
最小サイズ
29 x 29px
禁止事項
グリフのすぐ近くへのコピーの配置
グリフのすぐ近くへのロゴの配置
グリフの改変、変形、回転
FacebookのSNSアイコン
FacebookのSNSアイコンは、公式のブランドリソースセンターにて配布されています。ガイドラインに同意のうえ、ダウンロードして利用することができますが、テレビ、デジタル広告、印刷パッケージなどで使用する場合は、クリエイティブをリリースする前にFacebookチームの審査を受ける必要があるとのことです。
Facebookアイコンのダウンロードリンクと配布形式
https://about.meta.com/ja/brand/resources/facebookapp/logo/
Facebookのアイコンは、「公式のブランドリソースセンター」にて配布されており、ブランドカラーの青をはじめ、白・黒・グレーを含む4色が含まれています。
青色(EPS, PNG)
黒色(EPS, PNG)
白色(EPS, PNG)
グレー(EPS, PNG)
Facebookアイコンの利用ガイドライン
Facebookアイコンのガイドラインは、アイコンのダウンロードページとダウンロードしたzipファイル内にPDF形式で含まれています。注意するべき点として、Facebookアイコンは背景の丸を含めて一つのアイコンであるため、四角などに形を変更して使用することはできません。
利用可能な色
ブランドカラーの青か白を使用。ソーシャルアイコンとして使用する場 合は、公式で配布されている青・白・黒・グレーの4色のみ使用可能。
余白
アイコンの上下左右にアイコンの1/4サイズの余白が必要
最小サイズ
視認可能なサイズで使用すること。
禁止事項
Facebookロゴの形をした物理的なオブジェクトの作成や、アニメーションの作成
デザイン、サイズ、色などの変更
パートナーシップ、スポンサーシップ、Facebookによる推薦などを暗示すること
YouTubeのアイコン
自身のYouTubeチャンネルを持つ個人や企業も増えてきて、YouTubeのアイコンをソーシャルアイコン的に利用したいケースも多いのではないでしょうか?YouTubeアイコンは、リンク先をYouTubeチャンネルとする場合にはSNSアイコンとして使用することができます。ただし、YouTubeのロゴやアイコンを使用する場合には必ず、「ブランド使用申請フォーム」よりYouTubeに連絡の上、審査・承認を得る必要があるので注意が必要です。
YouTubeアイコンのダウンロードリンクと配布形式
https://www.youtube.com/intl/ALL_jp/howyoutubeworks/resources/brand-resources/#logos-icons-and-colors
YouTubeのアイコンは「YouTubeのブランド関連情報」ページよりダウンロードすることができます。YouTubeが提供しているアイコンのフォーマットは以下の通りです。
フルカラーアイコン(Illustrator, EPS, PNG)
ライトモノクロアイコン(Illustrator, EPS, PNG)
ダークモノクロアイコン(Illustrator, EPS, PNG)
YouTubeアイコンの利用ガイドライン
YouTubeロゴ・アイコンの利用ガイドラインは、ダウンロードページに記載されています。
利用可能な色
フルカラーアイコンの三角形は必ず白を使用
モノクロアイコンには、黒に近いグレー(#282828)または白(#FFFFFF)のみ使用可能
モノクロアイコンの三角形には背景を透過させる
- YouTubeロゴ・アイコンはグレーの色も指定色以外は使用禁止
- 他のSNSアイコンと並べて使用するような場合に、任意のグレーを使用することができるかについてYouTubeに問い合わせてみましたが、ガイドラインに定義された「黒に近いグレー(#282828)」以外のグレーを使用することは禁止されているとのことでした
余白
上下左右にアイコン内の三角形のサイズ以上の余白が必要
最小サイズ
高さ20dp(20px)
禁止事項
ロゴを改変すること
フレーズまたは文章の中でロゴを使用すること
LinkedInのSNSアイコン
ポートフォリオサイトやコーポーレートサイトでは、ビジネスSNSのLinkedInをSNSアイコンとして使用したいケースも多いのではないでしょうか?LinkedInでは、LinkedInプロフィールへのリンクとして使用する場合は特別な許可を必要とせずアイコンを使用することができます。
LinkedInアイコンのダウンロードリンクと配布形式
https://brand.linkedin.com/downloads
LinkedInのアイコンは「公式のダウンロードページ」よりダウンロードすることができます。LinkedInが提供しているアイコン・ロゴのフォーマットは以下の通りです。
ロゴ(PNG, EPS)
アイコン(PNG)
上記のページを確認すると、PNGファイルのみの提供のように見えますが、EPSファイルも「利用ガイドライン」の中にダウンロードリンクが存在します。
LinkedInロゴの利用ガイドライン
LinkedInのブランドポリシー のページにてガイドラインが定められています。LinkedInプロフィールへのリンクとしてアイコンを使用する場合以外には、申請が必要である点には注意が必要です。
利用可能な色
ブランドカラーの青
モノクロで使用する場合は、背景色が濃い場合は白や黒を使用可能
余白
上下左右に「i」の横幅の2倍の余白が必要
最小サイズ
高さ21px
禁止事項
ロゴを改変すること
LineのSNSアイコン
Lineについても、公式サイトにてアイコンの配布を行っています。
Lineアイコンのダウンロードリンクと配布形式
https://www.linebiz.com/jp/logo/
Lineのブランドアイコンは、「Lineのアイコンガイドラインページ」にて提供されています。サイト内では、ブランドアイコンとアプリアイコンが提供されていますが、SNSアイコンとして使用する場合は、ブランドアイコンの方を利用するようにしましょう。
ブランドアイコン(Illustrator, Photoshop, PNG)
Lineアイコンの利用ガイドライン
Lineのブランドアイコン使用に関するガイドラインは、アイコン配布ページにて詳しく記載されています。
利用可能な色
ブランドカラーの緑を使用すること。色の変更は不可。
余白
上下左右にアイコン幅の1/2の余白が必要
最小サイズ
モバイルでは40px
PCでは20px
禁止事項
アイコンの変形(配布されている円形のアイコンはAndroid用のアプリアイコン)
装飾
文中での使用
noteのSNSアイコン
2022年にロゴをリニューアルしたnoteについ ても、ブランドガイドラインと一緒にロゴ・アイコンのデータファイルを提供しています。
noteアイコンのダウンロードリンクと配布形式
https://www.help-note.com/hc/ja/articles/360000235582
noteのロゴ・アイコンデータは、「noteのブランドガイドライン」にて配布されています。noteが提供しているロゴ・アイコンのフォーマットは以下の通りです。
正方形アイコン黒色(SVG, PNG)
正方形アイコン白色(SVG, PNG)
ロゴ黒色(SVG, PNG)
ロゴ白色(SVG, PNG)
noteロゴの利用ガイドライン
noteロゴのガイドラインは、画像データと一緒にPDF形式でダウンロードすることができます。noteは、SNSアイコンとして使用する場合も正方形のタイプロゴの使用を基本としていますが、可読性が担保できない場合には、「n」のアイコンを正方形(角丸可)または正円で使用することができるとのことです。
利用可能な色
基本色(#000000)とサブカラー(#FFFFFF)でのみ使用可能。
余白
上下左右にnとoの間のスペースの1.7倍の余白が必要
最小サイズ
横幅30px
禁止事項
ロゴ・アイコンの変形
基本色・サブカラー以外の使用
アウトラインでの表現
影や装飾をつけること
FigmaのSNSアイコン
デザインツールとして知られるFigmaですが、Figma Communityのリリース以降はデザインSNS的な立ち位置でSNSアイコンの並びで使用される機会も増えてきました。