丸ドット絵メーカー

横48個なら3:2の写真は円1,536個になります。マスごとに平均色で円を描き、ハーフトーンでは暗いところほど円を大きくします

円形ドット化とは、写真を等間隔のマスに分け、マスごとにその中のピクセルの平均色で円を1つ描く加工です。上のツールでは横のドット数を決めると、縦の段数が元の縦横比に合わせて決まります。960 × 640 pxのサンプル画像を横48個に分けると縦は32段で、円は全部で1,536個になります。

円の大きさをすべて同じにすると、色だけで絵を描くビーズやLEDのような仕上がりになります。「明暗に合わせる(ハーフトーン)」を選ぶと、暗いマスほど円が大きくなり、印刷物の網点のように見えます。横にある6つのスタイル見本は、いま読み込んだ画像で実際に描いたプレビューです。下の「色別のドット数」では、色ごとに円をいくつ描いたかがわかります。画像はブラウザ内だけで処理し、サーバーには送信しません。

写真を円形ドットにしたいとき

• ポップアート風のポスターやグッズ用の絵がほしいとき: 大きさの違う点で明暗を表す印刷の手法がハーフトーンです。1879年に印刷業者ベンジャミン・デイが考案したベンデイ・ドットは、ロイ・リキテンスタインのポップアートで広く知られています。「ポップアート」スタイルは、色を6色に減らし、明暗に合わせて円の大きさを変えることでその雰囲気を出します。
• ビーズやステッカーの図案を作るとき: 円1つがビーズ1粒になります。Hamaのミディビーズは直径5.0 mmなので、横48粒でおよそ24 cm、ミニビーズ(2.5 mm)ならおよそ12 cmです。手持ちのビーズの色数まで減色すれば、「色別のドット数」がそのまま色ごとに必要な個数になります。
• LED電光掲示板やネオン風のサムネイルを作るとき: 黒い背景に間隔を広げた円を並べると、灯りの点いた電球が並ぶ画面のように見えます。文字よりも、単純な絵のほうがよく読み取れます。
• 大きく印刷したり、カット作業に回したりするとき: SVGで保存すると、円が1つずつ図形として残るので、拡大しても縁が崩れません。同じ色の円はひとまとめになっているため、デザインソフトで色を一度に変えやすくなります。

使い方

1. 画像を入れる: 「画像を選ぶ」を押すか、画像を作業エリアにドラッグ&ドロップします。コピーした画像はCtrl+V(⌘V)で貼り付けられます。
2. スタイルを選ぶ: 横にある丸い見本6つのうち1つを押すと、配列・大きさ・間隔・色・背景がまとめて切り替わり、ドットが中央から広がるように描き直されます。
3. 横のドット数を決める: 数字を入力するか、スライダーやチップで16〜200個の間から選びます。数が少ないほど円が大きく、絵は単純になります。
4. 細かく調整する: 下の欄で、配列(格子・千鳥)、ドットの大きさ(すべて同じ・明暗に合わせる)、間隔、背景、色を個別に変えられます。スタイルと違う値を選ぶと、見本の選択状態は解除されます。
5. 確認して保存する: 「元画像を見る」で元の画像と見比べ、「色別のドット数」で色を押すと、その色の円だけが濃く表示されます。PNG・JPG・SVGと長辺のサイズを選んで「保存」を押します。

6つのスタイル

スタイルを選んだあとでも、値は1つずつ変えられます。横のドット数は、スタイルを切り替えてもそのまま保たれます。

横のドット数の選び方: 3:2の写真の場合

顔や動物のように輪郭が大切な写真は横48〜72個、ハーフトーンのポスターは96個以上にすると、明暗がなめらかにつながります。ビーズのサイズは直径を足しただけの値なので、ビーズプレートの間隔によっては、実際はもう少し大きくなることがあります。

計算方法

1. マスの割り付け: 1マスの幅を1とし、横のドット数をcとすると、格子の縦は round(c × 縦 ÷ 横) 段です。千鳥は段の間隔が√3/2(約0.866)なので、縦は round((c × 縦 ÷ 横 − 1) ÷ 0.866) + 1 段になり、偶数段は半マスずれるため円はc − 1個です。
2. ドットの色: 円の中心から横に±0.5マス、縦に±0.5マス(千鳥は±0.433マス)の範囲にある元のピクセルを、不透明度で重みづけして平均します。不透明度の平均が半分未満なら、円は描きません。
3. 色の決め方: 「減色」は、最も幅の広いチャンネルの中央値で繰り返し分割するmedian cut(Heckbert, 1982)で色をまとめ、OKLab色空間(Ottosson, 2020)で4回調整してから、各円を最も近い色で塗ります。ゲームボーイとPICO-8も、OKLabで最も近い色を選びます。「グレースケール」は、相対輝度を保ったグレーです。
4. ドットの大きさ: 「すべて同じ」の半径は(1 − 間隔) ÷ 2マスです。「明暗に合わせる」では、その半径に√kを掛けるので、円の面積がkに比例します。

k = (Y_背景 − Y_マス) ÷ (Y_背景 − Y_基準)  (0〜1に丸める)  ·  Y = 0.2126 R + 0.7152 G + 0.0722 B (線形sRGB)

YはWCAG 2.2の相対輝度です。Y_基準は、「単色」ならそのインクの色、それ以外は背景が明るいとき(Y ≥ 0.5)は0、暗いときは1です。透明な背景は白い紙として扱います。そのため、白い背景では暗い部分の円が、黒い背景では明るい部分の円が大きくなります。下の表は、ハーフトーンスタイル(千鳥配列、白い背景、インク#1A1A1A、間隔0%)で、グレーのマスに描かれる円の大きさです。千鳥配列では円1つの持ち分がマス幅² × 0.866なので、接する円はその90.7%を塗ります。

保存するときは、長辺を選んだサイズに合わせて、1マスのピクセル数を決めます。3:2の写真を横48個で2,048 px保存すると、1マスはおよそ42.7 px、絵は2,048 × 1,365 pxになります。SVGは1マスを10単位として円の図形で書き出し、同じ色の円を1つのグループにまとめます。

格子と千鳥(ハニカム)の違い

同じ大きさの円を平面にすき間なく並べる方法のうち、最も密になるのは、ハチの巣のように1段ごとにずらして置く六方配列です。これが最密であることは、L. Fejes Tóthが証明しました。接する円が占める面積は、正方格子が78.5%(π/4)、六方配列が90.7%(π/(2√3))です。

円どうしのすき間には背景色が見えるため、同じ写真でも、白い背景なら明るく軽く、黒い背景なら暗くくっきりと見えます。間隔を広げるほど、この差は大きくなります。

よくある失敗

• ハーフトーンで背景を変えたら絵が反転した: 「明暗に合わせる」モードは、背景との明るさの差で大きさを決めます。白い背景から黒い背景に変えると明るい部分の円が大きくなるので、暗いインクで刷ったような絵にしたいときは明るい背景を使います。
• 元の色のままビーズの個数を数えた: 元の色では円ごとに色が少しずつ違い、色が64色を超えると、「色別のドット数」は似た色を12のグループに分けたおおよその数になります。実際に買うビーズの個数は、「減色」で色数を決めてから確認してください。
• 透明な背景をJPGで保存した: JPGは透明を保てないので、白い背景になります。透明がほしいときは、PNGかSVGで保存してください。
• ドットをとても多くしてSVGで保存した: 横144個の3:2の写真だと、円は13,824個になります。円が多いほどファイルが大きくなり、ソフトで開くのも遅くなるので、大きく印刷する絵でなければPNGのほうが扱いやすいです。
• 縦に細長い画像でエラーになった: 円は1枚につき60,000個まで描けます。横200個で1:2の縦長画像を入れると、400段で80,000個になり上限を超えるので、横のドット数を減らしてください。

限界と注意

• 印刷所の網点(スクリーン角度、CMYKの4版への分版、インクがにじんで点が太る現象)は再現しません。1枚につき、1つの角度の円だけを描きます。
• 明暗に合わせるモードでも、円がマスを覆いきれないため(格子は最大78.5%、千鳥は90.7%)、いちばん暗いところが元画像より明るく見えます。間隔を0%にすると、最も濃くなります。
• 画面の色と、実際のビーズやインクの色は異なります。図案として使うときは、手持ちのビーズのカラーチャートと見比べ、個数には余裕を持たせてください。
• ゲームボーイとPICO-8は、その機種の色だけを借りています。機種の画面サイズや色数の制約には従いません。
• ブラウザが開ける形式だけを受け付けます。動くGIFは最初の1コマだけを使い、HEICはブラウザによっては開けないため、JPGかPNGに変換してから入れてください。ファイルは40MBまで受け付け、長辺を2,048 pxに縮小して読み込んでから計算します。
• 保存サイズの最大値4,096 pxは、どの端末でも保存できるように、iOSブラウザのキャンバスの上限(4,096 × 4,096)に収まる値として決めたものです。

基準日 2026-10-20。ハーフトーンとベンデイ・ドットの定義、円の充填密度、ビーズの直径、相対輝度の式は、下記の原文でこの日に確認しました。スタイルの値と60,000個の上限は、このツールが定めたものです。サンプル画像は、Wikimedia Commonsの「Blue, red and green parrot (Unsplash)」(Mikhail Vasilyev、CC0 1.0)を960 × 640 pxに縮小したものです。

出典

• 01Getty AAT — halftone negativesスクリーンを通して撮影し、絵が大きさの異なる点や四角のパターンとして現れる原版。ハーフトーン印刷に使われる
• 02Getty AAT — Ben Day process点のようなパターンをセルロイド版で刷る技法。1879年にニュージャージーの印刷業者Benjamin Dayが考案。ポップアートの画家ロイ・リキテンスタインの作品とよく結びつけられる
• 03Wolfram MathWorld — Circle Packing平面で最も密な円の充填は、ハチの巣のような六方格子(L. Fejes Tóthが証明)。密度は六方0.9069、正方0.7854
• 04Hama — Meet our different beadsMidiビーズの直径5.0 mm、Miniビーズの直径2.5 mm
• 05W3C — WCAG 2.2: relative luminancesRGBの相対輝度 L = 0.2126 R + 0.7152 G + 0.0722 B、線形化の境界値は0.04045
• 06MDN — <circle>中心点(cx・cy)と半径(r)で円を描くSVGの基本図形
• 07Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307。median cutによる減色
• 08Björn Ottosson — A perceptual color space for image processing2020-12-23。OKLab色空間(最も近い色の選択)
• 09Lospec — PICO-8 PalettePICO-8の16色のHEX値。ゲームボーイの4色は、同サイトのNintendo Gameboy (BGB) Paletteの値
• 10MDN — <canvas>: Maximum canvas sizeiOS端末のキャンバスの上限4,096 × 4,096

よくある質問

あわせて使いたいツール