どんなwebサイトにも、ソーシャルメディアでページをシェアするための「共有ボタン」が必要なはずです。しかし、デフォルトの共有ボタンはそんなに良いものとは言えず、それらは各ソーシャルメディアごとにバラバラのデザインをしています。
この記事では、webサイトで自由に使えて統一感のあるカスタム共有ボタンを集めました。デフォルトのボタンに代わる美しい共有ボタンをお探しであれば、これらのテンプレートがお役に立てるはずです。
１．サイドバッジ型共有ボタン
See the Pen
Share Buttons Inspired by IGN by Michael Schofield (@michaelschofield)
on CodePen.
まず最初に、私のお気に入りのテクニックの1つをご紹介しましょう。こちらのボタンは開発者であるMichael Schofieldが作成したものです。このように、サイドに固定されたバッジ型の共有ボタンは、大きなブログやマガジンサイトでよく見られるスタイルです。
これらの共有ボタンは、ページ上部である見出し近くに配置したままにすることも、スクロール後も常に表示することもできます。違いを比較検証したデータは見つかっていませんが、ボタンを固定した方がシェア数が多いと考えられます。どちらの方法で使うにしても、この共有ボタンはデザインが良いのでスパムに見えたりレイアウトに縛られたりすることはありません。
運営しているブログにカスタムの共有ボタンの導入を考えているなら、まずはこのテンプレートを試してみることをおすすめします。
２．画像向け共有ボタン
See the Pen
Image share buttons by Kay (@opensoorce)
on CodePen.
Webサイトで見つけた画像を再投稿する際にも、共有ボタンが活躍します。こういう場面はPinterestで特にポピュラーですが、この共有ボタンはFacebookやTwitter、さらにはGoogle+でもうまく機能します。
これらのイメージボタンは、背景ロゴを使用した、CSS3だけで動作するデザインです。上のサンプルはまだ実際にソーシャルメディアにリンクさせていませんが、リンク先を編集して各メディアに対応させることは簡単です。
どんな画像にもくっつけられる見た目は、投稿ではなく画像そのものをシェアしてもらいたい、という考えがよく表れている優秀なデザインです。
３．トグル型共有ボタン
See the Pen
Social Button Share Animation by Romswell Roswell Parian Paucar (@romswellparian)
on CodePen.
WordPress向けの共有ウィジェットでは、小さなアイコン型の共有ボタンとフライアウトメニューを使っています。これらはそのうち古くなって、ごちゃごちゃして見えるようになるかもしれません。
このスニペットを使うと、カスタムアニメーションと非表示のメニューを使用してソーシャルシェアリングのスタイルを変更できます。複数のソーシャルメディアでたくさん情報をシェアしてもらいたい場合に最適です。
各アイコンはCSSのみでデザインされており、アニメーションはjQueryで制御しています。これをコピーして、自分のwebサイトの好きな場所に貼り付けて使うことができます。記事の見出しのすぐ近くでも、一番下にもぴったりと収まりますが、どこに貼り付けても確実にソーシャルメディアでのシェアを増やすことでしょう。
４．サークルアニメーション
See the Pen
Social sharing button animation by Stéphane Lyver (@wouwi)
on CodePen.
StéphaneLyverの作成した、楽しげなアニメーション付きのサークルボタン。
各ボタンのホバーアニメーションはそれぞれ独立して設定されているので、どんなwebサイトデザインにも合わせることができます。例えば、背景とアイコンの色を変えて、白地に映える配色にすることもできます。
全体はCSSのみで動作し、アイコンはBootstrapを介してFont Awesomeから取得してます。
このサンプルのボタンも実際にソーシャルメディアにリンクしてありませんが、ソースコードを編集してwebサイトに実装するのは簡単です。
５．シンプル共有ボタン
See the Pen
Simple Share buttons by Marko (@marko-zub)
on CodePen.
シンプルで分かりやすい共有ボタン。
フリーのwebアイコンフォント「Ionicons」を使用しています。しかし、このボタンを導入するのにIoniconsのインストールやJavaScriptは不要です。その代わり、ブラウザで共有リンクを開くためHTMLの<href>値を使用します。
「Ionicons」のアイコンセットを探せば、上のサンプルには載っていない他のソーシャルメディアのアイコンも見つけられるでしょう。さらに、ボタンの見た目はCSSで制御されているので、サイズ、余白、フォントの色など、ほとんど全てをカスタマイズすることができます。
６．ホバーで展開する共有ボタン
See the Pen
CSS3 Hidden Social – Twitter by Chris Sevilleja (@chrisoncode)
on CodePen.
Chris Sevillejaが作成した、ホバーで展開する共有ボタン。すべてCSSのみで動作します。
一部のWebサイトでは、この共有ボタンを使ってデフォルトの共有ボタンを小さいアイコンの中に埋め込んでいます。しかし、このユニークなアニメーションのおかげで、ありふれたものには見えません。
このボタンはセットアップがとても簡単で、しかもCSSのみで実行されるため、細かな調整も可能です。作者は、Google+向けにも同様のボタンを開発しました。どちらも大多数のWebサイトにとって非常に魅力的なスニペットです。アニメーションは、CSS3に準拠している全てのブラウザでサポートされています。
７．ホバーで背景色が変わる共有ボタン
See the Pen
Hover social buttons changes background-color by Tim (@TimGr)
on CodePen.
こちらは非常にユニークな共有ボタンです。どのボタンをホバーしたかによって、背景色が変わります。
各ボタンにはフリーのwebアイコンフォント「Font Awesome」から取得したアイコンセットを利用しているので、これに含まれる他の関連アイコンに変更することもできます。ホバー変更にはJavaScriptのフォールバックが用意されている点は、筆者としても好ましいアプローチです。
一方で、Web開発者Christopher Grabinskiは、これとまったく同じように機能するCSSだけで動作する代替品も作成しています。（ただし、正常に動作するのは機能がサポートされているブラウザに限ります）
この代替品は大規模なブログで上手く動作しない可能性がありますが、小規模なサイトや短いブログ投稿で使う分にはこちらでも問題ないでしょう。
８．ポップアップする共有ボタン
See the Pen
Social Share Button by Kyle Lavery (@kylelavery88)
on CodePen.
Googleの提唱する『マテリアルデザイン』を彷彿とさせる、素晴らしいポップアップ型の共有ボタンです。こちらは開発者Kyle Laveryが作成しました。
このボタンは少々のJavaScriptを使いますが、たった5行だけなのでそれほど複雑ではありません。楽しげなアニメーションは全てCSSによるもので、必要に応じてカスタマイズが可能です。
また興味深いのは、HTMLのコードがヤバイくらい簡単、という点です。メインの共有コンテナが1つあり、ボタンには<div>要素を使用しています。5行のHTMLと5行のJavaScriptに、たくさんのCSSを組み合わせて使うことで、この素敵なエフェクトが得られるというわけです。
筆者がこれまでに見てきた中でも、最高にクールなソーシャル共有ボタンの一つと断言できます。このボタンはマテリアルデザインを意識したスタイルのおかげで、いっそうクールです。
９．3Dの共有ボタン
See the Pen
3D Social Buttons Concept by Fabrizio Bianchi (@_fbrz)
on CodePen.
最後にご紹介するのは、ボタンにCSSのtransformプロパティを使用したこの3Dデザインです。
開発者Fabrizio Bianchiは、アイコンからアニメーションまで、全てCSSだけでこれらのボタンを作成しました。メインのアイコンはFont Awesomeのもので、唯一使用しているJavaScriptコードはボタンを埋め込むためのものです。
このボタンはどのサイトでも問題なく動作するでしょう。近頃はトレンドでなくなってしまった3Dエフェクトですが、あなたのサイトデザインに似合いそうであれば、ぜひお試しください。
おすすめ新着記事
おすすめタグ