スクリーンショット枠線ジェネレーター
白いページでも区別できるよう、スクリーンショットを単色の枠線で囲めます。
- ブラウザ内で動作
- アップロード不要
- アカウント不要
ブラウザツールを読み込んでいます…
スクリーンショット枠線ジェネレーターでできること
白の上に白が重なるのは、ヘルプセンターでよくある問題です。明るいアプリのスクリーンショットを白い記事ページに置くと、境目が見えません。細い枠線で解決できます。既定は 10 px の濃いグレー(#1F2328)の枠線で、角は四角、外側の余白はないため、画像はちょうど枠線の太さの 2 倍だけ大きくなります。
ドキュメントのテーマに合わせて「枠線の太さ」と「枠線の色」を設定します。1〜2 px の明るいグレーの枠線で十分なことがよくあります。「その他のオプション」では、「角の丸み」、枠線の外側の「余白」、その余白の「背景」を追加できます。線を使わずにやわらかく縁取るなら、スクリーンショット影ジェネレーターを試してください。
例
選ぶもの
既定の枠線での 1440 × 900 px のスクリーンショット
ダウンロード
screenshot-border.png 1460 × 920 px、10 px の #1F2328 の枠線
枠線はスクリーンショットの外側に追加されるため、元の画像のピクセルは覆われません。
スクリーンショット枠線ジェネレーターの使い方
- 「ファイルを選択」をクリックするか、スクリーンショットを貼り付けます。
- 「枠線の太さ」と「枠線の色」を設定します。
- 必要に応じて「その他のオプション」で「角の丸み」や「余白」を追加し、「.png をダウンロード」をクリックします。
知っておきたいこと
- 単色のみです。破線、二重線、グラデーションの枠線はありません。
- 枠線の太さの既定値は画像に合わせて変わります。幅 2880 px のスクリーンショットでは 20 px から始まるので、大きな画像では値を確認してください。
- 角を丸めると、枠線の太さを均一に保つため、スクリーンショット自体の角は少し小さく丸められます。
スクリーンショット枠線ジェネレーターについてよくある質問
ドキュメントのスクリーンショットの枠線は何 px がよいですか?
等倍の画像なら 1〜2 px、半分のサイズで表示される Retina の画像なら 2〜4 px です。#D0D7DE のような明るいグレーを使ってください。太く暗い枠線は、本文の中で重たく見えます。
画像を大きくせずに枠線を付けるには?
このツールは常に画像の外側に枠線を付けます。元のサイズを保つには、先にスクリーンショットのリサイズで枠線の太さの 2 倍だけ縮小してから、枠線を付けてください。
角丸の枠線にできますか?
はい。「その他のオプション」を開き、「角の丸み」を上げます。枠線は丸い形に沿い、その外側は透明を含め、選んだ「背景」になります。