こんにちは！まだInstagramに手を付けられないMizutani(@sirycity)です。仕事では使ってるけどプライベートで使えない(おじさん)

今日はそんなSNSのアイコンの話です。

結論

自分なりの答えとしてはUXWing。ただ探せばもっと良いのありそう

SNSのアイコンをWebサイトに載せる

WebサイトにはリンクとしてSNS(とそのアイコン)を載せるケースがめっちゃあります。そのSNSのアイコン、どこから取ってきてますか？

ってまあ検索すればいくらでも出てくるし適当に貼ればそんで終わり…なんですがちゃんと探してしっかり適用しようとすると中々手間です。今日はそんな話。

素材サイト

というわけでSNSアイコンを扱う素材サイトを巡っていきましょう。んで、素材サイトもやはり沢山あるんですが今回はこういう条件に合致してる所がいいよみたいなのを羅列していきます。

いいからsvgだ

なんだかんだこれが一番大事ですがアイコンはsvgを使いましょう。pngだめ。pngを使うメリットは何一つ無いです。ぜったいsvg。svgがあるサイトにしましょう。

ワンクリックでsvgコピーが便利

svgはワンクリックでコードをコピーできます。これはpngとかじゃ無理。簡単にコピーできるやつだといいです。作業効率的に。

無料がいいな…

さすがにSNSアイコンに課金するほど富豪ではないです。無料のやつにしましょう。

色がデフォルトで付いてるやつで

デフォルトが白黒のやつは個人的にいまいちです。色調整の手間もあるし、Instagramみたいなグラデーションはそもそも対応してなかったりするし。

最新の情報を反映しててほしい

Facebook(色がちょっと変わった)とX(サービス名が変わった)らへんは対応しててほしいです。Xは下手したら検索に引っかからない時もあるし。

LINEが無いことがけっこうある

LINEは世界的にはどマイナーだし、Line(線)で引っかかったりするので結構無いことがあります。かなしい。あとあってもリブランド前の色だったり。

正方形じゃないやつのサイズ感大丈夫？

主要サービスで正方形じゃないやつなんて…あるんですよ。そう。YouTube。こいつは微妙に横長。

サイトが重くない

これはまあ全てのサイトに共通ですね。素材サイトは重くなりがちだからね。

結論:UXWing

UXWing

どマイナーなサイトですが上記の条件全て満たしています。最初見つけた時嬉しかった。どんどん使いましょう。お友達にも教えてあげて。

強いて言えばPinterestの作りがいまいち(中が透過しちゃう)だけどそんくらい。

その他

ライブラリとして入れればいいんじゃね？

確かにFontAwesomeとかで入れてもいいんだけど、個人的にたかだかSVGアイコンにnpm依存を作りたくないです。ってもまあこの辺りは気分ですね。個人的にはsvg直貼りしたいというか、ローダー依存も作りたくないレベル。

公式から持って来ればいいんじゃね？

本当はこれがいいというか本当はこれしか駄目な気もするんですが、公式はsvg配布してなかったりロゴタイプと合体してたり…と融通が利かないことが多いです。

生成AIでsvgのコード出せばいいんじゃね？

これはあり。ただ今現在まだそんなに精度が出ないです。Facebookみたいな超メジャーだとわりときれいに出るんだけどね。

さいごに

こういうのは1回作っちゃえば使い回せるんで便利です。まあその1回作るのが面倒なんですけどね。以上。