描き方入門

ゲームボーイ風ドット絵の描き方と4色緑パレット

更新: 高橋 ドット
描き方入門

ゲームボーイ風ドット絵の描き方と4色緑パレット

初代ゲームボーイは、1989年に登場したDMG-01で、160×144ピクセルと4階調だけで画面を組み立てる携帯機です。非バックライト液晶の緑がかった見え方まで含めて、あの画面は制約の塊なのに、だからこそ妙に懐かしく映るのだと感じます。

初代ゲームボーイは、1989年に登場したDMG-01で、160×144ピクセルと4階調だけで画面を組み立てる携帯機です。
非バックライト液晶の緑がかった見え方まで含めて、あの画面は制約の塊なのに、だからこそ妙に懐かしく映るのだと感じます。
初めてゲームボーイのROMビューワに自作画像を流し込み、実機の緑で表示された瞬間には「これだ」と鳥肌が立ちました。
この記事では、#071821のようにすぐ使える4色パレットと、グレースケールで明暗を詰めてから緑ランプに差し替える手順を軸に、4色でも立体に見せる作り方を具体的に示します。

ゲームボーイ風ドット絵とは|4色の緑が懐かしさを生む理由

ゲームボーイ風ドット絵は、160×144ピクセルの小さな画面に、4色だけの明暗をきっちり載せることで成立する表現です。
見た目の懐かしさは「たくさん描けないこと」から生まれるのではなく、8×8タイルと2bitの制約を素直に受け入れたときに立ち上がります。
だから最初に守るべきなのは、色を足すことよりも、画面の骨格を崩さないことだと言えます。

画面は160×144ピクセル・8×8タイル単位

初代ゲームボーイの画面は160×144ピクセルで、横20×縦18枚の8×8タイルを敷き詰めた構造です。
ここを外して中途半端な解像度で描くと、線が妙に間延びしたり、キャラの重心がずれたりして、実機らしい密度が出ません。
最初に160×144へ合わせ直した瞬間、画面が一気に締まった経験があるなら、その感覚は正しいです。
8の倍数で考えることは作業の都合ではなく、見え方そのものを整える基準になります。

このタイル感覚は、背景だけでなくスプライトにもそのまま効きます。
8×8または8×16ピクセルを基準にすると、輪郭、歩行アニメ、UIの文字まで同じルールで揃うため、素材が画面内でばらつきません。
作り始めの段階でキャンバスサイズを決めるのが分かれ道で、ここがぶれると後でどれだけ色を調整しても、ゲームボーイらしい整い方には寄りにくいのです。

色は4段だけ=2bitのモノクロ階調

色数は4色のみで、1ピクセルあたり2bitの白・薄灰・濃灰・黒の4段階しか使えません。
ここで効くのは色相よりも値、つまり明度差です。
最暗色を輪郭や落ち影に、最明色をハイライトに置くと、少ない色でも形が読めますし、逆に中間2色の差が小さいと、同じ4色でも一気にのっぺりします。
4色しか使えない制約は窮屈さではなく、どこに情報を置くかを選ばせる作法です。

項目内容役割
解像度160×144ピクセル画面全体の骨格を決める
タイル単位8×8ピクセル背景や文字の最小設計単位
色数4色明暗だけで立体感を作る
ビット深度1ピクセル2bit階調を4段に絞る

懐かしさ寄りの基準値としては #071821 / #306850 / #86c06c / #e0f8cf、エミュレータ系の定番としては #081820 / #346856 / #88c070 / #e0f8d0 がよく使われます。
どちらも暗→明へ階段状に並ぶので、まずグレースケールで明暗を詰め、あとから緑系のランプへ差し替える流れが扱いやすいです。
セピア4色に置き換えても成立するので、緑だけが唯一の正解ではありません。
色を増やすより、4段の関係を崩さないほうが「らしさ」は安定します。

白黒ではなく緑に見えるのは液晶のせい

緑に見えるのは絵の色データではなく、液晶の色味です。
初代DMG-01は1989年発売で、表示自体は白黒の明暗なのに、非バックライト液晶のため画面全体が緑がかって見えます。
つまり、ドット絵はまず値で組み、その上に緑のフィルタをかけたように見える、という理解がいちばん腑に落ちます。
白黒表示で描いた絵と緑表示で見た絵がまるで違って見えたとき、色は最後に乗るものだと体で覚えたはずです。

後継機のゲームボーイポケット(1996年)は緑味が薄く白黒寄りで、同じ絵でも印象が少し変わります。
ここは「どの機種の懐かしさを狙うか」で緑の選び方が変わる部分です。
初代DMG-01の濃い緑を想定するのか、ポケット寄りの淡い見え方を狙うのかで、完成画の温度は変わります。
次章でパレットを選ぶときも、この差を前提にしておくと判断がぶれません。

懐かしさの核になる4色緑パレットの作り方

初代ゲームボーイの「懐かしさ」を狙うなら、4色はバラバラに選ぶより、暗→明へ連続するランプとして組むのが近道です。
まずはそのまま使える基準値を置き、あとから明度の間隔を整えると、見た目の再現性と塗り分けのしやすさがそろいます。
緑の濃淡に見えても、本体は色相より明度設計です。

基準になる4つのHEX

懐かしさ寄りの基準4色は、暗い側から #071821 / #306850 / #86c06c / #e0f8cf です。
エミュレータ系の定番4色は #081820 / #346856 / #88c070 / #e0f8d0 で、見比べるとわずかな差しかありませんが、この差が画面全体の空気を決めます。
最初に正解を渡してしまえば、読者は迷う時間を減らして、そのままツールに登録して試せるようになります。

この段階では、4色を覚えるより、暗→明の順を崩さないことを優先してください。
スーパーゲームボーイでは4色のカスタムパレットを指定できたので、ここで示す並びはそのまま実機風の塗り分けに使えます。
まず登録し、あとで微調整する流れが扱いやすいです。

明度順に並べてカラーランプにする

4色の肝は「色が並んでいる」ことではなく、明度が階段状に上がっていることです。
最暗色を輪郭や落ち影、最明色をハイライトに割り振り、中間2色をその間に置くと、少ない色数でも形が崩れにくくなります。
実際に明度差を意識せず適当な4緑を選んだときは、中間2色が近すぎて影とハイライトの区別がつかず、のっぺりして見えました。

そこから明度を等間隔に直すと、塗りで使い分けやすさが一気に上がります。
隣り合う段の差が均等に近いほど、どの色を置けばどこが立つのかが読みやすくなるからです。
グレースケールで明暗を先に詰めてから緑へ差し替えると、再現性も高くなります。

役割暗→明の順
輪郭・落ち影#071821
中間の暗部#306850
中間の明部#86c06c
ハイライト#e0f8cf

色数を増やしてごまかすより、この4段を崩さないほうがゲームボーイらしさは出ます。
立体感を決めるのは色相ではなく値のコントラストで、4色設計のままでも十分に表情は作れます。

エミュ準拠・実機準拠・セピアの選び分け

懐かしさの見え方は、#071821 / #306850 / #86c06c / #e0f8cf のような実機寄り、#081820 / #346856 / #88c070 / #e0f8d0 のようなエミュレータ定番、そしてセピア寄りの4色で少しずつ変わります。
どれもゲームボーイっぽいのに別物に見えるのは、わずかな彩度と明度の差で、画面の温度感が変わるからです。
同じキャラを3種類のパレットで塗り比べて並べたとき、その違いがはっきり出ました。

エミュレータ定番はやや整った印象になり、実機準拠はざらついた記憶の輪郭に寄ります。
セピア4色は緑にこだわらなくても懐かしさが成立する例で、4段の明度設計さえ守れば、黄みを足しても十分にレトロな空気になります。
暗→明の設計を保ったまま色相だけをずらすと、狙う雰囲気で選び分けやすいはずです。

ツールには4色をこの順で登録し、まず100%表示で見てください。
拡大表示ではディザの見え方が甘くなりやすく、実際の仕上がりからずれます。
必要なら次に、暗部を少し青緑へ、明部を少し黄緑へ寄せるように調整してみてください。

明暗4段だけで立体感を出す塗り分けの手順

明暗4段だけでも立体感は十分に作れます。
要は、光源を先に固定し、4色それぞれに役割を与えて、値の差で面を読ませることです。
色相の派手さより明度の設計を優先すると、少ない色数でも塗り分けが一気に安定します。

光源を決めて4段に役割を割り振る

最初にやるべきなのは、光の向きを1つだけ決めることです。
右上から光が来ると決めたなら、右上側を最明色、反対側を最暗色に固定します。
ここが曖昧だと、面ごとに影の向きがずれて絵全体が崩れやすいのですが、紙に「右上」と書いてから塗り直しただけで、各面の判断が一気に揃った経験があります。
迷いを消すには、先にルールを置くのが近道でしょう。

4色には、それぞれ仕事を持たせます。
最暗色は輪郭と落ち影、濃い緑はベースの陰、薄い緑はベースの面、最明色はハイライトという分担にしておくと、見た目の色名よりも明度の階段として扱えるようになります。
こうすると「どの色を置くか」ではなく「どの面をどれだけ暗くするか」で考えられるため、塗りの判断がぶれにくい。
最暗色を広く塗りすぎると重さが前に出ますが、仕事を絞れば軽さが残ります。

暗→明はヒューシフトで青緑→黄緑へ

立体感を左右するのは、色相そのものより値のコントラストです。
隣り合う面の明度差を意識的に開けると、4色しかなくても丸みや奥行きがはっきり立ち上がります。
逆に、色を増やしても明度が近いままだと面は平たく見えやすい。
まずは暗い面と明るい面の距離を作り、その上で色味を整える順番が効きます。

その色味の整え方として、暗部を少し青緑側へ、明部を少し黄緑側へ寄せるヒューシフトが有効です。
暗い部分を単純な黒寄りにしないだけで空気が通り、明るい部分も黄味が乗ることで光を受けた感じが増します。
緑ランプを組むときの隠し味は、まさにこのずらし方です。
値の骨格が先、色相の揺らぎは後。
順番を守ると、塗りは落ち着いて見えてきます。

輪郭は最暗色、ハイライトは最明色を点で置く

最暗色はベタ塗りの主役ではなく、輪郭と落ち影を締めるための色として使うのが向いています。
以前、最暗色を広く使いすぎたときは絵が重く沈み、ドット絵らしい抜けが消えました。
そこで輪郭とハイライトを「点」で置く意識に変えると、面の情報は保ったまま軽やかさが戻ります。
最明色も同じで、広げるよりも光が当たる角だけに置くほうが、視線が集まりやすいのです。

この置き方は、少ない色数で立体を見せたいときほど効きます。
輪郭を最暗色で少し締め、最明色を端に点在させるだけで、面の向きと厚みが読み取りやすくなります。
強い塗りつぶしではなく、必要な場所だけを鋭く選ぶ感覚です。
おすすめです。
まずは大きく塗らずに、影と光を小さく置いてみてください。
手数を増やすより、判断を絞るほうが仕上がりは整います。

ディザリングで中間色を増やすテクニック

ディザリングは、2色のピクセルを交互に置いて目の錯覚で中間色を見せる技法です。
4色しか使えない場面でも、並べ方を工夫するだけで見かけの階調はぐっと増えます。
色を足せない制約を、見え方の設計に変える発想だと考えると分かりやすいでしょう。

市松ディザで中間トーンを作る

基本になるのは市松、つまりチェッカーボード模様です。
明るい色と暗い色を1対1で交互に置くと、単独のどちらかではなく、その間の明るさとして目に入ります。
空や床のように広い面でグラデーションを滑らかにつなぎたいとき、この50%配置がよく効きます。
影の境目を市松ディザでぼかしたとき、4色のままなのに面の切れ味が弱まり、グラデのような滑らかさに変わる感覚が生まれるのはそのためです。

25%・50%・75%で密度を変える

密度を25%・50%・75%と段階的に変えると、1組の隣接色から3段の中間トーンを作れます。
たとえば暗い色を少しだけ混ぜた25%は重さを残し、50%は中間、75%はかなり明るい側へ寄せられます。
これを4色全体に広げると、単純な4段階ではなく、最大9段ぶんの中間トーンを擬似生成できるわけです。
限られたパレットでも、面の広がりや奥行きを表現しやすくなるのが利点です。

混合密度見え方の役割使いやすい場面
25%元の色を強く残す影の端、うっすらした遷移
50%ちょうど中間に見せる空、床、なだらかな面
75%明るい側へ強く寄せるハイライト直前、明暗の橋渡し

必ず100%表示で効き目を確認する

落とし穴は確認倍率です。
編集画面の拡大表示では、細かい点の並びが整って見えても、書き出して100%表示にした瞬間に砂嵐のようにうるさく感じることがあります。
実際に拡大表示できれいに見えたディザが、原寸ではムラだらけで、全部やり直したことがありました。
それ以来、100%プレビューを常時開いて調整するようになりました。
ここを外すと、狙った中間色ではなく単なるノイズになるので、仕上がりの確認は必ず実寸で行うのがおすすめです。

緑の色調で「らしさ」を最大化する仕上げ

緑の色調を仕上げで整えるときは、最初から緑で塗り進めるより、白黒で明暗だけを固めてからランプを差し替えるほうが安定します。
色味に引っ張られずに値を詰められるので、影の入り方や抜けの強さがぶれにくく、最後に緑へ置き換えても破綻しにくいからです。
最初から緑で描いていた頃は影の付け方を毎回迷いましたが、この二段構えに変えてから、画面全体の「らしさ」が揃いやすくなりました。

グレースケールで描いて緑ランプに差し替える

白黒で描く工程は、緑の印象をいったん外して、形と明暗の骨格だけを見るための下地になります。
ここで値が決まっていれば、最後に緑ランプへ差し替えても、明るい面は明るく、暗い面は暗いまま残るので、薄暗い液晶らしい読みやすさが保てます。
色を先に決めると迷いが増えますが、値を先に決めると迷いは減るのです。

実際、緑で直接描いていた頃は、同じ影でも「濃すぎるのか、彩度が足りないのか」が毎回あいまいでした。
白黒段階で影の段差を整理しておくと、緑に置き換えたあとも輪郭が崩れず、画面の芯が残ります。
おすすめの手順です。
まずモノクロで完成度を上げて、それから緑を乗せてみてください。

グリッド・ゴースト・走査線で実機感を足す

液晶感を出したいなら、最後に薄いグリッドや残像、走査線風の演出を重ねるのが効きます。
ただし主役はあくまでドット絵そのものなので、効果は「気配」程度に留めたほうが上品です。
濃くしすぎると絵が沈み、情報量だけが増えて見づらくなるので、画面の表面にそっと膜を足す感覚で扱うとまとまります。

走査線エフェクトを濃く乗せすぎたときは、全体が暗く沈んでしまいました。
そこで透明度を下げ、「言われないと気づかない」くらいまで引いたところ、逆に実機感が増したのです。
見せたいのは効果そのものではなく、古い表示機器に宿る空気でしょう。
グリッドもゴーストも、描き込みではなく質感の補助として使ってみてください。

セピア4色という懐かしさの別解

緑が唯一の正解ではありません。
セピア系の4色に切り替えても、懐かしさは十分に立ち上がりますし、むしろ万人受けしやすい落ち着きが出ます。
作品の世界観が温かい方向なら、ランプごと入れ替える発想のほうが自然に馴染むはずです。
緑に固定しないことで、表現の幅が素直に広がります。

表現印象向いている場面
緑ランプ端末らしい硬さ、実機感レトロ端末、表示機器の再現
セピア4色柔らかさ、懐古感物語寄り、落ち着いた作品世界

仕上げ前には、色数が4色を超えていないか、明度の段が潰れていないかを点検すると安心です。
さらに、スプライト素材は8×8または8×16pxを基本単位にすると実機運用と揃います。
素材として使うなら、この単位感に整えるだけで扱いやすさがぐっと上がります。
セピア4色も、その枠に収めると運用しやすいでしょう。

よくある失敗とゲームボーイカラーへの応用

最も崩れやすいのは、5色目を足してしまう場面です。
1色増えただけでも画面の空気は変わるので、スポイトで色数を数える癖を最終工程に入れておくと安定します。
制約を守ること自体がスタイルになるので、まずは4色を崩さない意識で仕上げてみてください。

色を増やしすぎ・明度差不足のNG例

知らないうちに似た緑が5色混ざっていて、「なんか違う」と感じたことがあります。
原因は輪郭や影の不足ではなく、色数の増やしすぎでした。
似た色を足すほど情報量が増えるように見えて、実際には面の切れ味が鈍り、画面の締まりが失われます。
だからこそ、色を追加する前に既存の4色で役割を分け切れているかを見直すのが先です。

明度差不足もよくある落とし穴です。
中間2色が近いと影とハイライトが効かず、立体感が薄れてのっぺり見えます。
パレット段階で明度を等間隔に開けておくと、描画中に迷いにくくなりますし、毎回の修正も少なく済みます。
練習では、8×8や16×16の小物を4色で量産し、毎回パレット登録、値設計、ディザの順をなぞると、手が型を覚えるでしょう。

ゲームボーイカラーとの違い

ゲームボーイカラーは32768色中から最大56色を同時表示でき、初代の4色とは別物です。
ここを混同すると、初代で必要な切り詰め方まで失ってしまいます。
初代は少ない色数の中で形と明暗を立てる設計が要で、ゲームボーイカラーはその考え方を保ったまま、色相の幅を広げられる機種だと捉えると整理しやすいです。
初代の4色設計を体に入れてから移ると、色が増えても締まりのある配色ができました。

初代の作画はキャンバスを160×144または8の倍数に揃えると破綻しにくいです。
解像度の制約が先に決まっていると、線の太さや塗り面積の判断がぶれません。
ゲームボーイカラーに進むときも、この「先に枠を決めてから色を置く」感覚がそのまま効きます。
色数が増えた場面でも、土台が初代の感覚なら画面は散らかりにくいのです。

おすすめツールと書き出しサイズ

おすすめのツールは、色数とパレットを小さく確実に管理できるものです。
ツール名よりも、登録した4色を崩さずに描けるかが先に来ます。
作業中に色数を見失いやすいなら、表示と管理が同じ画面で済む環境を選ぶとよいでしょう。
仕上げ前にスポイトで確認し、似た色が増えていないかを点検する流れを固定すると、再発防止になります。

書き出しサイズは、初代の160×144か、その倍数を基準に考えると扱いやすいです。
小さく作って拡大表示する前提なら、8×8や16×16の練習素材も相性がいいです。
まずは小物を4色で量産し、同じ手順を何度も繰り返してください。
色数チェックを最終工程に入れてからは、似た緑が増えて「なんか違う」と崩れることが減りました。
制約の練習を積み重ねるほど、初代でもゲームボーイカラーでも配色が安定していきます。

シェア

高橋 ドット

ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。

関連記事

描き方入門

ファミコン風ドット絵の描き方|4色制約と52色パレット

ファミコン風ドット絵は、1983年に登場したファミコンの52色マスターパレットと、1キャラ4色という制約を前提に組み立てることで、はじめて本物らしい輪郭と色味が立ち上がる表現である。ゲーム会社でドット絵を担当していた頃に最初に叩き込まれたのも、「色を足したくなったら一度手を止めろ」というひと言だった。

描き方入門

ドット絵でLINEスタンプを作る手順とサイズ規格

LINEスタンプのドット絵制作は、低解像度の絵を最大370×320pxの規格に収めながら、ドットの輪郭を崩さずに仕上げる作業です。48×48で描いた絵をそのまま等倍で書き出してトーク画面に置いたとき、豆粒のように埋もれてしまった経験があると、

テクニック

ドット絵アニメのコマ数とfpsの決め方

ドット絵アニメーションは、描くコマ数と再生fpsを別々に考えるところから組み立てる作品である。歩行を12コマで頑張って描いても再生すると足がもたつくなら、4コマに減らして保持時間を整えたほうがキビキビ見えることがある。

描き方入門

ドット絵SNSアイコンの作り方|丸型対応と映える作例

ドット絵のSNSアイコンとは、小さく描いた元絵を整数倍で拡大し、正方形のまま円形に切られる前提まで含めて設計する画像である。仕事で大量のドット絵アイコンを書き出してきた経験からも、ぼやけ、四隅切れ、潰れの3大失敗は最初のキャンバスサイズ選びでほぼ決まると実感してきました。