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

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

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

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

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

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

See the Pen Share Buttons Inspired by IGN by Michael Schofield (@michaelschofield) on CodePen.

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

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

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

See the Pen Image share buttons by Kay (@opensoorce) on CodePen.

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

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

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

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

See the Pen Social Button Share Animation by Romswell Roswell Parian Paucar (@romswellparian) on CodePen.

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

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

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

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

See the Pen Social sharing button animation by wouwisl (@wouwisl) on CodePen.

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

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

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

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

See the Pen Simple Share buttons by Marko (@marko-zub) on CodePen.

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

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

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

See the Pen CSS3 Hidden Social – Twitter by Chris Sevilleja (@chris__sev) on CodePen.

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

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

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

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

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

See the Pen Hover social buttons changes background-color by Tim (@TimGr) on CodePen.

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

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

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

See the Pen Social Share Button by Kyle Lavery (@kylelavery88) on CodePen.

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

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

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

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

See the Pen 3D Social Buttons Concept by Fabrizio Bianchi (@_fbrz) on CodePen.

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

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

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

See the Pen “Take a number” contact list by Suzanne Aitchison (@aitchiss) on CodePen.

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

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

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

See the Pen Social Icon Hover Effect by Mike Young (@miketricking) on CodePen.

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

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

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

See the Pen Social media minimal icons by Anton Petrov (@apetrov) on CodePen.

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

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

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

See the Pen Code Challenge 2020 || 3D Social Media Button by Nour Ibram (@nouribram) on CodePen.

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

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

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

See the Pen Social Media icon reveal with transition by Stefan Göllner (@goellner) on CodePen.

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

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

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

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

See the Pen Social Media Share Cards by Himalaya Singh (@himalayasingh) on CodePen.

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

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

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

See the Pen Creative Social Media Icon by Chouaib Belagoun (@chouaibblgn45) on CodePen.

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

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

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

See the Pen Glass effect social media buttons with neon glow by Kevin Miranda (@kevinmiranda) on CodePen.

おわりに

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

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

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