ディザリング加工ツールの使い方
ディザリング加工ツールは、写真や画像をブラウザ上で1bit・低色数のレトロなピクセル表現に変換できる無料ツールです。Floyd–Steinberg・Atkinson・Bayerの3種類からディザリング方式を選び、カラー設定やピクセルサイズを調整しながら加工できます。
初期状態ではサンプル画像にディザリング加工が適用されているため、画像をアップロードする前でも各設定の違いを確認できます。
1. 画像をアップロードする
「画像アップロード」から、加工したい画像を選択します。
PNG・JPG・JPEG・WebP形式の画像に対応しています。アップした画像はブラウザ内で処理され、サーバーに送信・保存されることはありません。
画像を読み込むと、プレビューにディザリング加工後の画像が表示されます。
2. ディザリング方式を選ぶ
「ディザリング方式」では、3種類のアルゴリズムから加工方法を選択できます。
- Floyd–Steinberg
- Atkinson
- Bayer
3. カラーモードを選ぶ
「カラーモード」では、「1bit」「グレースケール」「カラー」を切り替えられます。
「1bit」は「暗部の色」と「明部の色」の2色だけで画像を表現するモードです。クラシックなディザリングやモノクロのレトロ表現に向いています。
「グレースケール」は、画像を指定した数の明暗に減らして表現するモードです。色を使わず、1bitよりも元画像の階調を残したい場合に適しています。
「カラー」は、元画像の色を一定の階調数に減らしながらディザリングするモードです。色味を残したまま、低色数のレトロゲームやピクセルアートのような表現を作りたい場合に適しています。
4. 1bitの色としきい値を変更する
カラーモードが「1bit」の場合は、「暗部の色」と「明部の色」を自由に変更できます。
初期値は黒に近い暗部色と明るいクリーム色です。濃い緑と薄い緑、濃紺とクリーム色などを組み合わせることで、レトロゲーム機や古いディスプレイのような配色も作成できます。
「しきい値」では、元画像の明るさを暗部と明部のどちらへ割り当てるかを調整できます。値を小さくすると明部の色が増え、値を大きくすると暗部の色が増えます。
5. 階調数を調整する
カラーモードが「グレースケール」または「カラー」の場合は、「階調数」を調整できます。
値を小さくすると使用される明暗や色が少なくなり、強い低色数表現になります。値を大きくすると使用できる明暗や色が増え、元画像に近い自然な仕上がりになります。
6. ピクセルサイズを調整する
「ピクセルサイズ」では、ディザリングを構成するピクセルの粗さを変更できます。
値を小さくすると細かなディザリングになり、写真の細部や階調を残しやすくなります。値を大きくすると1つ1つのピクセルが目立ち、レトロゲームやドット絵のような粗い表現になります。
7. Before / Afterで比較する
プレビュー上部の「Before」と「After」を切り替えることで、加工前と加工後の画像を比較できます。
8. PNG画像をダウンロードする
「画像書き出し設定」で、出力する画像の幅と高さを指定します。
「画像の縦横比を維持して出力サイズを変更します。」のスイッチをONにすると、元画像の縦横比を維持したままサイズを変更できます。
設定が完了したら、「PNGをダウンロード」を押して加工した画像を保存します。
ディザリングとは？
ディザリングとは、使用できる色が限られている場合に、異なる色のピクセルを細かく配置することで、本来存在しない中間色や階調があるように見せる表現方法です。
たとえば黒と白の2色しか使用しない場合でも、黒いピクセルと白いピクセルの配置を変えることで、離れて見たときに灰色のような中間の明るさを表現できます。
古いコンピューターやゲーム機など、表示できる色数が少なかった環境で広く使われてきました。現在では、レトロゲーム、ピクセルアート、Webデザイン、ポスターなどで、意図的にレトロな質感を作る表現としても利用されています。
Floyd–Steinberg・Atkinson・Bayerの違い
Floyd–Steinberg
Floyd–Steinbergは、量子化によって生じた色の誤差を周囲のピクセルへ分散させる「誤差拡散法」の代表的な方式です。
画像の階調を比較的自然に残しやすく、写真やグラデーションをディザリングしたい場合に向いています。
Atkinson
Atkinsonも誤差拡散法の一種ですが、Floyd–Steinbergとは誤差の分配方法が異なります。
階調を完全になめらかにつなぐよりも、明暗の差がやや強く残るため、クラシックなMacintoshやレトロコンピューターを思わせる、くっきりとしたディザリング表現に向いています。
Bayer
Bayerは、あらかじめ決められた規則的なパターンを使ってピクセルを配置する「Ordered Dithering」の一種です。
Floyd–SteinbergやAtkinsonのように周囲へ誤差を拡散しないため、一定の繰り返し模様が現れやすいのが特徴です。
規則的なピクセルパターンや、幾何学的なレトロ表現を作りたい場合に適しています。
1bit・グレースケール・カラーの違い
1bit
1bitモードでは、「暗部の色」と「明部の色」の2色だけを使って画像を表現します。
黒と白に設定すれば典型的なモノクロディザリングになり、任意の2色へ変更すればデュオトーンのような表現も作成できます。
シンプルでコントラストの強いレトロ表現を作りたい場合におすすめです。
グレースケール
グレースケールモードでは、元画像の明るさを指定した階調数へ減らし、白・黒とその中間の灰色でディザリングします。
色を使わずに写真の陰影や立体感を残したい場合や、1bitよりも滑らかなモノクロ表現を作りたい場合に向いています。
カラー
カラーモードでは、元画像の色を一定の階調数へ減らしながらディザリングします。
1bitより多くの色を使用できるため、写真の色味や雰囲気を残しながら低色数化できます。
レトロゲーム風のカラー画像や、色数を抑えたピクセル表現を作りたい場合に向いています。
ディザリングとハーフトーンの違い
ディザリングとハーフトーンは、どちらも限られた色や点を使って階調を表現する方法ですが、仕組みが異なります。
ハーフトーンは、主にドットの大きさや間隔を変えることで明暗を表現します。新聞・漫画・ポップアートのような網点表現に向いています。
ディザリングは、ピクセルの色や配置パターンを変えることで中間色や階調を表現します。レトロゲーム・ピクセルアート・低色数グラフィックのような表現に向いています。
ディザリングをきれいに仕上げるコツ
写真の階調を残したい場合
Floyd–Steinbergを選び、ピクセルサイズを小さめにします。
カラーモードを「カラー」にする場合は、階調数を少し高めにすると元画像のグラデーションや色味を残しやすくなります。
レトロ感を強くしたい場合
Atkinsonを選び、ピクセルサイズを少し大きめにすると、ピクセルの存在感が強くなります。
1bitモードと組み合わせると、古いコンピューター画面のような表現を作りやすくなります。
規則的な模様を見せたい場合
Bayerを選ぶと、一定のパターンが繰り返されるディザリングになります。
単純なグラデーションや、背景素材として使う画像との相性も良いです。
画像が細かすぎて効果が分かりにくい場合
ピクセルサイズを大きくしてください。
高解像度の写真を小さな画面で表示している場合、ピクセルサイズが小さすぎるとディザリングの模様が見えにくいことがあります。
よくある質問
Floyd–Steinberg・Atkinson・Bayerはどれを選べばいいですか？
自然な階調を残したい場合はFloyd–Steinberg、レトロでくっきりした表現にしたい場合はAtkinson、規則的なパターンを作りたい場合はBayerがおすすめです。
迷った場合は、初期設定のFloyd–Steinbergから試してください。
1bitとは何ですか？
このツールの1bitモードでは、画像を2色だけで表現します。
「暗部の色」と「明部の色」を変更することで、任意の2色を使ったディザリング画像を作成できます。
カラーのままディザリングできますか？
はい。
カラーモードで「カラー」を選択すると、元画像の色を残しながら低色数化し、ディザリング加工できます。
階調数を小さくするとどうなりますか？
階調数を小さくすると使用される明暗や色の種類が減り、より強い低色数・レトロ表現になります。
値を大きくすると使用できる明暗や色が増え、元画像に近い自然な仕上がりになります。
ピクセルサイズとは何ですか？
ディザリング処理を行うピクセルの粗さを変更する設定です。
値を小さくすると細かなディザリング、値を大きくすると粗く大きなピクセル表現になります。
加工前の画像と比較できますか？
はい。
プレビュー上部の「Before」と「After」を切り替えることで、元画像とディザリング加工後の画像を比較できます。
アップロードした画像はサーバーに保存されますか？
いいえ。
アップした画像はブラウザ内で処理され、サーバーに送信・保存されることはありません。
作成した画像は商用利用できますか？
個人利用・商用利用を問わず利用できます。
ただし、手持ちの画像をアップロードして加工した場合は、元画像の利用条件や著作権に従ってください。
