Twitter 社のロゴ規定を読んでみた

サイトのフォローボタンを作りたくて、Twitter とFacebook で許可されているロゴについて調べてみました。

多くのサイトで、自作したFacebook やTwitter のロゴを見つけます。フラットデザインだったり、立体的なものやコミカルなものまでさまざまなので、見ているだけでも楽しいですね。

しかし、見たり作ったりするだけならいいのですが、じっさいにリンク用ボタンとして使用するときには注意が必要です。会社のロゴも会社の持ち物になりますから、勝手に作って使用すると規定違反になります。

たとえば、こちらのサイトではソーシャルアイコンの素材をまとめてくれていて大変ありがたいのですが、「まとめ」の注意書きにもあるように《ただ、一応無料配布されているものを紹介いたしましたがそのままダウンロードして使用することはNGです。》とあります。

無料配布のFacebookやTwitterのソーシャルロゴアイコン素材まとめ24選 | 株式会社LIG

ですので、あくまで自分の勉強用に使用するか、もしくは各ソーシャルロゴの表示ポリシーを見て違反していないかをチェックしてから使用することをオススメさせて頂きます。

(注:誤字訂正しました)

というわけで、各社のロゴを使用する際には、一度規定をチェックしておいたほうよさそうです。

Twitter 社のロゴ規定

Twitter Brand Asserts

Twitter ロゴの詳細は「Brand assets and guidelines | About」(英語)に記載されています。詳しいことはそちらで確認してもらうとして、ここでは簡単にいくつか書いておきます。

YouTube 動画「Our New Twitter Bird」

まずは公式の動画をどうぞ。

なるほど。全て曲線で描かれてるんですね。

使っていいのは「鳥のロゴ」だけ!?「t」と「twitter」のロゴは使用禁止に!

Twitter 社が認めているのは「鳥のロゴ」だけになりました。よく目にする「t」や「twitter」のロゴを使うのは規定違反になります。余程の事がないかぎり、訴えられることはないでしょうが、やめておいたほうがいいでしょう。

よく無料素材で「t」のロゴや青い鳥のコミカルなイラストが配布されていますが、もちろんそのまま使用してはいけません。わたしも使いたいと思ったものがありましたが断念しました。

「鳥」の周りには200%のセーフティスペースが必要

「鳥のロゴ」をアイコンの端にまでギリギリで配置してはいけません。鳥を中心に配置し、その部分を100%として、周囲に200%の正方形の余白が必要になります。

Twitterロゴデザインの数値指定

 このようにわかりやすい図解で指定していました。

付け足したり色を変えるなど手を加えてはいけない

吹き出しをつけたり、鳥の向きを変えるのも禁止されています。鳥を複数匹にしたり、色を変えたりもいけません。羽の形がちょっと違う、古いバージョンのTwitter公式ロゴも使用できなくなりました。

色指定あり

「鳥のロゴ」の青い色は「HEX:#55ACEE」で指定されています。

HEX:#55acee

この色です。とくに色の名前はないようですが、この色を厳守だそうです。鳥の色は上記の青(HEX:#55ACEE)か白(HEX:#ffffff)だけで、黒色もダメなようです。

ほかにもいろいろ

そのほかロゴの近くに置く文字の推奨フォントも紹介されています。

  • Gotham
  • Gotham Narrow
  • Helvetica Neue
  • Proxima Nova

さらに広告や書籍で使われる場合など、多くの規定が具体的に説明されていました。とくに商用利用される方は全文に目を通しておいて、規約違反にならないように注意しておくべきでしょう。

Twitter のロゴを使って自作のボタンを作ったりもしないでね、とも書いてあります。ボタンを使いたい場合は、Twitter の鳥をリサイズして使ってください、とのことです。

これは基本的に自作アイコンを使うことは、やめたほうがよさそうですね。残念。

当ブログのTwitter アイコンの場合

ということで、当ブログのTwitter アイコンは以下の目的で利用しています。

Promoting your Twitter account
Do:
 ・ Use one of the Twitter buttons as a link to your account online.

デザインは公式の指定通りのボタンにしました。流行りのフラットデザインですね。やっぱりボタンにすると、鳥が小さく、余白が気になってしまいますが、まあ仕方ないですね。

次回は、Facebook 社のロゴ規定を読んでみましょう。

関連記事

サイトのデザインや記事内に画像(img 要素)を挿入するときの alt 属性の使い方

画像には alt 属性を用意しておこう 記事に画像を挿入することは多いですね。WordPress では投稿画面で、左上にある「メディアを追加」ボタンをクリックすれば、簡単にアップロードし、挿入することができます。 ビジュアルモードであれば指…

自分のブログの RSS フィードの調べ方

WordPressの場合だと、RSSフィードはすでに用意されているようです。 詳しいことは「WordPress Feeds « WordPress Codex」に書いてあります。全文英語で書かれていますが、真ん中手前にある以下の欄を参考にす…

エックスサーバーの 「mod_pagespeed設定」で Google のサイト高速化ツールをインストールしよう!

エックスサーバー社で簡単に「mod_pagespeed」が使えるようになった 2014年11月17日(月)にエックスサーバー社から新しい発表がありました。サーバー全プランに対して、Google 社の開発・提供している Apache 拡張モジ…

検索エンジンに残ったウェブページのキャッシュを削除する方法

基本的に、検索エンジンにキャッシュされているウェブページの古い情報を消去したいときには「noarchive タグ」を利用します。 たとえばネットショップの商品ページで、商品の種類や値段が頻繁に変わる場合などに使われるそうです。メンバーシップ…