ドット絵で海を描く|水平線と波しぶきの手順
ドット絵で海を描く|水平線と波しぶきの手順
海のドット絵は、水面だけを塗れば成立するものではなく、水平線・遠近の色帯・波やしぶき、反射まで含めて一枚の風景として組み立ててこそ海らしさが立ち上がります。横スクロールアクションの海背景を任されたときも、水面の塗り自体はできていたのに全体が平坦で、水平線と色帯を先に敷く順序に切り替えた瞬間に奥行きが出ました。
海のドット絵は、水面だけを塗れば成立するものではなく、水平線・遠近の色帯・波やしぶき、反射まで含めて一枚の風景として組み立ててこそ海らしさが立ち上がります。
横スクロールアクションの海背景を任されたときも、水面の塗り自体はできていたのに全体が平坦で、水平線と色帯を先に敷く順序に切り替えた瞬間に奥行きが出ました。
海の奥行きは手前ほど濃く大きく、水平線側ほど明るく細く密にするルールで決まり、海面を3〜5本の横帯に分けて遠浅と深場を塗り分けるだけで構図が締まります。
白波、砕け波、波しぶきも役割を分けて置き、朝・昼・夕・嵐の環境光や海中のコースティクスまで差し替えていくと、同じ形でもまったく違う海に仕上がります。
海の風景は水平線・帯・モチーフの3層で組み立てる
海は水面の塗りだけで片づけず、水平線、遠近の色帯、波や白波、しぶき、反射という三層で組み立てると迷いません。
まず大きな構造を置き、その上に細部を乗せる順番にすると、画面全体が風景としてまとまりやすくなります。
新人時代に細かい波から描き込んで散らした経験があるほど、この順序の効き目ははっきり感じるはずです。
海全体を3層で捉える理由
海を「水の塗り面」と考えると、どこを描いても同じ青が続く単調な画面になりやすいです。
そこで水平線、遠近の色帯、モチーフという3層に分けると、空との境界、奥行きの変化、目を引く動きが役割分担され、手を入れる順番まで見えてきます。
手前ほど色が濃く大きく、水平線側ほど明るく細く密にする基本ルールも、この分解があるからこそ活きるのです。
色帯は3〜5本ほどで考えると扱いやすく、遠浅は明るく緑寄り、深場は暗く青寄りに振ると奥行きが立ちます。
中間青のベースに影2色とハイライト1〜2色を足した4〜5色から始めると、青一色ののっぺり感を避けやすいでしょう。
波頭の白波、海岸線に沿う砕け波、放射状に散る波しぶきも、同じ層の中で役割を変えて見せると整理しやすいです。
横視点(海岸からの眺め)と俯瞰
横視点の海では、水平線と空の反射が主役になります。
だからこそ、海岸や船から眺める場面では、水平線の位置を先に決めるだけで画面の呼吸が整うのです。
三分割構図で上から1/3か下から1/3に置くと安定しやすく、海面の広がりも読み取りやすくなります。
俯瞰、つまりトップダウンRPGの海マップでは、主役が変わります。
ここでは水平線が消える代わりに、四辺がループする小さな波模様や繰り返しのリズムが見せ場になるため、横視点と同じ感覚で描くと破綻しやすいです。
横視点は境界と反射、俯瞰は連続するパターン。
ここを分けて考えるだけで、構図の迷いはかなり減ります。
構図を先に決めてから描き始める
細部の波から入ると、波の形だけが先行して全体のバランスが崩れます。
水平線の位置を決め、次に色帯で奥行きを作り、それから波、白波、しぶきへ進むと、上位の構造が下位のモチーフを支える形になるでしょう。
新人時代に海背景を任されたとき、いきなり細かな波を並べて散らしたものを、水平線と色帯のアタリを先に置いてから描き直したら、同じ素材でも一気に海らしくまとまりました。
アタリ線を1本引くだけで画面がまとまるのは、海が構図の影響を強く受ける題材だからです。
まずどこに地平があるかを決め、手前と奥の差をはっきりさせてから、白波や反射を足していく。
これがいちばん再現しやすい流れで、描くたびにおすすめしたい手順になります。
横視点の海とトップダウンの海マップを同じ感覚で描こうとして破綻した経験があるなら、なおさら構図先行で進めてみてください。
キャンバスサイズと海用パレットの決め方
海を描くときは、まずキャンバス側で情報を受け止められる余白を確保し、次にその面積に見合う色帯を組むと安定します。
32x32でも成立はしますが、波や白波、水平線、反射を同居させるには窮屈で、64x64以上に上げたほうが遠近とモチーフの置き分けがしやすくなります。
1枚絵として奥行きまで見せたいなら、128x128も十分に選択肢になるでしょう。
海風景に向くキャンバスサイズ
海全体の風景は、キャラ1体よりも遥かに広い情報量を必要とします。
水平線を入れ、海面を横帯で分け、さらに波頭や白波のための細かな余白を残すと、32x32では要素が詰まりやすいのです。
実際に32x32で描こうとすると波と水平線が潰れやすく、64x64へ上げた瞬間に遠近も白波も置けるようになり、サイズ選びだけで描きやすさが変わると実感できます。
海は細部から積むより、広い面で構図を受け止めるほうが強い画面になります。
水深を表す色帯パレットの組み方
海の色は単なる青ではなく、水深を読ませるための色帯として設計すると機能します。
起点は中間青のベースに、暗い影2色と明るいハイライト1〜2色を足した4〜5色です。
浅瀬は明るく高彩度、深場は暗く低彩度へ振ると、手前と奥の差が見えやすくなります。
色を増やす目的は派手さではなく、階調を滑らかにつないで海面の厚みを見せることにあります。
慣れないうちは4〜5色に絞り、必要になったらベースと影の間に1色だけ差すと面のつながりが崩れにくいです。
| 層 | 役割 | 色の傾向 |
|---|---|---|
| 浅瀬 | 光を受けやすい前景 | 明るく高彩度 |
| 中間域 | 海面の基準色 | 中間青 |
| 深場 | 奥行きと沈み込み | 暗く低彩度 |
| 影 | 水深の切り替え | 暗い青〜紫寄り |
| ハイライト | 光の抜け | 明るい青緑〜白寄り |
ヒュー・シフトで深みを出す
純粋な青だけで明暗を作ると、海が平板に沈み、どこか無機質になります。
そこで影側を紫寄り、ハイライト側を緑〜白寄りへ少しずらすヒュー・シフトを入れると、同じ青系でも深みと透明感が立ち上がります。
影を青のまま暗くしても海が沈んで見えず、影に紫を少し混ぜた瞬間に水深が出る、という手応えは強いはずです。
ヒュー・シフトは飾りではなく、水の中を光が通る感じを補強する土台だと考えると扱いやすくなります。
ステップ1:水平線と遠近の色帯を敷く
水平線の位置が決まると、海の奥行きは一気に組み立てやすくなります。
三分割構図で画面の上1/3か下1/3に置き、水平線は1pxの細い線で取ると、空を広く見せる構図も海を主役にする構図も安定しやすいです。
境界には空色と海色の中間を1pxだけ挟み、硬い切れ目を避けてください。
水平線の高さを決める
水平線は、まず画面のどこで視線を受け止めるかを決める作業です。
上1/3に置けば海の面積が広がって開放感が出やすく、下1/3に寄せれば空の抜けが強くなります。
どちらに寄せるかは、空を見せたいのか、海を主役にしたいのかで選ぶとでしょう。
1pxの細さで取るのは、線そのものを目立たせるためではなく、遠景の輪郭を軽く置くためです。
水平線と空の境界には、中間色を1pxだけ挟むと自然になじみます。
ここをくっきり分けると貼り絵のように見えやすく、遠くの空気が抜けません。
夕暮れの海で奥の波まで同じ大きさ、同じ色で置いて平面的になったことがありますが、水平線側の帯を1段明るく細くしただけで、手前との差が生まれて急に遠近が立ち上がりました。
境界の1pxは小さいですが、効き方は大きいです。
手前から奥への色帯グラデーション
海面は上下3〜5本の横帯に分けると、波を描く前から奥行きの土台ができます。
理想は、手前が最も暗く、水平線側が最も明るいことです。
明暗を段階的に置くことで、視線は自然に奥へ流れますし、細かな波形がなくても空間が成立します。
帯の差が弱いと、広い面がただの青い板に見えてしまうでしょう。
この段階で大切なのは、波のディテールより先に「遠くほど軽い」という関係を固定することです。
3本なら大きな面の差を、5本ならよりなだらかな奥行きを作れます。
水平線際を最も明るく細くするのは、太い明帯にしてしまうと空との境界が浮きすぎるからで、1pxの明るさだけを残すほうが遠景として安定します。
色帯だけで遠近が成立している状態を目標にすると、後の描き込みがずっと楽になります。
遠浅と深場を塗り分ける
遠浅と深場は、同じ青でまとめずに明度と色相をずらして分けます。
遠浅は明度を上げ、彩度を10〜20%上げて緑寄りに振ると、砂浜近くの浅さが出ます。
深場は明度を下げ、青寄りに沈めると、沖へ向かうほど深く冷たい印象になります。
浅瀬のエメラルドと沖の濃紺という差がつくと、同じ構図でも海らしさがぐっと増します。
以前、遠浅と深場を同じ青で塗って「プールみたい」になったことがありました。
そこで浅瀬を緑寄りに明るく振ると、面の役割がはっきり分かれ、自然の海に近づいたのです。
色の違いは派手さのためではなく、場所の違いを見せるためにあります。
奥へ行くほど暗く、手前ほど明るい。
その関係を押さえるだけで、海面はずっと立体的に見えます。
ステップ2:波と白波(波頭)で海面に動きを出す
色帯を敷いたら、次は波のうねりで海面にリズムを入れます。
波頭を思いつきで散らすと海が騒がしく見えますが、先に流れの骨組みを決めてから乗せると、少ない要素でも水面が生きて見えるのです。
前景は動きを強く、奥は細かく静かに。
この差が、絵全体のまとまりを支えます。
サインカーブで波のうねりを引く
波の稜線は、サインカーブをアタリにして山と谷を交互につなぐと描きやすくなります。
ランダムに点を置くより、まず緩い曲線で位置を決めたほうが、波の向きに迷いが出ません。
実際、波をばらばらに置いて落ち着かない海面になったことがありますが、サインカーブの線を1本引いてから乗せ直すと、一気に視線の流れが整いました。
骨組みが先にあると、細部を足しても崩れにくいです。
白波(波頭)を光源側に乗せる
白波(波頭)は白〜空色で1〜2pxの短い帯として、光源側の稜線にだけ置きます。
海面全体に均等に散らすと泡だらけになってノイズが増えるため、光が当たる側に寄せて残りを静かに保つのが要点です。
白波を全面に散らして失敗したときも、光源側だけに絞り直した瞬間に、波が前へ跳ねる感じが戻りました。
さらに白波のすぐ下へ1段暗い影色を1px入れると、上面の白さと下面の暗さが分かれて厚みが出ます。
丸みが読めるほど、波頭は手前にせり出して見えるでしょう。
奥の波は小さく密にして遠近を出す
奥(水平線側)の波ほど小さく密に、手前の波ほど大きく間隔を空けると、波そのものが遠近表現になります。
前景は1〜2pxの帯で存在感を出し、水平線際は1ドット線まで詰めると、奥行きが自然に締まります。
サイズ差だけでなく、密度の差も効きます。
手前で波をゆったり見せ、奥へ行くほど細く詰める。
この整理ができると、海面は平坦な模様ではなく、空間をもった風景として読めるようになります。
ステップ3:海岸線・砕け波・波しぶきを描く
海岸線は、海と陸の境目を一気に切る線ではなく、泡と飛沫がかぶさって境界をにじませる場所です。
まず白〜薄水色の帯を海岸線に沿って1〜3pxで置き、縁をまっすぐにせず不規則に揺らすと、波が砂へ染み込む感じが出ます。
ここで泡の濃淡を場所ごとに変えると、打ち寄せた直後から引いた後までの流れが静止画の中に残るでしょう。
打ち寄せる砕け波と泡の帯
砕け波の泡は、海岸線に沿って白〜薄水色の帯を1〜3pxで置くのが基本です。
定規で引いたように直線へ寄せると、海と陸が硬く分断されて見えてしまうため、縁は不規則なギザつきを残し、泡が砂へ食い込むように見せます。
浅瀬側を少し明るくしておくと、泡が水面の上に乗っているのか、砂へ引いていく途中なのかが読みやすくなります。
泡は時間とともに消えるので、帯の濃さを一律にしないことが効きます。
打ち寄せた直後の部分は濃く、引いた後の部分は薄くすると、同じ海岸線でも動きの段階が見えてくるからです。
海岸線をまっすぐな白線で区切ったときに定規感が強く出たなら、まずこの濃淡の差を作り直してみてください。
波しぶき(飛沫)の散らし方
波しぶきは白の点を不規則に散らし、放射状に広げると勢いが出ます。
岩に当たる波や砕ける波頭の上に置き、上へ行くほど密度を下げると、飛び散った粒が重力で落ちていく流れまで感じられるのです。
等間隔に並べると人工的になりやすいので、点の大きさも位置も少しずつずらすと自然になります。
岩に当たる波しぶきを等間隔の点で打ったときに不自然だったなら、放射状のばらつきへ組み替えるのが近道です。
中心付近をやや密にして、上端ほどまばらにするだけでも、飛沫の勢いはかなり変わります。
点の間隔を崩すことが、そのまま風圧と衝突感の表現になるわけです。
砂浜・岩との境界を整える
砂浜や岩との境界は、縁取りタイルで段差を作ると整理しやすくなります。
浅瀬は明るく彩度高め、岩は暗く沈め、砂は明るいベージュにすると、海・浅瀬・陸の3段の明度差だけで地形が読み取れるからです。
境界が曖昧だと海岸の構造がぼけやすいので、色の差と段差を同時に立てるのがポイントになります。
海岸線をまっすぐな白線で区切ったときの不自然さは、境界を線として扱いすぎたことに原因があります。
縁を不規則にギザつかせ、泡の密度も場所ごとに変えたうえで、岩際には短い段差を入れると、波が砂に染み込む生きた海岸へ変わります。
砂と岩をただ塗り分けるのではなく、接触面そのものを描き込む意識で進めましょう。
ステップ4:天候・時間帯で海の色を変える
海の色は、構図そのものをいじらなくても環境光の差し替えで大きく変えられます。
朝・昼・夕・嵐の4パターンを分けるときは、ベースの色帯を保ったまま、空の色とハイライト、反射に乗せる色だけを切り替えるのが効率的です。
昼の海パレットをそのまま夕焼けに流用すると色が浮きやすいので、混ぜる色を整理しておくと作り分けが速くなります。
朝・昼・夕の暖色〜寒色の使い分け
朝は薄桃や薄橙のような淡い暖色、昼は明るく彩度の高い青、夕は橙から紫へ落ちるグラデーション、嵐は暗い灰青という具合に、時間帯ごとの寒暖をはっきり切り替えます。
ここで効いてくるのがハイライトです。
波頭や細かな反射に、その場の空気の色を少しだけ混ぜると、同じ海面でも朝のやわらかさ、昼の抜け、夕方の熱、嵐の冷たさが自然に立ち上がります。
ベースを塗り直すのではなく、光の乗り方を変える発想にすると、色数を増やさずに見え方を変えやすいでしょう。
実際、昼の海パレットのまま夕焼けを描こうとすると、全体が青っぽく残って夕景の熱が出ませんでした。
そこでベースはそのままにして、ハイライトと反射だけを橙寄りに差し替えると、同じ構図でも夕方の海に切り替わり、作業の無駄も減りました。
朝は柔らかい光を薄く散らし、昼は空の青を強め、夕は暖色を一点に寄せる。
おすすめの考え方です。
夕日の反射帯を縦に伸ばす
夕日の水面表現は、点のきらめきよりも、太陽から手前へ伸びる縦の反射帯で見せるほうが安定します。
反射を1〜3px幅の橙の帯として置くと、水平線の太陽が水面に映り込んで揺れている感じが出やすく、視線も自然に画面の奥から手前へ流れます。
点で散らすだけでは「光がある」印象で止まりやすいですが、帯にすると道筋が生まれるため、夕焼けの時間帯らしい密度が出るのです。
点で散らしたときは、どうしても『きらめき』に見えませんでした。
ところが、太陽から手前へ縦の橙帯を1本通しただけで、水面に映る太陽の道がはっきり立ちました。
幅を1pxから3pxの範囲で揺らすと、機械的になりすぎず、波の細かな凹凸にもなじみます。
ここは試してみてください。
見え方が一段変わります。
嵐の海:彩度を落とし波を荒くする
嵐の海は、晴天の海の延長ではなく、彩度を20〜30%落とした暗い灰青を基調に組み立てます。
白波の量を増やし、波を高くし、砕ける泡や飛沫を多めに入れると、静かな海面とは逆の緊張感が出ます。
色を暗くするだけでは重いだけで終わりますが、波の形と破片の量を同時に変えると、風の強さまで伝わる画面になります。
明るい海をそのまま暗くしただけでは、荒れ模様には見えません。
嵐では、光そのものが弱く、反射も鈍いので、白波のコントラストが主役になります。
だからこそ、暗い灰青の中に白い砕けを散らし、波の山を少し誇張するほうが説得力が出るのです。
晴天とは逆方向に振る、と覚えてしまうと扱いやすいでしょう。
おすすめです。
ステップ5:海中シーンとコースティクスで深さを出す
海中の表現で深さを出すなら、まず明度を上から下へ段階的に落とします。
水面近くは明るく澄んだ青、下へ行くほど青から紺へ沈めると、同じ面積でも水の厚みが立ち上がるからです。
南国の浅瀬を水面の波だけで描いたときは平たく見えましたが、底に向かって暗さを増した瞬間、空気ではなく水の中に入った感覚が戻ってきました。
海中の縦グラデーション
海中は、上が明るく下が暗いという単純な構造を押さえるだけで、画面の説得力が大きく変わります。
浅い海ほど光が届いて透明感が強く、深くなるほど光が減って青みが濃くなるため、縦の明度差そのものが水深の情報になるのです。
だから、水平に塗りつぶすよりも、上から下へ静かに沈むグラデーションにしたほうが、見る側は一目で奥行きを読み取れます。
海中を一様な青で塗って平面的だった絵も、この段差を入れるだけで空間が締まります。
水底のコースティクス
水底のコースティクスは、屈折した光が作る網目状の明るい線や点を、不規則に散らすのが基本です。
波紋をそのままなぞるのではなく、底でほどけた光として置くと、透明な水が通してきた光の気配が出ます。
浅い場所ほど明るく密に、深くなるにつれて控えめにすると、同じ海中でも水深の差が読み取れますし、網目が細かすぎて硬く見える失敗も避けやすいでしょう。
実際、南国の浅瀬を描くときに水底へ明るい網目を散らしただけで、透き通ったエメラルドの海に変わりました。
浮遊物で水中の奥行きを出す
上方、水面近くに明るい光の粒や泡を散らすと、水中に漂う空気感が生まれます。
粒の大きさを手前は大きく、奥は小さく変えると、視線の手前と奥が分かれ、海中の空間がいっそう立体的になります。
浮遊物は多すぎると濁って見えますが、少しだけ混ぜると光が水の中を通っている感じが強まるのです。
明度のグラデーション、底のコースティクス、浮遊する粒、この3つを重ねると、深さと透明感は同時に立ち上がります。
よくある失敗とアニメで仕上げる
海は、青を塗るだけでは平板になり、白波を撒きすぎると画面全体がざらついて見えます。
まずは明度差で面を分け、きらめきは海全体の2割に絞ると、静かな部分が残って波の輪郭が立ちます。
反射や白波も本体より1段暗く低彩度に寄せるだけで、海面というフィルターを通った色になり、貼り付けたような浮き方を避けられます。
海描写の3大失敗と対策
海描写の失敗は、青のベタ塗りでのっぺりすること、白波を散らしすぎてノイズ化すること、反射・白波が明るすぎて本体と区別がつかないことに集約されます。
対策はそれぞれ明快で、色帯で明度差を作り、きらめきを全体の2割に絞り、反射を1段暗く低彩度にすることです。
海は面積が広いぶん、描き込みを足すほどよくなるとは限りません。
むしろ静かな面を残したほうが、見せたい波が前に出てきます。
海全体に白波を均等に打って泡だらけのノイズになった失敗は、実際に一度やると強く残ります。
そこから、きらめきを2割に絞る癖がつきました。
白波や反射は本体より1段暗く彩度を落とすと海面に沈んで見えますが、同じ明るさのまま入れると水ではなく飾りに見えてしまうのです。
海面を光の舞台ではなく、光を受け止める層として扱うことが要点でしょう。
2〜4フレームで海面を動かす
海面アニメは、少ないフレームで位相をずらすほうが自然に見えます。
0-1-0-2の往復ループなら動きの山がなめらかにつながり、白波や反射の帯をフレームごとに横へ1pxスクロールさせる方法でも、海らしい揺れを作れます。
2〜4フレームから始めれば、描く量は少なくても十分です。
むしろ8フレームも並べると変化を追いかける意識が強くなり、波の気配より作業量が前に出やすいのです。
初めて動く海タイルを8フレームも描いて不自然だったのに、2フレームの0-1-0-2に減らして速度を詰めたら、いちばん海に見えました。
削るほど落ち着く、と学べます。
帯のスクロールも同じ考え方で、白波の形を毎回作り直すより、帯そのものを少しずつずらしたほうが、視線は揺れを追えて、破綻は目立ちにくいです。
手を増やすより、位相をずらすほうが効きます。
次のステップ
海が描けるようになったら、空の描き方や反射の細かい揺らぎ、タイルマップのループ設計へ進みましょう。
海面だけを整えても、上の空が硬ければ全体はつながりません。
反射も波も、周囲の色と動きがそろって初めて景色になります。
関連テクニックを重ねると、海を含む風景全体を1枚で完成させられるようになるでしょう。
おすすめです。
ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。
関連記事
ドット絵で空と雲を描く手順とコツ
ドット絵の空と雲は、32x32のような小さなキャンバスでは、グラデーションの色数不足がそのまま縞模様として出やすい題材です。Aseprite でベタ塗りの空を置くと帯が立ち上がりますが、境目にディザリングを足すだけで、色の切れ目がふっと消える手応えが生まれます。
ドット絵で人物キャラを描く手順とコツ
ドット絵の人物キャラは、32x32のキャンバスで最初の1体を完成させるところから始めるのがいちばん扱いやすい。形が読めない、顔のバランスが崩れる、塗りがのっぺりするという3つの壁は、描く順番を整えるだけで崩れにくくなります。
ドット絵で顔の表情を描き分ける方法
32x32のドット絵でキャラクターの表情を描き分けるとき、鍵になるのは顔全体ではなく目・眉・口の3パーツをどう動かすかです。鼻や輪郭、髪は基本固定のままでよく、32x32では上瞼を1px下げるだけで目つきが締まり、驚きなら瞳の下に白pxを1つ足すだけで印象が変わります。
ドット絵 手の描き方|指の省略とサイズ別設計
ドット絵の手は、実物のように5本指を再現しようとするとすぐ黒いカタマリになります。16x16のような小さなキャンバスでは1本の指に割ける幅が足りず、ゲーム会社で新人グラフィッカーに最初に「手を描き込むな」と教えたのも、この失敗を何度も見てきたからです。