スクショ加工

素のスクリーンショットは、どこに貼っても平板に見える

画面からそのまま撮ったスクリーンショットは、四辺すべてに硬い縁のあるピクセルの長方形です。それ単体ならバグ報告には問題ありません。しかしツイート、スライド、ランディングページのヒーロー、Notionの文書に落とした途端、未完成に見えます——周りの文字にぴったり突き当たり、角が鋭く安っぽく感じられ、画像と背景の間に区切りがありません。洗練された版は百回も見ているはずです——やわらかい色のグラデーションの上に浮かぶ商品スクリーンショット、周りに少しゆとり、やさしく丸めた角、そしてページから浮き上がるかすかな影。あの見た目はフィルターでもストックテンプレートでもありません。3つの小さなものが重なっただけで、このツールはまさにその3つをします。

スクリーンショットをキャンバスに落とすと、完成した絵をブラウザ内でライブに構成します。背景を選び——プリセットのグラデーション、単色、または透明——スクリーンショットの周りにどれだけの余白を置くかを設定し、角の半径を選び、ドロップシャドウを強めたり弱めたりします。プレビューは進めるにつれ更新されます。良く見えたら、PNGを書き出します。メールのスレッド、ダッシュボード、チャット、口座番号、何でも含みうるスクリーンショットは、<canvas> 要素に直接描かれ、タブを一切離れません。アップロードも、アカウントもなく、ページが読み込まれればネットワークを切っても動き続けます。

余白、角丸、影、グラデーションが実際に何をするか

• 余白はスクリーンショットにマージンを与え、端から端まで詰め込まれないようにします。その隙間こそが、それを生の撮影ではなく、面の上に意図的に置かれた物として読ませます。
• スクリーンショット自体の角丸は4つの硬い直角をやわらげます。ほんの小さな変化ですが、「つかんだ」ではなく「デザインされた」と即座に読ませます。
• やわらかいドロップシャドウはスクリーンショットを背景から切り離すので、面に平らに貼られたのではなく、少し上に浮いているように見えます。かすかに保ってください——それが重く見せずに奥行きを売るものです。
• グラデーション(または単色)の背景は余白を色で埋めます。やさしい二色のグラデーションは、あのアプリのローンチや変更履歴のスクリーンショットが高価に見える最大の理由です。単色はより落ち着いた、ブランドに沿った代替です。

これらが合わさって「商品スクリーンショット」の見た目になり、それがツールの範囲のすべてです——それ以上でも以下でもありません。

行き先に合わせたアスペクト比

出力は Auto(フレームがスクリーンショットに余白を足しただけを囲む)か、16:9、4:3、1:1、3:4 にロックできます。比率が重要なのは、投稿する場所ごとに好む形があるからです——スライドデッキや横長のSNSカードには16:9、正方形のInstagramやLinkedInの投稿には1:1、スマホ画面をより多く埋める縦長の画像には3:4。比率をロックすると、余白がスクリーンショットの周りのフレームの残りを埋めるので、書き出しがぎこちなく切り取られずにそのスロットに落ちます。

意図的に透明な背景

背景を透明に設定すると、PNGは余白の領域を色付きではなく透明にして書き出します。角丸で影付きのスクリーンショットを、Figma、Keynote、サムネイルの中で自分の背景の上に置くつもりのとき、これが欲しいものです——余白、半径、影を保ったまま、すでにある任意の面の上に落とせます。影は残ります——その後ろの塗りだけが消えます。

なぜここではローカルのみが要点なのか

スクリーンショットは、その一版を共有したくなるものの中で、実はひそかに最もプライベートなものの一つです。一枚の撮影が、顧客の名前、請求書、非公開のDM、社内の指標、URLバーのトークンを見せうるのです。画像を「処理する」ためにサーバーへアップロードする美化ツールは、影を足すだけのためにそのすべてを渡すよう求めています。ここでは合成はあなた自身のブラウザでの素のキャンバス作業なので、アップロードするものも、信頼するものもありません。

範囲について正直な注記を一つ——これはグラデーション・余白・影の仕上げを加え、それ以外は何もしません。スクリーンショットをブラウザの枠やスマホのモックアップで包むことも、矢印、ぼかし、注釈を加えることもしません——一度に一枚の、美化の見た目です。