開発課の田畑です。
少し前になりますが、シナプストップページのニュース枠の右枠「天気予報」「シナプスぶろぐ」「シナプス・ステーションぶろぐ」の下にFacebookとTwitterのSNSアイコンを設置しました。
リンク先はそれぞれ以下になります。
Facebook www.facebook.com
Twitter twitter.com
アイコンを設置するにあたり、各SNSアイコンについてのガイドラインについて調べたので、内容をまとめてみました。
各SNSアイコンのガイドラインを確認しよう
ネットで検索をかけるとSNSアイコンのガイドラインついてのまとめをいくつか見かけました。 その情報が正しいのか最新版なのかどうか分からないので、自分でも公式サイトを調べてみました。
FacebookのSNSアイコンについて
ガイドラインとSNSアイコンをダウンロード
以下のページからブランドの概要を読むことができます。
ブランドの概要とロゴパック
ブランドの概要 | Facebook app | Brand Portal
ロゴはこちらからダウンロードできます。 ガイドラインは以下のロゴパックに含まれています。
ロゴ | Facebook app | Brand Portal
ダウンロードした「Facebook Brand Asset Pack 2019」の中にはいくつかフォルダがありますが、今回使いたいSNSアイコンが入っているのは「f-Logos-2019-1」の中の「f_Logo_Online_04_2019」になります。中には４つのSNSアイコンフォルダと「f_Logo_Guidelines.pdf」が入っています。
Representing Your Social Channels
「f_Logo_Guidelines.pdf」の内容は以下です。
- “f” Logo
- “f” Logo—Do’s and Don’ts
- Representing Your Social Channels
「Representing Your Social Channels」にSNSアイコンについてのガイドラインが掲載されています。
googleで翻訳した概要は以下です。
形状と比率を維持すること、アセットで提供されている色を使うこと、というような内容が書かれています。
あなたのソーシャルチャネルであなたの存在を表すときFacebook、「f」ロゴを使用してください。
このロゴは私たちの最もグローバルに識別可能なマークであり、多くのサイズで表示するようにフォーマットされています。
「f」ロゴ
•「f」ロゴは、単独で使用することも、あなたの存在を表す他のソーシャルアイコンと一緒に使用することもできます。
形状と比率の維持
•アプリの配列に「f」ロゴを表示すると、サイズは隣接するロゴと同じである必要があります。
•必ず円形を維持し、十分な空きスペースを提供してください。
スタイル
•「f」ロゴのバリエーションを作成しないでください。
•ブランドリソースから入手できるものを使用します。
色
•アセットで提供されている色の「f」ロゴを使用。青、灰色、白または黒。
“f” Logo、“f” Logo—Do’s and Don’ts
他の２つの
- “f” Logo
- “f” Logo—Do’s and Don’ts
の内容も確認します。 ほぼ似たような内容でしたが、以下が「Representing Your Social Channels」にはなかった項目になります。
“f” Logo
•1/4 h Logo のクリアスペースを取ること。
•「f」ロゴの完全性を維持するために、常に最小限の明確さを維持してください。
“f” Logo—Do’s and Don’ts
•「f」ロゴの形で物理的なオブジェクトをアニメーション化または作成しない。
•マーケティングクリエイティブでFacebookを目立つように取り上げない。
•Facebookのワードマークを使用して自分の存在を表現しない。
Facebook social icons
「f_Logo_Online_04_2019」の中にはSNSアイコンが４色（黒・白・グレー・青）用意されています。pngとespがあります。
- black
- white
- grey
- Color
TwitterのSNSアイコンについて
ガイドラインとSNSアイコンをダウンロード
以下のページから「twitter-external-brand-guidelines-01272021.pdf」と「Twitter social icons」「 Twitter logo」をダウンロードできます。
ブランドツールキット
Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール
twitter-external-brand-guidelines-01272021.pdf
「twitter-external-brand-guidelines-01272021.pdf」をgoogleで翻訳した概要は以下になります。
やはりFacebookのガイドライン同様、ブランドページからダウンロードを使うことや色などが指定されています。
The basics（基本）
•ロゴはTwitterの青または白でのみ表示します。特定の例外には黒を使用できます（承認を得るために私たちに連絡してください）。
•ロゴを変更、回転、または変更しないでください。
•ロゴをアニメーション化したり、話したり、チャープしたり、飛ばしたりしないでください。
•古いバージョンのロゴは使用しないでください。
Spacing（間隔）
•ロゴの周囲の空きスペースは、ロゴの幅の150％以上である必要があります。
•幅を16ピクセルより小さくしないでください。
Color （色）
•Twitterのロゴは常に青または白であることを忘れないでください。
•画像にロゴを配置するときは、常に白バージョンを使用してください。
•背景が明るい画像の場合、白いロゴが見やすいように、画像全体に10〜20％の黒の色合いを適用することをお勧めします。
•ルールにはいくつかの例外がある場合があります。許可についてはお問い合わせください。
Social icons （ソーシャルアイコン）
•Twitterで他の人と簡単につながれるように、いくつかの異なるソーシャルアイコンを用意しています。
ブランドページからダウンロードしてください。
•ロゴは青または白のみにしてください。ただし、アイコンの背景をクリエイティブに合わせて変更することはできます。
•他のソーシャルアイコンと同じサイズと高さで表示します。
•ロゴソーシャルアイコンの最小幅は32pxです。
•可能な限り、ロゴをコンテナから取り出します。
•コンテナが必要な場合は、円、正方形、または角が丸い正方形のいずれかを自由に使用してください。
Twitter social icons
「twitter-logo-01282021」の中には「Twitter social icons」「 Twitter logo」が含まれています。
今回使うのはSNSアイコンなので「Twitter social icons」を利用します。
「Twitter social icons」には丸、四角、角丸の３種類のアイコンが入っています。
- Twitter social icons - circle
- Twitter social icons - square
- Twitter social icons - rounded square
FacebookとtwitterのSNSガイドライン比較
各ガイドラインは分かりましたが、実際にサイトに並べて配置する場合は同じ大きさや色にすることが多いと思います。
同じ条件を導き出すためFacebook・twitterのSNSガイドラインを項目で比較してみます。
| 形 | •「f」ロゴのバリエーションを作成しないでください。 | •可能な限り、ロゴをコンテナから取り出します。 •コンテナが必要な場合は、円、正方形、または角が丸い正方形のいずれかを自由に使用してください。 |
| 色 | •アセットで提供されている色の「f」ロゴを使用。青、灰色、白または黒。 | •ロゴは青または白のみにしてください。ただし、アイコンの背景をクリエイティブに合わせて変更することはできます。 |
| 大きさ | •アプリの配列に「f」ロゴを表示すると、サイズは隣接するロゴと同じである必要があります。 | •他のソーシャルアイコンと同じサイズと高さで表示します。 •ロゴソーシャルアイコンの最小幅は32pxです。 |
| 間隔 | •必ず円形を維持し、十分な空きスペースを提供してください。 | 記載なし |
| その他 | •「f」ロゴは、単独で使用することも、あなたの存在を表す他のソーシャルアイコンと一緒に使用することもできます。 •ブランドリソースから入手できるものを使用します。 |
•Twitterで他の人と簡単につながれるように、いくつかの異なるソーシャルアイコンを用意しています。ブランドページからダウンロードしてください。 |
FacebookとtwitterのSNSガイドライン最小条件
上記表から以下の条件を満たせば、両方のガイドラインをクリアできそうです。
- ロゴのバリエーションを作成しない
- コンテナが必要な場合は、円を使う。
- ロゴは青または白
- ソーシャルアイコンの最小幅は32px
- 他のソーシャルアイコンと同じサイズと高さに揃えること
- 公式からダウンロードしたアイコンを使うこと
シナプストップページでのデザイン
これらを踏まえ、シナプストップページのデザインは以下のようにすることにしました。
形
- FacebookのSNSアイコンに丸型しかないので、丸いアイコンに揃える。
- SNSアイコンは同じ形にしたほうが見るほうが混乱しにくいため。
- ダウンロードしたアイコンは加工せずそのままで使う
色
- 天気予報のバナー下なのでカラー（青色）を選択。
- 白地にそのまま置くとおさまりが悪かったのでグレーの枠で囲む。
大きさ
- twitterガイドラインの最小サイズ32pxより少し大きい35pxに揃える。
- まん丸のアイコンは目立つため、これ以上大きいと上にある「しなぷすぶろぐ」「シナプス・ステーションぶろぐ」のボタンが目立たなくなる。
- SNSアイコンを大きくした場合、「しなぷすぶろぐ」「シナプス・ステーションぶろぐ」のボタンを大きくすれば右カラム内はバランスは取れるが、左カラム内のニュースの量が日によって増減するため、あまり高さは出したくない。
間隔
- FacebookのSNSガイドラインに「十分な空きスペース」という記載があるのみで、具体的な間隔の指定はない。どの程度を「十分な空きスペース」と考えるか悩んだが、とりあえずロゴの方に記載されている条件をクリアしていれば良いだろうと判断した。
- “f” Logoは1/4 h Logo のクリアスペースを取る（ロゴの大きさが35pxなので8.75px以上のクリアスペース）、 twitterの方はロゴの周囲の空きスペースがロゴの幅の150％以上とあるが、こちらもクリアしている（ロゴの大きさが35pxなので8.75px以上のクリアスペース）
その他
- 公式からダウンロードしたアイコンを使う
まとめ
- ネット上では加工されたソーシャルアイコンを見かけることはありますが、きちんと公式からダウンロードした最新版を使いましょう！
- 今後他のソーシャルアイコンを追加した場合、その利用規約次第では今回設置したものも含めて再検討する必要がでてくる可能性がある。(大きさ、アイコンのスペースなど)
- 利用規約が変更されていないか時々公式サイトをチェックしたほうが良さそう。
