固定アスペクト比で画像をオンラインでトリミングする
正方形の SNS、16:9 のヒーロー、証明写真風のトリミング — 処理はすべてローカルで、ポートレートや UI キャプチャを第三者サーバーに送りません。
このガイドと一緒に使うと便利なツール：
なぜ重要か
デザイナーはフルスクリーンのモックを渡すが、アプリストアはタイトなクロップを要求します。人事は写真の頭上余白がバラバラです。EC のサムネはグリッドでそろえたい。クロップは単純ですが数十枚ではルールが要ります。ブラウザで済ませれば未公開 UI が外部 SaaS に上がりません。
実際の3つのシーン
4:5 や 9:16 にロックしてから超ワイドのマスターから主題を切り出します。
レターボックスが減る
ブックマークバーや無関係タブを落とします。
コンポーネントに集中
上方向の余白ルールを SKU 間で統一します。
棚がきれいに見える
手順
画像トリミングを開きます。
画像をアップロード
解像度の十分なソースを優先します。
固定比率または自由
1:1、4:5、16:9、または任意矩形。
ファインダーを動かす
顔や CTA を視線の重心へ。下流で円形アイコンなら余白を多めに。
ズームで確認
文字エッジが十分シャープか確かめます。
書き出し
透明が必要なら PNG、写真のみなら JPEG/WebP。
実践のヒント
よくある落とし穴
よくある誤り
不可逆
マスターは別コピーを残してから切ります。
よくある誤り
Retina スクショの解像度
切ったあともファイルが巨大になるので縮小や圧縮を続けます。
よくある誤り
円形アイコンのセーフゾーン
正方形の角は後工程でマスクされます。主題を内側に寄せます。
向いていない用途
- 非破壊 RAW ワークフロー：Lightroom / Capture One。
- 髪の毛レベルのマット：ML セグメンテーション向き。
- SVG の viewBox：デザインファイル側で調整します。
FAQ
ピクセル整数に揃いますか？
通常は整数矩形で書き出します。サブピクセルアイコンは別検証を。
EXIF の向きは？
多くのブラウザが orientation を尊重しますが CMS 提出前に目視します。
GIF アニメは？
静止フレーム化されがちです。動き要件は動画経路へ。