スクリーンショットをアップロードするだけで、余白・背景・角丸・影を自動調整。 SNSの比率に合わせて書き出し、矢印や枠、モザイクでの注釈付けにも対応しています。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくスクリーンショットをアップロード
クリックして選択、ドラッグ＆ドロップ、またはCtrl+Vで貼り付け
おすすめプリセット
出力比率
背景
余白・角丸・影
スクリーンショット加工ツールとは？余白・背景・角丸・影で見栄えを整える
そのままのスクリーンショットは、背景が真っ白で味気ない、画面の端がギリギリで窮屈に見えるといった課題があります。本ツールは、画像の周囲に余白を作り、背景色やグラデーションを敷き、画像自体には角丸と影を付けることで、ブログ・note・SNSにそのまま使える「見栄えのするキャプチャ画像」に仕上げる無料ツールです。
出力する画像の比率は、Instagram投稿用の「1:1」「4:5」、ストーリーズ・リール用の「9:16」、X・YouTubeサムネイル用の「16:9」などから選択可能。選んだ比率に合わせて背景が自動で拡張されるため、投稿先ごとに画像を作り直す手間がかかりません。
さらに、ブラウザ風のウィンドウフレームを追加したり、矢印・枠・テキスト・モザイクによる注釈を書き込んだりすることもできます。操作マニュアルの作成や、個人情報を隠したうえでの画面共有にもご活用いただけます。すべての処理はブラウザ内で完結し、画像が外部に送信されることはありません。
こんなシーンで便利です
ブログ・noteの記事にアプリ画面を載せる
操作画面のキャプチャに余白と影を付けるだけで、記事全体の見栄えが一段上がります。角丸と背景色を記事のトーンに合わせて調整できます。
Instagram・Xでアプリやサービスを紹介する
投稿先の比率に合わせて背景を自動拡張。1:1の正方形投稿や9:16のストーリーズ用画像を、同じスクリーンショットから簡単に作り分けられます。
社内マニュアル・操作手順書の作成
矢印でクリックすべきボタンを指し示したり、枠で注目箇所を囲んだりして、言葉だけでは伝わりにくい操作手順を分かりやすく説明できます。
個人情報を隠したうえでの画面共有・問い合わせ対応
メールアドレスやユーザー名など、公開前に隠しておきたい部分をモザイクで処理。安心して画面を共有・公開できます。
使い方は簡単 5ステップ
- スクリーンショット画像をアップロード（クリック選択・ドラッグ＆ドロップ・クリップボードからの貼り付けに対応）します。
- 出力したい比率（元の比率のまま・1:1・4:5・9:16・16:9など）を選択します。
- 背景（単色・グラデーション）、余白、角丸、影の強さ、ブラウザ風フレームの有無を調整します。
- 必要に応じて、矢印・枠・テキスト・モザイクで注釈を書き込みます。
- 「ダウンロード」または「クリップボードにコピー」で、完成した画像を書き出します。
※調整内容はリアルタイムにプレビューへ反映されます。ワンクリックで設定をまとめて変更できる「おすすめプリセット」もあわせてご利用ください。
ご利用時の注意点
- 本ツールはすべての画像処理をブラウザ内（Canvas API）で行います。アップロードした画像がサーバーに送信・保存されることはありません。
- 出力画像はPNG形式です。背景は選択した色・グラデーションで塗りつぶされるため、透過画像としては書き出されません。
- モザイク処理は画像内の指定範囲をピクセル化するものです。完全に判読不能にするため、隠したい範囲よりもやや広めにドラッグすることをおすすめします。
- 大きな画像ファイルをアップロードした場合、お使いの端末の性能によっては処理に数秒かかることがあります。
投稿先別・おすすめの出力比率早見表
SNSやブログなど、投稿先ごとに適した画像の比率の目安です。表示崩れやトリミングを防ぐための参考にしてください。
| 投稿先 | おすすめ比率 | 特徴 |
|---|---|---|
| Instagramフィード投稿 | 1:1 または 4:5 | 4:5の方がタイムライン上で縦に大きく表示されやすい |
| Instagram・TikTokストーリーズ/リール | 9:16 | 画面全体を使う縦長フォーマット |
| X（旧Twitter）投稿 | 16:9 | タイムライン上でカード形式に表示されやすい |
| YouTubeサムネイル | 16:9 | 動画のサムネイルと同じ標準比率 |
| ブログ・noteのアイキャッチ | 元の比率のまま または 16:9 | 記事のレイアウトに合わせて選択 |
| Pinterestピン | 2:3（4:5で近似） | 縦長の方が一覧画面で目立ちやすい |
【比率選びのポイント】
迷った場合は「元の比率のまま」を選び、余白・背景・影だけを整えるのが最も自然な仕上がりになります。SNSごとに最適化したい場合は、投稿先のフォーマットに合わせて個別に書き出すことをおすすめします。
スクリーンショットを見やすく加工するためのデザインの考え方
余白・背景・影・角丸といった基本要素が、なぜキャプチャ画像の印象を大きく左右するのかを解説します。
余白（マージン）がキャプチャ画像の印象を大きく左右する理由
画面いっぱいに表示されたスクリーンショットは、情報量が多く窮屈な印象を与えがちです。
周囲に適度な余白を設けるだけで、画像に「呼吸する空間」が生まれ、SNSのタイムラインやブログ記事の中でも視線が集まりやすくなります。余白の広さは、投稿する媒体やデザインのトーンに合わせて調整するのが基本です。
影（シャドウ）が画像に立体感と視線誘導を生む仕組み
背景に対して画像にうっすらと影を落とすことで、画像が背景から浮き上がって見える「立体感」が生まれます。この効果により、特にSNSのタイムラインのように情報が流れていく場所で、投稿がスクロールの中で止まって見られやすくなる傾向があります。影が強すぎると不自然になるため、背景とのコントラストに応じて強さを調整することが重要です。
角丸（ボーダーラディウス）が与える柔らかく親しみやすい印象
画像の四隅を角丸にすることで、硬い印象を和らげ、親しみやすく洗練された雰囲気を演出できます。特にスマートフォンのアプリ画面やモダンなWebサービスのキャプチャとの相性が良く、多くのプロダクト紹介サイトやSNS投稿で採用されているデザイン手法です。
ブラウザ風フレームで「何の画面か」を一目で伝える工夫
キャプチャ画像単体では、それがWebサイトの画面なのかアプリの画面なのかが伝わりにくいことがあります。上部に丸いアイコンが並んだブラウザ風のウィンドウフレームを付けることで、見る人に「これはWebサービスの画面だ」という文脈を瞬時に伝えることができ、プロダクト紹介やポートフォリオでの説得力が増します。
よくある失敗と対策
画像をそのままSNSに投稿し、タイムライン上で埋もれてしまう
背景が白のままのスクリーンショットを、周囲の投稿と同じように何の装飾もなく投稿してしまい、情報量の多いタイムラインの中で目に留まらず、クリック率が伸びない失敗です。
💡 対策・解決策を見る▼
比率を揃えずに複数枚投稿し、SNS上でレイアウトが崩れる
投稿先のフォーマットを意識せずに異なる比率の画像を複数枚投稿してしまい、Instagramのカルーセル投稿などで画像の高さがバラバラになり、見た目が整わない失敗です。
💡 対策・解決策を見る▼
モザイク処理を忘れたまま、個人情報を含む画面をそのまま公開してしまう
操作手順の説明用に撮影したスクリーンショットに、ユーザー名やメールアドレスなどの個人情報がそのまま写り込んでいることに気づかず、公開してしまう失敗です。
💡 対策・解決策を見る▼
注釈の矢印や枠を使いすぎて、かえって何が重要か伝わりにくくなる
操作マニュアルを作る際に、画面の至るところに矢印や枠を書き込みすぎてしまい、結果として「どこが一番重要なポイントなのか」が読み手に伝わりにくくなってしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.アップロードしたスクリーンショットが外部に送信されることはありませんか
A. 一切ありません。本ツールは画像のアップロード・加工・書き出しのすべての処理をお使いのブラウザ内（Canvas API）だけで行う完全ローカル処理型です。画像データが当サイトのサーバーへ送信されたり、保存されたりすることはありません。社外秘の管理画面や個人情報を含むキャプチャでも安心してご利用いただけます。
Q.Instagram投稿やストーリーズに最適な比率はどれを選べばよいですか
A. Instagramのフィード投稿には正方形の「1:1」または縦長の「4:5」が最も表示領域を広く使えます。ストーリーズやリール、TikTokには縦長の「9:16」がおすすめです。X（旧Twitter）やYouTubeのサムネイルには横長の「16:9」が適しています。本ツールでは比率を選ぶと、背景が自動でその比率に合わせて拡張されます。
Q.ブラウザ風のフレーム（枠）はどのような場面で使うのが効果的ですか
A. Webサービスやアプリの管理画面、LPのキャプチャを紹介する際に、ブラウザ風フレーム（上部に丸いアイコンの並んだウィンドウ枠）を付けると、何のスクリーンショットかが一目で伝わりやすくなります。マニュアルやnoteの解説記事、ポートフォリオサイトでの実績紹介など、信頼感を持たせたい場面で特に効果的です。
Q.画像内の個人情報やメールアドレスを隠すことはできますか
A. はい、できます。注釈ツールの「モザイク」を選び、隠したい範囲をドラッグすると、その部分だけが自動でモザイク（ピクセル化）処理されます。ユーザー名やメールアドレス、電話番号など、公開前に隠しておきたい個人情報の処理にご活用ください。
Q.矢印や枠の注釈はマニュアルや操作手順の説明にも使えますか
A. はい、使えます。注釈ツールの「矢印」でクリックすべきボタンを指し示したり、「枠」で注目してほしい箇所を囲んだりできます。社内マニュアルや操作説明書、問い合わせ対応時のスクリーンショット共有など、言葉だけでは伝わりにくい操作手順の説明に便利です。
Q.作成した画像はどのような形式でダウンロードされますか
A. PNG形式の画像としてお使いの端末にダウンロードされます。背景が透明にならない完全な画像として書き出されるため、そのままブログやSNSの投稿画像として利用できます。また「クリップボードにコピー」ボタンから、ダウンロードせずに直接貼り付け先のツールへコピー＆ペーストすることも可能です。
Q.スマートフォンの画面でも同じように加工できますか
A. はい、スマートフォンのブラウザからもご利用いただけます。カメラロールに保存したスクリーンショットをアップロードし、タップ操作で背景や余白の調整、矢印やモザイクの注釈付けが可能です。ただし細かい注釈の位置調整は、画面の大きいパソコンでの操作がより正確に行えます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。