Webサイト上でSNSのロゴを使う時の注意点

当ページのリンクには広告が含まれています。

この記事は2019年以前他サイトに執筆したものを引越し、加筆修正して掲載しています。

Webサイト制作ではSNSのリンクをつけることが当たり前になりました。Twitter、Facebook、Instagram、LINEなどです。重要なポイントなのでクライアントも力を入れています。

デザイナーとしては、情報設計面・ビジュアル設計面ともに腕の見せ所かもしれません。ただSNS関連は注意点もあります。

私の場合具体的なところよりも根本的なところが大事だなと思っています。大きく分けて2つあります。

目次

1.他サイトのデザインを安易にマネしない

4大SNSのリンクを含む制作に携わっていると、改めて他サイトではどんな風にデザインしているんだろうと思って調べることがあります。そして以下の点で驚くことがあります。

誰もが名を知る有名な企業サイトでも規約に沿っていないことがけっこう多い

例えば、規約ではロゴとテキストを組み合わせて表示してはいけないとされているのに並列で書かれていたり、ロゴ周りの余白(各SNSごとにそれぞれ明確に示されている)が足りないなどです。あるいは周囲四方向の一部とはいえ何かを入れてしまっていたりすることもあります。

またロゴマーク内にを加えている、またロゴの形自体の改変もあって驚きました。もっともこれらは有名とは言えない企業でした。

なおTwitterの規約は他よりも厳しめに感じます。規約熟読後に改めてよくみると、微妙なラインのものも見かけました。例えば「ロゴとテキストを組み合わせて表示しない。」この「組み合わせ」というのは公式の規約内にシンプルな例が示されています。

この公式例とはちょっと違う形、つまり「組み合わせ」と言えるのかどうか微妙な表現方法などがありました。

ちなみに今回のこれらの内容は私一人の解釈ではなく、社内ベテラン勢と検討をした結果です。

おしゃれなサイトは目は引きますしデザインテクニック的には勉強になりますが、規約が守られていないものも多いです。統一感などの理由でロゴ周りもデザインしてしまうのかもしれません。

アクセシビリティ対応でも同じ傾向があると感じています。つまり手の込んだ素敵なサイトほど障がい者にやさしくない傾向。またHTMLのセマンティックもそうですが、デザインが上手いサイトでもHTMLの書き方はだめってパターンもあります。もっとも私自身もこれらの点についてできていないと思うので自戒をこめてです。

2.まとめに頼らず公式の規約を確認すること

4大SNSすべての公式の規約を確認するのはなかなか大変です。公式の規約が読みにくいとかではなく、単にそれぞれ調べていくのがめんどうに感じるというだけです。

というわけでついまとめ記事みたいなものに頼りたくなります。ですが一度は公式規約すべてに目を通した方がいいと思います。

規約が変更されることは思っている以上に多く、まとめ側がついていけていないことも考えられます。私も今回せっかく調べたので一覧表にして掲載しようかとも思いましたがやめました。理由は細かい規約の変更も短いスパンでありそうで、常に最新情報を更新掲載するのは難しいからです。また他の理由としては、4大のそれぞれの規約を開くことさえ億劫がらなければ、公式の方がわかりやすいことに気付いたからです。 

なおまとめ側のさじ加減で「ここを守れば大丈夫」のような書かれ方をしている場合も注意です。それを守ろうとして違う部分に抵触することもありえます。

また制作者なら保守管理サイトを常に正確に最新版にする必要があります。そのためにも規約はいったん読み込んでおいて、変更を知ったらすぐに対応できるくらいのほうがかえって効率的と思います。

何事についてもまとめ記事は便利ですが頼りすぎないようにしたいところです。

規約まとめ記事を使う時の注意点

  • 規約の最新版に対応しているか
  • ポイントを絞ってまとめている場合、規約の他の部分が抜けている可能性を考える

SNSロゴを使う時の注意点まとめ

SNSロゴ使用についてのまとめです。

  1. 有名な企業サイトやSNSロゴの使い方で紹介されているサイトを安易にマネしない
  2. 4大SNSの規約をポイントで絞ったまとめ記事などに頼りすぎない(一度は公式に目を通す)

今回調べた結果「えっこれもだめなのか」となることも多かったです。逆に「これはいいのか」となったりも。

最初はちょっと大変かもしれませんが、一度公式規約に目を通しておくことはメリット大です。毎回基本的なことを調べる手間が省けるようになりますし、改めてロゴやその扱いの具体例図をまじまじと見るとデザインの勉強にもなります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次