認証の伴うWebサイトではプロフィール用のアイコンをアップロードするのが一般的です。まだアップロードされていない場合、デフォルトの簡素なアバターが利用されますが、みんな同じアイコンでは面白くありません。 そこで使われるのが自動生成型のアバターアイコンです。今回はSVGで生成される円形のアバターを紹介します。

Boring Avatarsの使い方

基本形。何となく惑星っぽいです。

ビーム。顔がつきます。

ピクセル。

サンセット。

バウハウス。

リング。

ビームの一つをMOONGIFTに変えてみました。文字によって生成されるアイコンが異なります。

大きさや色合いも自由に変更できます。

Boring AvatarsはReactのライブラリであり、SVGでアイコンを生成しています。サーバサイドの負荷がないので、とても手軽に導入できます。生成される画像パターンも多いので、Webサイトの特徴に合わせて選択できるでしょう。

Boring AvatarsはReact/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Avatar generator playground - Boring Avatars boringdesigners/boring-avatars: Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.