blog

design

【早見表】SNSロゴのガイドライン丸ごと全部集めてみました!

近年、企業や店舗でも複数のSNSアカウントを運営しているところが増え、ホームページにも誘導のためのSNSロゴやアイコンを設置することが多くなりました。

そんなSNSのロゴデザインには、細かな定義やレギュレーションが決められており、利用する際にはその規約を守らなければいけません。
今回はホームページの制作時に役立つ、主要なSNSロゴ・アイコンのガイドラインをご紹介します。

 

▼【早見表】SNSロゴやシェアボタン、その他クレジットカード会社のロゴやPマークなどのガイドラインをすべて一覧にまとめました!

https://docs.google.com/spreadsheets/d/1_9fyI5uKiOYLXq2knDTrUglgt3eJ_D-Z6zDKkZxboV4/

 

ぜひ、サイト制作やデザイン時にお役立てください。

 

■目次
各SNSのロゴ・アイコンの利用規約
・Twitter
・Instagram
・Facebook
・LINE
・YouTube
・Chatwork

 

Twitter ロゴ・アイコン

Twitterロゴの使用例/NG例

基本ガイドライン

デザインは、公式のダウンロードデータを使用しましょう。

カラーコードについて
・ブルー(#1DA1F2)、白(#FFFFFF)

最小サイズについて
・ロゴは16px以上
・ソーシャルアイコンは32px以上

余白スペースについて
・ロゴサイズの150% 以上

 

他のソーシャルアイコンと並べて表示する場合は、その他のアイコンと同じサイズおよび高さにしましょう。
ロゴは囲わずに表示することを推奨しており、囲みをつける場合は、丸、正方形、角丸正方形のいずれかを使用しましょう。

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示)など
・アニメーション化、セリフや鳴き声の追加、羽ばたかせる加工
・ロゴの周りへの他の鳥や生物の配置
・吹き出しなどの要素の追加

Twitter 公式サイト

Twitter ブランドガイドライン
公式ダウンロードデータ

 

Instagram ロゴ・アイコン

Instagramロゴの使用例/NG例

基本ガイドライン

デザインは、原則、公式のダウンロードデータを使用しましょう。

カラーについて
・ロゴの色は自由に変更できるが、黒または白のロゴを推奨

最小サイズについて
・29px以上

余白スペースについて
・ロゴサイズの半分以上の幅の余白を上下左右に取る

 

表示する際は、コールトゥアクション(「Instagramでフォロー」ボタンなど)と組み合わせて使用しましょう。
※他のソーシャルアイコンと並べて表示する場合は除く。

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示)など
・ロゴの周りへのコピーなどの配置

Instagram 公式サイト

Instagram ブランドガイドライン・公式ダウンロードデータ

 

Facebook ロゴ・アイコン

Facebookロゴの使用例/NG例

基本ガイドライン

デザインは、公式のダウンロードデータを使用しましょう。

カラーコードについて
・ブルー(#1877f2) 、白(#FFFFFF)

最小サイズについて
・指定なし(読めるサイズを使用)

余白スペースについて
・ロゴサイズの4分の1以上の幅の余白を上下左右に取る

 

他のソーシャルアイコンと並べて表示する場合は、その他のアイコンと同じサイズにしましょう。
表示する際は、コールトゥアクション(「Facebookでいいね!」など)と組み合わせて使用しましょう。

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示)、分解など
・ロゴの形をした物理的なオブジェクトやアニメーションの作成
・デザイン、サイズ、色などの変更(技術的な制約により正しい色を使用できない場合は白黒を使用)
・パートナーシップ・スポンサーシップ・推薦などを暗示させる表現

Facebook 公式サイト

Facebook ブランドガイドライン
公式ダウンロードデータ

 

LINE ロゴ・アイコン

LINEロゴの使用例/NG例

基本ガイドライン

デザインは、公式のダウンロードデータを使用しましょう。

カラーコードについて
・グリーン(#06C755)、白(#FFFFFF)

最小サイズについて
・PC 20px以上、スマートフォン 40px以上

余白スペースについて
・ロゴサイズの半分以上の幅の余白を上下左右に取る

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示)など
・色、書体の変更
・視認性を低下させる背景の使用
・文中での使用

LINE 公式サイト

LINE ブランドガイドライン・公式ダウンロードデータ

 

YouTube ロゴ・アイコン

YouTubeロゴの使用例/NG例

基本ガイドライン

デザインは、公式のダウンロードデータを使用しましょう。

カラーコードについて
・赤(#FF0000)、黒(#212121)、白(#FFFFFF)
・赤いアイコンの三角形は常に白で表示
・特定の色や画像の上にフルカラーロゴが表示されにくい場合は、モノクロロゴを使用

最小サイズについて
・20px以上

余白スペースについて
・ロゴ内にある三角形のサイズ以上の余白を上下左右に取る

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示)など
・文中での使用

YouTube 公式サイト

YouTube ブランドガイドライン・公式ダウンロードデータ

 

Chatwork ロゴ・アイコン

Chatworkロゴの使用例/NG例

基本ガイドライン

デザインは、公式のダウンロードデータを使用しましょう。

カラーコードについて
・赤(#F03748)、黒(#13202F)、グレー(#E1E3E6)

最小サイズについて
・縦組み 横幅60px以上
・横組み 横幅80px以上
・ロゴマーク単体 高さ16px以上(※チャットバブル単体 高さ8px以上)

余白スペースについて
・ロゴの種類によって、最小限の余白スペースが変わるため、公式のガイドラインに沿って、可能な限り大きな余白スペースを設け配置しましょう

禁止事項

・変形(長体・平体・斜体・回転)、装飾(影・縁取り・立体表示・白フチ)など
・文中での使用
・ロゴの視認性が悪い背景の上への表示

Chatwork 公式サイト

Chatwork ブランドガイドライン
公式ダウンロードデータ

 

まとめ

今回は、各SNSロゴ・アイコンの利用規約の一部を掲載させていただきました。

ご紹介したロゴやアイコンはすべて、公式サイトよりダウンロードできるので、デザインをする際はダウンロードしたものを使用するようにしましょう。

アイコンの最小サイズや余白スペースなどは各SNSごとで異なるので注意が必要です。

また、利用規約は随時更新されるので、定期的に確認しておくことも重要ですね。

それぞれのガイドラインに沿って、ルールを守ったホームページを制作しましょう。