本文へ移動
bobob

ドット絵メーカー

テキストで作るドット絵のエディタ。マス目をクリックしてハートやスマイル、矢印を描き、丸・四角・ブロックの文字に変換して、ワンクリックでコピー。X・Instagram のプロフィールや LINE、コメント欄に貼れます。

ブラウザ内で処理入力した内容はサーバーに送られません。

入力と結果

入力した内容はこのブラウザにだけ保存されます。開き直すと前回の続きを呼び出せます。

使いどころ

  • プロフィールやコメント、トークルームに載せる小さなハート・スマイル・矢印を、画像を探さずに文字だけで作れます。
  • ハート・スマイル・矢印・チェックのひな形から始めて、マスをクリックして自分好みに直せます。
  • 丸（○●）・ブロック（█░）・四角（■□）の3種類は、マス目を描き直さなくても切り替えられます。
  • 行と列は4〜24まで変えられます。文字数に上限のある欄に貼るときは、先に小さくしておきます。

ドット絵コピペの作り方

  1. 1上のボタンから「ハート」「スマイル」「矢印」「チェック」のひな形を選ぶか、「行」「列」の数字（4〜24）でマス目の大きさを決めます。
  2. 2マスを1回クリックすると塗られ、もう1回で消えます。下の「生成されたドットアート」がそのつど更新されます。
  3. 3「ドットパレット」で丸・ブロック・四角を切り替えて、貼る先のアプリでいちばんきれいに見えるものを選びます。
  4. 4出力欄の「コピー」を押して貼り付けます。改行はそのまま残るので、貼ったあと形が崩れていないか画面で確認してください。

例

ハート（丸）
○●●○○●●○ ●●●●●●●● ●●●●●●●● ○●●●●●●○ ○○●●●●○○ ○○○●●○○○
ひな形「ハート」、パレット「丸」。6行8列で、プロフィール欄にも収まりやすい大きさです。
ハート（四角）
□■■□□■■□ ■■■■■■■■ ■■■■■■■■ □■■■■■■□ □□■■■■□□ □□□■■□□□
同じハートを四角にした例。丸より輪郭がはっきり出ます。
スマイル（丸）
○○●●●●○○ ○●○○○○●○ ●○●○○●○● ●○○○○○○● ●○●○○●○● ●○○●●○○● ○●○○○○●○ ○○●●●●○○
ひな形「スマイル」、パレット「丸」。8行8列。コメント欄やトークで使いやすい定番です。
スマイル（ブロック）
░░████░░ ░█░░░░█░ █░█░░█░█ █░░░░░░█ █░█░░█░█ █░░██░░█ ░█░░░░█░ ░░████░░
ブロックはコントラストが強い反面、幅の狭いフォントでは潰れて見えることがあります。
矢印（四角）
□□□■□□□□ □□□■■□□□ ■■■■■■□□ ■■■■■■■□ ■■■■■■□□ □□□■■□□□ □□□■□□□□
ひな形「矢印」、パレット「四角」。7行8列で、右向きです。
チェック（ブロック）
░░░░░░░█ ░░░░░░██ █░░░░██░ ██░░██░░ ░████░░░ ░░██░░░░
ひな形「チェック」、パレット「ブロック」。ToDo や完了報告に。
チェック（丸）
○○○○○○○● ○○○○○○●● ●○○○○●●○ ●●○○●●○○ ○●●●●○○○ ○○●●○○○○
同じチェックを丸にした例。ブロックより軽い見た目になります。

よくある失敗

  • 文字幅がそろっていないフォントでは行ごとにずれて、絵が崩れます。○● や █░ の幅はフォントやアプリによって違います。
  • マスが多いほど文字数が増えます。16×16 だと改行を含めて271文字になり、プロフィール欄やコメント欄に入らないことがあります。
  • アプリによっては改行や空白がまとめられ、貼った絵が崩れます。
  • スマホの狭い欄では自動で折り返されます。列数が多い絵（目安は18列超）は途中で切れやすくなります。

コピーする前に

  1. 1貼る欄の文字数上限に入るよう、先にマス目を小さくします。
  2. 2貼ったあと、スマホで行の長さがそろっているか確認します。
  3. 3同じ絵でもパレットを変えて見比べ、貼る先でいちばんきれいなものを選びます。

出典

  • Braille Patterns block, U+2800-U+28FF

    One character holds a 2x4 grid of dots that can each be on or off, so a single character acts as eight pixels. The 256 characters in the block are every combination of those eight dots - which is how dot art fits a picture into very few characters.

    基準：Unicode block definition

  • The shape only survives in a monospace font

    Paste it where character widths differ and the rows no longer line up, so the picture collapses. Use somewhere monospace, like a code block.

    基準：Depends on the font

  • Check the character limit where you paste it

    Dot art looks like a picture but counts as text. A 16x16 drawing runs past 300 characters including line breaks. For a bio or a comment with a limit, draw on a smaller grid.

    基準：Depends on the destination

よくある質問

ドット絵コピペで出てくるのは画像ですか、文字ですか？

文字です。丸や四角などの文字を並べてマス目にしているので、コピーして貼れます。そのかわり見え方は貼る先のフォントや欄の幅で変わり、画像のように必ず同じ形になるとは限りません。

X のプロフィールや LINE に貼ると形が崩れます。

多くの場合、その場所のフォントの文字幅がそろっていないためです。パレットを変えてみる、マス目を小さくする、コードブロックのように等幅で表示される場所に貼る、で改善します。

どのくらいの大きさまで作れますか？

行と列はそれぞれ4〜24です。大きいほど文字数と幅を使うので、プロフィールやコメントに貼るなら8×8前後がおすすめです。

描いた内容は送信されますか？

送信されません。マス目も出力も、お使いのブラウザの中だけで処理します。