ドット絵の水・水面の描き方｜反射と波を3手順で

ドット絵の水面表現は、反射・ハイライト・揺らぎの3要素を足し算していく作業である。
ゲーム会社でドット絵を10年描いてきた中で、最初に背景の海を任されたときは青一色のベタ塗りでダメ出しを受けたが、反射とハイライトの帯を足した瞬間に水へと化けた。
横から見た海や池と、トップダウンのマップタイルでは見え方も描き方も別物で、前者はサインカーブ状の波と空の反射、後者は四辺がつながる小さな波模様をどう回すかが決め手になります。
動く水も難しく考える必要はなく、0-1-0-2のような往復ループと速度の調整だけで十分水らしく見せられるので、最後まで進めればゲームに置ける動く水タイルまで作れるようになるでしょう。

水面が「水らしく」見える3つの要素

水面を「水らしく」見せるコツは、反射・ハイライト・揺らぎを別々の役割として組み立てることです。
どれか一つでも抜けると、ただの青い面に寄りやすくなります。
さらに、水が透ける透明モードなのか、空を映す不透明な鏡面モードなのかを先に決めておくと、途中で描き込みが濁りに変わるのを防げます。

反射・ハイライト・揺らぎという3要素

反射は空や岸の形を拾い、ハイライトは光源を受けたきらめきを作り、揺らぎは波やさざ波の動きを見せます。
新人の頃に水面を10色以上で細かく塗って「泥水みたい」と言われたことがありますが、3色に減らして明度差をはっきりさせた途端、水として読めるようになりました。
水らしさは色数の多さではなく、役割の整理で決まるのです。
初心者ののっぺり問題も、明度差の不足と色数の使いすぎが原因になりやすいでしょう。

だからこそ、まずはベース、影、ハイライトの3色に絞るのがおすすめです。
青い影に紫を少し寄せ、ハイライトに緑や白を混ぜるヒュー・シフトを入れると、単調な青面から抜けやすくなります。
きらめきを増やしたいなら面全体に散らすのではなく、輪郭のはっきりした帯や点として置き、残りは静かに抑えるとまとまります。

透けて見える水と、鏡のように映る水

水には、水底が透けて見える透明な水と、空や周囲を鏡のように映す不透明な水面の2モードがあります。
浅い水や澄んだ水は前者に寄り、深い水や斜めから見た水は後者に寄るため、同じ場所に両方の描写を詰め込むと急に濁って見えます。
浅瀬と深場が混在する海マップを描いたとき、途中でこの切り替えを混ぜてしまい、水底と空が同居して破綻したことがありました。

この失敗が示すのは、模様が「何を表しているか」を先に固定する必要です。
水底の反射を描くのか、水面のさざ波を描くのかを決め、どちらか一方に寄せるだけで読みやすさが上がります。
透明感を見せたいなら水底の情報を残し、鏡面感を出したいなら周囲の映り込みを優先する、という切り替えが肝心です。

横視点と俯瞰で描き分ける理由

同じ水でも、横から見るか真上から見るかで波の向き、反射の有無、必要な処理が変わります。
横視点では空の反射とサインカーブ状の波が主役になり、波頭の下に少し暗い影を置くと立体感が出ます。
俯瞰ではループする小さな波模様が主役になり、32x32ピクセル・4フレーム前後の水タイルを前提に、上下左右4辺がつながる設計にしておくと破綻しにくいです。
まず構図を決めてから描き始めるのが鉄則だと言えます。

横視点なら水平の帯で水面を組み、奥の波ほど小さく密にすると遠近が生まれます。
俯瞰なら波模様を不規則に散らして繰り返し感を消し、岸や浅瀬は縁取りタイルと明度・彩度の調整で分けると読みやすいです。
水面は少ない要素で強い明暗を作り、きらめきは全体の2割ほどに絞ってみてください。
そうすると、どの角度でも水らしさが崩れにくくなります。

色数を絞る水面パレットの作り方

水面の色数は、最初から増やしすぎないほうがまとまります。
ベース、影、ハイライトの3色を土台にして、慣れてきたらベースと影の間、影と最暗部の間へ1色ずつ足し、4〜5色に広げるのが扱いやすい流れです。
色を増やす目的は派手さではなく、階調を滑らかにして水深を見せることにあります。

ベース・影・ハイライトの3色から始める

水面の基本パレットは、ベースの中間の青、暗い影、明るい水色〜白のハイライトで組むと扱いやすいです。
Asepriteで水パレットを毎回ゼロから作っていた頃は、少しずつ色味がぶれて画面全体の統一感が崩れやすかったのですが、3色の水パレットをテンプレート化してからは制作速度も安定感も上がりました。
水は反射・ハイライト・揺らぎの足し算で見せる素材なので、まず色を絞って「何を置くか」を明確にしたほうが、のっぺり感と濁りを避けやすいのです。

慣れてきたら、ベースと影の間に1色、影と最暗部の間に1色を足して4〜5色構成にすると、波の段差が急すぎず、面のつながりが自然になります。
深い水ほど暗いベースに寄せ、浅い水ほど明るく彩度高めに振ると、水深の違いも読み取りやすくなるでしょう。
明度差はHSVの明度（V）で確認し、ベースとハイライトが近づきすぎないようにしましょう。

ヒュー・シフトで青の単調さを消す

純粋な青だけで明暗を作ると、どうしても無機質で濁って見えます。
そこで効くのがヒュー・シフトです。
影側を紫寄りに、ハイライト側を緑や白寄りに少しずらすだけで、同じ青系でも深みと透明感が立ち上がります。
ある海ステージでは、影を青のまま暗くしたときは沈んで見えなかったのに、紫を少し混ぜた瞬間に水深が出ました。
あの変化は、単なる色替えではなく、光が水の中を通る感じを一気に補強してくれた感覚でした。

この調整が効くのは、色数を増やすよりも先に「寒色の中で温度差を作る」からです。
青一色の段階差は、面がただ暗くなるだけで終わりやすいのに対し、紫や緑のわずかな偏りは、同じ明度でも空気感を変えます。
ヒュー・シフトは派手な装飾ではなく、のっぺりを消すための土台づくりだと考えると使いやすいです。
まずは影を紫寄り、ハイライトを緑や白寄りにしてみてください。

Indexedモードでパレットを固定する

ドット絵のパレットは、混色のための作業台ではなく、使った色を保管する記憶領域として扱うと整理しやすいです。
画面上の色がすべてパレットに揃っている状態なら、後から影だけ少し紫へ寄せる、ハイライトだけ少し明るくするといった調整も崩れにくくなります。
AsepriteならColor ModeをIndexedにしておくと、画面とパレットの色が連動しやすく、仕上げ段階での一括調整も見通しがよくなります。

この管理方法の利点は、色そのものより「色の役割」を保てることです。
ベースは面を支える色、影は奥行きを沈める色、ハイライトは反射を受ける色と決めておけば、色を差し替えても構造が崩れません。
水面のように揺れや反射が多い題材ほど、色管理が曖昧だとすぐ濁るので、Indexedモードで固定しておく運用がおすすめです。
まずは3色テンプレートを用意し、必要になったら4色目、5色目を足す形で育ててみてください。

【横視点】波打つ水面の基本の塗り

横から見た波打つ水面は、まず面として塗り、その上に稜線の流れを通すと形が決まりやすいです。
波の並びをランダムに置くより、サインカーブを意識した緩やかなうねりを先に引いたほうが、海らしいリズムが出ます。
横スクロールアクションの海面背景でも、最初は波をばらばらに置いて落ち着かない画面になりましたが、アタリ線を1本入れてから波を乗せると一気にまとまりました。

サインカーブで波の稜線を引く

海面の波を横から見ると、稜線は正弦波に近い流れになります。
ここで大切なのは、細部から描き始めず、水面全体のベース色を先に敷いてから、緩やかなカーブで波の位置を決めることです。
リズムの骨組みが最初に見えているだけで、波同士の間隔や高さに迷いが出にくくなります。

サインカーブをアタリとして使うと、波の山と谷が自然に交互へつながり、画面の流れも整います。
直線を細かく刻むだけだと波がぎこちなく見えますが、曲線の傾きが少しずつ変わるだけで、水の動きとして納得しやすくなるのです。

波頭の下に影、奥は小さく密に

白い波頭のすぐ下に1段暗い影色を置くと、波は手前にせり出して見えます。
これは波そのものに厚みが出るからで、上面の白さと下面の暗さが分かれるほど、波頭の丸みが読み取りやすくなります。
谷の側には反射光が溜まりやすいので、点のハイライトを少し散らすと、暗部だけで潰れずに水面らしい抜けが出ます。

夕暮れの海を描いたとき、奥の波まで同じ大きさのまま置いてしまい、どうしても平面的でした。
そこで水平線側を1ドット線まで詰めるように調整すると、手前の波との差がはっきりして、急に遠近が立ち上がったのです。
前景は大きく、奥は細く密に。
これだけで画面の奥行きはかなり変わります。

水平の帯を意識して面を埋める

水面は、基本的に横方向の帯として捉えると安定します。
止まった海や池では特にこの考え方が効き、縦に流れる筋を強く入れると川や滝の印象へ寄ってしまいます。
面を一気にベタ塗りするのではなく、横の帯を少しずつ埋めるように色を置くと、塗りの中に自然な揺らぎが残るのです。

アンチエイリアスは、波の稜線全体にかけすぎないほうがよいでしょう。
曲線の角だけをなだらかに整え、水面のきらめきはあえてカクッとした輪郭を残すと、ドット絵らしさが保てます。
波の形を滑らかにしすぎると輪郭がぼけやすいので、きれいさよりも読みやすさを優先して塗ってみてください。

【俯瞰】ゲーム用の水面タイルを描く

水面タイルは、まず1枚を単体で成立させ、そのまま敷き詰めたときに破綻しない設計から始めるのが近道です。
トップダウンRPG向けなら32x32ピクセル前後、4フレーム程度の規模感が扱いやすく、16x16でも作れますが、波のきらめきや細かなさざ波を入れる余白を考えると32x32のほうが組み立てやすいでしょう。
私は自作RPGで水タイルを1枚だけ繰り返したら市松模様のように柄が立ちすぎ、あとから波のハイライト位置を数パターンずらして散らしたことで、ようやく自然な水面に寄せられました。

タイルサイズとループの大原則

シームレスな水面を作るには、ベースの繰り返しテクスチャが上下左右の4辺すべてでループしている必要があります。
ここが崩れると、単体ではきれいでもマップ上で並べた瞬間に継ぎ目が出ます。
AsepriteのタイルモードやPyxel Editのように、敷き詰めた状態を見ながら描ける環境を使うと、端の処理を確認しながら修正できるので、結果として完成が早くなります。
単体表示だけで描いていた頃は、どこかで必ず継ぎ目が出ていましたが、ループ表示しながら作るようにしてからは、その場でつながりを見て直せるようになりました。

繰り返しの規則性を崩す散らし方

水は均一に見せるほど、逆に「同じ柄の繰り返し」が目につきます。
そこで効いてくるのが、小さな波模様やきらめきを不規則に散らすことです。
左右対称や等間隔を避け、明るい点を少しずつずらすだけでも、画面全体のリズムがやわらぎます。
要素は増やしすぎず、少数のモチーフをどう散らすかに集中したほうが、結果として水らしさが出ます。
実際、波のハイライトを数パターンに分けて位置を変えると、単調さが消えて水面に奥行きが生まれます。

岸・浅瀬との境界を整える

水タイルは、水の真ん中だけ作って終わりではありません。
岸や浅瀬との境界を別タイル、つまり縁取りで処理すると、四辺と四隅のつながりが自然になります。
基本の水タイルの端を削り、岸に接する辺・角のバリエーションを用意しておくと、陸と水の境目が急に切れず、地形として読めるようになります。
浅瀬は明るくして彩度を少し上げ、深場は暗く沈めると、水深の差が視覚的に伝わります。
水面単体の完成度だけでなく、境界をどう接続するかまで含めて設計するのが、ゲーム用タイルではおすすめです。

反射を作る：反転コピーとずらし

水面の反射は、まず上下反転したコピーを土台にするところから始まります。
空でも岸でもキャラクターでも、いったん水面の下へ正確に落とし込めば、静止した鏡像としてはもう成立するからです。
そこへ少しだけハイライトを足すと、ただの転写ではなく「映り込み」に見えてきます。

上下反転コピーで土台を作る

水面に映る対象は、基本的に上下反転して置くのが出発点です。
形が合っていない反射は、どれだけ後工程を重ねても不自然さが残ります。
湖に映る山を描いたときも、最初に完全な鏡像へ寄せて土台を作ったからこそ、後から崩す場所が見えました。
まずは正確に反転させる。
ここが一番の近道です。

静止した水なら、その反転コピーに少しハイライトを足すだけでも十分に見えます。
水面は自分で光っているのではなく、上の景色を受けて返しているだけなので、最初の段階で「位置が合っていること」が何より効くのです。
反射を描く工程の本質は、足し算よりも土台の整合性だと言えるでしょう。

行ずらしで揺らぎを加える

反転だけだと、見た目は鏡そのものです。
そこで反射部分を1行、あるいは数行ごとに数ピクセルずつ横へずらすと、水面が細かく揺れているように変わります。
ずらし幅を毎回同じにせず、少しだけ変化をつけると、さざ波の揺れが単調になりません。
湖の山を描いたとき、完全な鏡像では固かったのに、行ずらしを入れた瞬間に「水に映った山」へ変わった手応えがありました。

このずらしは、ただ輪郭を崩す作業ではありません。
反射は実物の複製ではなく、水面というフィルターを通った結果だからです。
キャラが水辺に立つカットでも、同じ処理が効きます。
山や凸凹がある場所では、見た目の高低差に比例して反射の位置を横へオフセットすると、盛り上がった波の下でぐにゃりとずれる感じまで自然につながります。
平らな部分は素直に映り、起伏のある部分だけが揺れる。
この対応関係が、説得力の差になります。

反射は暗く・低彩度に整える

反射は本体より暗く、彩度も少し落とすのが鉄則です。
水面は光を一部しか返さないので、元の色をそのまま入れると浮いて見えます。
キャラが水辺に立つカットでも、反射をそのままの明るさで入れると本体と区別がつかず、1段暗くした瞬間に水面へ沈みました。
空の反射なら一段暗い空色、岸の反射なら少しくすませた色に寄せるだけで、画面全体の空気が整います。

見る角度もここに直結します。
真上から見るほど反射は弱くなり、水底が透ける方向へ寄ります。
浅い角度、つまり横から見るほど反射は強くなって鏡面に近づきます。
同じ水でもカメラ角度で反射量を変えると、構図に合った水面になるのです。
反射を「何を映すか」だけでなく、「どれだけ返すか」まで調整してみてください。

ハイライトとコースティクスで透明感を出す

光源側の波頭に白から空や夕日の環境光色へ寄せたハイライトを置くと、水面のきらめきがいちばん自然に立ち上がります。
均一な点をばらまくより、太さの異なる斜めの帯で入れたほうが波の流れと噛み合い、揺れながら反射している感じが出るからです。
以前、画面全体にハイライトを均等に打って「ノイズみたい」になったことがありましたが、光の帯を1〜2本に絞るだけで、急にメリハリが生まれました。
水面の8割は静かに保ち、見せたい場所だけを光らせるのがコツです。

光源側へ寄せるハイライトの置き方

ハイライトは、光源側に寄せて波頭へ乗せるとまとまりやすいです。
光源と反対側まで同じ密度で光を置くと、面全体がうるさくなり、どこに視線を集めたいのかがぼやけます。
白そのものを置くよりも、空の青や夕日の橙を少し混ぜた明るさにすると、周囲の空気を拾った反射として見えやすくなるでしょう。
細い帯、太い帯、途切れた短い帯を混ぜると、単調なドット列ではなく波のうねりとして読めます。

帯の向きも大切です。
斜めに走る帯は、水面の斜面に沿って光が流れている印象を作りやすく、平行に並べた点より動きが出ます。
特に波頭の上端や反射のへりに少しだけ強い光を置くと、そこが視線の起点になります。
全部を同じ強さで塗るより、強弱をつけたほうがリズムが生まれるのです。
帯を1本で済ませず、幅を変えた2本前後に分けると、密度を上げすぎずに見栄えを確保できます。

コースティクスで水底を光らせる

浅い水や澄んだ水では、水底にコースティクスを散らすだけで透明感が一段上がります。
水面の模様だけでは「表面がある」ことは伝わっても、「その下に光が届いている」感覚までは出しにくいからです。
南国の浅瀬を描いたときも、水面の波だけでは深さが出ませんでしたが、水底に明るい網目を散らした瞬間、透き通ったエメラルドの海になりました。
ここで効くのは、水面とは別レイヤーとして考えることです。

コースティクスは、水底にある不規則な線や点として置くと説得力が出ます。
波紋そのものをなぞるのではなく、屈折した光が底でほどけた結果として見せるのがポイントです。
網目が細かすぎると硬く見えるので、線の切れ方や点の間隔に少しばらつきを入れると自然になります。
浅い場所ほど明るく、少し深くなるにつれて控えめにすると、水の厚みが感じられるでしょう。

ディザリングで階調をつなぐ

明暗の境界が硬すぎるときは、ディザリングで階調をなじませると滑らかです。
ベースとハイライト、ベースと影のあいだに市松状の点を少しずつ挟むと、色数を増やさなくてもグラデーションのような柔らかさが出ます。
とくに水面は、反射が急に切り替わると人工的に見えやすいので、境目だけを細かくつなぐ処理が効きます。
全面に広げる必要はありません。

ただし、打ちすぎるとザラつきが前に出ます。
だからこそ、ディザは境界の硬さが気になる場所にだけ絞って使うのがいいです。
ハイライトのへり、影に落ち込む直前、色が切り替わる帯の内側など、視線が止まりやすい場所に少量入れると、面のつながりが保たれます。
水面の8割は静かに残し、残りの2割で光を動かす。
そう考えると、ディザもハイライトも迷いにくくなります。

水面を動かす：2〜4フレームのアニメ

水面のループは、派手に動かすより少ないフレームで位相をずらすほうが自然に見えます。
止まった水なら 0-1-0-2 の往復パターンが扱いやすく、フレーム0を基準に少しだけ片側へ寄せて戻し、次に逆へ振るだけで、水位を保ったまま揺らぎを作れます。
2フレームでも条件が合えば十分に水に見えるので、まずは動きの量を絞ってみてください。
速度の詰め方も仕上がりを左右します。
速すぎるとノイズに、遅すぎるとカクつきに見えるため、フレーム数を増やす前にテンポを合わせるのが。

0-1-0-2 ループで揺らぎを作る

0-1-0-2 の往復は、最初に基準形を置いてから、片側へ少し動かし、元へ戻し、今度は反対側へ振る構成です。
水面は高さそのものより、輪郭やハイライトの位置が少しずつずれるだけで動いて見えるため、この小さな差分が効きます。
初めて動く水タイルを作ったときにフレームを8枚まで描いたのに不自然で、結局 2フレームの 0-1-0-2 に減らして速度を詰めたらいちばん水に見えた、という経験はまさにここにつながります。
ミニマルに削るほど、余計な揺れが消えて落ち着くのです。

帯を横に流す簡単アニメ

ハイライトや反射の帯は、フレームごとに横へ1ドットずつスクロールさせるだけでも動きます。
波模様全体を上下左右に1ドットずつ循環させる方法なら、水面の高さを変えずにループできるので、俯瞰タイルと相性が良いでしょう。
見た目の変化は小さくても、帯の位置が連続して変わると、静止画の規則性が崩れて「流れている」印象が立ちます。
まずは帯だけを動かし、次に模様全体をずらしてみてください。

速度調整はここでも効きます。
帯の移動が速すぎるとちらつきが前に出てノイズっぽくなり、遅すぎると止まって見えるため、1ドットの移動量でも十分に見える間隔を探すのが先です。
フレームを増やせば解決するとは限りません。
むしろ少ない枚数で気持ちよくつながる速度を見つけたほうが、作業も確認もしやすくなります。

滝・流れ・飛沫の動かし方

滝や流れる川は、横視点の止水とは別の考え方で組み立てます。
縦方向に明暗の帯を流し、下に行くほど帯をたわませて暗くし、最下部で白い点の飛沫に砕くと、落下の勢いが読み取りやすくなるからです。
数フレームでその流れをループさせれば、密度のある動きになります。
さらに、古いアニメ由来の上の水レイヤーを50%の不透明度に落とした中割りフレームを挟むと、輪郭が硬くなりすぎません。
実際、全フレームをくっきり描いて硬く見えていた滝が、半透明の中割りを1枚入れただけで一気に滑らかになりました。
ここは。
流れの芯を残しながら、境目だけを柔らかくしてみてください。