デザインのヒント /

コピペOK! 個性的なSNSボタン/シェアボタンのデザインまとめ

Social Icons (again)

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

この記事を書いた人

斧山

PAGE TOP