最近は大抵のサービスでユーザプロフィール画像が掲載できるようになっています。FacebookやTwitter、GitHubから取ってきてくれれば良いのですが、そうでない場合は自分でアップロードする必要があります。そうしないと格好わるいデフォルトの画像だったりしますよね。 ユーザごとに多少なりとも変化を持たせたいと思うならばinitial.jsの仕組みを使ってみてはいかがでしょう。名前の最初の文字を使ってプロフィール画像っぽい演出をしてくれます。

initial.jsの使い方

名前の最初の文字が四角の中に入っています。背景色が違うだけで随分印象が違いますね。

JavaScript/HTMLのコードは以下のようになります。

<img data-name="Steve" class="profile"/> 

$('.profile').initial(); 

Gmail風という触れ込みなのですが、どこでこのような表示を行っているのかは分かりませんでした。とは言えユーザ名の最初の文字を使うとみんなバラバラで、かつ背景色もランダムで選べるならもっと違う印象になるでしょう。ベースはSVGになっています。デフォルトのままでもそれなりの見栄えになるのが良いですね。

initial.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

initial.js | initialjs, Simple jQuery plugin to make Gmail like text avatars for profile pictures judesfernando/initial.js