ピクセルアバター作成

オリジナルCC0パーツを組み合わせ、正確なピクセルPNG・GIF・共有カードを端末上で作成。

Nerulioピクセルアバター作成では、オリジナルのCC0顔・髪・目・服・アクセサリーを16×16の論理グリッドで組み合わせます。パーツを選ぶか、固定していないカテゴリだけをランダムに変え、透明PNG、8フレームのまばたき・呼吸GIF、1200×630の共有カードを保存できます。PNGは整数倍だけです。32pxは2倍、48pxは3倍、64pxは4倍、4096pxは256倍になります。出力は端末内で作られます。設定リンクは標準パーツを再現しますが、追加した端末の背景画像やアバター別のSNSプレビューは含みません。

画像をここにドロップ複数のファイルをまとめて処理できます
アップロードなし · この端末で処理

小さなグリッドでも読める形

元画像は16×16なので、丸い顎と角ばった顎、開いた目と眠そうな目、二つの髪型と服を32・48・64pxで確認してから実装しました。元の1ピクセルを四角いブロックに拡大するため、縁に混色を作りません。

髪と服の色は影・基本色・ハイライトを含む4段階のパレットで変わります。ランダム作成はシードを記録し、固定したカテゴリを保ちます。元に戻す操作は直前の選択へ戻ります。設定リンクにはパーツID・色・出力設定だけが入り、画像データは入りません。

追加した背景はブラウザに残ります。正方形に切り取り16pxグリッドへ縮小してキャラクターの後ろに置きます。その画像の権利は利用者が確認してください。CC0宣言はオリジナルのキャラクターパーツにだけ適用されます。

論理ピクセル
手作業で描いた16×16画像の1マスです。
整数拡大
元の1マスを2×2、3×3などのブロックへ複製します。
CC0
作者が持つ権利の範囲でオリジナルパーツをパブリックドメインへ提供する宣言です。

一つのアバターを四つの大きさへ

承認済みの原画はdocs/avatar-prototype/outputにあります。Pillowで開き直した四つの16px画像をブラウザの描画結果とバイト単位で比較しました。

16 × 16 原画 = 256マス
32 × 32 PNG = 各マスを2 × 2に複製
48 × 48 PNG = 各マスを3 × 3に複製
64 × 64 PNG = 各マスを4 × 4に複製
4096 × 4096 PNG = 各マスを256 × 256に複製

48pxは64pxプレビューをぼかして縮小した画像ではなく、16pxの正確な3倍です。256px GIFの試料は別ソフトで開き直して8フレーム、130msの遅延、無限ループを確認しました。GIFの遅延は1/100秒単位です。

出力されるファイル

ファイル用途
avatar-size.png選んだ整数サイズの正方形RGBA PNG。透明または選んだ背景を持ちます。
avatar-size.gif最大1024pxの8フレームまばたきGIF。透明は1ビットで、端末の背景は先に16pxへ縮小します。
avatar-card.png投稿に手動で添付する1200×630 PNGカード。設定リンクのSNSプレビューにはなりません。

エンジンで使う

  1. 顔・髪・目・服を選びます。ランダムで始め、残したいパーツを固定できます。
  2. プロフィールやスプライト参照用のPNGサイズを選びます。小さく表示する場合は32・48・64pxを直接確認します。
  3. PNGを保存して対象アプリで開き直します。SNS用画像はカードを別に添付してください。XとLINEのボタンは設定リンクだけを共有します。

結果の確認

  • 32pxでも髪の輪郭・目・顎を見分けられるか確認します。別サイトがさらに縮小するなら、その最終表示を確認します。
  • 別の画像ビューアでPNGの大きさとアルファを調べます。このページの市松模様はプレビューだけで、画像に焼き込まれません。
  • 設定リンクを再読み込みし、標準パーツと色が戻るか確認します。端末の背景は画像データがURLにないため戻りません。
  • フレームを見られるアプリでGIFの8フレーム、まばたき、ループ、透明な角を確認します。

トラブルシューティング

症状考えられる原因確認方法対処
アップロード後にぼやける投稿先がPNGを滑らかに縮小します保存したPNGの100%表示と投稿先のサムネイルを比べます表示サイズに合う出力を選ぶか、投稿先の最近傍表示を使います
共有リンクから背景が消えた端末の画像はURLに入れませんリンクを再読み込みし背景の表示を調べますPNGかカードを保存して投稿に画像として添付します
SNSプレビューが共通画像になる静的ページは設定ごとのOpen Graph画像を生成しませんリンクプレビューと保存したカードを比べますカードを手動で添付します。リンクは標準設定を再現できます
GIFの色や動きが動画と違うGIFはインデックス形式で、このツールは選んだ8フレームのまばたき、または肩を1ピクセル動かす呼吸ですGIFビューアでフレームと遅延を調べます静止画像はPNGを使い、GIFは小さめの整数サイズで保存します

ほかの方法

方法こんなときに向いています
ピクセルアートエディター用意されたパーツにない形を1ピクセルずつ描きたい場合に使います。
スプライトラボ既存のゲームキャラクターシートを分割してアニメにしたい場合に使います。

この方法の限界

  • 現在のカタログは顔・髪・目・服をそれぞれ二系統と簡単なアクセサリーだけ提供します。AIで新しい絵を合成しません。
  • 静的な設定URLだけではアバター別のOpen Graph画像を作れません。X・LINEはリンクだけ共有し、Kakaoカードには所有者のアプリキーと登録ドメインが必要です。
  • オリジナルパーツはCC0で商用利用できますが、追加した背景には別の権利があります。CC0は独占所有権や商標権を与えません。
  • 4096px出力はメモリの少ないブラウザや携帯端末で失敗することがあります。その場合は小さい整数サイズを選んでください。

バージョンと出典

パーツカタログv1、16×16原画グリッド。ブラウザのPNG・GIFと原画のオラクルを2026-09-28に確認しました。各プラットフォームの共有動作は設計文書に記録しています。

参照した公式ドキュメント

ピクセルアバター作成

オリジナルCC0パーツを組み合わせ、正確なピクセルPNG・GIF・共有カードを端末上で作成。

使い方

  1. オリジナルパーツを選ぶ
  2. 髪・服の色を調整、または固定してランダム作成
  3. 整数ピクセルPNG・まばたきGIF・端末の共有カードを保存

対応形式

ファイルなしで開始。任意の端末PNG・JPG・WebP背景 → 32–4096px PNG、32–1024px GIF、1200×630 PNGカード。

このツールでできること

オリジナル16px CC0カタログを整数ピクセルグリッドで出力します。端末の背景は16pxに縮小され、設定リンクには入りません。

処理方式と検証状況

advanced · 16 px original CC0 part grid / nearest-integer OffscreenCanvas PNG / exact indexed GIF worker. 品質検証中です。Pro・Flagship水準はまだ実証されていません。

書き出す前に

XとLINEは共通サイトプレビュー付きの設定リンクだけを共有し、生成画像は添付しません。静的サイトではアバター別Open Graphカードを生成しません。

よくある質問

作ったアバターを販売できますか?

はい。オリジナルパーツはCC0で商用利用できます。追加する背景画像の権利はご自身で確認してください。

ファイルはアップロードされますか?

このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。

作業は自動保存されますか?

いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。