みなさんこんにちは!おさかなです!
今回は「Avatar generator playground」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・SNS用のアイコン素材を探している方
・シンプルなアイコンを使用したい方
・ブログ用のアイコンを探している方
SNS・ブログ用アイコン素材がほしい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
なんかプロフィール用の可愛いアイコン素材ないかな…?
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
こんなのはどう?笑
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
うわあ!かわいい!
![](https://osakanav.com/wp-content/uploads/2021/05/hexopress-top-160x90.jpg)
「Avatar generator playground」って何?
「Avatar generator playground」とは、SNSやブログなどで使用できる「アイコン素材」をSVGをコピーすることで手軽に使えるサイトです。(ふむふむ…。)
シンプルで使いやすいデザインが沢山用意されており、カラー、サイズ、デザインなどをカスタマイズすることもできます!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/24913c9d07f436d73557c4e27ddf45d3.jpg)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-top-160x90.jpg)
実際につかってみよう!
デザインをチェックしよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-gene-1024x620.png)
デザインは大きく分けて6パターン用意されおり、左上のバーから切り替えることができます!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/07/Inkedavatar-bar_LI-1024x239.jpg)
MARBLE
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-bar-1024x239.png)
BEAM
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-beam-1024x244.png)
PIXEL
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-pixel-1024x242.png)
SUNSET
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-sunset-1024x243.png)
BAUHAUS
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-bauhaus-1024x239.png)
RING
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-ring-1024x243.png)
(個人的にはRINGが機械っぽくて好きです!)
カスタマイズしよう!
好きなデザインを見つけたら、カスタマイズしてみましょう!
カラーはこちらのカラーパレットから変更することができます!(おー!)
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color.gif)
16進数のカラーコードを使用することもできるので、参考にしてみてください!
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/7c242b59eb7be4b9345ca9478d536f7c.png)
「RANDOM PALETTE」をクリックすると、いい感じの組み合わせをランダムで表示してくれます。(キレイ✨)
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color-random.gif)
右上の角マークをクリックすると、アイコンの形を「丸」か「四角」に指定することができます!
(今はどちらかというと丸の方が使いやすいかもしれません…!)
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color-sq.gif)
アイコンのサイズも大中小の3段階!
ご自身のお好みに合わせて設定してみてください♪
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color-size.gif)
ちなみにアイコンとは直接関係がありませんが、ダークモードも実装されているので、気になる方は試してみると面白いかもしれません。
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color-dark.gif)
(もうちょっと…🚩)
SVGをコピーしよう!
アイコン素材が作成できたら、マウスカーソルを持ってきて「COPY SVG」をクリックしましょう!(ポチっと!)
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-copy-svg.png)
するとコードがコピーされたので、ブログなどに貼り付けてみましょう!
(今回はWordPressを使用しています。)
![](https://osakanav.com/wp-content/uploads/2021/07/avatar-color-icon.gif)
実際に作成した、アイコン素材はこちら↓
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
アイコン素材で、プロフィールを充実させちゃおう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/03/seesaa-top-160x90.jpg)