Web制作

公式ロゴを使った、SNSページへのリンクボタンデザインまとめ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは!デザイナーの米田です。

今回は、FacebookやTwitterなどのSNSの各アカウントページへのリンクボタンデザインをまとめました。
公式ロゴの規約を配慮しつつ、いろいろな工夫がされています。
※規約については、こちらの記事をご覧ください。
知っておきたいSNSなどロゴ規約まとめ

フッターに配置

ニトリ

http://www.nitori.co.jp/
01
オーソドックスでわかりやすいです!ロゴの下に各名称が入っているのが、親切で良い印象です。

ファーストステージ

http://www.firststage.co.jp/
04
女性向けのやわらかいデザインですね。

AFRO FUKUOKA

http://afro-fukuoka.net/
07
ボタン下のURL表示がわかりやすくもあり、余白が多いロゴのボタン下に一行あることで、バランスが良くなっていると思います。

名古屋グランパス

http://nagoya-grampus.jp/
08
こちらはインパンクトがありますね!こうやってベタ塗りで並ぶとすごくサッカー感が出ますね。

甲南大学Ch.

http://ch.konan-u.ac.jp/
09
シェアしよう!っていうのがかわいいです。シェアします!って気分になります。

法政大学 入試情報サイト

http://nyushi.hosei.ac.jp/
11
こちらもユーザーへの呼びかけが良いです。ボタンも大きくて押しやすいですね。

ヘッダーに配置

日刊Webタウン情報おかやま

http://tjokayama.jp/
10
控えめなサイズですが、見慣れた場所にあるので、目に付きやすいかと思います。

コンテンツ内に配置

mikiHOUSE

http://www.mikihouse.co.jp/
02
こちらは他のボタンと同じ、赤枠を使ってまとめていて、すっきりと美しいデザインです。

Olympics

https://www.olympic.org/
03
フォローを訴求する文言とロゴを一体化した大きなボタンは、目立ちつつ全体に調和しています。

みずほフィナンシャルグループ新卒採用サイト

https://www.mizuho-fg.co.jp/saiyou/index.html
05
こちらも大きなボタンで、全体のパネル型のメニューに組み込まれています。

下層ページで・・・

株式会社サイバーエージェント

https://www.cyberagent.co.jp/news/sns_account/
13
たくさんのアカウントがある場合です。ロゴがあることでそれぞれひと目でわかるのでいいですね。

おまけ(1) シェアボタンまわりの工夫

箱庭 haconiwa

http://www.haconiwa-mag.com/
12
ボタンが並ぶだけではなく、シェアの呼びかけがサイトのデザインに合わせて施されています。

おまけ(2) ロゴは使わない!

P.G.C.D.JAPAN

http://www.pgcd.co.jp/
06
文字+色のみで表現。

koshikistay

http://koshiki-stay.jp
14
全体のゆったりとした流れを踏襲しつつ、訴求するデザインになっています。素敵な写真がSNSも見てみたいと思わせますね。

まとめ

ぜひデザインに困った時の参考に!
どれくらいSNSへ誘導したいのか、フォローしてほしいのか、シェアしてほしいのか・・・などによって適したデザインができると良いですね。

SNSロゴについてはこちらから!
知っておきたいSNSなどロゴ規約まとめ
http://blog.bridge-net.jp/2014/09/logo_guideline

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ブリッジコーポレーションへの
お問い合わせはこちらから

この記事を書いた人

米田

デザイナー。 新卒で入社し、はや◯年です。 いろんなものを見るのが好きです。 たくさんの人に愛されるブログに育てていきたいと思います!