SNSボタン,ソーシャルアイコン,フリー,素材

今やFacebookやTwitterなどのソーシャルメディアを利用し、記事の拡散を図るためにサイトにSNSボタンを設置することが主流となっていますが、それに伴い、SNSボタンのデザインもデフォルトのものではなく、サイトデザインや雰囲気に合わせたオリジナルのボタンを設置することが好まれています。

ソーシャルメディアは利用される頻度も非常に高いので、サイトに訪れたユーザーがクリックしたくなるようなデザイン性の高いボタンを設置していきたいものですね。

また、こういった細部にも気を使っていくとサイトのオリジナリティや個性にも統一感をプラスしていくことができます。

今回は、フリーで使えるデザイン性の高いソーシャルメディアアイコンをテイスト別にご紹介していきたいと思います。

 

 

人気のフラットデザインアイコン

最近はフラットでシンプルなサイトデザインが好まれている傾向にありますが、SNSボタンも立体的なものよりはすっきりとしたフラットなデザインのものが多く使われているようです。

フラットデザインのSNSボタンは何といっても分かりやすさが魅力です。
初めてサイトに来たユーザーにも安心してボタンを押してもらえそうですね。

 

FREEBIE! 225 Social Icons

分かりやすいデザインで形も綺麗。
カラーの他、グレースケールやモノトーンテイストもあり、サイトの雰囲気よって選べる。

185_15

ファイル形式: png
download

 

Simple Icons

非常に種類が多く、ほとんどのソーシャルメディアをカバーしている。
初期状態では色付けされていないが、ページにカラーコードが記載されている。

185_17

ファイル形式: png
download

 

Circle Social Icons Set 2

優しいイメージの丸形のフラットソーシャルアイコン。
こちらも非常に使いやすいアイコンです。

185_19

ファイル形式: jpg/png/psd
download

 

Hexagonal Vibrant Flat Social Media Icon

珍しい六角形のソーシャルアイコン。

185_16

ファイル形式: png
download

 

ガーリーなかわいい系のアイコン

女子にウケが良さそうなキュートなアイコン。

スタンプ風やシール風のアイコン、木の板の上にアイコンマークが乗っているものまで、遊び心があふれ思わず胸キュンしてしまいそうな可愛らしさですね。
色使いもとてもキレイで柔らかさがあるので、ナチュラルなガーリーファッションなどのWebサイトにおすすめです。

 

“Seal” Social Icons

スタンプシール風のアイコン。ハンコで押したようなアナログ感がかわいい。

185_6

ファイル形式: psd
download

 

Wood Social Icons Set Vol 1

木の板の台にアイコンが乗っかっているデザインのユニークなSNSボタン。
色使いもキュートで愛らしさ全開です。

185_3

ファイル形式: png
download

 

スタンプみたいなソーシャルアイコン

郵便屋さんのスタンプみたいなアイコン。

185_5

ファイル形式: png
download

 

シンプルがカッコイイすっきりデザインのアイコン

Rounded Social Media Icons Set

実はシンプルデザインのSNSボタンが一番かっこよく見えます。
Webサイトのテイストを選ばず、スタイリッシュに魅せてくれるので活躍度は高いでしょう。

185_10

ファイル形式: png
download

 

20 Social Media Icons

非常にスッキリしてみやすくデザインも秀逸なシンプルアイコン。
各メディアのロゴカラーをそれぞれ使っているのでイメージも伝わりやすいですね。

185_20

ファイル形式: png
download

 

ポチっと押せるようなシンプルボタンのソーシャルアイコン

押した時にボタンが凹むようにデザインできるソーシャルアイコン。

185_11

ファイル形式: png
download

<TIPS>ボタンを押すように画像を切り替えるには下記のようにコードを記述します。

<img src="画像1" onmousedown="this.src='画像2'" onmouseup="this.src='画像1'">

画像1 ⇒ ボタンを押していない時の画像を挿入する
画像2 ⇒ ボタンが押されている時の画像を挿入する

PUSH HERE!!

 

スタイリッシュでクールなイメージのアイコン

Circular Social Icons by dannyknaack

大人っぽくてクールなイメージのSNSボタン。
モノトーン系のデザイン性が高いアイコンは、アート系やコンピューター関係のサイトでよく見られます。

185_9

ファイル形式: psd
download

 

Social Media Icons Long Shadow

非常に洗練された都会的なイメージのアイコン。
サイトがスタイリッシュに引き締まります。

185_8

ファイル形式: psd
download

 

Simple Mini Black Social Media Icons

グレーでトーンダウンしたアイコンは逆にアイコンを目立たせたくない時に。
それでも存在感はしっかりあります。

185_21

ファイル形式: png
download

 

ヴィンテージ&レトロテイストアイコン

ヴィンテージ風ラベルアイコン

雑貨屋風のビンテージラベルに見立てたソーシャルアイコン。
インテリアや雑貨、オーガニック化粧品などのWebサイトにぴったりですね。

185_12

ファイル形式: png
download

 

20 Free Retro Style Social Media Icons Set

レトロな色使いと形が秀逸なアイコン。

185_13

ファイル形式: png
download

 

Vintage Stamp Social Media Icon Pack

ヴィンテージ切手風のソーシャルアイコン。

185_14

download

 

個性派お洒落アイコン

シンプルで可愛い感じのミニリボンアイコン 40

リボン型のソーシャルアイコン。
個性的な形状が、思わず目を惹いてしまいますね。

185_4

ファイル形式: png
download

 

Grass Textured Social Bookmarking Icon Set

芝生のような素材感のソーシャルアイコン。

185_7

ファイル形式: png
download

 

PSD形式やEPS形式のファイルはどうやって開く?

フリーの画像素材の利用時、時々PSD形式のファイルやEPS形式のファイルが提供されていることがあり、汎用的なフォト ビューアーではこれを開けず、戸惑うことがあるかもしれません。

PSDファイル(.psd): Adobe社の Photoshop」で利用される画像ファイル形式。

EPSファイル(.eps): ベクタ形式の画像データを保存するための汎用的なファイル形式。

これらは、通常画像処理ソフト利用時に使用されるファイルフォーマットですが、GIMPを利用してこれらのファイルを開いたり、jpegに保存し直したりすることが可能です。

GIMPについては、また別の記事でご紹介していきたいと思います。
お楽しみに!