1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

写真を「作れる図案」に変える:291色しかない世界への色量子化と、ブラウザ完結にした実装の話

1
Posted at

はじめに

写真は数百万色の世界です。一方、アイロンビーズの色は物理的に決まっていて、2.6mmミニビーズで広く使われるMARDのパレットは標準220色・全291色しかありません。さらにビーズは「1粒」が最小単位で、半粒は存在しません。

私たちが運営している mamepix では、写真をドット絵に変換し、1ドット=1粒のビーズ図案(色番号と粒数つき)まで落とす処理を、すべてユーザーのブラウザの中で行っています。本記事では、その変換パイプラインで直面した技術的な論点——特に「固定パレットへの色量子化」と「量子化しただけでは"作れる図案"にならない問題」——を整理します。

dot-e-original.png
dot-e-48.png

(変換例:元のイラストと、48ドット・16色での変換結果)

1. なぜブラウザ完結にしたか

図案変換は「写真のアップロード」が前提になりがちですが、家族写真やペットの写真をサーバーに送ることへの抵抗感は小さくありません。そこで変換処理は Canvas の ImageData 上で完結させ、写真がネットワークに出ない設計にしました。

副次的な利点もありました。

  • サーバー側の画像処理コストがゼロになり、無料・登録不要で提供し続けられる
  • 処理が端末内で閉じるため、応答がネットワークに依存しない
  • 96×96〜120粒程度のグリッドであれば、ピクセル総数が最大でも約1.4万セルと小さく、量子化の計算量は問題にならない(重いのは元画像のデコードとリサンプリング側)

例外はAIイラスト化など外部モデルを使う機能だけで、通常の図案作成では画像は送信されません。

2. 本丸:固定パレットへの色量子化

2.1 汎用ドット絵変換との違い

一般的なドット絵コンバータは、画像から代表色を抽出して「その画像専用のパレット」を作ります(メディアンカット等)。見た目の再現度は上がりますが、実物のビーズには存在しない色が平気で選ばれます。

ビーズ図案の場合、パレットは実在する291色に固定され、各セルはその中から選ぶしかありません。つまり処理は「パレット生成」ではなく「固定パレットへの写像(量子化)」です。ここが設計の出発点でした。

2.2 色距離は知覚空間で測る

RGB空間でのユークリッド距離は、人間の色の見え方とずれます。特にビーズで多用する中間色・肌色・茶系で、「数値的には近いのに見た目は別物」が起きやすい。そこで色の近さは知覚的に均等な色空間(CIELAB等)での距離で評価する方針にしました。

2.3 色数制限は「量子化の後に」かける

ユーザーは使う色数を2〜60色まで指定できます。291色への写像と、色数制限は別の問題として扱い、写像後に使用色を集計し、上限を超える場合は「知覚距離が近く、かつ使用粒数が少ない色」から順に寄せていく設計にしています。粒数が少ない色から寄せると、見た目の損失に対して「買い足す色数」の削減効率が良いからです。

dot-e-24.png
dot-e-96.png

(同じ画像を横24ドット/96ドットで変換した場合。ドット数が少ないほど「ビーズの粒の粗さ」が支配的になる)

3. 量子化しただけでは「作れる図案」にならない

ここが実務でいちばん効いた部分です。写真由来のノイズをそのまま量子化すると、次のような「データとしては正しいが、手芸としてはつらい」図案ができます。

3.1 ぽつんと1粒だけの色

グラデーションの境界や圧縮ノイズで、周囲と違う色が1粒だけ孤立して現れます。作る側からすると、その1粒のために1色買い足し、置き間違えのリスクまで増えます。そこで後処理として、孤立した単独セルを周囲の多数派の色に統合するステップを入れました(公式サイトの機能説明でいう「ぽつんと1粒だけの色をまとめる」処理)。

3.2 床や机の影

ペット写真では、床に落ちた影が「濃い茶色の大きな面積」として量子化され、主役より目立つことがあります。影の除去や背景除去(無地背景向け)も、色の正確さより「図案としての作りやすさ」を優先した後処理です。

3.3 ディザリングとの付き合い方

フロイド–スタインバーグ型の誤差拡散は、少ない色で写真らしい階調を出す定番手法です。ただしビーズでは、拡散された色が空間的に散らばる=「あちこちに別の色の粒が混ざる」ことになり、作る手間と間違いやすさが増えます。そのためディザリングは標準では弱め/オフ寄りにし、写真の階調を残したいユーザー向けの任意オプションとして提供しています。

4. 出力側の実務:PDFはプレート単位、材料はCSV

図案ができても、出力が画面の中だけでは作品は作れません。実務的な工夫は次の3点です。

  • 印刷PDFは29×29粒でページ分割する。2.6mmビーズのプレートが1枚29×29粒なので、印刷した図案と実物のプレートが1対1で対応し、「今どのプレートのどの位置か」が迷子にならない
  • 色ごとの粒数を集計してCSVで出す。材料の買い物リストとしてそのまま使える(予備10%込みの計算もここで行う)
  • パーラー/ハマ(5mm)で作る場合の近似色も併記する。パレットが違うブランド間で、同じ図案を再利用できるようにするため

まとめ

  • 固定パレット(実在する色)への写像であることが、汎用ドット絵変換との決定的な違い
  • 色距離は知覚空間で測る/色数制限は写像の後に「粒数の少ない色から寄せる」
  • 量子化の正しさより「作れること」を優先する後処理(孤立色の統合、影・背景の除去、ディザリングの抑制)が品質を決める
  • 処理をブラウザに閉じることで、プライバシーと「無料で出し続けられる」ことの両方が成立した

同じように「デジタルの正しさ」と「物理世界の制約」の間で悩んでいる方の参考になれば幸いです。


(文末固定メッセージ)
この記事の変換ツールはこちらで公開しています:mamepix(写真からアイロンビーズ図案・ドット絵への変換、無料・登録不要) https://mamepix.com/

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?