ツール

GraphicsGale 使い方|初心者のアニメ作成手順

更新: 森川 レイ
ツール

GraphicsGale 使い方|初心者のアニメ作成手順

GraphicsGaleはWindows向けの定番ドット絵ツールで、2017年以降は無料で導入できるぶん、まず触ってみたい人の入口として今も十分に強い選択肢です。

GraphicsGaleはWindows向けの定番ドット絵ツールで、2017年以降は無料で導入できるぶん、まず触ってみたい人の入口として今も十分に強い選択肢です。
私も最初は機能より先に拡大表示とグリッドを整えるところから入ったのですが、そこを済ませるだけで1px単位の置き間違いが減り、小さな絵の手応えが一気に変わりました。

この記事では、16x16や32x32の小さなキャンバスで、2〜4フレームの点滅や上下動、歩行ループを最短で形にする流れに絞って案内します。
GraphicsGaleでつまずきやすいオニオンスキン、フレーム、ウエイト、プレビュー、GIF書き出しの役割も切り分けて整理するので、UIの古さに戸惑っていた人でも「何を触れば動くのか」が見えてきます。

GraphicsGaleとは?無料で使えるドット絵・アニメツールの概要

GraphicsGaleは、Windowsで動くドット絵・スプライト・アニメーション制作用の定番エディタです。
立ち位置をひと言でまとめるなら、静止画を描くソフトというより、小さな絵を動かす前提で組まれたピクセルアート向けツールです。
オニオンスキン、マルチレイヤー、リアルタイムプレビューが中核にあり、1枚ずつ絵を並べて終わりではなく、フレーム間の差分を見ながら詰めていく作業に軸足があります。
実際、点滅や上下動のような2〜4フレームの短いループを作ると、この設計の意図がよく見えます。
私は短い歩行や待機モーションを詰めるとき、リアルタイムプレビューを流したままオニオンスキンで前後フレームを重ね、足先や輪郭のズレをその場で直していくことが多いのですが、この組み合わせは「描く」と「動きを検証する」が一続きになっていて、細かな往復が途切れません。

ライセンス面では、2017年6月18日にフリーウェア化しています。
この日付はGraphicsGaleの公式情報でも確認でき、現在は無料で導入できるツールとして扱って問題ありません。
古い解説や配布ページにはシェアウェア時代の記述が残っていて、プロ版1,995円という過去情報も見かけますが、これは無料化前の話として切り分けて読む必要があります。
現行の理解としては、「以前は有料版が存在したが、2017年以降は無料化した」で整理するのが正確です。
無料だから機能が限定的というタイプではなく、GIFアニメ制作まで含めた実作業をそのまま始められるのがGraphicsGaleの強みです。

対応形式も、ドット絵用途を意識した顔ぶれです。
公式の仕様ベースでは、PNG、GIF、BMP、JPG、ICO、CUR、ANI、AVIに対応し、独自形式の.galも扱えます。
静止画だけでなく、アイコンやカーソル、アニメーションGIF、さらに独自プロジェクト形式まで横断して持てるので、単発の1枚絵からゲーム用スプライト、簡単な動作確認まで一つの流れで進めやすい構成です。
.galはGraphicsGale固有の編集データとして扱うのが基本で、確認できる範囲では現行の新規保存はver.2系のGaleX200形式です。
制作途中のレイヤーやフレームを保持したまま保存し、書き出し段階でPNGやGIFへ分けるという使い分けが自然です。

配布版のバージョン表記については、外部配布サイト上で2026年時点に2.08.21という記載を確認できます(掲載例: MajorGeeks)。
最新版の確認は公式配布元が最も確実なので、公式サイトや配布ページを参照してください(公式サイト:

ツール全体の設計思想をもう少し噛み砕くと、Photoshopのような汎用画像編集ソフトをドット絵向けに流用するのではなく、最初からピクセル単位の制御とフレーム単位の編集を中心に置いているのがGraphicsGaleです。
1pxの輪郭、パレットの管理、フレームごとの表示、透過を含むGIFアニメの出力までが一つの文脈でつながっています。
UIは現代的な整理とは少し違いますが、ドット絵の現場で触る項目が前面に出ているので、慣れてくると「何を描くか」より「どう動かすか」に意識を向けやすくなります。
短いループを何度も見返しながら調整したい人にとって、この道具立ては今でも筋が通っています。

最初にやる設定|キャンバス・拡大表示・グリッド・パレット

新規作成とキャンバス解像度

最初の設定で迷ったら、新規作成の段階では16x1632x32に絞るのが定石です。
GraphicsGaleは小さなスプライトを前提に組まれたツールなので、最初から大きいキャンバスを開くより、このサイズで1pxの意味を掴んだほうが輪郭も配色も安定します。
16x16は「どこまで削れるか」を覚える練習向きで、32x32は顔や手足の差を少し持たせたいときに収まりが良いです。
点滅、上下動、2〜4フレームの歩行ループなら、このどちらかで十分に形になります。

背景は透明を基本に進めます。
アルファを有効にしておくと、あとでPNGに一時保存したときも透過がそのまま残るので、ゲーム用スプライトやアイコン素材へ流し込みやすくなります。
背景色を最初から塗ってしまうと、輪郭の外側に不要な色が残りやすく、あとから透過処理をやり直す手間が増えます。
ドット絵では外周1pxの処理が見た目を左右するので、透明背景で始めたほうが崩れにくい設計です。

保存の考え方もこの段階で分けておくと、後の混乱を防げます。
途中確認や仮の書き出しはPNG、編集の元データは.galで持つ方針です。
GraphicsGaleは独自形式の.galでレイヤーやフレームを保持できるので、作業中の本体はそちらに置き、見た目確認用だけPNGに出す流れが噛み合います。
最初のうちにこの使い分けを決めておくと、「上書きしたらフレーム情報が消えた」という初歩的な事故を避けやすくなります。

拡大表示とグリッドの基本

キャンバスを開いたら、すぐにズームを上げます。
目安は200〜800%で、1pxを確実に見分けながら置ける倍率に合わせます。
実作業では400〜600%前後がいちばん落ち着きます。
ここは初心者が迷いやすいところで、拡大しすぎると1ドットが大きな面積に見えて、同じ1pxでも線が太くなったような錯覚が出ます。
私も最初は高倍率のほうが精密だと思っていましたが、見えている面積が大きすぎると全体のシルエットを見失いやすく、逆に線を盛りがちでした。
400〜600%くらいだと、1px単位の操作と全体形の確認が両立しやすくなります。

グリッド表示も早い段階で入れておきたい設定です。
ドット絵では、グリッドはただの補助線ではなく「1マス=1ピクセル」を視覚で固定するための土台になります。
斜め線や曲線を打つときも、どのマスに置いたかが見えているだけでブレ方が揃います。
特に16x16では1pxのズレが頭身や重心にそのまま出るので、グリッドなしで描くと修正箇所の切り分けに時間がかかります。

必要に応じてスナップも有効にすると、点を置く位置が暴れません。
手動で1pxずつ打つ場面では常時必須ではありませんが、ベースの形を四角く押さえるときには効きます。
たとえば胴体、帽子、地面の当たり判定のような直線主体の部分は、矩形塗りで先に面を作ってから削ったほうがまとまりが早いです。
私は最初のブロッキングで矩形塗りをよく使います。
シルエットの塊を先に置いて、あとで角を落としたり、1pxだけ外へ張り出させたりすると、輪郭の意図がはっきりします。
ゼロから線で囲うより、面で始めたほうが小さなサイズでは破綻が出にくい設計です。

💡 Tip

拡大表示は整数倍の感覚で扱うと、ドットの輪郭が見やすくなります。ピクセルアートは補間でぼかすより、1pxの境界が立っている状態のほうが判断を誤りません。

パレットの最小構成とスポイトの使い方

配色は最初から増やしすぎないのが得策です。
開始時のパレットは3〜6色で十分で、ベース色、影色、ハイライト、輪郭色、必要なら差し色を足すくらいでまとまります。
初心者が詰まりやすいのは「色が足りない」より「色が多すぎて整理できない」ほうです。
特に16x16では、色数を増やすほど1色あたりの役割が曖昧になり、どこを明るくしたいのか、どこを影に落としたいのかが見えにくくなります。
少色で組むと、1色ごとの仕事がはっきりします。

ここで最初に覚えておくと作業速度が変わるのが右クリックのスポイトです。
描いている最中に既存の色をすぐ拾えるので、パレットへ視線を何度も戻さずに済みます。
影を置いて、少し明るい色へ戻して、輪郭色を拾い直して、という往復がその場で完結するため、配色のテンポが落ちません。
私はこの操作を身体で覚えてから、色を選ぶために手が止まる回数が一気に減りました。
ドット絵は1pxごとの判断が連続する作業なので、色選択の手数が少ないだけでリズムが崩れなくなります。

パレットを少色で始め、右クリックスポイトでその都度拾い直す流れは、GraphicsGaleのようなパレット主体のツールと相性が良いです。
ベース色を矩形塗りで置き、影色を1段、明るい色を1段だけ足していくと、情報量を増やしすぎずに立体感を作れます。
透過を含んだPNGで途中の見た目を確認しつつ、編集データ本体は.galで積み上げる形にしておけば、あとから色の差し替えやフレーム修正にも戻れます。
ここまで整うと、次のフレーム作成やオニオンスキンの工程に入ったとき、設定の揺れではなく絵そのものに集中できます。

GraphicsGaleの基本操作|1pxで描く・塗る・消す

1pxの線を安定させる置き方

GraphicsGaleで静止画を作るとき、まず手に馴染ませたいのはペンシルで1pxずつ置く感覚です。
輪郭線は太いブラシより、1pxのペンで打ったほうが形の判断を誤りません。
小さなキャンバスでは、1ドット増えただけで頬が張ったり、肩が落ちたり、表情まで変わります。
だから「線を引く」というより、「必要な場所に点を並べて輪郭を組む」と考えたほうが安定します。

最初の手順は単純で、輪郭色を選んで外形を置き、途中で色が揺れたら右クリックでその場の色をスポイトし、また打つ、という往復です。
パレットを見に行って戻る回数が増えると、今どの色で描いていたかが途切れます。
GraphicsGaleはこの右クリックスポイトが速いので、輪郭色、影色、明るい色の拾い直しを編集画面の中で完結させると、線のテンポが崩れません。
私は輪郭を描くときも、1本の線を最後まで押し切るより、2〜3ドット置いて右クリック、また置いて右クリック、という細かい反復で進めることが多いです。
そのほうが色の混在や置き間違いにすぐ気づけます。

1px線で起きやすい失敗は、意図しない2px線です。
たとえば縦線のすぐ横に補正のつもりでもう1ドット足すと、その部分だけ太さが変わります。
拡大表示では気づきにくくても、少し引いてプレビューを見ると輪郭が重たく見えます。
対処は単純で、太くなった箇所を消去して1列に戻し、必要なら線の位置そのものを1pxずらします。
太さで帳尻を合わせるのではなく、位置で整えるほうがシルエットが締まります。

斜め線も同じで、段差の間隔が乱れるとギザつきが目立ちます。
1、1、2、1のように不規則に階段が続くと、線が途中で折れて見えます。
こういうときは、段差のリズムを見直して、隣り合うドットの並びをそろえます。
曲線の“角”が硬く見える場面では、角の外側や内側に1pxだけ中間色を置くと、輪郭を太らせずにギザ感だけを和らげられます。
広くぼかす必要はなく、1ドットだけで印象が変わるのがドット絵の面白いところです。
私は頬や帽子の丸みを出すとき、この最小限の中間色をよく使います。

作業の回転を上げるなら、パレット、ツール、プレビューを視線移動の短い位置に寄せるのも効きます。
ペン、スポイト、塗りつぶし、消去を切り替えながら、横で全体像を確認できる配置にしておくと、「1px置く→色を拾う→形を見る→戻す」のサイクルが短くなります。
静止画の基本操作は単純ですが、単純な操作を何十回も反復するので、この距離の短さがそのまま作業の安定につながります。

塗りつぶし前の“穴埋め”チェック

輪郭ができたら、次はバケツでベース色を面として入れる段階です。
ここで詰まりやすいのが、線のどこかに空いた1pxの隙間です。
見た目では閉じているようでも、輪郭線にピンホールがあると塗りが外へ漏れます。
塗り直し自体はすぐできますが、漏れた色を追いかけて消していくほうが時間を使います。
私は塗りつぶしの前に、輪郭を一周なぞるように見て、1pxの穴がないかだけを先に確認する癖をつけてから、修正の往復が目に見えて減りました。

チェックの流れは、輪郭線の端、斜め線のつなぎ目、曲線の切り返しを重点的に見るだけで十分です。
特に斜め線は、1段ずつ落としていく途中で対角の角が抜けやすく、そこから塗りが流れます。
こういう箇所はペンシルで1px埋めてからバケツを使います。
塗り漏れが起きたあとに修正するより、先に穴を塞いだほうが手数が少なく済みます。

ベース色を入れたあとも、右クリックスポイトで今置かれている色を拾い直しながら微修正すると流れが途切れません。
たとえば服のベース色を塗り、はみ出した部分を消去し、境界の隙間を輪郭色で閉じ、またベース色を拾って塗り足す、という往復です。
この反復を短く回せると、色を選び間違えたまま修正を重ねる事故が減ります。
GraphicsGaleはパレット主体のツールですが、実作業ではパレットから選び直すより、画面上の正しい色を右クリックで拾うほうが速くて確実です。

塗りつぶし後に起きやすい失敗は、輪郭の内側に1pxだけ残る塗り漏れです。
とくに暗い輪郭色と近いベース色を使っていると、拡大中は見逃しやすくなります。
こういう残りは、プレビューでシルエットを見たときに面がガタついて見える原因になります。
塗った直後にベース色をスポイトで拾い、内側を一周なぞって欠けを埋めるだけで、見え方がすっきり整います。

💡 Tip

バケツを使う前に輪郭線の端と斜めのつなぎ目だけを先に見ると、塗り漏れ修正の往復が減ります。1pxの穴埋めは地味ですが、あとで色を追いかけて消すより早く終わります。

透明と削除の違い

GraphicsGaleでは、消去が「色を消す」のか「透明にする」のかを意識しておくと混乱しません。
背景を透過で扱う前提なら、消しゴムは単なる白塗りではなく、アルファチャンネルが有効な状態では透明部分を作る道具になります。
輪郭の外にはみ出した色を消すと、その場所は背景色になるのではなく、透明として抜けます。
ゲーム用スプライトやアイコン素材では、この挙動を理解しているだけで後工程が整います。

反対に、アルファチャンネルが無効な状態では、消去しても透明にはならず、現在の扱いに応じた色の置き換えになります。
ここを曖昧にしたまま作業すると、「消したつもりが白で残っていた」「背景が抜けたと思ったのに色が残っていた」というズレが起きます。
透過前提の絵では、消しゴムを使う場面は削除というより透明化と捉えたほうが実態に合います。

この違いは、輪郭の外側を整えるときによく出ます。
たとえば肩のラインを1px削りたいとき、アルファが有効ならその1ドットは透明になり、外周がそのまま抜けます。
ここで輪郭色を拾い直して描き足せば、外形の調整がその場で完結します。
私は外周の修正で、消去と右クリックスポイトをほぼセットで使います。
消して透明にし、輪郭色を拾い、必要な位置に1px戻す。
この往復が安定すると、外周がにごりません。

スポイト、塗り、微修正の反復では、透明部分そのものも「存在する情報」として見ると判断が早くなります。
ドット絵では描いた色だけでなく、何も置いていないマスの形もシルエットを作っています。
だから消去は失敗の後始末ではなく、輪郭を彫るための操作でもあります。
ベース色を塗ってから削る、輪郭を引いてから透明で切る、またスポイトで色を戻す、という循環が見えてくると、静止画制作の最低限の流れが一本につながります。

アニメーションの作り方|フレーム追加からプレビューまで

フレームの追加・複製

静止画が描けたら、次はGraphicsGaleのフレームパネルを表示して、1枚の絵を時間方向に並べていきます。
アニメーション制作で最初に触る場所はここです。
1フレーム目にベースとなる絵を置き、そこから新しいフレームを追加するか、いまの絵を複製して差分だけ直すかで進めます。
ドット絵の短いループでは、白紙のフレームを毎回描き起こすより、複製して1〜2pxずつ変えるほうが流れをつかみやすく、失敗も減ります。

特に最初の練習では、2フレームの最小ループから始めると感覚がつかみやすくなります。
1枚目と2枚目の差をどこまで詰めれば動いて見えるかが、はっきり体に入るからです。
私も歩行や待機モーションを覚えるとき、先に4フレームへ広げるより、まず2フレームで「変化量を削る」方向から入ったほうが、1pxの重みを早く理解できました。

操作の流れは単純です。
フレームパネルで現在のフレームを確認し、追加で空のフレームを作るか、複製で同じ絵を増やします。
複製を使う場面は、点滅、上下動、まばたきのように元絵を少しだけ変えるアニメーションです。
たとえばキャラクターの立ち絵を複製し、2フレーム目だけ肩や頭を1px上げる、といった作り方です。
逆に、フレームごとにポーズ差が大きいなら、追加した空フレームに描いたほうが整理しやすくなります。

前後フレームの移動も、ここでセットで覚えておくと作業が止まりません。
1枚前に戻る、1枚先へ進む、この往復を何度も回しながら「どこを動かしたか」を確認します。
実作業では、キャンバスの近くにフレームパネル、反対側に小さなプレビューを置くと視線の往復が短くなります。
1pxの修正は手数そのものより、視線移動の長さで疲れ方が変わります。
フレーム一覧が遠い場所にあると、毎回「選ぶ→見る→戻る」が散って、テンポが落ちます。
編集キャンバスのすぐ横にフレーム、少し離して再生プレビューという並びだと、描く・送る・見るの流れがまとまります。

オニオンスキンと前後フレームの確認

フレーム数が2枚を超えると、前後の絵を重ねて見られるオニオンスキンが効いてきます。
これをオンにすると、現在編集中のフレームに対して、前後フレームが薄く透けて表示されます。
意味は単純で、「前の位置からどれだけ動いたか」「次の位置に向けてどこへ寄せるか」を、1枚ずつ切り替えなくても把握できるということです。

ドット絵アニメでは、この透過表示があるだけで移動量の判断が安定します。
たとえば手を振る動きで腕先をずらすとき、前フレームと重ねて見れば、1px動かしたのか2px動かしたのかが一目でわかります。
上下動や歩行では、頭、肩、足先の高さがそろっているかを確認するための定規のような役割になります。
静止画だと違和感が薄いズレでも、ループで再生すると跳ねるように見えることがありますが、オニオンスキンを挟むとそのズレを先回りで拾えます。

ここで意識したいのは、前後フレームの透過表示を「なぞるため」に使うのではなく、「差分の量を見るため」に使うことです。
全部を重ねたまま線を合わせようとすると、かえって動きが止まります。
見るべきなのは、頭頂部、肩線、手先、足先など、動きの支点になる数か所です。
待機モーションなら重心、歩行なら足の接地点、点滅なら光る部分の広がりだけを追えば十分です。

オニオンスキンが効かないときは、だいたい二つの混乱に分かれます。
ひとつは、表示そのものがオフになっているケースです。
もうひとつは、前後フレームを見ているつもりで同じフレームを編集しているケースです。
前者は表示設定を見直せば済みますが、後者はフレーム選択ミスなので、いまどのフレームにいるかを常にフレームパネルで確認するほうが早道です。
アニメ初心者が「動かない」と感じる場面の多くは、描き方よりも、いま見ているフレームと編集しているフレームがずれていることにあります。

⚠️ Warning

オニオンスキンは全体を眺めるより、頭・肩・足先のような基準点だけを見ると判断が速くなります。透けた前後フレームを定規代わりにすると、1pxのズレを拾いやすくなります。

プレビューとウエイト調整

フレームが並んだら、編集画面だけで判断せず、リアルタイムプレビューで必ず動かします。
GraphicsGaleのアニメーション機能の価値はここにあります。
描いて、再生して、止めて、1px直して、また再生する。
この往復が短いほど、動きのタイミングを詰めやすくなります。
静止画で整って見えるフレームでも、再生すると速すぎたり、止まりすぎたり、跳ね返りが不自然だったりします。

プレビューでは、絵そのものの出来よりも、まず止まる場所と切り替わる瞬間を見ます。
短いループは情報量が少ないぶん、フレームの差よりタイミングの粗さが目立ちます。
2フレームの点滅なら、光る瞬間を短くするだけで「チカッ」と見えますし、同じ2フレームでも両方を同じ長さで再生すると、ただ交互に切り替わっているだけに見えます。

そこで効いてくるのがウエイトです。
ウエイトは各フレームの表示時間で、同じ絵でもここを変えるだけで印象が変わります。
fpsは1秒あたりに何枚表示するかという基礎の速さで、ウエイトはその中で「このフレームを何拍ぶん見せるか」を決める調整だと考えると整理しやすくなります。
fpsだけを上げ下げすると全体のテンポが一緒に変わりますが、ウエイトを触れば、特定フレームだけ長く見せる、短く見せるというコントロールができます。

実作業では、先に全体を再生し、引っかかるフレームを見つけてから、そのフレームのウエイトを調整します。
歩行なら、接地の瞬間を少し長めに、足が浮く中間は短めにすると、体重が乗って見えます。
点滅なら、通常フレームを長め、ハイライト入りフレームを短めにすると、光が走る感じが出ます。
私の感覚では、動きが鈍く見えるときに絵を大きく変えようとするより、まずウエイトを触ったほうが解決することが多いです。
ループアニメは絵と時間の半分ずつでできています。

ここで混乱しやすいのが、ウエイトを設定していないのに動きがそろって見える理由です。
各フレームが等間隔で再生されているだけなので、絵は違っていても、見え方は平板になります。
「2枚目だけ一瞬にしたかったのに変わらない」というときは、絵の差ではなく表示時間を確認する段階です。
アニメ制作では、フレーム数を増やすことと、フレーム時間を整えることは別の作業として切り分けると迷いません。

2〜4フレームの作例

最初の作例として相性がいいのは、2フレームの点滅です。
フレームAに通常の絵を置き、フレームBではハイライトを1〜2pxだけ追加します。
たとえば目、金属の角、宝石、ボタンの縁など、光が乗ると効果が出る場所に絞ります。
ここで面積を増やしすぎると「光る」というより「色が変わる」印象になるので、変化は最小限にとどめます。
フレームBのウエイトを短めにすると、一瞬だけ反射したような見え方になります。
2フレームでも、通常を長く、ハイライトを短く置くだけで、静止画にはない生命感が出ます。

この点滅は、変化量の詰め方を覚える練習にも向いています。
1px足すだけでは弱い、2pxでちょうどいい、3pxだと主張が強すぎる、といった境界が見えやすいからです。
短いループでその差を見比べると、ドット絵アニメは「たくさん動かす」より「どこまで削るか」の感覚が大きいと実感できます。

もうひとつの定番は、2〜4フレームの上下動です。
16x16や32x32のスプライトを使い、各フレームで全体、あるいは頭と胴体のかたまりを1〜2pxだけ上下させます。
2フレームなら、Aを基準位置、Bを1px下げるだけでも待機モーションになります。
4フレームにするなら、基準、1px下、基準、1px上のように並べると、呼吸や浮遊感のあるループになります。

このとき面白いのが、1pxと2pxで速度の錯覚が大きく変わることです。
小さなスプライトでは、1pxの上下動は「揺れている」、2pxになると「跳ねている」印象に寄ります。
見た目の差はわずかでも、ループ再生すると体感は一段変わります。
私も16x16のキャラクターで待機モーションを作るとき、最初は動かなすぎると思って2px動かしがちでしたが、再生すると落ち着きがなく見えることが多く、結局1pxへ戻す場面がよくあります。
小さい絵ほど、この閾値がはっきり出ます。

歩行を入門として試すなら、2〜4フレームでも十分です。
2フレームなら左右の足を入れ替え、腕も反対に振るだけで最小の歩行になります。
4フレームなら、接地、中間、反対側の接地、中間という流れが作れます。
ここでもオニオンスキンが効きます。
頭の高さをそろえたまま足先だけずらすのか、あえて1pxだけ沈み込みを入れるのかで、歩いている感じと滑っている感じが分かれます。
まずは足を大きく振るより、接地足と遊脚の差を小さく作るほうが、ループは自然にまとまります。

短いアニメーションで形にしやすいのは、フレーム数が少ないからではなく、修正点が見つけやすいからです。
2〜4フレームなら、どのフレームが引っかかっているかをすぐ特定できます。
フレーム追加、前後移動、オニオンスキン、プレビュー、ウエイト調整の流れをこの短いループで一度回すと、GraphicsGaleのアニメーション機能が単なるおまけではなく、制作の主軸として成立していることが見えてきます。

書き出し方法|GIF・PNG・スプライト用途の保存の考え方

.galの役割

制作中の元データは、一般的にGraphicsGaleの.gal形式で残しておくことが推奨されます。
.gal はレイヤーやフレーム、パレットなど編集に必要な情報を保持するため、あとから描き直したりタイミングを調整したりしやすくなります。
制作中の元データは、まずGraphicsGaleの.gal形式で残しておくのが基本です。
.galはレイヤー、フレーム、パレットなど、編集に必要な情報を抱えた作業ファイルで、描き直しやタイミング調整に戻れるのがいちばんの価値です。
静止画として見えれば十分という段階でも、途中経過をPNGだけで持つと、あとでアニメの1コマ差し替えや色調整をしたくなったときに手が止まります。

現在のGraphicsGaleの作業データは、内部構造の解析でもGaleX200形式として扱われていることが確認されています。
つまり、拡張子が.galでも、中身は現行世代の保存形式として整理されているわけです。
ファイル名を「character_walk_v03.gal」「character_walk_export用.gal」のように分けておくと、配布用画像と作業データが混ざりません。

私はドット絵の小さな修正ほど、完成後に戻りたくなることが多いと感じています。
1pxだけ輪郭を削る、1フレームだけウエイトを詰める、パレットの1色だけ差し替えるといった変更は、完成後ほど発生します。
そのとき.galが残っていれば修正は数分で済みますが、書き出し済み画像しかないと、一見同じに見える状態へ戻すだけで手数が増えます。
.galは「保存形式」というより、制作の引き返し地点を残すための保険として考えると整理しやすくなります。

PNGの役割(配布・静止画)とJPG非推奨

完成した静止画を人に渡す、SNSや資料に載せる、透過つきで保管するといった用途では、PNG保存が本命です。
PNGはドットの境界をそのまま保ちやすく、透過も保持できます。
キャラクターを背景なしで置きたいときや、UIパーツを後から合成したいときも扱いが素直です。

一方で、JPGはドット絵と相性がよくありません
理由は不可逆圧縮で、輪郭の境界や単色面の近くにじわっとしたにじみやブロックノイズが乗るからです。
写真なら目立ちにくい圧縮の癖でも、1px単位で意味を持つ絵ではすぐに崩れとして見えます。
とくに黒い輪郭線、2色だけで作った影、背景との境界は傷みが出やすい部分です。

ここは実感としても差がはっきりしています。
JPGで一度保存した画像をあとから再編集すると、線の周囲に細かな濁りが残っていて、元のくっきりした輪郭には戻せません。
見た目を修正しているつもりが、圧縮で生まれたノイズを追いかける作業になりがちです。
ドット絵ではこの“取り返しのつかなさ”が大きく、完成データとしても中間保存としてもJPGを外したほうが安全です。

書き出し時には、色と拡大方法にも目を向けたいところです。
カラープロファイルの違いで見え方がずれると、意図したパレットより少し浅い色、少し鈍い色に見えることがあります。
さらに、書き出したPNGを別ソフトやブラウザで拡大したとき、補間つきの拡大が入るとドットの境界がぼやけます。
ピクセルアートを拡大表示・拡大書き出しするときは、最近傍補間、いわゆるnearest-neighborで整数倍にそろえるのが定石です。
16×16の絵を4倍で64×64にすると、元の1pxが4×4のブロックとして保たれるので、輪郭がにじみません。
150%のような半端な倍率だと、線幅が不均一に見えやすくなります。

💡 Tip

PNGを書き出したあとに「なんだか眠い絵に見える」と感じたら、元絵ではなく表示側の拡大補間を疑うと原因を切り分けやすくなります。ファイル自体は正しくても、ビューア側の滑らかな拡大でドットが丸まって見えることがあります。

GIFアニメの書き出しとループ設定

アニメーションをそのまま見せたいなら、GIF書き出しがもっとも手軽です。
GraphicsGaleはGIFアニメ出力に対応しているので、フレームを並べてウエイトを整えたあと、そのままアニメGIFとして書き出せます。
2〜4フレームの短いループなら、待機モーションや点滅表現をすぐ共有できます。

ここで押さえたいのは、GIFが最大256色のパレット画像だという点です。

ループ設定も見逃せません。
待機モーションや点滅は、基本的に繰り返し再生で書き出す前提になります。
1回だけ再生するのか、無限ループにするのかで印象は変わりますし、同じフレーム構成でもループ前提なら最終コマから先頭コマへ自然につながっている必要があります。
歩行なら足の左右が切り替わる瞬間、点滅なら暗い状態へ戻る瞬間が不自然だと、ループで違和感が増幅されます。

ウエイトについては、編集画面でちょうどよく見えても、書き出したGIFでは体感が少し変わることがあります。
ブラウザで再生したときのテンポが、作業中のプレビューよりやや速く見えたり、逆に間延びして見えたりする場面があるからです。
私は短い点滅アニメほどこの差を意識していて、書き出し後に実際の閲覧環境で見たとき、1コマだけ短すぎて光が読めないことがありました。
GIFはフレームの表示時間を持てても、見る側の再生環境やブラウザ差によって再生体感が変わるため、作業時のプレビューと同じ体感になるとは限らないので、極端に細かい間よりも、少し余裕を持ったウエイトのほうが破綻しにくい設計です。

ゲーム向け連番/スプライト用途

Web掲載やSNS共有ならGIFとPNGで足りますが、ゲーム実装まで視野に入れると、別の出力も必要になります。
代表的なのは連番PNGスプライトシートです。
1フレームずつ独立したPNGとして出す方法は、ゲームエンジン側でアニメを組みやすく、差し替えも明快です。
歩行の3コマ目だけ修正したいとき、対象ファイルだけ差し替えれば済みます。

一方、スプライトシートは複数フレームを1枚にまとめる形式で、読み込み回数を減らしたい場面や、既存の実装ルールに合わせたい場面でよく使います。
Piskelのようにスプライトシート出力を前面に出しているツールもありますが、GraphicsGaleで作った絵も、用途に応じて連番や別形式へ展開する考え方は同じです。
完成形が「見るためのGIF」なのか、「実装するための素材」なのかで、正解の保存形式は変わります。

この段階でも、ぼやけ対策はそのまま引き継がれます。
ゲームに載せる前提の画像を途中で拡大縮小する場合、整数倍と最近傍補間を崩すと、せっかく整えた1pxの輪郭が鈍ります。
とくにUIアイコンや小型スプライトは、1列ぶんの線が消えたり太ったりするだけで印象が変わります。
書き出し後に別ツールでまとめる場合も、画像処理側で補間が入っていないかを意識しておくと、完成時の見え方がぶれません。

保存形式を分けて考えると、役割はシンプルです。
編集に戻るための.gal、静止画配布のPNG、アニメ共有のGIF、実装素材としての連番PNGやスプライトシートという整理です。
この切り分けができると、完成後に「どれを消してよくて、どれを残すべきか」で迷わなくなります。

GraphicsGaleの強みと弱み|Aseprite・Piskelと比べるとどうか

無料性と導入障壁の低さ

GraphicsGaleのいちばん大きな強みは、いま始める人にとって入口が軽いことです。
無料で触れられて、しかもドット絵だけでなくアニメGIFまでそのまま試せるので、「静止画は描けたけれど動かすのは別のソフトで」という分断が起きません。
短い点滅や上下動のような2〜4フレームのループを、描いて、その場で見て、すぐ直す流れに持ち込みやすいのが魅力です。

この「書き出し前提ではなく、編集中に詰められる」感覚は、初心者の成功体験を早く作ります。
短いループを何度も保存して外部ビューアで確認するより、編集画面の近くで動きを見ながら間を削ったり足したりできたほうが、「1コマ直したらどう変わるか」がすぐ返ってきます。
最初の一歩では、この反応の早さが想像以上に効きます。
私もアニメ練習の導入では、完成度よりまず動いた実感を得られるツールのほうが定着しやすいと感じています。

そのうえGraphicsGaleはWindows専用です。
これは弱みでもありますが、Windows環境で使うぶんには軽快さとして働きます。
古くからある定番ツールらしく、余計な演出より編集とプレビューの往復に寄った設計で、低めの解像度のスプライトを何枚も触る用途と噛み合います。

一方で、導入障壁がゼロというわけではありません。
UIは今の基準で見ると古めで、ボタン配置や操作の流れにも時代を感じます。
現代的なクリエイティブツールに慣れている人ほど、最初は「どこで何を切り替えるのか」を探す時間が出ます。
無料で入れることと、最初から迷わず使えることは別で、AsepriteやPiskelと比べると、この点ははっきり分かれるところです。

アニメ機能の操作性比較

アニメーション周りだけで見ると、GraphicsGaleは今でも芯のある強さを持っています。
リアルタイムプレビュー、オニオンスキン、GIF出力までがひと続きで、ドット絵の「少ない枚数を反復して調整する」作業に向いています。
歩行や点滅のような短いループでは、1フレーム前後の差を見ながら描き直せることがそのまま作業速度につながります。

Asepriteはここに対して、より整理されたUIと多機能さで応えています。
フレームやアニメの管理は現代的で、タグや再生モードのように、複数のモーションを整理しながら進める発想が強いツールです。
待機、歩行、攻撃のようにアニメを並行して持つ場面では、Asepriteのほうが構造的に把握しやすいと感じます。
単発の練習より、制作物全体を見据えた運用に向いています。

Piskelはもっと入口寄りです。
ブラウザで開いてすぐ触れ、リアルタイムプレビューもわかりやすいので、「まず1つ動かしてみたい」という局面ではとても相性がいいです。
ただ、作業が長くなるほどブラウザベースの軽快さと引き換えに、制作の中心ツールとして好みが分かれてきます。
スケッチ感覚で始めるには合っていますが、腰を据えて作るなら専用アプリ系のほうが落ち着く人も多いはずです。

操作感の違いをひとことで言うなら、GraphicsGaleはアニメの試行錯誤が速い職人型、Asepriteは整理力の高い現代型、Piskelは導入が軽いブラウザ型です。
短いループを何度もいじるだけならGraphicsGaleは今でも戦えますし、むしろそこに絞ると独特の強さがあります。
反面、画面構成の古さが最初の壁になりやすく、触り始めの段階ではAsepriteやPiskelのほうが理解しやすい人もいます。

出力形式・ワークフローの違い

ワークフローの差は、完成物をどこへ持っていくかで見えてきます。
GraphicsGaleはGIF対応が明確な武器で、短いアニメを作ってそのまま見せる流れと相性がいいです。
オニオンスキンで詰めて、プレビューで確認して、GIFに出す。
この一直線の流れは、学習用にも共有用にも扱いやすい構成です。

Piskelはここにスプライトシート出力の強さがあります。
ゲーム実装に寄せた運用では、1枚にまとめて持っていけることがそのまま便利さになります。
PNG連番やスプライト用途を前提にしている人には、Piskelの出力思想のほうが馴染みやすい場面があります。

Asepriteはアニメ制作そのものだけでなく、制作データの整理や後工程との接続まで含めて組み立てやすいタイプです。
単純なGIF書き出しだけでなく、「あとで差し替える」「複数モーションを保つ」「素材として管理する」といった運用に向きます。
個人制作でもチーム制作でも、工程が増えるほど強みが出ます。

比較を整理すると、次のようになります。

項目GraphicsGaleAsepritePiskel
環境Windows専用専用アプリ系ブラウザ
価格/導入無料有料無料オンライン
アニメ機能オニオンスキン、リアルタイムプレビュー、GIF対応オニオンスキン、再生モード、タグ管理リアルタイムプレビュー、GIF出力、スプライトシート出力
UI傾向古めで癖があるが軽快現代的で構成シンプルで入口が広い構成
出力形式の傾向GIF中心のアニメ確認と共有に強い制作管理を含む運用に向くGIFとスプライトシートの橋渡しが得意

GraphicsGaleはWindows専用であるぶん、環境の制約は避けられません。
Mac中心の制作環境や、端末をまたいで触りたい運用には乗せにくい設計です。
ただし、Windowsでドット絵アニメを無料で始めるという条件に絞ると、依然として候補に残るだけの理由があります。

どの用途ならどれを選ぶか

GraphicsGaleが向いているのは、ドット絵アニメを覚えたい人、短いループを何本も試したい人、そしてWindows環境で完結させたい人です。
UIは古めに感じる部分がありますが、そのぶん「描く」「前後フレームを見る」「動かす」という往復に集中しやすく、基礎を身体で覚える段階とは相性が良いと言えます。
無料で始められる点と試行錯誤の速さが直結している点が、いまでも選ばれる理由です。

Piskelはインストール不要で手早く触れ、教育用途や試作に向いています。
ブラウザで開いてそのまま描けるため、初回のハードルが低く、スプライトシート出力などゲーム向けの機能を簡単に試せる点が魅力です。

選び分けを一文で置くなら、無料でアニメの手応えを最短でつかむならGraphicsGale、整理された制作環境まで求めるならAseprite、導入の軽さとブラウザ完結を優先するならPiskelです。
GraphicsGaleは古いツールではあっても、短いループをその場で詰める体験に関しては、いま触っても古びていません。

よくあるつまずき

オニオンスキンが効かないとき

GraphicsGaleで前後フレームの薄い表示が出ないときは、まず不具合より設定違いを疑うほうが早いです。
実際、この機能は「表示を有効にする」「どちら側のフレームを見るかを決める」「いま編集中のフレーム位置を間違えない」の3点でつまずくことが多く、どれか1つ外れているだけで「効いていない」ように見えます。

手順はFAQ的に切り分けると整理しやすくなります。
オニオンスキン表示そのものがオフになっていないかを見て、その次に前フレームだけを見る設定なのか、後フレームだけを見る設定なのか、両方を見る状態なのかを確認します。
歩行や点滅のような短いループでは、前フレームだけ見えていれば十分な場面もありますが、上下動や往復運動では後フレームも見えないとタイミングを読み違えます。
そこが噛み合っていないと、表示は出ているのに役に立っていない、という状態になります。

もう1つ見落としやすいのが、同じ絵に見えるフレームを連続で置いているケースです。
2〜4フレーム程度の短いループでは差分が小さいため、オニオンスキンが出ていても変化に気づきにくいことがあります。
私は最初、機能が止まっていると思って設定を触り直したのですが、実際は前後フレームの差が1pxしかなく、表示されていても見分けづらかっただけでした。
1度、腕や足先などの目印になる部分を少し大きくずらして確認すると、表示の有無を切り分けやすくなります。

UI表記の細部は配布版ごとに確認しておく必要があり、公式サイトや配布ページの仕様情報を参照すると確実です。

透明PNG/GIFの基本

背景を透過したまま出したいなら、静止画はPNG、アニメーションはGIFという整理が基本になります。
PNGは背景透明との相性がよく、UI素材やスプライトの1枚絵に向きます。
GIFも透明指定はできますが、フルカラーの透過PNGとは仕組みが異なり、パレットベースの制約を受けます。
そのため、同じ「透明」で考えると混乱しやすいところです。

PNGで透明にならないときは、描画面で見えている市松模様と、実際の背景色を混同しているケースがまずあります。
編集画面の見た目だけでなく、背景レイヤー相当の塗りつぶしが残っていないか、透明で保存する前提の色設定になっているかを見ます。
加えて、パレットを使う画像では「透明にしたい色」が普通の色として残っていることがあります。
白背景に見えていても、その白が単なる白色で塗られていれば、書き出し後は白い四角のままです。

チェックポイントは次の4つに絞ると混乱しません。

  • 背景そのものを塗っていないかどうかを確認する
  • 透明にしたい部分が実色ではなく透過扱いになっているかどうかを確認する
  • パレット運用時に透明色の割り当てが崩れていないかどうかを確認する
  • GIFでは透過色の指定後に輪郭が欠けて見えていないか

GIFは1フレームあたり最大256色のパレット制約があるので、透明を含めた色の割り当てで崩れが出ることがあります。
特に淡い影や半透明っぽい表現をそのまま持ち込むと、減色の段階で輪郭が荒れたり、意図しない色に置き換わったりします。
ドット絵アニメをGIFで配るときは、透過を含めても色数の整理が効いている絵のほうが結果が安定します。

⚠️ Warning

透明書き出しで迷ったときは、まずPNGで背景が抜ける状態を作り、その後にGIFへ展開すると原因を切り分けやすくなります。PNGで透過できていれば、残る問題はGIF側のパレット処理に絞れます。 [!NOTE]

拡大表示がぼやける問題

ドット絵がぼやけて見えるとき、絵そのものより「表示のされ方」が原因になっている場面が多いです。
前のセクションでも触れた通り、ピクセルアートの拡大はニアレストネイバー、つまり補間なしの拡大が前提です。
元ピクセルをそのまま四角く拡大する方式なので、輪郭がにじまず、16×16を4倍にしたときも1pxが4×4のブロックとして残ります。

厄介なのは、編集ソフト側で問題がなくても、ウインドウ拡大やOS側のスケーリングで見え方だけがぼけることです。
ここは初心者が引っかかりやすい罠で、私も最初は「書いた線が甘い」と勘違いしました。
実際にはキャンバスの表示が100%や整数倍から外れていて、Windowsの拡大表示で中間的に引き延ばされていただけでした。
絵のデータは崩れていないのに、画面上だけ少し溶けたように見えるわけです。

この症状は、100%表示か2倍、3倍、4倍のような整数倍表示に戻すと一気に判別できます。
150%のような半端な倍率は、補間なしでもピクセル幅が均一に並びません。
横1pxの線が場所によって太さ違いに見えたり、斜め線の角が妙に欠けて見えたりします。
書き出し時だけでなく、作業中の表示倍率も整数倍で揃えておくと、描いた結果と見た目のズレが減ります。

拡大画像を別ソフトやブラウザで確認するときも同じで、補間ありのビューアに入れた瞬間に印象が変わります。
GraphicsGaleで整っていた絵が外で急に眠く見えるときは、画像ファイルの問題ではなく、閲覧側が滑らか表示を入れていることが多いです。

保存形式の選び方

保存形式で迷ったら、作業用と配布用を分けるだけで整理できます。
制作途中の元データは.galで保持し、見せるための静止画はPNG、短いアニメの共有はGIFという役割分担です。
この切り分けを崩すと、あとで修正したいときに困ります。

.galを残す意味は、フレーム構成や編集状態を保てる点にあります。
PNGやGIFは完成物としては便利ですが、途中の調整に戻る前提ではありません。
目パチの1フレームだけ直したい、ウエイト感を少し変えたい、色を差し替えたいという場面では、配布用形式だけ残していると手戻りが増えます。

PNGを選ぶ場面は、背景透明の1枚絵、UIパーツ、スプライト単体の受け渡しです。
色の保持も安定しており、GIFのような256色制限を前提に考えなくて済みます。
GIFを選ぶ場面は、短いアニメをそのまま見せたいときです。
再生環境を用意しなくても動きを共有できるのが強みですが、パレット制約があるぶん、色数の多い絵や微妙なグラデーションには向きません。

このあたりはGraphicsGaleの性格とも一致しています。
制作の中心は.gal、見せる出口はPNGかGIF。
そう整理しておくと、形式ごとの役割がぶれません。

情報の時点チェック

GraphicsGaleは長く使われてきたツールなので、検索結果に古い情報と現行情報が混ざります。
ここを混同すると、「有料ソフトなのか無料ソフトなのか」「いま配布されている版はどれか」で迷います。

現行の理解として押さえておきたいのは、旧有料版の記述と無料化後の扱いを分けることです。
過去にはプロ版1,995円という記載が残っていましたが、それをそのまま現状として読むとズレます。
無料化の時点は2017年6月18日で、この日以降は無料で導入できるツールとして整理するのが正確です。
古いブログやまとめ記事が間違っているというより、書かれた時点が違うだけです。

配布版の表記も同様で、ダウンロード先によって掲載文が古いことがあります。
確認できた配布版表記としては2.08.21が見つかりますが、こうした番号は「そのページでそう書かれている」という時点情報として読む必要があります。
GraphicsGaleのように歴史の長いソフトは、記事の日付、配布ページの更新時期、ソフト本体の表記がずれて見えることが珍しくありません。

実務上は、「旧有料時代の説明なのか」「無料化後の説明なのか」「配布版番号の記述はいつ時点のものか」を切り分けるだけで、情報の読み違いはだいぶ減ります。
とくに比較記事や導入記事では、古い価格情報だけが独り歩きしやすいので、時点を添えて読む姿勢がそのまま精度につながります。

まとめと次のアクション

GraphicsGaleは、Windowsで無料導入できて、静止画から短いアニメまで同じ流れで試せるのが強みです。
とくにオニオンスキンとプレビューがあるので、ドット絵アニメの入口がぶれません。
古めの見た目に構えず、小さなループを1本完成させることが上達の近道です。

最初の一歩は、16x16か32x32で静止画を描き、複製して2フレームに分け、オニオンスキンを見ながら1〜2pxだけ差分を入れることです。
まず“点滅”を成功させると、次の4フレーム歩行に広げるときの負荷が一気に下がります。
私はこの最小成功体験を先に作るほうが、最初から歩行を組むより手が止まりませんでした。
.galで残しつつ、見せる用にGIFかPNGを書き出せば流れは固まります。

次に伸ばすなら、歩行ループの増やし方、スプライトシート化、色管理の基礎に進むと制作の幅が広がります。

シェア

森川 レイ

デジタルアート系メディアでツールレビューを5年以上執筆。ドット絵制作ツールからゲームエンジンまで、クリエイター向けツールの実用的なワークフロー提案を専門とする。

関連記事

ツール

ドット絵ソフトおすすめ10選|無料・有料・環境別比較

ドット絵ツール選びは、PC・スマホ・ブラウザのどれで描くかに加えて、無料か有料か、静止画かアニメか、ゲーム開発まで見据えるかで最適解が変わります。初心者ならまず無料のdotpictPiskelPixeloramaのいずれかで16x16か32x32を1作仕上げるのが近道で、

ツール

Aseprite 使い方|初心者向け 基本操作と便利機能

Asepriteは機能が多く見えますが、最初の30分は32x32の顔アイコンを1枚仕上げて、そのまま2〜4フレームの簡単なアニメまで動かすところに絞ると、必要な操作が一気に見えてきます。

ツール

ドット絵アプリおすすめ8選|無料で使えるスマホ・iPad・PC向け

スマホやiPadで手軽にドット絵を描けるアプリを8本厳選。Pixel Studio・dotpict・8bit Painterなど、指での操作性・PNG/GIF書き出し・アニメーション対応の観点から比較しました。無料アプリ中心で、初心者でもすぐに始められます。

ツール

CLIP STUDIO PAINT ドット絵|設定と描き方

CLIP STUDIO PAINTでも、1px単位のドット絵はきちんと作れます。専用のピクセルアートツールほど自動で“pixel perfect”に整えてはくれませんが、1pxブラシ、グリッド、スナップ、塗り設定を最小限そろえれば、まずは32x32の顔アイコンを1つ仕上げるところまで迷わず進められます。