こんにちわ非エンジニアのRyoです。
ゲームの画像を入れてたらどんどんファイルサイズ大きくなってきたので、今更ながら圧縮やりだした。
同じように画像を適当に使っている方に「画像圧縮」についてご紹介。
そもそも画像サイズって何？
ゲームやアプリに使う画像は、「見た目を美しく保ちつつ、ファイルサイズは小さく」することが大切です。
でも正直、最初は「なんで画像サイズを気にする必要があるの？」って思っていました。でも、実際にやってみると、すげー効果があるんです！
なぜWebPがいいの？
WebPは、Googleが開発した次世代の画像形式です。マジで優秀なんです。
WebPの特徴
| 特徴 | 内容 |
|---|---|
| 軽い | JPEGより25〜30％小さく |
| 高画質 | ブロックノイズが少なく綺麗 |
| 透過対応 | PNGと同様に透過可能 |
| 幅広い対応 | Android・iOS・ブラウザで利用可能 |
つまり、WebPを使うと「軽くて綺麗」という理想的な画像が作れるんです。
ゲーム画面のサイズ（基準）
まず、ゲーム画面の解像度について理解しましょう。
| ゲーム画面の解像度 | 想定デバイス |
|---|---|
| 1280×720（HD） | スマホ横画面の一般的解像度 |
| 1536×1024〜 | Web / TWAアプリ用中〜大型背景 |
| 1920×1080（FHD） | タブレットやPC表示にも対応したサイズ |
最初は「なんでこんなに細かく分けるの？」って思っていましたが、デバイスによって最適なサイズが違うんです。
キャラ・敵の画像サイズガイド
用途別推奨サイズ
| 用途 | 推奨サイズ（px） | 解説 |
|---|---|---|
| 🧍♂️ 主人公・敵（立ち絵） | 512×512 〜 1024×1024 | 解像度が高ければ表情演出・アニメにも使える |
| 🕹 戦闘キャラ（SD） | 128×128 〜 256×256 | SDキャラ（ちびキャラ）やマス目戦闘用 |
| 👾 敵（全体図） | 256×256 〜 512×512 | 中ボスや大きめ敵なら512px以上あると安心 |
| 💬 顔グラ／表情パーツ | 256×256 〜 400×400 | UIで切り替えや重ねを行う場合に |
| 🎮 アイコン用 | 64×64 ～ 128×128 | ステータス欄や装備表示などに |
最初は「全部同じサイズでいいじゃん」って思っていましたが、用途によって最適なサイズが違うんです。
Canvaで作るときのおすすめ設定
Canvaを使う場合は、以下のサイズがおすすめです。
| 作りたい画像 | Canvaのサイズ指定例（px） |
|---|---|
| 敵キャラ（全身） | 512×512 |
| 主人公・仲間（表情差分あり） | 1024×1024 |
| SDキャラ／バトル用 | 256×256 |
| 顔グラだけ／立ち絵の一部 | 300×300〜400×400 |
| 装備・ステータスアイコン | 128×128 |
🟡 背景透過ありで書き出す（PNG）のもお忘れなく！
Squooshって何？
Squooshは、Google公式の無料ツールです。マジで使いやすいんです。
- 無料で使える
- ブラウザで動作する（アプリのインストール不要）
- 直感的な操作
- 高品質な圧縮
最初は「Googleのツールって難しそう…」って思っていましたが、実際はすごくシンプルでした。
圧縮手順（SquooshでWebPに変換）
1. Squooshにアクセス
まず、Squooshにアクセスします。
2. 画像をアップロード
背景画像（例：background.pngなど）をドラッグ＆ドロップまたはアップロードします。
3. WebP形式を選択
画面右下の「Compress」メニューから「WebP」を選択します。
※ 初期状態では MozJPEG になっているので切り替える必要があります。
4. 品質を調整
「Quality」を75〜85に調整します。
品質と容量のバランスを見ながら調整するのですが、80前後がおすすめです（高画質＋軽量）。
こんな感じの画面になる。半分より左側が圧縮前で右側が圧縮後の画像
デフォルトでも2.97MBだったのが、185KBに…しかも見た目拡大してもわからんぞ！！
5. 必要に応じてリサイズ
解像度を変えたい場合は Resize を有効にして幅・高さを入力します。
6. 保存
画面下の「↓」ボタンで保存します。
圧縮後のWebPファイルをダウンロードできます！
最適な設定まとめ（ゲーム背景用）
| 項目 | 推奨設定 |
|---|---|
| 画像形式 | WebP |
| Quality | 75〜85（80推奨） |
| 解像度（目安） | 1280×720 〜 2048×1152 |
| ファイルサイズ目標 | 100〜300KB程度 |
| 圧縮ツール | Squoosh（https://squoosh.app/） |
高解像度対応のコツ
Retinaや高解像度対応したい場合
→ 1.5〜2倍サイズで作成（例：キャラ表示が256×256なら、実ファイルは512×512で用意）
→ 表示時にCSSやコードで縮小すれば、きれい＆にじまない
最初は「なんで2倍サイズで作るの？」って思っていましたが、高解像度ディスプレイで綺麗に表示されるんです。
プロっぽく仕上げるヒント
モバイルゲームなら1920px幅以下で十分
最初は「高解像度の方がいいに決まってる！」って思っていましたが、実際は1920px幅以下で十分です。むしろ軽い方がユーザー体験が良くなります。
「Maintain aspect ratio」はオン推奨
画像の縦横比を保つために、「Maintain aspect ratio」はオンにしておくことをおすすめします。
透過不要なら非透過設定でさらに軽く
背景が透過不要なら、WebPの非透過設定でさらに軽くなります。マジで効果的です。
実際にやってみた感想
最初は「画像サイズって面倒くさいな…」って思っていましたが、実際にやってみると意外と楽しいんです。
特に、圧縮前後のファイルサイズを比較したときの「すげー軽くなった！」という感動は、一度味わうと忘れられません。
まとめ
画像サイズの基本ルール
- 一般キャラ：512px以上
- SDバトル用：128〜256px
- UIアイコン：64〜128px
- 書き出し：背景透過PNG
- 高解像度対応：2倍で作成 → 縮小表示
WebPは、美しさと軽さのバランスが抜群の次世代画像形式です。
背景画像を最適化することで、アプリの動作はサクサク、見た目もグレードアップ！
ぜひSquooshを使って、あなたのアプリ背景も軽やかにしてみてくださいね。
最初は本当に複雑に感じますが、少しずつ理解していけば、意外と面白いものです。同じように学習中の方も、焦らずに一歩ずつ進んでいきましょう！
