何かを作った、あるいは良い機能を見つけた、それを見せびらかしたい。そこでスクリーンショットを撮り、投稿に貼ると、それはただそこに鎮座します。硬い角の平べったい灰色の四角が、文章に押し込まれて。洗練された投稿の隣では、後回しにされたものに見えます。良い知らせは、「生のキャプチャ」と「プロダクトのスクショ」の差はスキルでも高価なツールでもないということ。3つの小さな調整と、プラットフォームに合った形を選ぶことです。
なぜ生のスクリーンショットはのっぺり見えるのか
スクリーンショットは四辺すべてに硬い縁があり、置かれた先の何とも関係を持ちません。フィードの中では、投稿の背景と周りの文章とぶつかります。余白がないので、「これは独立したもの」と目に伝えるものがなく、奥行きがないので、置かれたというより貼り付けられたように見えます。毎日スクロールで通り過ぎる洗練されたスクリーンショットは、まさにこの2つの問題を静かに解決しています。
3部構成のレシピ
「どうやってこんなにきれいにしたの」というスクリーンショットは、どれも同じ3つのことをしています。
- 余白 — スクリーンショットの周りの空間の帯。端から端まで詰め込まれないようにします。これだけで仕事の大半をこなします。
- 角丸 — スクリーンショット自体の4つの鋭い直角をやわらげ、一瞬でデザインされた印象になります。
- やわらかな影と背景 — 淡いドロップシャドウが画像を面から浮き上がらせ、控えめなグラデーション（または単色のブランドカラー）が余白を満たし、全体を意図的に見せます。
これが「プロダクトのスクショ」らしさのすべてです。効かせるのに端末フレームや注釈は要りません。それらは別の仕事です。
スクリーンショットを放り込み、グラデーションか単色の背景を選び、余白と角の丸みを少し動かし、影を好みに設定します。プレビューはリアルタイムで更新され、ちょうどよく見えたらPNGを書き出します。すべてブラウザ内のキャンバスで合成されるので、ダイレクトメッセージやダッシュボード、メールが写り込むかもしれないスクリーンショットが、どこにもアップロードされることはありません。
プラットフォームに合わせて縦横比を選ぶ
同じきれいにした画像でも、行き先によって違う形にすべきです。ツールは出力を自動・16:9・4:3・1:1・3:4に固定します。
- 16:9 — 横長のSNSカードやスライド。横長の枠をきれいに満たします。
- 1:1 — InstagramやLinkedInの正方形投稿。縦長や横長の画像はグリッドで切り抜かれます。
- 3:4 — スクロール中にスマホ画面をより多く占める縦長の画像。
- 自動 — 形を強制せず、フレームにスクリーンショットと余白を包ませたいだけのとき。
必要な比率に固定すれば、余白がスクリーンショットの周りのフレームの残りを満たすので、書き出しがぎこちない切り抜きなしに枠へ収まります。
いくつかのセンスの注意点
影は淡く保ちましょう。重い影は2009年の下手なドロップシャドウのように見え、軽い影はただ奥行きを足します。角を丸めすぎないこと。小さめの半径は洗練されて見え、巨大なものは吹き出しのように見え始めます。そして背景を雰囲気に合わせましょう。真面目なものには落ち着いた単色を、ローンチのように感じさせたいときはやわらかなグラデーションを。
まとめ
スクリーンショットを本物の投稿にふさわしく見せるのに、デザインソフトは要りません。余白を足し、角を少し丸め、淡い影とやわらかな背景の上に浮かべ、プラットフォームが望む形で書き出す。1分足らずで済み、何もブラウザから出ず、結果は生のキャプチャに見えなくなり、あなたが共有するつもりで用意したものに見え始めます。