個性的なデザインのSNSシェアボタン17選【CSS/JavaScript】

さまざまなジャンルのWebサイトで目にする、SNSシェアボタン。せっかくなら既存のデザインを使うのではなく、Webサイトの雰囲気にあわせたオリジナルのボタンを使いたいですよね。

今回は、CSSやJavaScriptで制作されたSNSシェアボタンをご紹介します。

1. ブログにおすすめのサイド配置SNSシェアボタン

はじめにご紹介するのは、ブログやメディアサイトなどでよく使われている、サイドに配置されたSNSシェアボタン。見出し近くの最上部に固定することも、スクロールに追従させることも可能です。

デザイン性に優れており、自然にWebページに溶け込みます。ブログにオリジナルのSNSシェアボタンを使いたいなら、まずこのテンプレートからはじめてみましょう。

2. 画像用のSNSシェアボタン

画像にSNSシェアボタンをつけたいなら、このテンプレートがおすすめです。Pinterestだけでなく、FacebookやTwitterなどでも画像をシェアしてもらいましょう。

CSS3のみで制作されており、アンカーリンクをSNSシェア用にカスタマイズできます。

3. 隠しメニューに格納されるSNSシェアボタン

カスタムアニメーションと隠しメニューを使ったユニークなデザイン。SNSの種類が多い場合におすすめです。

各アイコンはCSSのみでデザインされており、アニメーションにはjQueryが使われています。コピー&ペーストでどんなレイアウトにも対応してくれる、優秀なスニペットです。

記事の見出しの横や最下部などに配置すれば、SNSシェアの向上に貢献してくれるはず。

4. アニメーションで遊びごころをプラスしたSNSシェアボタン

遊びごころを持たせたいなら、ステファン・ライバー氏が制作した、こちらのSNSシェアボタンがおすすめ。

マウスオーバーでアニメーションが再生するように設計されており、どんなレイアウトにも溶け込みます。アイコンの色を変えれば、白背景にも対応可能です。

CSSのみで制作されており、アイコンはBootstrap経由でFont Awesomeのものを使用しています。

5. シンプルなSNSシェアボタン

IoniconsのSVGアイコンセットを使った、シンプルなSNSシェアボタン。

JavaScriptを使わないかわりに、ブラウザ上でシェアリンクを開くための新規タブオプションとともに、href値を用いています。

アイコン選びに迷っているなら、サイズや色などをCSSで調整できる、Ionicのアイコンセットがおすすめです。

6. アイコンにテキストを隠せるSNSシェアボタン

クリス・セビリア氏が制作したSNSシェアボタンは、マウスオーバーでデザインが切り替わるため、小さなアイコンにテキストの情報を隠しておけます。

コードはとてもシンプルで、使われているのはCSSのみ。CSS3に対応したブラウザであればどんなWebサイトでも使えます。

7. マウスオーバーで背景色が変わるSNSシェアボタン

マウスオーバーするとSNSシェアボタンに応じて背景色が変化する、ユニークなデザイン。

それぞれのボタンにFont Awesomeのカスタムアイコンがついているので、関連アイコンを追加することも可能です。

JavaScriptのフォールバックがついているほか、まったく同じ動作をするCSSのみの代替案も制作されています。

大規模なWebサイトには向かないかもしれませんが、小規模なWebサイトや短いブログ記事なら問題なく使えるはずです。

8. マテリアルデザインを意識したSNSシェアボタン

カール・レイブリー氏が制作したSNSシェアボタンの特徴は、Googleのマテリアルデザインを彷彿させる魅力的なアニメーション。

ほとんどがCSSで構成されており、HTMLとJavaScriptはそれぞれ5行ほどしか使われていません。メインのシェアコンテナはひとつで、ボタンにはdiv要素が使われています。

9. 3DのSNSシェアボタン

アイコンにマウスオーバーするとテキストが立ち上がる、CSSの3Dトランスフォームを活用したSNSシェアボタン。

アイコンはFont Awesomeのもので、ボタンを埋め込むためだけにJavaScriptが使われていますが、そのほかはCSSのみで制作されています。

好き嫌いが分かれそうなデザインですが、SNSシェアボタンに3D表現を使うというアイデアだけでも参考になりそうです。

10. 短冊型フライヤー風のSNSシェアボタン

下部分をちぎって持ち帰れる、フライヤーを模したSNSアイコン。

もちろんWeb上のSNSアイコンをちぎることはできませんが、遊び心を感じるデザインですね。

11. マウスオーバーであらわれるSNSシェアボタン

最初からSNSアイコンが表示されているのではなく、ボックスにカーソルをあわせるとSNSアイコンがあらわれる仕組みです。

ユーザーの手間をすこし増やしてはしまいますが、デザイン性が高く目をひくため、ポートフォリオサイトなどにおすすめのデザインです。

12. 頭文字だけのシンプルなSNSシェアボタン

CSSとjQueryで作られたSNSアイコン。一般的なロゴを使ってはいないものの、色と頭文字でなんとなくどのSNSなのかがわかりますよね。

マウスオーバーでSNS名も表示されます。

13. 奥行きとレイヤーで魅せるSNSシェアボタン

奥行きだけでも印象的ですが、マウスオーバーすると美しいレイヤーがあらわれます。

デフォルトではそれぞれのSNSのブランドカラーとは異なる色に設定されていますが、これは自由に変更できます。個性的なデザインでユーザーの注目を集めたいなら、このコードスニペットを参考にしてみましょう。

14. 下から飛び出すSNSシェアボタン

画面上の線からSNSアイコンがすこしだけ顔を出しており、マウスオーバーすると線から飛び出してきます。

ユーザビリティを損なわずにデザインにアクセントをつけた、バランスのいいSNSアイコンです。

15. 創業者の顔写真を使ったSNSシェアボタン

今回ご紹介する中でもっとも個性的なのがこちらのデザイン。各SNSの創業者の写真が使われたカード型のSNSアイコンです。

マーク・ザッカーバーグ氏やジャック・ドーシー氏の顔写真をWebサイトに載せたいかどうかは別として、デザイン自体は魅力的ですね。

写真を変えることも可能なので、デザインやニーズにあわせて調整してみましょう。

16. SVGアニメーションつきSNSシェアボタン

なめらかなアニメーションがユーザーの目をひく、鮮やかなラインアイコン。SVGで作られています。

ユニークなグラデーションと、塗りつぶしの効果も魅力的です。

17. ニューモーフィズムを採用したSNSシェアボタン

CSSのみで作られたこのSNSアイコンは、いま注目を集めているニューモーフィズム（背景から要素が押し出されているようなデザイン）を採用しています。

すりガラスのような効果や、あわい光が印象的ですね。

おわりに

SNSシェアボタンのデザインは、ソーシャルでの拡散を左右するとても大切な要素です。

Webサイトのスタイルや、シェアボタンを配置するページの特徴などを踏まえて、ぜひオリジナルのボタンを制作してみてください。

（執筆：JAKE ROCHELEAU、Eric Karkovack 　翻訳：中島あすか　編集：少年B　出典元：speckyboy）