アイコン・アセットのリサイズ
アプリやWebサイトで再利用しやすい統一規格の画像を作成しましょう。
推奨サイズ
128 × 128
小アイコン
200 × 200
サムネイル
256 × 256
標準
512 × 512
大
活用シーン
使い方
プリセットを選択
今あるプリセットの中から、目的に合う出力規格を選びます。
フィットモード
"contain"で枠内に収めるか、"cover"で全体を埋めるか選べます。
品質調整
WebP品質を70〜90で調整し、サイズと鮮明さのバランスを取ります。
再利用しやすい出力
1つの元画像から、サイズと圧縮ルールをそろえた書き出しを繰り返せます。
サイズとフレームのヒント
余白を残す
小さなアイコンには余白が必要です。被写体が端に触れると、アプリのグリッドや円形マスクで切れて見えることがあります。
ライブラリには正方形出力
正方形プリセットを使うと、食品、ステッカー、キャラクターなど混在するアセットも同じUIライブラリ内で揃います。
すべて同じサイズにしない
一覧には小さいサイズを使い、後から編集する素材や高密度画面が必要な場合のみ大きく書き出します。
アイコンとサムネイルのサイズを揃えるために
ByteCutは、1枚の元画像をアプリアイコン、メニューサムネイル、デザインシステム、再利用UI向けの正方形アセットに整えます。
解決できること
- サイズが混在した元画像を一定の出力サイズに揃えます。
- 128、200、256、1024pxなど実務向けの正方形プリセットを使えます。
- Webやアプリで使いやすい軽量WebPとして書き出せます。
- 重要な端が切れないよう、余白を保ちながらプリセット内に収めます。
ばらばらの画像をひとつのセットに見せる
キャンバスは同じでも被写体がそろわない
すべて256pxで書き出しても、グリッドが整って見えるとはかぎりません。リズムを崩すのは正方形の内側にある被写体です。あるイラストは枠いっぱいに広がり、次は余白を広く取って浮いており、さらに別のものは中心からずれています。正方形フィットは実際の被写体がどこにあるかを測ってキャンバスの中央に合わせます。出どころも描き手も違う画像が、意図して作ったセットのように見えるのはそのためです。
切り取るより余白を足す
元画像が正方形でなければ、どこかを妥協することになります。埋めるように切り取れば枠は確実に埋まりますが、端にあったものが静かに欠けます。フライパンの取っ手、帽子の先、ロゴの下に伸びた部分などです。余白を足せば被写体全体を保ったまま、透明な空間がその分を埋めます。アイコンやサムネイルの作業では、余白のほうがほぼ常に安全な既定値です。被写体が少し小さくなることは、欠けてしまうことよりずっと安い失敗だからです。
隅の一点が枠全体を押しやる
隅に残ったうすい点も画像の一部として数えられ、単純な境界ボックスはそれを含もうとして広がります。目に見える結果は、理由もなく片側に寄った被写体です。ByteCutは中心を決めるとき、主となる被写体を基準に測り、離れた小さな汚れは除外します。わずかなノイズが残った切り抜きでも正方形の中央に収まるのは、このためです。
サイズは表示される場所から決める
1ページに四十回繰り返されるメニューのサムネイルと、次の四半期に切り直す元素材とでは、求められるものが正反対です。小さなプリセットは一覧ページを軽く保ち、Largeプリセットは後で使い回す余地を残します。安全に思えるからとすべてLargeで書き出すと、見た目の得は何もないまま一覧ページだけが重くなり、そのファイルは訪問者全員がダウンロードすることになります。
拡大してもディテールは生まれません
縮小は情報をきれいに捨てる操作ですが、拡大はそもそも記録されていないものを取り戻せません。128pxの元画像を1024pxへ引き伸ばすと、ぼやけて眠い印象の版になるだけで、はじめから大きく作った素材の隣に置けばいっそう見劣りします。一式の中にどうしても低解像度の素材が入るなら、より大きな元画像を探すか、もっとも弱い素材が支えられるサイズに一式全体を合わせてください。
画像リサイズFAQ
横長画像を正方形アイコンにできますか？
はい。画像をプリセット内に収め、余白を整えてアイコンやサムネイルとして再利用できます。
メニューサムネイルはどのサイズがよいですか？
軽い一覧表示にはFood 200px、後から編集する素材にはLargeがおすすめです。
透明背景は維持できますか？
はい。背景削除後の透明背景を維持して書き出せます。
アイコン専用ですか？
いいえ。メニューサムネイル、小さな商品画像、UIプレビュー、再利用画像ライブラリにも同じ流れで使えます。
すべての処理はブラウザ内でローカルに実行されます。ファイルがサーバーにアップロードされることはありません。
画像をリサイズする関連する活用事例
画像アセット整理
背景整理・サイズ調整・WebP書き出しで、画像をすぐ使えるアセットに整えましょう。
背景除去
メニュー、アプリアセット、出品画像、UIライブラリにすぐ使える透過カットアウトを作成します。
WebP変換
見た目を保ちながら、Webやアプリでそのまま使いやすい軽量アセットに変換します。
フードメニューアイコン
レストランメニューやデリバリーアプリ向けの統一アイコン。
AI生成食品画像
AIで作った食品画像を、メニュー、ブログ、レシピカード、軽量WebP公開向けに整えます。
スタンプアセット
メッセージアプリ向けの透過スタンプ画像。
キャラクターアセット
ステッカー、アバター、ゲーム試作、アプリUI向けの透過キャラクター素材。