とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

SNSアイコンは公式のカラーにするべきか

SNSアイコンは公式のカラーにするべきか

先日webサイトのリニューアルのデザインの

打ち合わせの際にクライアントから質問されました。

 

「SNSアイコンって各SNSの公式のカラーじゃなくていいんですかね」

 

質問されたとき「おっ」と思いました。

というのもあまり意識したことがなかったからです。

 

SNSのアイコン、いまではどのwebサイトでもよく

みかけますよね。

Twitter、Facebook、Instagram、YouTubeなどなど。

こんなやつです。

 

webサイトでよく見るSNSのアイコン

webサイトでよく見るSNSのアイコン

結論から言うと、

このアイコン自体は公式のアイコンを使用したものではなかったりします。

その場合は公式のカラーを使用しなくても問題ない、という若干レギュレーションが曖昧ものです。

最近だとアイコンフォントで実装されていたりするサイトも多いです。

 

アイコンフォント FontAwesome

fa-twitter-square: Font Awesome Icons

fa-facebook-square: Font Awesome Icons

fa-youtube-play: Font Awesome Icons

fa-instagram: Font Awesome Icons

 

ですが、少し考えさせられました。

それぞれのSNSの公式カラーのほうが視認性や

認知性は高いだろうなぁということと、やはり

レギュレーションにのっとったカラーを使うべきだなと。

 

SNSのアイコンは並ぶと、カラフルで

ガチャガチャして見えるため、

サイトの世界観が崩れてしまうことがあります。

デザインの統一性がなくなってしまうため、

アイコンをすべて無彩色にしてしまう

という手法はよく見られます。

 

ここで大手のサイトの例。

 

Nike. Just Do It. Nike.com (JP)

NIKEではフッタの右下にグレーのアイコンで配置されています。

NIKEではフッタの右下にグレーのアイコンで配置されています。

 

パナソニック商品情報 | Panasonic

パナソニックは白ですね

パナソニックは白ですね

 

JAL国内線−航空券 予約・空席照会・運賃案内−

JALも白アイコン

JALも白アイコン

 

日産自動車ホームページ

日産はグレーアイコン

日産はグレーアイコン

 

大手サイトでも採用されているように、

世界観やデザイン趣向を崩したくないのであれば

白、グレーなどの無彩色での設置も

問題はなさそうではありますね。

 

カラーアイコンにした場合は、

各SNSの公式のカラーを使用しているという

最もらしい理由につけくわえて、

サイトのにぎやかし感がでるので、

カラーにしている理由に説得力がありますよね。

以下カラーアイコンにしている大手サイトの例です。

 

任天堂ホームページ

任天堂では公式のカラーを使用

任天堂では公式のカラーを使用

サイトの雰囲気になじんでいてかつ、

にぎやかな印象を受けますね。

 

 

トヨタ自動車WEBサイト

トヨタもカラーアイコン

トヨタもカラーアイコン

 

日本マイクロソフト - Official Home Page

マイクロソフトはカラー

マイクロソフトはカラー

 

と、無作為に大手サイトを見てみましたが、

無彩色のグレーやや白アイコンにしてるサイト、

公式のカラーを使用しているサイト、

まちまちです。

 

とくに調査をしたわけではないので、

どちらの採用率が多いかはわかりませんが、

公式ダウンロードしたロゴでなければ、

サイトのデザインの方針で決定して問題ない

ものというグレーゾーン。

 

個人的には、各SNSの公式カラーにしたほうが

パッと見の認知性としてはわかりやすいので、

そこまでザイン性を重視していない企業サイトや

世界観を重視していないwebサイトの場合は

公式のロゴでなくアイコンフォントや画像素材でも

カラーアイコンを使用するほうが良いかなと考えています。

 

では最後に、一応、

代表的なSNSのロゴやボタンなどのガイドライン、

レギュレーションのページを掲載しておきます。

 

Facebookブランドリソースセンターアセットおよびブランドガイドライン

Twitterのブランドリソース

YouTube ブランドの使用について - YouTube

Instagram Brand Resources

LINE APP ICON GUIDELINE

 

では。