知らないうちに違反している!? SNSアイコンの使用ルール

2015年 08月 22日

はてなブックマークはてブ
Google+1Google+
PocketPocket
知らないうちに違反している!? SNSアイコンの使用ルール

    ロゴマークを好き勝手に使ってはいけません!

    割と有名な企業でも違反しているので、ちょっと知らない人が多過ぎるな……と思い、ここらで知識共有しとかないと色々マズいんじゃね?と思ったので今日はSNSのロゴマークやアイコンの利用に関するルールについて。

    TwitterやFacebook、Google+などのSNS(ソーシャルネットワークサービス)では、そのサービスを示すアイコンマークとしてロゴマークやアイコンを利用することができます。

    しかしながら、各サービスにおけるブランディングポリシーにおいて、それらのマークの利用に関して厳密なルールが定められているのをご存知ない方も多いでしょう。

    これ最低でもデザイナーさんは知ってないとマズいよなぁ。ということで、今回バチッと説明しちゃいます。

    Twitterのロゴマークについて

    TwitterのロゴマークはTwitterのブランド資産のページで利用時のルールが指定されています。

    • ロゴの最小サイズは16ピクセル
    • Twitterバードの周囲にはそのサイズの150%以上の余白を確保すること
    • Twitterバードの構成要素・色・シェイプ・角度・向きを変更してはいけない
    • 吹き出しやテキストをTwitterバードの周囲に描いてはいけない
    • Twitterバードをアニメーションさせてはいけない
    • Twitterバードの周囲に他のTwitterバードや他の生物を表示してはいけない
    • 旧バージョンの「t」のロゴや「twitter」のロゴを使用し続けてはいけない
    • Twitterによる公認や推薦を連想させるような表示方法をしてはいけない

    ざっと違反されてそうな項目を挙げてみてもこれだけあります。

    Facebookのロゴマークについて

    Facebookのロゴマークはブランド素材のダウンロードから利用時のルールを確認できます。

    今回はよく利用されている「f」ロゴについて説明された「f」ロゴのガイドラインから抜粋して紹介します。

    • デザインや色を変えるなど、「f」ロゴに変更を加えてはいけない
    • 印刷物に掲載する際、技術的な制約により正しい色を使用できない場合は白黒で使用すること
    • 「f」ロゴが他のSNSのロゴと並んでいる場合に「いいね!してね」などのFacebookを使用するアクションを促す言葉を明示してはいけない
    • 白または薄い色の背景に白いボックスのバージョンのロゴを使用してはいけない
    • 青または濃い色の背景に青いボックスのバージョンのロゴを使用してはいけない
    • 放送および映画で「f」マークを使用する場合には事前に許可申請が必要(オンラインの配信には当てはまらない)

    Facebookの場合はTwitterよりも厳しく、「ダウンロードしたfロゴに対しての改変」がすべてアウトです。

    つまり青いボックスも白いボックスも削除してはいけないわけで、ボックスのシェイプを角丸から変更してもいけません。

    ただ、配置に関してはTwitterほど厳密ではなく、許可事項と禁止事項において「Facebookブランド素材の周囲に十分なスペースを取り、すっきりと見えるようにすること」とされているのみです。

    あ、ちなみにロゴマークをダウンロードしようとして「選択されたメディアの組み合わせは、現在ご利用いただけません。」って表示されたら、右上の「言語」のところをEnglish(US)にしてやるとダウンロードできるようになりますよ。

    Google+のロゴマークについて

    Google+のロゴマークはブランディングに関するガイドラインで利用時のルールを確認できます。

    +1ボタンなどのボタンについては、ボタン ポリシーでも定められています。

    • Google提供の公式アイコンか、またはプレーンテキストとリンクの組み合わせのみを使用すること
    • Google+ボタンをクリックする対価として、景品、金銭、または金銭に相当する物品の提供を行ってはいけない
    • ボタンに指定されている2色以外の色は使用しないこと
    • 古いGoogle+アイコンを使用しないこと
    • 必ずGoogle+のアイコンを使用し、Googleのアイコンは使用しないこと

    Google+は文章が細々と書かれていますが、要するに「公式アイコンをダウンロードして使用する」ということです。

    つまり「そのまんま」使えばいい

    結局のところ、ダウンロードしてきたアイコンやロゴマークを「そのまんま」使えば何の問題もないわけです。

    いや、でもまぁ気持ちは分かりますよ。WILDWEST-SERVICEもこの記事を書くにあたってアイコンの色をグレーに変更していた部分を直しましたが、正直なところ記事一覧のとこにSNSのアイコンがドーンと目立つのって情報の優先度が狂っちゃうんで。

    でもしょうがないですよね。プロである以上、そのへんのルールや規約を遵守したうえで製作しないといけませんから。

    色を変更してしまう他によくある違反としては、ボックス部分の違反です。角丸ボックスを消してしまったり、円形にしてしまうのをよく見ます。

    SNSアイコンの色をグレーに変更しちゃってたのは、有彩色のままで上手く情報設計するだけのデザイン知識が当時のぼくに無かっただけなんですが、いま作っているWILDWEST-SERVICE用の新しいWordPressテーマでは上手くハマるようにデザインしたいと思います。

    カテゴリ:デザイン
    タグ: , ,

    この記事をシェアする

    はてなブックマークはてブ
    Google+1Google+
    PocketPocket

    この記事へのコメント

    このサイトをシェア

    このサイトをシェアするボタンです。

    各記事ごとのシェアは各記事のタイトルの下のボタンから。

    SNSのアカウントのページへのリンクは画面最下部のフッター内にあります。