スクリーンショットの後ろに背景を敷くのは、仕上がった印象にする一番手早い方法です。ただの四角い切り抜きだったものが、面の上に置かれたひとつの物体になります。周囲に余白があり、角がやわらかく、少し奥行きが出る。この記事では3つの背景の選択肢（グラデーション、単色、透明）、それぞれの使いどころ、そしてスクリーンショットをサーバーに渡さずに仕上げる方法を扱います。
なぜ背景ですべてが変わるのか
生のスクリーンショットには余白がなく、置かれた先の何かと切り離されていません。背景を加えると余白が生まれます。スクリーンショットを囲む色の帯です。これがあるだけで一気に「意図された」ものに見えます。さらにスクリーンショットの角を丸め、後ろにうっすらと影を落とすと、平べったく寝ているのではなく、背景から浮き上がって見えます。これらが一緒に働くのです。背景はキャンバス、余白は呼吸の余地、影は奥行きです。
グラデーション背景
アプリの起動画面やリリースノートのスクリーンショットが上質に見えるのは、この控えめな2色グラデーションのおかげです。余白をやわらかな色のにじみで満たし、スクリーンショットと競合することなく視線を引き寄せます。画像を新機能の告知やヒーロー画像のように、少し勢いのあるものに見せたいときはグラデーションを選びましょう。
スクリーンショットをキャンバスに放り込み、プリセットのグラデーションを1つ選び、色の帯のバランスがちょうどよく感じられるまで余白を調整します。プレビューはリアルタイムで更新されるので、PNGを書き出す前に構図全体（スクリーンショット、角、影、背景）を確認できます。
単色背景
単色はより落ち着いた、ブランドに合った選択肢です。ブランドカラーがあり、その中にスクリーンショットをすっきり収めたいときは、フラットな塗りつぶしが焦点を完全にスクリーンショットに保ち、派手ではなく意図的に見せます。ドキュメント、真面目な告知、あるいは互いに統一感が必要な一連の画像には安全な選択です。
透明背景
背景を透明にすると、余白の部分が塗りつぶされず透明のままPNGとして書き出されます。ここで仕上げるのではない場合、これが求める選択肢です。角丸で影の付いたスクリーンショットを、Figmaやスライド、サムネイル、あるいは自分のレイアウトへ持ち込み、すでに用意した背景の上に置くわけです。余白も角の丸みも影もそのまま残り、影の後ろの塗りだけが消えます。最終的な面を自分の手に戻してくれるので、最も柔軟な選択肢です。
余白、角、影
どの背景を選んでも、結果を形づくるのは3つのコントロールです。
- 余白はスクリーンショットの周りにどれだけ色を置くかを決めます。余白を増やすとスクリーンショットは小さく、より意図的に感じられ、減らすと詰まって密になります。
- スクリーンショットの角丸は硬い縁をやわらげます。小さめの半径は洗練されて見えます。控えめに保ちましょう。
- やわらかな影はスクリーンショットを背景から切り離します。重く見えないよう淡めに保ち、奥行きだけを足します。
出力を決まった縦横比（自動、16:9、4:3、1:1、3:4）に固定することもでき、余白がそれに合わせてフレームを満たすので、書き出しが持って行く先にぴったり収まります。
すべてお使いの端末に残ります
合成はブラウザ内のキャンバスで行われるため、スクリーンショットがアップロードされることはありません。これは聞こえる以上に大事です。スクリーンショットにはプライベートなメッセージ、請求書、ダッシュボード、URL内のトークンが写り込みうるからです。背景を付けるためにそれらをサーバーに送る必要はなく、ここでは実際に送りません。アップロードもアカウントもなく、ページが読み込まれたあとはオフラインで動きます。
正直にひとつだけ。これはグラデーション・余白・影の見た目を加えるだけで、それ以外はしません。スクリーンショットをブラウザやスマホのフレームで囲むモックアップにはできませんし、矢印や注釈も付けられません。1枚のスクリーンショットの後ろにきれいな背景を敷く用途には、まさにうってつけです。