みなさんこんにちは!おさかなです!
今回は「Avatar generator playground」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・SNS用のアイコン素材を探している方
・シンプルなアイコンを使用したい方
・ブログ用のアイコンを探している方
SNS・ブログ用アイコン素材がほしい!

なんかプロフィール用の可愛いアイコン素材ないかな…?

こんなのはどう?笑

うわあ!かわいい!

「Avatar generator playground」って何?
「Avatar generator playground」とは、SNSやブログなどで使用できる「アイコン素材」をSVGをコピーすることで手軽に使えるサイトです。(ふむふむ…。)
シンプルで使いやすいデザインが沢山用意されており、カラー、サイズ、デザインなどをカスタマイズすることもできます!(いいね!)


実際につかってみよう!
デザインをチェックしよう!
それでは早速サイトにアクセスします!

デザインは大きく分けて6パターン用意されおり、左上のバーから切り替えることができます!(おお!)

MARBLE

BEAM

PIXEL

SUNSET

BAUHAUS

RING

(個人的にはRINGが機械っぽくて好きです!)
カスタマイズしよう!
好きなデザインを見つけたら、カスタマイズしてみましょう!
カラーはこちらのカラーパレットから変更することができます!(おー!)

16進数のカラーコードを使用することもできるので、参考にしてみてください!

「RANDOM PALETTE」をクリックすると、いい感じの組み合わせをランダムで表示してくれます。(キレイ✨)

右上の角マークをクリックすると、アイコンの形を「丸」か「四角」に指定することができます!
(今はどちらかというと丸の方が使いやすいかもしれません…!)

アイコンのサイズも大中小の3段階!
ご自身のお好みに合わせて設定してみてください♪

ちなみにアイコンとは直接関係がありませんが、ダークモードも実装されているので、気になる方は試してみると面白いかもしれません。

(もうちょっと…🚩)
SVGをコピーしよう!
アイコン素材が作成できたら、マウスカーソルを持ってきて「COPY SVG」をクリックしましょう!(ポチっと!)

するとコードがコピーされたので、ブログなどに貼り付けてみましょう!
(今回はWordPressを使用しています。)

実際に作成した、アイコン素材はこちら↓

アイコン素材で、プロフィールを充実させちゃおう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
