Webデザインでよく使われるSNSの正規ロゴ、アイコンの使用方法と知っておきたいCI・VIの基本まとめ

2021/11/30

Webデザイン

こんにちは！ユキックス（@MILKIT_DESIGN）です！

WebサイトのデザインにSNSやサービスなどのアイコンやロゴが使われていることって多いですよね。

シェアしていただき拡散することを目的としたり、時に販促、営業、広報を担う役目あったりと使い方も様々で、昨今SNSと連動して欠かせない認知度を高めてくれる重要なツールとして存在しているアイコンやロゴ。

ご覧になっているWeb担当者さまの中には、SNSやソーシャルメディアを運用されている方もいらっしゃることと思います。そんなSNSサービスや企業のアイコンやロゴの掲載には、使用ルールが存在していることをご存知ですか？

今回の記事ではWebサイトなどによく使われるSNSアイコンの利用規約や使用ルールについて、気付かぬうちに利用規約違反していた‥！（ブランドガイドラインに違反してしまい、最悪の場合ビジネス・個人アカウントを問わずアカウント停止されるおそれも‥）とならないために、ロゴやアイコンを正しく使う確認ポイントを解説します。

SNSアイコンは正規のロゴを使用した方がいい理由

すでにWebサイトをお持ちの方が各種SNSへの遷移（リンク）に使っているそのSNSアイコン、利用規約が守られているものが使われていますか？

画像検索で良さそうなアイコンを見繕ってダウンロードしたものや誰かが真似て作った画像の場合、規約に違反するおそれや著作権が心配です。企業にとってロゴはブランドとして大切なものなので、安易なコピペやトレースしての利用はトラブルの原因となる場合があるため、ロゴを使用する際はその出処が規約に反していないものであることが大前提であり、注意が必要です。

SNSアイコンを使用する際の基本ルールとおさえておきたいポイント

• 公式のガイドラインや利用規約のすべてに必ず目を通す
  • アイコンが正しく使われているか確認して、記載内容や規約に反する場合は改善する
  • 規約違反をしていないかを知るためにも確認は必須（重要！）
  • 英語表記の場合は翻訳機能を使って内容を理解する
• 公式に提供されている正式なロゴデータをダウンロードして使う
  • 別名でアセットデータやブランドリソースとも言われる
• 提供されたデータは加工しない
  • 禁止事項や使用禁止例などを忠実に守る
• 指定色以外を使わない
• アイコンやロゴのまわりに指定された一定のスペース(アイソレーションエリア)を確保する
• 規定サイズ以上の大きさで使用する
  • 最小時の使用サイズを守る
• 使用制限に沿って使用する
  • 用途や目的に応じて（閲覧・フォロー・シェアなど）正しい使われ方をしているか
  • 遷移先が関連する正しいコンテンツであるか、リンク先を確認する

では、各種SNSの公式ページにある使用ルールや正式なロゴを見ていきましょう！

Twitterの場合

Twitterのブランドツールキット（ガイドライン）ページ内に、ロゴの使用について必要なルールがPDFにまとめられており、提供されています。

使用上の注意と禁止事項にはじまり、必要な余白のサイズ（アイソレーション）、テキストと併記した際の配置、NG例に至るまで図解を交えて記載されています。

PDFを読んで同意したうえで、同ページ内のTwitterロゴのダウンロードからロゴのzipファイルをダウンロードすることができます。

facebookの場合

Facebookのブランドリソースセンターを開くと、Facebookアプリのブランドリソースサイト内、ガイドライン＞ブランドの概要内に、ロゴの基本情報についてやすべきこと、すべきでないことから規約まで詳しくまとめられています。このページ内および利用規約をすべて読んで同意した上で

さらに、ブランド要素＞ロゴから同ページ内のFacebookロゴの使用について（必須事項、禁止事項、規約などの記載）や、ロゴパックのダウンロードに適用されるガイドラインおよび他の利用規約をすべて読んで同意した上でチェックを入れると、ロゴパックをダウンロードすることができます。

用途によって使用できるロゴが変わります。

Instagramの場合

ブランドガイダンスのページから、ブランドの概要をすべて読み、さらにブランド要素のセクションで詳しいガイドラインを確認してブランドガイダンスのページに戻り、さらにロゴパックのダウンロードに適用されるガイドラインおよび他の利用規約もすべて読んで同意した上でチェックを入れると、ロゴパックをダウンロードすることができます。

LINEの場合

LINE APP ICON GUIDELINEのページをすべて読み同意した上で、同ページ内からロゴをダウンロードすることができます。

YouTubeの場合

YouTubeのロゴを使用する場合は、YouTubeの使用許可が必要です。

まずはブランドリソースページから、ブランドリクエストフォームに記入する 必要があります。翻訳などを駆使して、ロゴの使用許可を求める文面や必要事項を選択・記載して送ります。（フォームの連絡は英語必須です）おおよそ1〜2日で、使用を許可する内容の返信がありました。

使用を許可する返信の到着後は、ブランドリソース＞ロゴ、アイコン、色のページ内およびガイドラインをすべて読んで同意した上で、同ページ内上部のYouTubeロゴの使用から、ベーシックな赤いロゴ、黒背景のロゴ、モノクロのロゴいずれかを選択し、適切なものを使用することができます。

知っておきたい！ブランドガイドラインとCI（コーポレートアイデンティティ）とは？

ブランドガイドラインは事業主や企業がブランドとしての認知を得るためにルールや規則をまとめたもので、ブランドの解説書や説明書のような役割であり指針となるものです。

企業の軸となる理念やビジョンを構築して独自性や特性を言語化・可視化して定義したこれらを総称して主に、コーポレートアイデンティティ = CIと呼んでいます。統一されたメッセージや思想、ビジュアルを発信して認知度を高めたり、共有されることで企業や事業の価値を高めていく役割を担っています。

ブランドガイドラインは、VI・BI・MIなどを含め、幅広く必要な要素や意味を持って構成されています。

VI = ビジュアルアイデンティティ

• 視覚の統一
• 企業のビジュアル(視覚的要素）を統一することでブランドイメージを理解浸透させる
• ロゴやデザインなどで視覚的に事業や企業イメージを構築し、可視化して表現したもの
  
• Webサイトや会社案内・パンフレット、名刺、封筒に至るまで、ビジュアル面で一体感や一貫性を持つことで視覚で理解・共有・認知度や価値を高める効果をもたらす
  
• 一貫性を持ったビジュアルを価値観として打ち出すことで、視覚で理解・共有・認識されやすくなる
  
• 顧客が触れたり認知する、すべてのタッチポイント（エクスペリエンスアイディンティティ = XI = 顧客体験）を統一することで、企業イメージをつくりあげるための重要な役割を担っている
• 顧客だけでなく自社社員なども含め、ビジュアルで訴求することでファン化の促進やモチベーションを高める効果がある

主にVI を作成する際は、ビジュアルイメージやロゴが使用されることを想定して定められたあらゆるルールを詳しく資料に記載します。

これは私の場合ですが、

• 制作したロゴやシンボルマークにまつわるブランドの名称と制作の意匠
• ブランド使用カラー
  • 必要に応じてカラーバリエーション
• 必要に応じてタグラインの考案・制定
• 必要に応じてロゴ組み替え時の指定
• アイソレーションエリア（必要な余白の指定）
• 表示サイズ規定
  • 主に最小で使用時のサイズを指定
• 使い方のルールや禁止事項の記載
• 展開例

など、使用する際に必要な詳細指定をVI(ロゴガイドライン)として作成しています。

その他、CIを構成する主な要素がこちらです。

BI = ブランドアイデンティティ

• 行動と価値の統一
• ビヘイビア（behavior = ふるまい・行動）アイデンティティとも言われる
• CI、VIを通してブランドを明確に訴求し、事業や企業が持っている独自の「らしさ」を表すこと
• VIが視覚的な価値を担うように、企業の「こう思われたい」と顧客の「こう思う」の合点を一致させるための多角的なアプローチ（ブランドエクスペリエンス = BX= ブランド体験）を高めることでBIの価値を上げる効果をもたらす

MI = マインドアイデンティティ

• 理念の統一
• 企業の理念やビジョン（思想や思い）を統一させるもの
• デザインコンセプトをより深く明示し、ブランドとしての価値を明確にしていく

今回ここに書いたことがすべてではありませんが、簡単な指標や認識としてご参考になればと思います。

ブランドガイドラインとは、VIだけではなくブランドの見え方を設計する上で「アイデンティティ」を定めた企業の軸となるものであり、VIはその一部である、という認識が適切と考えています。

VIの制定がない場合

お仕事をさせていただく上でロゴを扱う際、ブランドガイドラインやVI(使用上のルール)が存在しないことが時々あります。

その場合、ロゴ制作者またはロゴの権利を所有している方へ使用方法の確認や承認・許可が必要になります。

ロゴは必ず規約を守って使うものであり、ガイドラインや規約がないものについては使い方が制作意図に反していないか、許可や確認を取ったり制作者や権利の所有者に必ず目を通していただいた上で使用する必要があります。

（ちなみに、これまでに経験したご依頼の中にはロゴのリニューアル・リブランディングだけでなく、ロゴのVIを持っていなかった企業さまから制作の流れで追加でVI作成のご依頼をいただいた、という事例も存在します。）

例えばロゴの無断使用で、こんな事例とお悩みも‥

話は変わりますが、先日とあるサービスを提供している会社に所属する友人と話していた際に、

複数の方がサービスのロゴを無断で使用しているのを見つけてしまって、〇〇社のサービスと提携しています！といった内容を無断で書いていたり、SNSのプロフィールにまで明言されている方までいて、とても困っている（ブランドとしての評価や価値が下がるので控えて欲しい方が複数いて、実はとても困っている。。）

と、頭を悩ませていることを聞きました。

掲載者が知らずにルールや利用規約違反をしているのか、意図的なのかはわかりませんが、このような事例に対する然るべき措置を取る動きも見られます。

気付かぬうちに利用規約違反していた！ということにならないためにも、Webを持つ人、扱う人の知識としてロゴの取り扱い方の基本を知っておくことは、大切なことですね。

それほど大切に、慎重に扱う必要があるのがロゴなので、私もデザイナー（制作者）としてデザインしたロゴを正しく使用していただけるようVIをしっかり作り込むと共に、ご提供いただいたロゴを扱う際は今後もロゴ制作者に敬意を持ってルールをしっかり守り、正しく使っていく所存です。

まとめ

今回はWebデザインでよく使われる主要SNSの正規ロゴ、アイコンの使用ポイントとCI・VIの基本と使用ルールについてご紹介しました！

WebやSNSを扱う方にとって、アイコンやロゴの使用ルールや正しく使う確認ポイントを少しでも知っていただけたなら、うれしいです。

近日中に実例から実績のCI・VIをご紹介できれば‥と目下、準備中です！
（需要ありますかね‥）

最後まで読んでくださって、ありがとうございます！

執筆者は、ユキックスでした！