画像ドット化ツール
画像をアップロードすると、隠れたピクセルグリッドを見つけてずれた点を整え、色をパレットにまとめてきれいなピクセル画像にします。拡大・グリッド・パレットで結果を細かく確認し、PNGで保存できます。
画像
ピクセルサイズ
色
保存
アップロードした画像はサーバーに送信されず、ブラウザ内だけで処理されます。
結果プレビュー
プリセットパレット
すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
画像ドット化ツールの使い方
画像ドット化ツールは、ぼやけてグリッドがずれたピクセルアートを整えるための無料ツールです。画像から隠れたピクセルグリッドを見つけてすべてのピクセルを整列させ、色をパレットにまとめます。ディザリングや輪郭など意図したディテールは残し、にじみやノイズだけを取り除きます。
アップロードするとブラウザ内ですぐに処理し、拡大・グリッド・パレットで結果を細かく確認してからPNGで保存できます。以下では各設定の意味と、結果がずれたときの調整方法を順番に説明します。
画像ドット化ツールとは
アップロードした画像からピクセルグリッドを見つけ、ずれたピクセルを整列させ、色を整理して本物のピクセルアートに変換します。AIが作ったぼやけたピクセルアートやグリッドの合わない画像をきれいにするのに使います。写真をドット風に変換する用途にも使えます。
ドット絵ならではの懐かしさ
ピクセルアートは8ビット・16ビット時代のゲームを思い出させます。色と点を絞る制約の中で、かえって鮮やかで記憶に残る印象が生まれます。キャラクターやアイコンの一つひとつに手で打ったような温かみがあります。このツールは写真やイラストをそのドット感に変換し、レトロなゲームスプライトやピクセルアバター、絵文字のような結果を手軽に作れます。
ピクセルグリッドと「1マス=1ピクセル」
本物のピクセルアートはグリッドの1マスがちょうど1ピクセルです。画像を大きく拡大するとこのグリッドが崩れ、1マスが複数ピクセルににじんで境界がぼやけます。このツールは隠れたグリッドを見つけ直し、1マスを1色にまとめてピクセルをくっきり分けます。
- 1マス=1ピクセルだからドットがきれいに揃います。
- 拡大された画像はグリッドが崩れてピクセルの区切りが失われます。
- グリッドを整え直すと拡大しても階段がきれいで、スプライトシートにそのまま使えます。
処理の仕組み
大きく3ステップで処理します。各ステップは自動でつながり、設定を変えるとすぐに再計算します。
- 色の整理: 画像から代表色を抽出し、にじみや余分な色をまず減らします。
- グリッド検出: 縦横方向で境界が繰り返す間隔から、1ピクセルの大きさを推定します。
- グリッドへスナップ: 推定した間隔に合わせて各マスを1色にまとめ、ずれたピクセルを正しいグリッドに整列させます。
色数の設定
スライダーで2色から64色まで指定します。元画像から代表色をその数だけ抽出してパレットを作ります。色を減らすとくっきりしたドットに、増やすと元画像に近い色になります。既定の16色は多くのピクセルアートで扱いやすい値です。
カスタムパレットで色を固定
決まった色だけを使いたい場合は、hexをカンマ区切りで入力するか、パレットPNGを読み込むとその画像の色だけを使います。複数のスプライトやタイルセットが同じ色を共有すべきときに便利です。
- 例: 0d2b45,203c56,544e68,8d697a
- PNG読み込み: 色を含むパレット画像から最大256色まで自動で読み取ります。
- クリア: カスタムパレットを解除し、色数の設定に戻します。
ピクセルサイズ: 自動と手動
通常は自動検出がグリッド1マスの大きさを見つけます。結果が細かすぎたり潰れたりする場合は「手動指定」に切り替えて元の倍率（例: 8px）を入力してください。元画像が何倍に拡大されたか分かっていれば、その値を入れるのが一番きれいです。
結果を詳しく見る
結果プレビューでいろいろな方法で確認できます。良ければ保存し、そうでなければ設定を変えて再確認します。
- 拡大スライダーでピクセルを大きくして1マスずつ確認します。
- グリッド表示をオンにするとマスの境界線が重なり、整列状態を確認できます。
- 結果パレットで実際に使われた色を一目で確認します。
- 結果・元画像ボタンで整形前後をすぐ比較します。
こんな画像に向いています
グリッドを基準に整え直すと効果が大きい画像に向いています。
- AIピクセルアート: GPT Image・Geminiなどのグリッドがずれたピクセルアート
- タイルマップ・アイソメトリックマップ: マスに合わずつながらないタイル
- 2Dゲームアセット・テクスチャ: くっきりと拡大可能な形に戻すとき
うまくいかないとき
次の順で調整するとほとんど解決します。
- 自動検出がずれる → ピクセルサイズを手動にして元のグリッドサイズを入力
- 色が潰れる → 色数を上げる
- 結果が細かく割れすぎる → ピクセルサイズの値を大きく入力
- 写真のように元々グリッドがない画像 → ドット変換用にピクセルサイズを手動で決める
保存前のチェック
ダウンロード前に結果を一度確認しましょう。
- 拡大してピクセルがくっきり整列しているか確認
- 結果パレットが意図した色か確認
- グリッドサイズが元画像と合っているか確認
- 問題なければPNGをダウンロード（必要なら4倍・8倍で拡大保存）
良いドット絵を作るコツ
いくつか意識するだけで結果がぐっと鮮明になります。
- 色は少なめ: 8〜16色から始めるとドットらしい鮮明さが出ます。
- ピクセルサイズは元画像に合わせる: 小さすぎると汚く、大きすぎると潰れます。
- 輪郭・ディザリングは残す: 意図した細部は保持し、過度な単純化は避けます。
- 背景はシンプルに: 複雑な背景より人物やオブジェクト中心がきれいです。
- スプライトに使うなら背景が透明なPNGが便利です。
作ったドット絵の活用アイデア
気軽な用途から本格的な制作まで幅広く使えます。
- ゲームキャラ・スプライト・タイル
- プロフィール・アバター画像
- 絵文字・ステッカー
- レトロな壁紙
- ドットのロゴ・アイコン
- グッズ・NFT用のピクセル画像
オープンソースの原理（参照元）
このツールのグリッド検出・スナップ・色整理のアルゴリズムは、Hugo DuprezのオープンソースプロジェクトSprite Fusion Pixel Snapper（MIT License）の方式を参考に、ブラウザ用JavaScriptとして再実装したものです。元プロジェクトは下記の出典のGitHubリポジトリで確認できます。アップロードした画像はサーバーに送信されず、ブラウザ内だけで処理されます。
例で見る
アップロードした画像をピクセルアートに変換した例です。
よくある質問
画像ドット化ツールは何をするツールですか?
アップロードした画像から隠れたピクセルグリッドを見つけ、ずれた点を整列させ、色をパレットにまとめてきれいなピクセル画像に変換します。ぼやけたAIピクセルアートやグリッドの合わない画像を整えるのに使います。
AIが作ったピクセルアートも整えられますか?
はい、そのためのツールです。GPT ImageやGemini（Nano Banana）などが作った画像はピクセルの大きさや位置がばらばらですが、このツールが一定のグリッドに合わせて整えます。
色数とカスタムパレットの違いは?
色数は元画像から代表色をその数だけ抽出して新しいパレットを作ります。カスタムパレットは指定した色だけを使うよう強制します。複数のスプライトが同じ色を共有すべきときはカスタムパレットが便利です。
結果が潰れたり細かすぎたりします。
自動グリッド検出がずれた場合です。ピクセルサイズを「手動指定」にして元のグリッド1マスのサイズ（例: 8px）を入れると一番きれいになります。色が潰れる場合は色数を上げてください。
画像はサーバーにアップロードされますか?
いいえ。すべての処理はブラウザ内だけで行われます。アップロードした画像はサーバーに送信されず、アカウントも不要です。
結果はどう保存しますか?
結果の下のPNGダウンロードボタンを押すと、整えたピクセル画像がグリッドサイズそのままのPNGで保存されます。必要なら4倍・8倍に拡大して鮮明な状態で保存できます。
このツールの原理はどこを参考にしましたか?
グリッド検出とスナップのアルゴリズムは、Hugo DuprezのオープンソースSprite Fusion Pixel Snapper（MITライセンス）の方式を参考に、ブラウザ用JavaScriptとして再実装しました。
ドット絵は何色で作るのがいいですか?
正解はありませんが、8〜16色から始めるとドットらしい鮮明さがよく出ます。色を増やすと元画像に近く柔らかく、減らすとよりグラフィックでレトロな印象になります。スライダーで変えながら好みの点を選んでください。
作ったピクセル画像をゲームやプロフィールに使えますか?
はい。結果はあなたがアップロードした画像から作られるので自由に使えます。ただし元画像の著作権はそのまま適用されます。他人の絵や著作権のある画像を使った場合は、その利用条件を守ってください。
グリッド検出・スナップのアルゴリズムは下記オープンソース（MIT）の方式を参考にしています。