Store Passportsを作っていると、低解像度のイラストが何度も必要になりました。画面の中で主張しすぎず、少し懐かしく、アプリ全体の雰囲気を作ってくれる絵です。AIに素材作りを任せることもできます。けれど、データ量を減らすことだけを優先したような、妙に粗くて使いにくい画像が出てくることがあります。欲しかったのは小さな画像ではありません。素材として使える絵でした。
低解像度の絵は、意外と出番が多い
Webアプリには、説明用の挿絵、アイコン、背景、空の状態を埋めるイラスト、短いアニメーションなど、画面の空気を作る素材が必要です。すべてを高精細な写真や大きなイラストにすると、読み込みも見た目も重くなります。小さな画面では、細部を描き込んでもほとんど見えません。
だから低解像度の絵には大きな需要があります。ただし、単にファイルサイズが小さければよいわけではありません。輪郭が分かること。色のまとまりがあること。別の画面に置いても世界観を壊さないこと。必要なら少し動かせること。素材には、軽さとは別の条件があります。
AIは、ときどき削り方が極端になる
AIに『軽い素材が欲しい』『ドット絵にしてほしい』と頼むと、解像度や色数を大きく落とした画像が返ってくることがあります。確かにデータ量は減っています。しかし、残してほしかった表情や形まで消え、ただ粗いだけの絵になることもあります。
逆に、見栄えを優先すると、細かな陰影や大量の色が入り、低解像度らしい統一感が失われます。生成のたびに仕上がりも揺れます。素材として使うには、どこを残し、どこを省くかを人間側で調整できる必要があります。
解像度を落とすことと、抽象化することは違う
単純な縮小は、元の画像にある情報を狭い格子へ押し込みます。細い線は消え、近い色は混ざり、偶然残った形だけが目立ちます。これは情報量の削減です。
抽象化は、何をその絵の特徴として残すかを選ぶことです。フクロウなら大きな目と丸い輪郭を残す。街なら建物を全部描かず、屋根の形と灯りで街らしさを作る。細部を捨てても、見た人が同じものを受け取れるように整理します。
調整項目は、飾りではなく抽象化の道具になる
Pixel Displayでは、出力する縦のピクセル数だけでなく、色数、明るさ、コントラスト、彩度、ディザリングを調整できます。これらは画像へ効果を足すためだけの項目ではありません。何を一つの色としてまとめ、どの境界を残し、どの印象を強めるかを選ぶための道具です。
色数を減らすと、似た色が一つの面にまとまります。コントラストを上げると、輪郭と明暗の役割が明確になります。彩度を調整すると、素材全体をアプリの世界観へ寄せられます。ディザリングは、使える色が少ない中で階調を感じさせる方法ですが、強すぎればノイズにもなります。だから結果を見ながら、人が選べるようにします。
素材として使うなら、その先の加工まで考える
完成した一枚の絵だけを作るなら、偶然きれいに見える変換でも足りるかもしれません。しかし、アプリの素材には続きがあります。色違いを作る。別の背景へ置く。表情を変える。数フレームのアニメーションにする。そのとき、輪郭や色のまとまりが安定していない画像は扱いにくくなります。
低解像度で形が整理され、色数が制御されていれば、一部のピクセルを動かすだけでも変化を作れます。目を閉じる。足を一歩ずらす。灯りを点滅させる。大きな画像を毎回生成し直すより、同じ素材から自然な派生を作りやすくなります。
雰囲気は、細部の量では決まらない
高精細で情報量の多い画像が、いつも雰囲気のある絵になるわけではありません。むしろ、少ない色と形の中に共通したルールがある方が、画面全体の世界観は強くなります。何を描かないかが揃うことで、複数の素材が同じ場所に住んでいるように見えます。
Pixel Displayで作りたいのは、写真を機械的に小さくする体験ではありません。元の画像を見ながら、どこまで削っても印象が残るかを試し、用途に合う色と形へ整えていく体験です。
作りたかったのは、変換結果ではなく素材
解像度、色数、明暗、彩度、ディザリング。これらを一つの正解へ自動で決めるのではなく、結果を見比べながら調整できるようにしたのは、最終的な目的が画像変換ではないからです。
欲しいのは、Store Passportsの画面に置ける絵であり、別のアプリにも使え、必要なら動かせる絵です。小さくても、その場所の雰囲気を作れる。Pixel Displayは、低解像度化を人間がコントロールし、素材として使えるところまで持っていくための作業台として作りました。