エージェント向け Polysh を早期アクセスで提供中。コーディングエージェントがデモを録画し、Polysh が仕上げます。 ウェイティングリストに登録 →

スクリーンショット枠線ジェネレーター

白いページでも区別できるよう、スクリーンショットを単色の枠線で囲めます。

ブラウザツールを読み込んでいます…

スクリーンショット枠線ジェネレーターでできること

白の上に白が重なるのは、ヘルプセンターでよくある問題です。明るいアプリのスクリーンショットを白い記事ページに置くと、境目が見えません。細い枠線で解決できます。既定は 10 px の濃いグレー(#1F2328)の枠線で、角は四角、外側の余白はないため、画像はちょうど枠線の太さの 2 倍だけ大きくなります。

ドキュメントのテーマに合わせて「枠線の太さ」と「枠線の色」を設定します。1〜2 px の明るいグレーの枠線で十分なことがよくあります。「その他のオプション」では、「角の丸み」、枠線の外側の「余白」、その余白の「背景」を追加できます。線を使わずにやわらかく縁取るなら、スクリーンショット影ジェネレーターを試してください。

例

選ぶもの

既定の枠線での 1440 × 900 px のスクリーンショット

ダウンロード

screenshot-border.png
1460 × 920 px、10 px の #1F2328 の枠線

枠線はスクリーンショットの外側に追加されるため、元の画像のピクセルは覆われません。

スクリーンショット枠線ジェネレーターの使い方

  1. 「ファイルを選択」をクリックするか、スクリーンショットを貼り付けます。
  2. 「枠線の太さ」と「枠線の色」を設定します。
  3. 必要に応じて「その他のオプション」で「角の丸み」や「余白」を追加し、「.png をダウンロード」をクリックします。

知っておきたいこと

  • 単色のみです。破線、二重線、グラデーションの枠線はありません。
  • 枠線の太さの既定値は画像に合わせて変わります。幅 2880 px のスクリーンショットでは 20 px から始まるので、大きな画像では値を確認してください。
  • 角を丸めると、枠線の太さを均一に保つため、スクリーンショット自体の角は少し小さく丸められます。

スクリーンショット枠線ジェネレーターについてよくある質問

ドキュメントのスクリーンショットの枠線は何 px がよいですか?

等倍の画像なら 1〜2 px、半分のサイズで表示される Retina の画像なら 2〜4 px です。#D0D7DE のような明るいグレーを使ってください。太く暗い枠線は、本文の中で重たく見えます。

画像を大きくせずに枠線を付けるには?

このツールは常に画像の外側に枠線を付けます。元のサイズを保つには、先にスクリーンショットのリサイズで枠線の太さの 2 倍だけ縮小してから、枠線を付けてください。

角丸の枠線にできますか?

はい。「その他のオプション」を開き、「角の丸み」を上げます。枠線は丸い形に沿い、その外側は透明を含め、選んだ「背景」になります。