ドット絵の透明・ガラス表現テクニック

ドット絵の透明表現は、「ガラスを何色で塗るか」ではなく、透過・反射・屈折の3要素をどう組み立てるかで決まります。
32x32 のガラスのコップを灰色一色で塗ってしまうと、どうしても重たい塊に見えてしまいますが、背景の色が透け、光が小さく映り込み、縁や底で背景がわずかにずれるだけで、透明感ははっきり立ち上がるのです。
市松模様のディザリングで約50%の半透明を作れることも、ドット絵ならではの強みであり、限られた色数の中でも「見せたい情報」を整理すれば表現はぐっと安定します。
Aseprite などのツールで不透明度、カラーモード、ディザブラシまで扱いながら、コップ、窓、宝石、ポーションへ応用できる形で進めていきましょう。

透明感は3つの要素でできている

透明感は、ただ明るい色を置けば生まれるものではありません。
見えているのは、ガラスの向こうの背景が透けた情報、表面に映り込む光の反射、厚みの中でずれた背景という3つです。
コップを中間の灰色で塗りつぶすと、途端にただの灰色の円柱になるのはそのためで、まずこの3要素を分けて考える必要があります。

透過：背景がガラス越しに見える

透過は、ガラスの向こう側にある背景がそのまま、あるいは少し弱まった形で見える性質です。
正対する平らな面ほど背景がよく透けるので、その面は色を濃く塗るのではなく、むしろ透明度を高く保つ発想が基本になります。
背景に格子柄を置き、その線を薄く拾った瞬間に「透けて見える」と感じられるのは、透明感が物体の色ではなく、背後の情報の見え方で決まるからでしょう。

ドット絵ではここにグラデーションが使えません。
だからこそ、色を混ぜるのではなく、限られた色数とドットの配置だけで背景を残す設計が要ります。
灰色で面を埋めると背景の存在が消え、素材の質感が読めなくなります。
反対に、背景の線や面を少し残して見せるだけで、ガラスらしさは一気に立ち上がるのです。

反射：光源とハイライトが映り込む

反射は、周囲の明るい部分や光源がガラス表面に映り込む現象です。
鋭く小さい白のハイライトがその代表で、面の角度が急な場所ほど強く置くと、硬い質感が生まれます。
ガラスは無色に見えても、実際には周囲の色を映す存在であり、白だけを置くより、背景の明るさとの関係でハイライトを決めるほうが自然です。

角が立ったコップや縁の薄い部分では、反射が視線を拾いやすくなります。
曲面ならハイライトを1pxずつわずかに湾曲させると、平たい塗りでは出ない張りが出ます。
要するに、反射は飾りではなく、面の向きと厚みを読むための手がかりです。
透過だけでは眠い画面になるので、ここで鋭い明部を入れて、輪郭を締めてみてください。

屈折：ガラス越しの背景がずれて見える

屈折は、ガラスの厚みを通った光が曲がり、背景の直線がずれて見える現象です。
ストローをグラスに挿すと折れて見えるあの違和感がまさにそれで、これを描けると一気に「厚みのあるガラス」に見えます。
中空のコップなら縁や底の近くで背景を1pxほどずらし、中実の宝石やビー玉なら上下反転気味の大胆なずれにすると、塊としての存在感が強まるでしょう。

この屈折を入れると、単なる透明な輪郭ではなく、内部に物理的な厚みがあると伝わります。
しかもピクセルグリッドでは滑らかな変形ができないため、ずれ方をどこに集中させるかが勝負になります。
ディザリングはその前段で、透明から不透明へ、明部から暗部へ移る境界を支える土台です。
色を増やせない制約こそが、ガラスを「どう見せるか」をはっきりさせるのです。

ディザリングで半透明を作る

ディザリングは、2色のピクセルを交互に置いて、目の距離で中間色や半透明に見せる技法です。
色数を増やせないドット絵では、ガラスや水の「透け」を作るための中心的な手段になります。
まずは市松50%を基準にすると、半透明がどう成立するかをつかみやすいでしょう。

市松50%で基本の半透明

市松（チェッカーボード）パターンは、1pxごとに2色を交互に並べるため、見た目の密度が最も素直に50%へ近づきます。
ガラスの胴をこのパターンで塗ると、背景がうっすら透けて見え、そこで初めて「ただの灰色の塊」ではなく半透明として成立します。
2色のピクセルを目が平均して拾うからこそ、少ない色でも中間色のような印象が生まれるのです。

この段階は、透明表現の入口としてとても分かりやすい。
反射ハイライトや屈折を足す前でも、まず背景色とガラス色の関係が見えてきます。
ガラス越しに何が透けて見えるのかを確認するには、最初に市松50%を置いてみてください。

密度を変えて透明度をコントロールする

透明度をさらに高めたいなら、ディザの密度を下げます。
市松の1/2から1/4、1/8へとガラス色のピクセルを間引くほど、背景が見える面積が増え、より薄いガラスになります。
密度と透明度がそのまま対応しているので、どこまで透かしたいかをピクセル数で決められるのが強みです。

ハイライトの周辺だけ密度を段階的に下げてみると、光がにじむような滑らかな変化が出ます。
べた塗りのままでは硬く見える部分でも、遷移帯にだけディザを敷くと、屈折や反射のつながりが自然になります。
薄い部分から濃い部分へ、しましょう。
グラデーションを作る感覚で扱うのがおすすめです。

ベイヤーマトリクスとノイズの使い分け

市松模様は便利ですが、画面の中で規則性が強く出ると目障りに見えることがあります。
そんなときは、ベイヤーマトリクスのような整然とした階調パターンに切り替えるか、ノイズ状の不規則配置に寄せると、ディザそのものの主張が和らぎます。
どちらも「透明に見せる」役割は同じですが、前者は制御しやすく、後者は有機的で自然です。

ガラスや水の面積が広い場面では、規則模様の硬さがかえって素材感を壊します。
そこでノイズ寄りにしてみてください。
特に面全体ではなく、明部から暗部へ移る境界だけを柔らかくするなら、パターンが見えすぎず、透明感だけを残しやすくなります。
場面に応じて使い分けるとおすすめです。

背景を透かして見せるテクニック

ガラス越しの背景は、まず背景そのものをしっかり描いてから、その上にガラスの薄い色を重ねることで初めて成立します。
背景レイヤーが先にあり、そこへ中間色をディザで置くと、色が混ざったような「透けた色」になり、表面の向こうに空間があると読めるのです。
特に視聴者に正対する平らな面ほど背景が見えやすいので、窓の中央のような部分は透明度を高め、描き込みを抑えてしまいましょう。

ガラス越しの背景の作り方

窓ガラスの中央をあえて描き込みすぎず、背景をそのまま見せると、かえって「そこにガラスがある」と伝わります。
全部を塗ってしまうと面としては埋まりますが、透過の抜けがなくなり、ただの色面に見えやすいからです。
ガラスは“描く”というより、背景の見え方を管理する発想が合っています。
平面で正対する部分ほど透明度を高くして、背景の情報を素直に残してみてください。

重なり部分の色をずらして奥行きを出す

ガラスと背景が重なる場所は、背景色をそのまま使わず、少し暗めで寒色寄りにずらすと自然になります。
ガラス越しでは光がわずかに減衰し、色もほんの少し変質して見えるため、明度と色相に小さな差を入れるだけで奥行きが出るのです。
実際に背景をそのまま置いたときは平板でしたが、1段暗い寒色へ差し替えた途端、奥に空気が通るような感触が生まれました。
ここで効くのが、背景にガラスの中間色をディザで重ねる処理です。

レイヤー分けで透過量を調整する

背景レイヤーとガラスレイヤーを分けておくと、透過量の調整が驚くほどやりやすくなります。
ディザの密度や色の濃さを後から変えたい場面では、背景を独立して持っているだけで修正の自由度が残るからです。
一枚絵に詰め込むと、透明感を少し上げたいだけでも下地ごと崩れやすくなります。
レイヤーを分けて管理し、背景・ガラス・重なり部分を切り分けて調整してみてください。

ハイライトと反射で「ガラスらしさ」を出す

ガラスのハイライトは、面の角度が急な場所ほど強く入り、小さく鋭い白で置くと硬質さが立ち上がります。
コップの縁や球面の肩、底の厚みが見える箇所に反射を集めると、ただ光っているだけではない「つるっとした硬さ」が出るでしょう。
黒い縁取りで輪郭を囲うより、明度差で面を分けて反射の置き場を決めるほうが、素材感は自然になります。

鋭いハイライトの置き方

ハイライトは広く塗るより、まず純白に近い小さな点を優先して置くのが基本です。
面の角度が急な部分ほど反射が強くなるので、コップの口元や球面の肩のように光を受けやすい位置へ寄せると、ガラスらしい硬さが生まれます。
白だけで足りないときは、白と背景色の中間色を1段挟むと馴染みやすく、最も鋭い点だけを純白1pxで残すと、輪郭の切れ味が保てます。
宝石や結晶でも考え方は同じで、面の境界を黒い線で区切るのではなく、明度差と小さなスペキュラハイライトで面を見分けるのが効果的です。

黒線で面を割っていた頃は、宝石が鈍く見えました。
ところが、各ファセットを明度差だけで分け、角に純白1pxを置く形へ変えると、同じ形でも一気に輝きが立ち上がったのです。
輪郭を描き込むより、光が当たる角を選ぶほうがずっと効きます。

曲面に沿わせるハイライト

コップの胴のハイライトを縦一直線に置くと、胴体は板ガラスのように見えます。
そこで1pxずつ位置をずらしながら緩く湾曲させると、反射が円筒の丸みに追従し、表面が回り込む感覚が出てきます。
ポーションの球部のような強い曲面でも同じで、直線のハイライトは平面化の原因になります。
曲率に沿ってわずかにずらすだけで、反射そのものが形の説明になり、立体感が格段に読み取りやすくなるでしょう。

実際、直線のまま置いたコップは硬い板に見えましたが、1pxずつ湾曲させた瞬間に円筒の丸みが戻りました。
ここは見た目の装飾ではなく、形状を伝えるための線です。
曲面ほど、そのずれが効きます。

縁と底の厚みを強調する

ガラスは薄い素材に見えても、縁と底では厚みの存在感が出ます。
特にリムのリング部分は、光が回り込みやすく、少し強めのハイライトを足すだけで口元が締まります。
底の接地部も同じで、ここに明るい反射が入ると、平たい接地ではなく、厚みを持った器として読めるようになります。
コップの輪郭全体を均一に光らせるのではなく、厚さが見える代表箇所へ集中させることが、立体感を出す近道です。

縁と底は、見た人が「そこにガラスがある」と最初に判断するポイントです。
反射が弱いままだと中身のない輪郭に見えますが、厚い部分だけを少し強めれば、素材の重さまで伝わります。
細部の差が効く部分ですね。

屈折でガラスの厚みを表現する

屈折は、ガラスの厚みと中身の存在感をいちばん手早く伝える処理です。
透明な面そのものを塗り分けるより、ガラス越しに見える背景の直線を縁の近くで1px程度ずらしたほうが、光が曲がって見えて「そこに厚みがある」と一瞬で伝わります。
まずは背景の線を少しだけ動かし、ガラスが空間をはさんで世界を押し曲げている感覚を作りましょう。

背景をずらして屈折を作る

屈折の基本は、見えている背景をそのまま描かず、ガラスの向こう側だけ1px横にずらすことです。
直線がほんの少し崩れるだけで、平面の板ではなく光学的な層として読めるようになります。
とくに格子や窓枠、棚の縁のような線が通る場所では効果がはっきり出るので、背景に「ずれ」を仕込むだけでガラスらしさが立ち上がるでしょう。

このとき大切なのは、ずらしを派手にしないことです。
輪郭の内側まで広く動かすと、ただの歪みや崩れに見えやすいので、まずは縁の近くから試して、どこで見た目が切り替わるかを確かめてみてください。

底と縁で歪みの強さを変える

ガラスの底や縁に近い部分ほど、厚みがあり光の進路も大きく変わるので、歪みを強めに入れると説得力が出ます。
中央の平らな部分はずれを小さく、底面や側面のカーブが強いところは1pxより少し強いずれにして、場所ごとに強弱を付けるのがコツです。
こうすると、同じガラスでも「薄い面」と「厚い塊」が読み分けられます。

実際、コップに挿したストローを水面で1pxずらして折れさせただけで、急に「水が入っている」と伝わる場面があります。
水面の楕円が見える位置と、水中部分の背景が一段ずれて見える位置を分けると、単なる容器ではなく液体を含んだ立体として読めるからです。
ストローのような直線は、そこで折れて見えると一気に説得力が増します。

中空ガラスと中実ガラスの描き分け

中空のコップや瓶は、内側に空気があるぶん背景のずれが比較的おだやかで、底や縁の歪みを中心に整えると自然に見えます。
中身のあるグラスでは水面の楕円を意識し、水面より下で背景の位置が変わることを忘れないほうがいいです。
中空か中実かで屈折の出方が違うため、同じ「透明」でも描き方は分ける必要があります。

ビー玉のような中実ガラスでは、背景を上下反転気味にずらしたほうが塊感が出ます。
最初は小さく試して、背景がまだ読める範囲で動かすと、透明な球体の中に別の密度が入ったように見えるはずです。
逆にずらしすぎると破綻してしまうので、1px・2pxの実験から始め、いちばん自然に見える境目を探してみてください。

ツールでの透明設定

Aseprite で透明を扱うときは、まずカラーモードで考え方を分けるのが近道です。
RGBモードとグレースケールモードではアルファ値0のピクセルが透明として扱われ、半透明を実データで持たせるか、ディザで疑似的に見せるかを先に決める必要があります。
インデックスカラーモードでは、パレット内の特定インデックスが透明色になるため、同じ「透明」でも保存される仕組みが異なります。
書き出し時の透明保持まで含めて設計すると、作業中の見え方と出力結果のズレを減らせます。

RGBモードとインデックスモードの透明の違い

RGBモードでは、透明はピクセルごとのアルファで管理されるので、0に落とした部分は素直に抜けます。
グレースケールモードも考え方は同じで、半透明をそのまま残せるぶん、境界の柔らかさや薄い影の再現に向いています。
対してインデックスカラーモードは、パレットの中から透明用のインデックスを決めて扱う方式です。
レトロゲーム向けの色数制限作品ではこちらを使うことが多く、RGBと同じ感覚で塗ると、透明のつもりが別色として残る場面があります。

この違いを意識しておくと、最初の設計で迷いません。
半透明を実アルファで持つのか、あえてディザで見せるのかを先に決めるだけで、その後のレイヤー構成も出力の想定も揃います。
インデックスモードで透明色の指定を間違え、背景が黒く出力されたことがあり、それ以来、書き出し前にカラーモードと透明インデックスを確認する習慣がつきました。
小さな確認ですが、事故の防止効果は大きいです。

レイヤー不透明度とブレンドモードでディザを作る

ディザは地のレイヤーに直描きするより、専用レイヤーを分けたほうが扱いやすいです。
不透明度を50%にしてブレンドモードを併用すると、粒の粗さを保ったまま質感のあるディザが作れます。
手描きの補修も入れやすく、濃さの調整だけを後から詰められるので、修正のたびに土台を崩す必要がありません。
直描きして苦労した経験があるなら、切り替えの効果はすぐ実感できるはずです。

この方式は、影と中間色をつなぐ場面で特に使いやすいでしょう。
50%という基準があると、どこまで見せるかの判断がぶれにくく、作業中の見た目も安定します。
ディザを「描く」より「積む」感覚に変えると、後から一部だけ消したり、強弱を付けたりする調整が一気に楽になります。
おすすめです。

ディザブラシ・グラデーションツールの活用

市松模様やベイヤーパターンを敷くなら、ディザブラシやグラデーションツールを先に使うと時短になります。
1pxずつ手で置く方法は精密ですが、広い面を埋める段階では手数が多く、形の検討より作業量が先に増えがちです。
まずツールでベースを作り、そこへ手描きで崩しや偏りを足す流れにすると、機械的な均一さと手作業の味を両立しやすいです。

このやり方なら、質感の下地を短時間で作ってから、輪郭の近くや視線が集まる場所だけを重点的に整えられます。
ディザブラシでパターンを敷き、グラデーションツールで密度の変化を作ると、画面全体のトーンがつかみやすいです。
書き出し時は透過PNGならRGBモードのアルファ、スプライトシートなら透明インデックスの扱いを確認してから出力しましょう。
最後のひと手間で、制作中の見え方をそのまま保ちやすくなります。