みなさんこんにちは!おさかなです!
今回は「react-nice-avatar」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・かわいいアバターを作りたい方
・SNSやブログ用のアイコンを探している方
・プロフィールアイコンを自分でカスタマイズしたい方
SNSやブログ用の「アバター」を作りたい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
自分でアバターをカスタマイズできるといいよね…。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
それならreact-nice-avatarはどうかな?
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
なんか良さそう!
![](https://osakanav.com/wp-content/uploads/2021/03/vector-free-icons-top-160x90.jpg)
「react-nice-avatar」って何?
「react-nice-avatar」とは、かわいいイラストの「アバター」を作成することができるサイトことです。オープンソースなので→GitHubからソースコードを見ることもできます!(いいね!)
![](https://osakanav.com/wp-content/uploads/2021/06/switch-game-pg-top-160x90.jpg)
実際につかってみよう!
カスタマイズしよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-1024x554.png)
性別
一番上の項目では「Man(男性)」「Woman(女性)」性別を選択することができます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/06/nive-avatar.gif)
肌の色(FACE)
FACEからは肌の明るさを選択できます。こちらは「Light(明るめ)」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-man-1024x554.png)
「Dark(暗め)」にするとこんな感じです!
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-dark-1024x554.png)
ちなみにちなみに絵の具マークのある項目では、もっと細かく色を指定することができます!(すごいっ!!)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-color.gif)
髪型(HAIR)
「Normal」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-normal-1024x554.png)
「Thick」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-man-1-1024x554.png)
「Mohawk」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-mohack-1024x554.png)
「Woman Long」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-woman-long-1024x554.png)
「Woman Short」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-woman-shor-1024x554.png)
目(EYES)
目は「Circle」「Oval」「Smile」の3つから選択できます!(シンプルで可愛い!)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-eyes.gif)
メガネ
メガネを付けることもできて、丸か四角を選択することができます!(おー!)
「None」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-woman-shor-1-1024x554.png)
「Round」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-glasses-1024x554.png)
「Square」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-glass-sq-1024x554.png)
耳(EAR)
耳は「Small」「Big」の2つから選択できます!
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-ear.gif)
鼻(NOSE)
「Short」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-1024x554.png)
「Long」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-s-1024x554.png)
「Round」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-round-1024x554.png)
口(MOUTH)
「Laugh」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-round-1-1024x554.png)
「Smile」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-smile-1024x554.png)
「Peace」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-peace-1024x554.png)
洋服(SHIRT)
「Hoody」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-round-2-1024x554.png)
「Short」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-shot-1024x554.png)
「Polo」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-polo-1024x554.png)
背景(BACKGROUND)
「Circle」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-nose-round-3-1024x554.png)
「Rounded」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-bgr-1024x554.png)
「Square」
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-bg-sq-1024x554.png)
アバターを保存しよう!
それでは保存の準備をしていきましょう!
左側のパラメーターを動かすと、大きさをカスタマイズできるので、最終調整をしましょう!(おー!)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-size.gif)
タブを「CASES」切り替えると、実際にSNSのアイコンとして使用したようなプレビューを見ることができます。(すごい!)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-sns.gif)
いい感じにできたら、「Download」ボタンをクリックします!(ポチっと!)
![](https://osakanav.com/wp-content/uploads/2021/06/Inkednice-avatar-nose-round_LI-1024x554.jpg)
↓実際に保存した画像はこちら
![](https://osakanav.com/wp-content/uploads/2021/06/avatar-1-300x300.png)
![](https://osakanav.com/wp-content/uploads/2021/06/avatar-2-300x300.png)
![](https://osakanav.com/wp-content/uploads/2021/06/avatar-300x300.png)
ちなみに「Random」ボタンを押すと、ランダムで色々なアバターを見ることができるので、ぜひお気に入りのアバターを見つけてみてください!(わーい!)
![](https://osakanav.com/wp-content/uploads/2021/06/nice-avatar-random.gif)
![](https://osakanav.com/wp-content/uploads/2021/02/canva-160x90.jpg)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
アバターをカスタマイズして、気分を上げよう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!