スクリーンショットのパディングとインセット：画像に余白を

パディングは、スクリーンショットとその背景の端との間にスペースを追加します。インセットは、スクリーンショットのカード内にスペースを追加します。全体の構成が窮屈に感じるときはパディングを使用し、テキストやコントロールがカードの角の丸みに近すぎるときはインセットを使用します。

これらの例では、同じ800 × 400 のサンプルスクリーンショットを使用しています。これには架空のチェックリストテキストが含まれているため、プライベートな画面をアップロードせずにすべての設定を試すことができます。

パディングから始めて、インセットを追加する

Screenshot beautifierを開き、サンプルをアップロードしてスタイルをリセットを選択します。フレームで、フレームスタイルを画像のみに保ちます。デフォルトはパディング80、インセット0、角の丸み20、影40です。

これにより、960 × 560 のPNGが生成されます。横は800 + 80 + 80、縦は400 + 80 + 80です。Aurora背景はカードの外側にあります。

次に、インセットを24に移動します。スクリーンショットのサイズは変わりませんが、白いカードは各辺で24ずつ大きくなります。エクスポートは1008 × 608になります。テキストは角の丸い端の内側に余裕ができ、外側のパディングは80のままです。

パディングのみのバージョンとインセット付きのバージョンをダウンロードして、フルサイズで比較してください。これらの正確なピクセル合計は、自動サイズ設定のこのサンプルに適用されます。より大きなソースや固定のエクスポートサイズでは、全体の構成がスケーリングされる場合があります。

インセットを背景ではなくスクリーンショットに合わせる

インセットが0より大きい場合、内側の色で画像の端に合わせるまたはカスタムカラーを選択できます。自動オプションは、スクリーンショットの端をサンプリングし、支配的な不透明な色を選択します。白い縁のサンプルでは、#FFFFFFになります。

これは、単色の境界線があるスクリーンショットでうまく機能します。写真、グラデーション、または端に沿って異なる色がある画面では、シームが見える場合があります。インセットは1つの色であり、新しく生成された画像コンテンツではありません。自動マッチが正しく見えない場合は、カスタムカラーを選択し、16進カラーを調整してください。

背景タブは、外側の領域を独立して制御します。そのグラデーションを変更しても、スクリーンショット自体の色は変わりません。

正方形のキャンバスはスペースを追加します。切り抜きはしません

サイズで、アスペクト比を自動・画像に合わせるから1:1 · 正方形に変更し、エクスポートサイズは自動・最大4096pxのままにします。24ピクセルのインセットでは、結果は1008 × 1008になります。カードは中央に保たれ、その上下に背景が追加されます。

正方形のエクスポートを確認できます。スクリーンショット自体を正方形にしたい場合は、最初に画像クロッパーで切り抜いてください。長いスクリーンショットを小さな正方形に押し込むと、すべての行が保持される一方で、テキストが読みにくくなる場合があります。

スタイルを保存する前にエクスポートサイズを確認する

PNGをダウンロードして、オーディエンスが見るサイズで表示してください。ツールのプレビューにズームインすると端を検査できますが、エクスポートの解像度は上がりません。モバイルでは、調整を開いて設定にアクセスし、プレビューで結果を確認します。

ブラウザウィンドウは、装飾的なタイトルバーを追加します。そのライト/ダークの外観は、そのフレームのみを変更し、アップロードしたスクリーンショットは変更しません。キャプチャにブラウザバーがすでに含まれている場合は、画像のみを維持してください。

結果が気に入ったら、プリセットを保存で、このブラウザにスタイルを保存して次のスクリーンショットに使用できます。別のデバイスには同期されません。

2026年10月12日に、ツールから3つのPNGすべてをダウンロードし、そのレイアウト機能に対して寸法を確認しました。結果ファイルには、設定とファイルハッシュが記録されているため、比較を再現できます。