写真をピクセル図案・ブロックアートにする方法

なぜ写真をピクセル化するのか

写真を色付きのマス目の格子に減らすことは、意外なほど多くの趣味やプロジェクトの出発点になります。クロスステッチ、ハマビーズやアイロンビーズ、ダイヤモンドアート、レゴ風モザイクは、どれも図案——各マスが1色で、どの糸やビーズを使うかを示す番号が付いた格子——をもとに進めます。写真からその図案を手作業で起こすのは手間がかかり間違いも起きやすく、しかも多くのデスクトップ編集ソフトは印刷できる番号付きの図案をそもそも作れません。

デジタル側では、ドット絵やゲームのスプライトはあえて低解像度で限られたパレットで作られます。参考写真をきれいなブロックに縮小すれば、なぞったり塗り重ねたりするための下地、アバター、タイル、レトロ風グラフィックが手に入ります。ステッチ図案を作るのと同じエンジンがそのブロックアートも生成します——違うのは書き出し方だけです。

PixelForge がモザイクを作る仕組み

PixelForge は2段階で動きます。まずピクセル化です。画像は、横のブロック数を指定した格子に分割され、各マスが1色にまとめられます。その色の求め方は選べます——「平均」はマス内のすべてのピクセルを混ぜてなめらかな結果になり、写真に向きます。「中央値」は代表的な値を選び、輪郭がくっきりして面が平坦になるため、狙ったドット絵として見栄えがよくなります。

次にメディアンカット量子化で減色します。何千ものほぼ同じ色を残すのではなく、アルゴリズムが色空間を最も長い軸に沿って中央値で繰り返し分割するため、最も密集した領域が最も細かく分けられ、最終的なパレットが画像を的確に表します。これは、1色ごとに実際に買う糸やビーズになる手芸でも、絞り込んだパレットそのものが美学であるドット絵でも重要です。処理は決定論的で、同じ写真を同じ設定にすれば必ず同じ結果になります。

手順：写真から図案まで

1. 写真を読み込む——ファイルをページにドロップ、クリックして選択、またはクリップボードから貼り付けます。アップロードは一切なく、画像はローカルで処理されます。
2. 出力モードを選ぶ——番号付きで印刷できる図案なら「設計図」、ゲーム風のPNGなら「レトロドット」。既定は設計図です。
3. ドット解像度を設定する——モザイクの横のブロック数を選びます。縦の数は写真の比率に合わせて自動で決まります。ブロックが少ないほど大胆な見た目になり、多いほど細部は残りますがステッチ数は増えます。
4. 色を調整する——「平均」か「中央値」のサンプリングを選び、色数を設定し、必要ならディザリングを加えます。ビフォー／アフター比較を使って、自分の画像で細部と簡潔さのバランスを見極めましょう。
5. 書き出す——色の凡例付きでA4にタイル割りした図案PDF、フラットな図案PNG、またはブロックモードではレトロドットPNGをダウンロードできます。

2つのモード：設計図とレトロドット

設計図モードは、手作業で何かを作るためのものです。格子線を重ね、どのマスにどの色が入るか常に分かるように各マスへ番号を印字し、10本ごとの線を太くして行を一目で数えられるようにします。色の凡例には各パレット色が番号付きで並び、印刷時のマスのサイズをミリ単位で指定できるので、仕上がりを思いどおりの実寸にできます。

レトロドットモードはそれらをすべて取り払い、ピクセルそのものを返します——単色ブロックのきれいなPNGで、スプライトエディタに取り込んだり、アバターに使ったり、あえてカクカクしたアートとして投稿したりできます。両モードは同じピクセル化とパレットを共有するので、設計図モードで見た目を詰めてからブロックモードでサッとデジタル書き出しする、あるいはその逆も可能です。

色のサンプリングとディザリング

モザイクの印象は2つの設定で決まります。「ブロックの色」は各マスの減色方法を決めます——「平均」はなめらかで失敗が少なく、人物写真や写真に向きます。「中央値」は輪郭をシャープに、面を平坦に保つので、ロゴやアイコン、狙ったドット絵に向きます。万能の正解はありません——リアルタイム比較で実際の画像を見て判断できます。

ディザリングは、減色後のグラデーションの扱いを決めます。「なし」はフラットな単色塗りになり、読みながらステッチする図案にはたいていこれが向きます。「Floyd–Steinberg」は丸め誤差を隣のマスへ拡散させて最もなめらかなグラデーションを作り、ブロックアートや写真に役立ちます。「Ordered（Bayer 4×4）」は規則的なハーフトーンの粒状感を敷きます——定番のレトロな質感です。印刷する手芸の図案ならほぼ常に「なし」が最適、デジタルのブロックアートなら色々試してみましょう。

A4にタイル割りした図案を印刷する

実際のステッチやビーズの図案は1枚に収まらないほど大きいので、図案PDFは指定したマスのサイズで、縦向きまたは横向きの複数のA4ページに自動でタイル割りされます。各ページには重ね代とトンボが付いているので、シートを揃えてテープで貼り合わせ、1行も失わずに1枚の大きな図案にできます。

格子線、マスの番号、10本ごとのガイド線がPDFに刷り込まれているので、紙だけで作業できます——マスを数え、凡例の色をチェックし、進み具合を追えます。デジタルの参照だけでよければ、フラットな図案PNGが同じ番号付きの格子を1枚の画像で提供します。

写真は端末から出ません

PixelForge は Canvas API を使ってブラウザ内だけで動きます。写真はメモリに展開され、ピクセル化・量子化・描画がすべてローカルで行われます——ファイルがサーバーへ送られることは一切ありません。だから、第三者のサービスにアップロードしたくない個人の写真や家族のポートレート、クライアントの仕事でも安全です。

アカウントもログインも利用制限もありません。すべては既に読み込んだページ上で動き、タブを閉じるか再読み込みすればあらゆる痕跡が消えます。このツールは設計上ステートレスで——データを送る先のサーバーがそもそも存在しません。