マイクロなGIFアニメバナーを目指して

2026年6月6日開催予定の個人サイトWebオンリーめぐる市へ参加することになりました。それに合わせた 個人サイトっぽい 取り組みの一環として、今回はあまねけ！を宣伝するGIFアニメのマイクロバナーを作ったので、気付いた点をいくつかまとめておきます。

!あまねけ！バナー

マイクロなGIFアニメバナーって何？
マイクロなGIFアニメバナーを作る
マイクロなGIFアニメバナーを使う
まとめ

マイクロなGIFアニメバナーって何？

そうですね。この質問は、「マイクロバナーって何？」と「GIFアニメバナーって何？」2つに分解することができます！

まず、マイクロバナーというのは、幅88ピクセル・高さ31ピクセルのごく小さな画像です。バナーというのは旗印とか横断幕という意味で、ウェブの領域では主に広告や宣伝のための中～小サイズの画像を指しています。この中途半端なサイズの起源は、かつてあったブラウザ「Netscape Navigator」のプロモーション「Netscape Now Program」で配られたバナーのサイズだと言われていますね。

ウェブ広告の業界団体IABが2007年頃に標準化したバナーサイズの一覧には、このNetscape Now Programから始まるバナーリンクの爆発的なブームを考慮したのか、88x31のサイズが「Micro Bar」として含まれています（Micro Bannerじゃないんだ）。

次に、GIFアニメバナーというのは、10～30fpsくらいでアニメーションするバナーのことです。バナーリンクのブーム当時には、手軽にアニメーションを扱える画像形式がGIFくらいしかなかったので、この記事ではあえてアニメバナーではなくGIFアニメバナーと呼んでいます。バナー収集サイトThe 88x31 GIF Collectionにあるのも、GIFばかりです。

もちろん、今は2026年なのでWebPやAPNGといったより高品質で効率のよい画像形式でアニメーションを利用できます。今からアニメバナーを作るならこれらの形式もおすすめです。一方で、GIFの色数制限（256色）を逆手に取ればレトロな雰囲気も作り出せるので、制作段階で減色するなり、GIFアニメ生成ツールが吐いたGIFを再度変換するのもよい考えです。

モダンな画像形式を使いつつGIFの気配を残した表現を「GIFアニメ」と呼び続けるのも悪くないでしょう。きっと。

マイクロなGIFアニメバナーを作る

今回作ったバナーは冒頭に掲載したものです。もう一度貼っておきます。

!あまねけ！バナー

ここからは、この音ゲーあまねちゃんバナーをどのように作ったか概要を説明します。バナーの作り方は人それぞれだと思いますし、私は普段絵を描いたり動画を作ったりするタイプではないので、この手順はあまりよい例にはならないはずです。面倒なところをかなりhackyに済ませたので、参考程度にどうぞ。

画像素材を作る

88x31そのものや、それに収める前提のサイズ（小さなパーツ、あるいはスクロール用の長い画像）の画像素材を作ります。GIMPを使いましたが、透明度のあるビットマップを編集できるペイント系ソフトなら何でもいいです。

キャンバス全体に配置する素材:

アニメーションの一部に使う素材:

昔ドット絵を描いたときはGIMPでレイヤーを付け外しして1枚ずつ出力していましたが、ごく小規模なアニメを超えると現実的な作業ではなくなるので、動きは動画編集ソフトで与えていきます。

動画を作る

今回は、ゆっくりMovieMaker4を使いました。本来は実況動画などを作るソフトであり、GIFアニメの制作に使う必然性は全くありません。1ヶ月前にひみつ道具「世界修正時計」で使ったので少し慣れているというだけです。

まともな動画編集の経験は、高校の文化祭で作ったCMか大学生の時に文化祭で作ったCMくらいで（CMばっかりだ）、当時はAviUtlを使っていました。だから、なんとなくAviUtlっぽく触れるなら何でもよかったのです。Premiere Proとかなら楽なのかな？

YMM4での編集では、わずかに問題がありました。奇数の幅・高さのプロジェクトが作れないのです。高さ31ピクセルにはできないので、88x32にして出力後に削るか、倍の大きさ（176x62）で作ってあとで縮小する必要があります。倍の大きさで作ると奇数座標の配置で最終的な出力がボケますし、アニメーションなどの映像効果資源もよく注意しないと使えないので、やるなら88x32で作るのがおすすめです。

この場合、下部1ピクセルの行はマゼンタなど目立つ色で埋めておきましょう。これなら削り忘れても気付きやすいです。

!88x32画像の下部1ピクセルの行をマゼンタで埋めたイメージ

あと、プレビューエリアを大きくすると表示がボケボケになって少し困ったので、また作るならこれもなんとかしたいところです。

動画の編集が完了したら、これらをPNG形式のフレームで書き出します。

出力フレームを削る

書き出した画像フレームは88x32なので、下を削って88x31にします。慣れているのでImageMagickを使いましたが、ここも自由にしてください。GUIで済む範囲のツールだと、XnConvertあたりがよさそうでした。

# 下部1ピクセルを削る（このコマンドは元のファイルを書き換えます）
mogrify -crop 88x31+0+0 +repage frames/*.png

もし88x31より大きなサイズ（ただし定数倍）で出力したい場合は、さらにここで拡大しておきます。一般的な画像編集ソフトの拡大機能や、mogrifyコマンドの -resize オプションなどを使うと、画像がボケボケになるので注意してください。ふつうはよかれと思ってバイリニアなりで綺麗に拡大しようとするので、これらの補間機能を無効にする必要があります。

# framesフォルダのフレーム画像を最近傍法で2倍に拡大してframes2xフォルダに書き出す
mkdir -p frames2x
mogrify -path frames2x -scale 200% frames/*.png

適切に拡大できていれば、以下のような出力になります。ピクセルは潰れません。

!あまねけ！バナーのうち、あまねけ！と表示されているフレームを2倍に拡大したもの

GIFアニメを生成する

できあがったフレーム画像の列をGIFアニメにまとめます。今回はたまに使っているgifskiで生成しました。もちろんここも何でもいいです。gifskiならWindowsとmacOS向けのGUIアプリ版もあるようなので、お気に入りのものがなければ使ってみてください。

# framesフォルダのフレーム画像を10fpsのGIFアニメに変換してanime.gifに書き出す
gifski -o anime.gif --fps 10 frames/*.png

こうして、音ゲーあまねちゃんバナーが作られました！

!あまねけ！バナー

マイクロなGIFアニメバナーを使う

2026年にブラウザでごく小さな解像度の画像を表示する際は、いろいろと注意すべき点があります。

まず、スマートフォンやタブレット、あるいは高解像度のディスプレイを使っているPCユーザーの環境では、1CSSピクセル幅あたり1.5～3ドットで描画するのが一般的です。この場合、CSSピクセルでのサイズに対して、幅と高さの両方で1.5倍～3倍の大きさが必要です。

そのため、ブラウザでの画像表示サイズと実際の画像サイズが揃っていると、足りないドットを拡大で補おうとするのでボケた印象を与えてしまいます。

こんな感じですね:

この事象の解決方法は2つあります。1つは、大きな画像を用意して小さな幅で表示するパターンです。例えば、264x93（3倍）の画像を用意して、ブラウザでは幅88ピクセル・高さ31ピクセルとして表示します。srcsetを使えば、必要のない環境にまで大きなサイズの画像を配信せずに済みます。

<!-- 2x:1CSSピクセルあたり2ドットの環境にはbanner-2x.gifを、3xにはbanner-3x.gifを配信する -->
<img src="banner-1x.gif" srcset="banner-2x.gif 2x, banner-3x.gif 3x" width="88" alt="XXXへのリンク">

srcsetによる画像サイズの出し分けは汎用性が高い手法ですが、実は今回のバナーのようなケースではあまり利点がありません。ふつうは縮小画像から元の拡大画像を得るのは難しく、この部分に大きな画像を配信するメリットがあるわけです。しかし、ドット絵なら単純な補間で拡大画像が一意に定まるので、何枚もサイズの違う画像を作る必要性がありません。手間も容量も余分にかかってしまいます。

そのため、今回のケースでは image-rendering プロパティを使うのが最適解です。これは、もともと画像サイズとデバイスでの表示サイズが異なる場合の補間手法を指定できるもので、高解像度のディスプレイで足りないドットを拡大する際にも使われるようです。ここに pixelated を指定すると、最近傍法などのピクセルの見た目を維持できる手法で補間されます。これなら、88x31で配信したまま綺麗でパキッとしたピクセルを表示できますね。

.banner {
  image-rendering: pixelated;
}

表示はこんな感じ:

ちなみに、あまねけ！では、高解像度のディスプレイでバナーの表示が小さくなりすぎないように以下のようなスタイルも入れています。手元では、1dppxのディスプレイと2dppxのスマホで見たときの物理的なサイズがほぼ同じになりました。メディアクエリを加えれば、3dppxの環境は3倍表示にすることもできます。

@media (min-resolution: 1.5dppx) {
  .banner-88x31 {
    width: calc(88px * 2);
    height: calc(31px * 2);
  }
}

まとめ

マイクロなGIFアニメバナーをサイトに掲載する際のポイントをまとめます。

好きな動画編集ソフトで88x31のフレーム画像の列を出力して、gifskiなどのツールでGIFアニメにまとめます。
一般的な動画編集ソフトでは奇数の幅・高さを指定できません。88x32で作ってからXnConvertなどで一括変換します。
サイトに掲載する際は、CSSで image-rendering: pixelated; を指定して、デバイスでの表示がボケないようにします。

これを踏まえて、みなさんもぜひマイクロなGIFアニメバナーを作ってみましょう。他のいにしえの小さな画像規格に興味があれば、「X-Face compatibleなアイコンを目指して」も読んでみてください。個人サイトWebオンリーめぐる市もよろしくお願いします。