荒くはありますが、画像からビーズアート図案作成｜用紙サイズ＆ビーズサイズ自動計算

※まだ出来上がりとしては粗いです。
保管機能として手動でひとつずつ色を変えれるようにしているので好きな形に整えてください。

使い方

1. 用紙幅・用紙高さ・ビーズサイズを入力
   • 用紙幅（mm）：印刷したい用紙の横幅を数値で入力。
   • 用紙高さ（mm）：印刷したい用紙の縦幅を数値で入力。
   • ビーズサイズ（mm）：使用するビーズの直径を数値で入力。
   • ※ 実際のビーズと印刷サイズが合うよう、単位をミリで指定してください。
     
     
2. ファイルをアップロード
   • 「ファイルを選択」ボタンを押して、JPEG／PNGなどの任意の画像を選択します。
   • 画像を読み込むと、自動でビーズドット絵への変換が始まります。
     
     
3. 背景色を切り替える
   • 透明背景：台紙の色を活かしたい場合に選択します。
   • 白背景：印刷時に背景を白にしたい場合に選択します。
     
     
4. ドット絵化されたビーズを確認
   • 画面下部のキャンバスに16色パレットで減色されたドット絵が表示されます。
   • 自動生成されたビーズ配列が、用紙サイズに合わせて描画されます。
     
     
5. 色の編集（左クリック）
   • 画面右側にあるカラーピッカー、またはパレット表示された16色から色を選択します。
   • 選択中の色で、ドット上を左クリックすると、そのビーズの色が変更されます。
   • 透明化ボタンを押して選択中の状態でビーズをクリックすると、そのドットを「透明（背景のみ）」にできます。
     
     
6. 色の取得（右クリック／スポイト機能）
   • キャンバス上の既存ビーズを右クリックすると、そのビーズの色がスポイトされ、カラーピッカーに反映されます。
   • すでに透明化されたドットを右クリックすると、「透明」が選択状態になります。
     
     
7. ダウンロード（PNG／PDF）
   • PNGダウンロードボタン：現在の状態をそのままPNG形式で保存できます。
   • PDFダウンロードボタン：用紙サイズ（mm）に合わせたPDFを出力します。印刷してビーズ制作にそのまま利用できます。
     

Q&A

• Q. 変換されたドット数が思ったより小さい／大きいと感じます。どうすれば良い？
  A. 用紙サイズとビーズサイズの比率で自動的にグリッド（ドット数）が決まります。たとえば用紙幅50 mm・ビーズサイズ2 mmなら、横方向に25ドット表示されます。適宜ビーズサイズを調整して、お好みのドット数になるようにしてください。
  
  
• Q. スポイト機能でクリックしても色が取得できません。どうすれば？
  A. 右クリックイベントがブラウザにブロックされている場合があります。まずは記事を公開した状態で、実際のページ上で右クリックしてみてください。取得したいビーズの上で右クリックすると、その色がカラーピッカーに自動で反映されます。
  
  
• Q. PDFダウンロードしたら境界に余白が入ってしまいます。
  A. 現在の実装では用紙サイズのフチまでドット絵が描画される仕様です。余白が気になる場合は、用紙サイズ設定時に「用紙幅／高さを実際のビーズ配置より少し大きめに」指定すると、余白が目立ちにくくなります。
  
  
• Q. スマホやタブレットでも使えますか？
  A. はい。レスポンシブでキャンバスが画面幅に合わせて広がるため、スマホ・タブレットどちらでも操作可能です。ただし、画面が小さいと色選択がしづらいため、できればPCでの利用をおすすめします。
  
  
• Q. 変換できる画像サイズに制限はありますか？
  A. 軽量なツール設計のため、数メガバイト程度の画像なら問題なく変換できます。あまりに大きな解像度（数千ピクセル×数千ピクセル）の画像は、ブラウザの動作が重くなる可能性があります。必要に応じて事前にリサイズを行ってください。
  

関連記事

HALLOWEENビーズアートシール＆100均ハロウィンコーナー話

新しい記事