写真をあっという間にアイロンビーズの図案にするジェネレーターを作りました

最近、アイロンビーズ（中国語では「拼豆」と呼ばれ、ペグボードに並べてアイロンでくっつける Perler や Hama のビーズのことです）の世界が、思っていたよりずっと裾野の広いものだと気づきました。子ども、親子で工作を楽しむ家庭、ハンドメイド好き、そして漢服（中国の伝統風の衣装）やボードゲームのグッズを作る人たちまで、遊んでいる人はたくさんいます。ところがオンラインのツールを一通り探してみると、使い勝手はおしなべてひどいものでした。「色番号を表示する」といった基本機能を Pro プランに閉じ込めて課金させるものもあれば、ぼやけたプレビュー画像を出すだけで、何粒買えばいいかは自分で数えさせるものもあります。

周りにもビーズを楽しんでいる友人が何人かいて、ときどき「この絵の図案ってある？」と聞かれます。そのたびに図案集を探してあげるのは効率が悪いので、いっそ自分で作ってしまいました。

bitbead.pomodiary.com

Perler / Hama / Artkal / MARD / COCO のカラーパレットに対応しています。ジェネレーター自体は無料で、登録も不要です。簡体字中国語・英語・日本語・繁体字中国語の4言語で使えます（その後、オプションの Bitbead Pro プランを追加しました。プロジェクトの無制限保存、より大きなキャンバス、高解像度 PNG の書き出し、印刷用 PDF 図案が使えます）。

この記事はもともと中国語で書いたものを、日本語の読者向けに翻訳・調整しています。

できること

写真を入れて、ビーズブランドのカラーパレットを選ぶと、30秒以内に次のものが手に入ります。

色番号まで正確なグリッド図案（どのマスにどのビーズを置くか）
買う必要があるビーズの合計数
色ごとに必要な個数（公式の色番号で一覧表示）
ワンクリックでコピーできる TSV 形式の買い物リスト（そのままビーズのショップに送れます。中国では、大手通販サイト「淘宝（タオバオ）」の出店者に送るのが一般的です）
または PNG / PDF をダウンロードして印刷し、見ながら並べることもできます（高解像度 PNG と印刷用 PDF の書き出しは、現在は Bitbead Pro の機能です）

宣伝っぽく聞こえないよう、三つの細部について書いておきます

1. 色合わせは RGB 距離ではなく CIEDE2000

いちばん素朴な色合わせは、RGB の3つの数値のユークリッド距離を計算して、いちばん近い色番号を選ぶ方法です。明るい部分ならまだいいのですが、暗部や肌の色になるとまるでだめです。人の目にはまったく似ていないのに、アルゴリズムは「とても近い」と判断してしまいます。

CIEDE2000 は、国際照明委員会（CIE）が2000年に発表した、人の知覚に基づく色差の公式で、プロ向けのカラーマネジメントソフトでも使われています。これに切り替えてから、顔の色番号の当てはまりが目に見えて自然になり、肌のグラデーションに突然マリオのような赤が飛び出すこともなくなりました。

ツールでは3段階から選べます。

高速：RGB ユークリッド距離（プレビュー用）
標準：CIE94
高品質：CIEDE2000

大きな画像（96×96 を超えるもの）は自動的に Web Worker で処理するので、画面が固まることはありません。

2. 背景を自動で判定、切り抜きは不要

アップロードされる画像には、イラストの写真や通販の商品画像のように、「被写体＋単色の背景」というものがたくさんあります。画像全体をそのまま減色すると、広い白背景だけで白いビーズを何十粒も無駄に使ってしまいます。

このツールは、画像の四辺のピクセルから内側へ向かって flood fill（塗りつぶし） を行い、「ひと続きになった縁の色」を背景と判定して自動的に空白にします。透過 PNG なら、アルファチャンネルをそのまま読み取ります。たいていは元の画像をそのまま入れるだけでよく、先に Photoshop で切り抜く必要はありません。

3. 主要なパレット＋COCO 291

Perler、Hama、Artkal、MARD に加え、中国で人気の小粒ビーズによく使われる COCO 291 の色番号体系も整理し、合計 1,406 件のパレット項目（重複を除いた HEX 値で約886色）を収録しました。デフォルトのパレットは表示言語に合わせて自動で選ばれます。

中国語 → MARD 221（中国でよく使われる色番号）
日本語 → Hama
英語 → Perler

途中でブランドを変えたくなったら、パレットを選び直すだけで、図案全体が新しいブランドの色番号で合わせ直されます。画像をアップロードし直す必要はありません。

なぜこの見た目なのか

サイト全体は「ピクセルビーズ」風のデザインです。硬い枠線、ソリッドなオフセットシャドウ、ピクセルフォント（中国語・日本語・韓国語にはオープンソースの Fusion Pixel 12、欧文には Press Start 2P）、そして方眼の背景。ただしビーズそのものは丸いままにしています。ペグボードを上から見れば、ビーズは丸いものです。ここだけは譲れませんでした。

技術スタックは次のとおりです。

Next.js 16（App Router）
Cloudflare Workers（OpenNext でデプロイ）
image-q（減色アルゴリズムのライブラリ）
jsPDF（PDF 書き出し）

公開時はサイト全体を静的にデプロイしていて、アカウントの仕組みもデータベースもありませんでした。

図案の生成と描画は無料で、登録も不要です。後から追加した Pro プランは任意で、プロジェクトの無制限保存、より大きなキャンバス、高解像度 PNG の書き出し、印刷用 PDF 図案が使えます。現在のプランの詳細は Bitbead の料金ページをご覧ください。

サイト：bitbead.pomodiary.com。製品の紹介は Bitbead のページをご覧ください。