Pocket

ブログやwebマガジン、キャンペーンサイトまでさまざまなサイトに設置されるFacebookやTwitterなどのSNSボタン/シェアボタン。今回はフロンドエンド系コード共有サイト CODEPENで個性的なUIのボタンを集めました。

ボタンタイプ

まずはオーソドックスなボタンタイプのSNSボタン/シェアボタン。

Social Share Buttons

SOURCE/DEMO


Social buttons

SOURCE/DEMO


Social Buttons with Icon Fonts

SOURCE/DEMO


アイコンタイプ

アイコンのみ表示させるタイプ。シンプルで使い勝手が良いのが特徴です。

Share Buttons

SOURCE/DEMO


Social media hover icons with pop-up titles

SOURCE/DEMO


Slide-out social buttons

SOURCE/DEMO


xpwEh

SOURCE/DEMO


Social

SOURCE/DEMO


Share Button

SOURCE/DEMO


SquareJam SNS Buttons

SOURCE/DEMO


Long Shadow Icons

SOURCE/DEMO


押すと出てくるタイプ

PinterestやPathなどのアプリで採用されているシェアボタンがひとつのボタンに格納されるタイプ。

Material Design Floating Action Share Button

SOURCE/DEMO


Simple radial menu

SOURCE/DEMO


animated share menu with pure css

SOURCE/DEMO


Share-Button

SOURCE/DEMO


動きが個性的なタイプ

個性的なアニメーションがついているタイプ。

3D Social buttons

SOURCE/DEMO


Social Button Groups

SOURCE/DEMO


Social Buttons Slide

SOURCE/DEMO


Stylish Social Buttons

SOURCE/DEMO


Social Icons (again)

SOURCE/DEMO


まとめ

SNSボタン/シェアボタンを変えるだけで個性が出ておもしろいですね。
各社デフォルトのボタンを埋め込むと微妙にサイズが違ったり、横並びにするとガタつきが出たりしてしまいますが
今回ご紹介したようにボタンをデザインすればサイト全体の見栄えも整えることができます。
ぜひご活用ください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。