FIRST CH TOOLS LOCAL PROCESSING — 画像はサーバーに送信されません EN

FIRST CH TOOLS / 画像 / 64 SCREENSHOT FRAME

スクリーンショット枠装飾

スクリーンショットの周りに背景・余白・角丸・影・ブラウザ風の枠を付けて、ブログ・SNS・資料にそのまま貼れるPNGにします。スクショはドラッグ&ドロップのほか ⌘V / Ctrl+V の貼り付けでも読み込めます。処理はすべてお使いの端末内で完結します。

ここにスクリーンショットをドラッグ&ドロップ またはクリックしてファイルを選択／⌘V・Ctrl+V で貼り付け（PNG / JPEG / WebP / GIF）

背景

形

書き出し

How to Use

  1. スクショを入れるドラッグ&ドロップ、クリックして選択、または撮ったばかりのスクショを ⌘V / Ctrl+V で貼り付けます。最初は見本の画像が入っています。
  2. 見た目を整える背景の色見本を選び、余白・角丸・影・枠をつまみで調整します。貼る先が決まっているなら比率（16:9・1:1 など）も合わせます。
  3. 書き出す「PNGで保存」でダウンロード、「画像をコピー」でクリップボードへ。Slack・X・Googleスライドへはそのまま貼り付けられます。

About This Tool

画面のスクリーンショットは、そのまま記事や投稿に貼ると白い画面が白い背景に溶けて、どこまでが画面なのか分からなくなります。周りに余白と背景を敷き、角を丸めて影を落とすだけで「画面を見せている」ことが一目で伝わります。本ツールはその定番の仕上げを、画像編集ソフトを開かずにブラウザだけで済ませるためのものです。ブラウザ風の枠はタイトルバーの信号とアドレスバーを描き足すもので、アドレスバーの文字は自由に書き換えられます（URLを見せたくないときは空欄にできます）。

余白・角丸・影は元のスクショの画素を基準にした値です。Retinaディスプレイで撮ったスクショは見た目の2倍の画素を持つため、同じ64pxの余白でも細く見えます。そのときは余白を広げるか、「0.5倍」で書き出すとファイルも軽くなります。比率を指定すると、余白を最小値として足りない方向だけ背景を広げ、スクショを中央に置きます。「透明」を選ぶと背景を塗らずに書き出すので、影付きの画面だけを資料の上に重ねられます。

描画はブラウザのCanvasで行い、画像が外部サーバーへアップロードされることはありません。媒体ごとの規定サイズに切り抜くなら SNS画像サイズ一括書き出し、書き出したPNGを軽くするなら 画像→WebP一括変換、撮影情報を消すなら EXIF情報の確認＆除去 が使えます。

設定はURLパラメータでも渡せます（画像の選択は手元で行います）。例: /screenshot-frame/?bg=gradient&c1=%231f2a44&c2=%234b6cb7&pad=96&radius=16&shadow=60&frame=browser-dark&url=example.com&ratio=16:9（bg=gradient,solid,none / c1・c2=色 / angle=角度 / pad・radius=px / shadow=0〜100 / frame=none,browser,browser-dark,window,window-dark / ratio=auto,16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=0.5,1,2）。

Other Tools