2012 . 08 . 25

ピクセルアートのユニークなアバター画像を作成できるサイト『Tuitpix.com』

Tuitpix.comはピクセルアートのアバターをステップバイステップで簡単に楽しく作成できるサイト。

サイトのインターフェースもすべてピクセルアートで統一されているというユニークなサイトです。


まずは試しにいろいろいじって遊んでみましょう。

最初は性別・顔の向き・肌の色を矢印ボタンで切り替えながら選んでいきます。

右クリックするとカラーパレットが現れるので、任意の色を指定することもできます。

次は髪型を決めていき、必要に応じて帽子も選べます。

お次は口のかたち及びヒゲ...

次はTシャツまたは洋服を...

最後は付属品を適当に追加したら完成です。

右上のボタンをクリックすれば作成された画像が開くので、そのまま保存して利用することが可能です。

ちなみにこちらはHTML5のCanvasで動的に描画された画像をJavaScriptによってdataスキームに変換して出力するという仕様になっています。


さて、Twitterに限らず大抵のソーシャルサイトで使われるアバターやプロフィール画像は、使用目的に応じ200x200ぐらいから16x16ぐらいまで様々なサイズで使い回しにされます。

ICOフォーマットのように複数の画像を使用目的に応じ切り替えるというわけではなく、単純に引き延ばしたり縮めたりするだけなので、大きなサイズでデザインすれば縮小された場合何が何だか分らなくなり、逆に小さなサイズでデザインしたものを引き伸ばされればマヌケな感じになってしまい、一つの画像で小さいサイズから大きいサイズまで対応できるデザインというのは本当に限られているのではないかと常々思っていましたが、その意味では今回のようなアバターは小さくても可視性があるし、逆に大きくてもピクセルアートとして通用し、おまけに色数が少ないのでファイルサイズも抑えられると、デザイン的にも機能的にも中々いいアイデアだなと思いました。


  • ブラウザによって『名前を付けて保存』ができなければ、ファイラに直接ドラッグ&ドロップで保存ができると思います
  • なお、Twitter経由でログインすると作成した画像を直接Twitterにアップできるということですが、少なくともFFとChromeでは一部動作が利かないバグがあるようで、現状ではログインせずそのまま作成したものを自前でDL/ULした方がよさそうです。
Tuitpix.com