グラデの縞（バンディング）を消す全工程｜原因から書き出し設定まで

2026.08.12

はじめに

なめらかなグラデーションを作ったはずなのに、書き出してみたら帯のような縞が見えている。明るさを調整したら、さらにくっきり出てきた。

この現象をバンディング（banding／縞）と呼びます。

やっかいなのは、作っている画面では見えないのに、書き出したり印刷したりすると出てくることです。しかも一度出てしまうと、あとから消すのはとても難しい。

この記事では、なぜ縞が出るのかという原因から、作るとき・書き出すときそれぞれの対策まで、順番にご紹介します。原因が分かると、対策の意味もすんなり入ってきます。

なぜ縞が出るのか

色は「256段階」しかありません

ふだん使っている画像は、ほとんどが8bitという形式です。これは、赤・緑・青のそれぞれを256段階で記録する、という意味です。

256段階と聞くと十分に思えますが、問題はそれを何ピクセルに引き伸ばすかです。

たとえば横1920ピクセルの画面いっぱいに、濃い青から薄い青へグラデーションを引いたとします。使える段階が仮に50段階しかなかったとすると、

1920ピクセル ÷ 50段階 ＝ 1段あたり 約38ピクセル

38ピクセルぶん、まったく同じ色が続くことになります。これが帯に見える正体です。人の目は「なめらかな変化」の中にある段差を見つけるのがとても得意なので、わずかな差でも縞として認識してしまいます。

縞が出やすい条件

面積が大きい … 引き伸ばすほど1段が太くなります
色の差が小さい … 「濃い青→やや濃い青」のような変化は段数が少なくなります
暗い部分 … 暗いところほど段差が目立ちます
同じ色相だけで作っている … 明るさだけの変化は段差が見えやすくなります

逆に言えば、この4つを避けるだけでかなり防げます。

対策①：作るときにできること

色相を少しずらす

「青→薄い青」のように明るさだけを変えるのではなく、「青→水色」のように色相もわずかに動かすと、段差が目立ちにくくなります。赤・緑・青の3つが別々に変化するぶん、段の境目がずれてくれるためです。

見た目の印象もリッチになるので、これは覚えておいて損のないテクニックです。

16bitで作業する

Photoshopなどでは、作業中だけ16bitに切り替えられます。段階数が桁違いに増えるので、作業中に色を調整しても段差が生まれません。最後に8bitへ変換して書き出すという流れにすると、途中の加工で縞が育つのを防げます。

ディザリングを有効にする

ディザリングは、段差の境目に目に見えないくらいの細かいノイズを撒いて、視覚的に溶かしてしまう技術です。段差そのものは消えていませんが、人の目には「なめらか」に見えます。

Photoshopのグラデーションツールには「ディザ」というチェックボックスがあります。ここを入れておくだけで、仕上がりがかなり変わります。

わざとノイズを足す

ディザだけで足りないときは、**ごく薄いノイズ（1〜3%程度）**を全体にかけると、段差が目立たなくなります。写真の粒状感に近い効果です。かけすぎるとザラついた印象になるので、「言われないと気づかない」くらいが目安です。

対策②：書き出すときの落とし穴

ここからがこの記事でいちばん大事なところです。

せっかくのディザが、圧縮で消されます

JPEGやWebPは「人の目に分かりにくい情報を捨てて軽くする」形式です。そして圧縮の仕組みから見ると、**ディザリングの細かいノイズは、まさに「捨てていい情報」**に見えてしまいます。

ディザで縞を消した  →  JPEG/WebPで圧縮  →  ノイズが削られる  →  縞が復活

「作ったときはきれいだったのに、アップしたら縞が出た」の多くは、これが原因です。

どうすればいいか

PNGで書き出す … PNGは情報を捨てない形式なので、ディザがそのまま残ります。グラデーションだけの画像ならファイルサイズもさほど大きくなりません。いちばん確実な方法です。
JPEG/WebPを使うなら、品質を上げる … 品質を下げるほどノイズから削られます。グラデーション画像は、写真より高めの品質設定にしてください。
圧縮ツールの「ノイズを整える」系の設定に注意 … 圧縮ツールの詳細設定には、ノイズの扱いを調整する項目があることがあります（Squooshの場合は WebP の詳細設定にある「Spatial noise shaping」がこれにあたります）。この値が高いとノイズをならしてしまうため、数値を下げるとディザが残りやすくなります。設定を変えて書き出し、拡大して見比べてみてください。

SNSにアップするときは、もうひと段階ある

SNSは、アップした画像をサービス側でもう一度圧縮します。手元できれいに書き出しても、投稿後に縞が出ることがあります。

対策は、アップする画像の品質をできるだけ高く保っておくことです。すでに圧縮された画像をアップすると、圧縮が二重にかかって縞が出やすくなります。

対策③：あとから縞が出てしまったとき

すでに書き出した画像に縞が出ている場合、きれいに戻すことはできません。段差の情報しか残っていないからです。

それでもマシにする方法はあります。

薄いノイズをかける … 段差の境目がぼやけて、目立ちにくくなります
少しぼかす … 全体が甘くなるので、文字が載っていない背景部分だけに使ってください
縮小する … 小さくすると1段の幅も縮むので、縞が見えにくくなります

ただし、いちばん確実なのは元のデータから作り直すことです。だからこそ、元データは必ず取っておいてください。

やってはいけないこと

書き出したあとに明るさ・コントラストを強くいじる

これがいちばん縞を育てます。256段階しかない画像を引き伸ばす操作なので、隠れていた段差が一気に表に出てきます。

明るさの調整は、必ず書き出す前に済ませてください。

小さい画像を拡大して使う

拡大すると1段の幅も一緒に拡大されます。最初から使うサイズで作るのが鉄則です。

印刷のときはどうなる？

印刷でも縞は出ます。インクの重なりで色を作る都合上、画面よりも段階が少なくなるためです。

300dpiで書き出す（画面用の3〜4倍の大きさ）
圧縮しすぎない
ディザやノイズを少し強めにかけておく

この3つで、かなり安定します。心配なときは、印刷所のテストプリントで一度確認するのがいちばん確実です。

よくある質問

自分のパソコンでは縞が見えません。大丈夫ですか？

**画面によって見え方が変わります。**安いモニターや古いスマートフォンでは、より段差が目立つことがあります。逆に、高性能なモニターだと縞が隠れて見えないこともあります。

確認するときは、画像を拡大して見る、明るさを一時的に上げて見る、この2つを試してください。隠れていた縞が浮かび上がります。

CanvasRootの素材でも縞は出ますか？

配布時点でなめらかに書き出していますが、ダウンロード後の操作で出ることがあります。とくに「明るさ・コントラストを強く上げる」「小さく保存し直す」「低い品質でJPEGにする」の3つにご注意ください。

SVGなら縞は出ませんか？

SVGはグラデーションを「計算式」として持っているので、拡大しても粗くなりません。ただし最終的に画面へ表示されるときには8bitに変換されるため、条件が悪ければ縞は出ます。SVGは「拡大に強い」であって「縞に強い」わけではない、と覚えておいてください。

ノイズを足したら、画像が重くなりませんか？

重くなります。ノイズは圧縮しにくい情報だからです。ただし、縞が出ている画像を軽く配るより、少し重くてもきれいなほうが価値があります。どうしても軽くしたいときは、ノイズを弱めにしてPNGで書き出すのが折衷案です。

まとめ

縞の正体は、8bit（256段階）を大きな面積に引き伸ばしたときの段差
作るときは、色相をずらす／16bitで作業／ディザをON／薄いノイズ
書き出すときは、PNGがいちばん安全。JPEG・WebPは品質を高めに
圧縮はディザを消す。「作ったときはきれいだったのに」の正体はこれ
書き出したあとの明るさ調整は厳禁
出てしまったら、元データから作り直すのがいちばん早い

縞は「運が悪かった」ではなく、理由のある現象です。仕組みが分かれば、次からは避けられます！