劣化の工程を、自分で積む。画像劣化ツール「GABIBI MAX（ガビビマックス）」を公開しました。

画像をわざと低画質に崩す加工は、スライダーを一本動かすだけでもそれらしくはなります。ただ「もう少しガラケーの液晶っぽく」「転載を何度も重ねたような荒れ方に」と詰め始めると、決まった手順のツールでは早々に手が止まります。デザイン事務所AMIXは、劣化の工程そのものを部品として積み上げられる無料Webツール「GABIBI MAX（ガビビマックス）」を公開しました。縮小、再帰JPEG、減色ディザ、クロマにじみ、再スクショなど12種類の工程を、好きな順番で好きな回数だけ重ねられます。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

GABIBI MAXは、読み込んだ画像に劣化の工程を積み重ねて低画質な質感を作り出すツールです。画面上部には「Degradation Pipeline Studio」と添えられており、その名のとおり劣化の組み立て台として設計されています。

通常版のGABIBIは、縮小 → 再帰JPEG圧縮 → 拡大という決まった一本道で画像を崩します。手軽な反面、出てくる質感の系統はひとつです。GABIBI MAXはこの一本道を12個の部品に分解し、「劣化パイプライン」として自由に組み替えられるようにしたものです。JPEGのブロックノイズ、ウェブGIFの減色ディザ、色差成分の間引きによる赤のにじみ、彩度ブーストの焦げついた色。由来の違うこうした崩れ方を、必要な順番で必要な回数だけ重ねられます。

処理はすべてお使いのブラウザ内で実行され、読み込んだ画像が当方のサーバーへ送信・保存されることはありません。データが端末内にとどまる仕組みです。読み込んだ画像は長辺1280pxを上限とする作業解像度にそろえられ、メインプレビューと静止画保存はこの作業解像度を使います。一方、スタイルのサムネイルは長辺384px以下の縮小画像で生成され、細部の崩れ方は異なる場合があります。パソコンでもスマートフォンでも動作し、画像はドラッグ＆ドロップ、クリックでの選択、Cmd/Ctrl+Vでの貼り付けから読み込めます。

劣化工程を「積む」という考え方

このツールでは、劣化を「どれくらい下げるか」ではなく「何を何の後にかけるか」で考えます。画面右側には「かんたん」と「詳細」の2つのタブがあり、詳細タブに並ぶのが劣化パイプラインです。工程はドラッグで順番を入れ替えられ、選択した工程のパラメータはすぐ下に展開されます。プルダウンから工程を選んで「追加」を押せば、同じ工程を何度でも挟み込めます。

いきなり組み立てるのが難しければ、かんたんタブから始められます。画像を読み込むと、その画像自身を素材にした12種類のスタイルのプレビューがサムネイルとして並ぶため、名前ではなく結果を見て選べます。選んだ後は「破壊度」スライダー1本で、そのスタイルの全パラメータをまとめて増減できます。スタイル選択時は破壊度30から始まり、50がそのスタイル本来の設定で、左に振れば控えめに、右に振れば各値が上限側へ寄っていきます。方向すら決まっていないときは、ツールバーの「ガチャ」で工程をランダムに組ませ、「少し変える」で気に入った方向へ少しずつ寄せていく使い方もできます。

収録されている12の劣化工程

パイプラインに積める工程は次の12種類です。それぞれ独立したパラメータを持ちます。

• 縮小では、解像度を1/1から1/64まで落とします。補間を「なめらか」から「ドット」に切り替えると、間引き方そのものが変わります。ガビガビの土台になる工程です。
• **拡大（元サイズへ）**では、入力時の解像度まで引き伸ばします。補間を「ドット」にするとドット絵状の輪郭になります。
• 再帰JPEGは、品質1〜95％のJPEG圧縮を最大120回繰り返します。同じ位置と設定で圧縮し続けると変化が小さくなる場合があるため、「ズレ」を0〜8pxで指定してパスごとに画像を少しずらし、世代劣化が積み上がるようにしてあります。
• WebP圧縮は、JPEGとは崩れ方が違い、輪郭が水彩画のようにのっぺりと溶けます。品質1〜90％、回数は最大60回。
• **減色（ディザ）**は、メディアンカット法で色数を2〜256色まで絞り、Floyd-Steinbergディザを掛けます。パレットは「画像に最適化」「Webセーフ216色」「グレースケール」から選べ、2000年代のウェブGIFらしい粒立ちが出ます。
• ビット深度は、RGBを各1〜8ビットに削り、階調の縞（バンディング）を発生させます。5/6/5はガラケー液晶（RGB565）の色です。
• クロマにじみは、色差成分だけを間引きます。4:2:2（横のみ）から4:2:0、4:1:1、4:1:0、8x8までの5段階で、赤や青の輪郭が本体からずれていきます。
• 彩度ブーストは、彩度を最大400％、コントラストを最大300％まで持ち上げます。圧縮だけでは出ない、いわゆるディープフライな焦げた色になります。
• シャープは、輪郭にハロを作ります。強さ5〜200％、最大10回の繰り返しで「加工しすぎ」の質感に寄せられます。
• ぼかしは、半径1〜12pxで情報を潰します。この後に圧縮を掛けると、のっぺりした崩れ方になります。
• ノイズは、カラーまたはモノクロのざらつきを足します。後段でJPEGを掛けると、ノイズがブロックに固まります。
• 再スクショは、微小な回転と拡縮を挟みながらJPEG圧縮を繰り返します。スクリーンショットの転載を何度も重ねた画像の質感を作る工程です。

かんたんタブに並ぶスタイルも、この12工程の組み合わせとして定義されています。「ガビビ標準」「JPEG地獄」「ディープフライ」「ガラケー待受」「2000年代GIF」「再スクショ」「コピー機」「赤にじみ」「VHS風」「ドット絵」「水彩WebP」「完全崩壊」の12種類で、選んだ後に詳細タブへ移れば、その中身をそのまま編集できます。

主な機能・特徴

工程の組み立て以外にも、試行錯誤を支える仕組みが用意されています。

• 画像を読み込むと、その画像自身で12スタイルすべてのプレビューが生成されます。仕上がりを見比べてから選べるので、名前から結果を想像する必要がありません。
• 「崩壊の経過」スライダーで、工程が進むごとに画像が壊れていく途中の状態をたどれます。再生ボタンを押せばアニメーションとして眺められます。
• 「元画像と比較」にチェックを入れると、プレビューが分割表示になり、スライダーで境界を動かしながら元画像と結果を見比べられます。
• ブラシで塗った範囲だけに劣化を適用できます。ブラシサイズは10〜500px、ふちの柔らかさを決める「ボケ足」は0〜100で調整でき、「塗った所を守る」で内外を反転させることもできます。
• 「結果をもう一度壊す」で、いま見えている結果を新しい素材として積み直せます。何代目の素材かはステータスバーに表示されます。
• 書き出しはJPGとPNGのほか、崩れていく過程を「崩壊GIF」「崩壊WebM」として保存できます。動きの構成は「ブーメラン（崩れて戻る）」「グリッチ復帰（一気に元絵へ）」「ワンショット（崩れて終わり）」の3種類から選べます。ワンショットでも、ファイル形式や再生側の設定によって再び先頭から再生される場合があります。
• 「レシピ共有」で、組んだパイプラインと破壊度をURLに埋め込んで渡せます。URLを開くと同じ設定が復元されます（画像は含まれません）。
• 操作はUndo・Redoが効き、R（処理を確定して表示）、S（保存）、G（ガチャ）、M（少し変える）、Space（経過の再生）、Z（元画像との切り替え）といったキーボードショートカットにも対応しています。

使い方

まずビューポートに画像をドラッグ＆ドロップします。クリックしてファイルを選ぶか、Cmd/Ctrl+Vでクリップボードから貼り付けることもできます。読み込みが終わると、かんたんタブに12スタイルのサムネイルが順に並びます。

気になるサムネイルを選ぶとプレビューに反映されるので、「破壊度」を左右に振って強さを決めます。ここで満足すれば「保存する」を押すだけです。もっと詰めたいときは詳細タブへ移り、劣化パイプラインの工程をドラッグで並べ替えたり、プルダウンから工程を追加したり、選択中の工程のパラメータを直接動かします。特定の部分だけ崩したい場合は、かんたんタブの「ブラシで部分適用」に切り替えて、プレビュー上を指またはマウスでなぞります。

仕上がったら「JPG保存」または「PNG保存」で書き出します。崩れていく過程を動かしたいときは「崩壊GIF」または「崩壊WebM」を選びます。GIFは画質を「軽量（SNS向け・小さめ）」「標準」「高画質」から選べ、書き出し後のファイルサイズはステータスバーに表示されます。iPhoneやiPadでは、形式とブラウザの対応状況に応じて保存用の画面が開きます。共有機能が利用できない場合はダウンロードを使い、保存先を端末で確認してください。

工程の順番で結果が変わる

同じ工程を同じパラメータで使っても、順番が違えば別の画になります。分かりやすいのは減色とJPEGの関係です。「減色してからJPEG」ではディザの粒がJPEGでにじみ、ざらついた有機的な質感になります。逆に「JPEGしてから減色」では、JPEGのブロックノイズが限られた色数へ量子化され、硬い模様として固まります。どちらが正しいということはなく、狙いによって使い分けるものです。

ノイズも同じです。圧縮の前に足せばブロックの中に取り込まれて画の一部になり、圧縮の後に足せばブロックの上に別の層として乗ります。彩度ブーストを最初に置けば元の色が押し出されてから崩れ、最後に置けば崩れた色が焦げつきます。パイプラインをドラッグで前後させるだけで確かめられるので、まずは同じ2工程を入れ替えて見比べるのが分かりやすい入口です。

崩れていく過程をアニメーションで書き出す

このツールは工程を進めながら中間画像を記録しているため、「崩壊の経過」スライダーで元画像から完成までの任意の地点を呼び出せます。再生ボタンでアニメーションとして流すこともでき、その動きはそのままGIFまたはWebMとして書き出せます。

ループの種類は3つです。「ブーメラン」は崩れて元に戻るため継ぎ目のない無限ループになり、「グリッチ復帰」は崩れきったところから一気に元絵へ戻る動き、「ワンショット」は崩れて終わりです。GIFは画質プリセットによってフレーム数と解像度、パレットの色数が変わり、15MBを超えた場合はその旨が表示されます。SNSに投稿する前提なら軽量寄り、素材として使うなら高画質、というように使い分けられます。WebMはMediaRecorderと対応する動画形式を利用できるブラウザで書き出せます。

活用シーン

• SNS向けのビジュアルで、整った画像の並びから浮き上がる素材を作りたいとき
• ガラケー待受やウェブGIFなど、特定の時代・機器の質感を狙って再現したいとき
• ミュージックビデオやジャケット、ZINEなどで一貫した崩し方の素材を量産したいとき
• グリッチアートやディープフライ加工のミーム素材を、崩れる過程ごと動かしたいとき
• Webサイトの背景やバナーで、被写体の輪郭を残したまま質感だけを落としたいとき
• 複数人の制作で、同じ劣化レシピをURLで共有して統一感をそろえたいとき

同じレシピをURLで渡せるので、素材を作る人と使う人が別でも崩し方をそろえられます。まずガチャで方向を探し、気に入った組み合わせをレシピとして残しておく、という使い方も向いています。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。画像処理はすべてブラウザ内で実行され、外部のサーバーへ送信・保存されることはありません。ブラウザの種類・バージョンや端末環境によっては、表示・動作・書き出し結果が異なる場合があります。WebP圧縮や崩壊WebMの書き出しは、対応していないブラウザでは利用できません。加工した画像を公開・配布する際は、元画像の著作権・肖像権その他の権利を侵害しないようご注意ください。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

狙った時代の質感を、工程から組み立ててみてください。まずはガチャを一度押すところから始めると、崩し方の幅が見えてきます。