Mac でスクリーンショットをクロップする方法

Mac のスクリーンショットは素早く撮れますが、README、プルリクエスト、サポートチケットに必要な正確なクロップには合いません。このガイドでは macOS 組み込みのキャプチャショートカットと、ブラウザで結果をローカルにクロップする方法を説明します。

ステップ 1: macOS でスクリーンショットを撮る

よく使うショートカット:

• フルスクリーン: Shift + Command + 3
• 選択ウィンドウ: Shift + Command + 4 のあと Space を押し、ウィンドウをクリック
• 選択領域: Shift + Command + 4 でドラッグして範囲を選択

スクリーンショットはデフォルトでデスクトップに保存されます（Screenshot 設定で変更可能）。

ステップ 2: ローカルクロッパーを開く

PNG ファイルをアップロードするか、ツールにドラッグするか、ブラウザがクリップボード画像アクセスに対応していれば画像をコピーして貼り付けます。

DevCove の Image Cropper はすべてブラウザ内で処理します。スクリーンショットはサーバーにアップロードされません。

ステップ 3: アスペクト比と出力サイズを選ぶ

ドキュメントのヒーロー画像には 16:9 が一般的です。アバターや初期準備中のアプリアイコンには 1:1 を試してください。

出力プリセットを選びます:

• Crop size — 選択範囲の正確なピクセル寸法を維持
• 512 × 512 または 1024 × 1024 — 正方形エクスポートが必要なとき
• Custom — ドキュメントテンプレートが正確な幅と高さを要求するとき

ステップ 4: PNG または JPEG をダウンロード

PNG は UI テキストのシャープさを保持します。透明度が不要なら JPEG はより小さなファイルになります。

ブラウザで WebP エクスポートが無効な場合は PNG または JPEG を使ってください。Safari や一部 iOS ブラウザは Canvas から WebP をエンコードできないことがあります。

開発者ワークフロー向けのヒント

• 単純なドキュメント更新なら、デザインアプリから再エクスポートする代わりにツールで一度クロップする。
• README 執筆時はクロップしたスクリーンショットを Markdown Preview と組み合わせる。
• ブラウザでのクロップは EXIF メタデータを除去する。ウェブ向けアセットでは想定どおり。

これが置き換えないもの

このワークフローはブラウザ内で画面を静かにキャプチャするものではありません。まず macOS ショートカットを使い、その後ローカルでクロップする。これにより権限が明確で、プライバシーの驚きを避けられます。