スクリーンショット加工ツールとは？
Screenshot Beautifierはスクリーンショットにグラデーション背景、ドロップシャドウ、角丸、パディングを追加します。プレゼン、ポートフォリオ、SNS投稿にそのまま使える仕上がりになります。
12種類のグラデーション(サンセット、オーシャン、パープル、エメラルド、ローズなど)、単色、または透明背景から選べます。スクリーンショットをウィンドウ、MacBook、iPhone、iPad のフレームで包み、仕上がりのモックアップ風に演出。Twitter、Instagram、Product Hunt、ストーリーのアスペクト比に合わせてキャンバスサイズを指定でき、自動のままにもできます。シャドウは0〜100ピクセル、角丸は最大48、余白は16〜128。1x、2x、3x の PNG・JPG・WebP で書き出すか、画像をそのままクリップボードにコピーして Slack、Notion、ドキュメントに貼り付けられます。 フレームの上または下に好きな色で短いキャプションを添えれば、ローンチ投稿やスライドにも使えます。 ドロップシャドウは好きな色に変えてグラデーションに合う発光感を作れ、「差し替え」で新しいスクリーンショットに替えてもスタイルはそのままです。 スクリーンショットを安全に共有するには、書き出す前にパスワードやメール、個人的な情報をドラッグしてモザイクやぼかしをかけられます。すべての処理はお使いの端末内で完結します。
使い方
- スクリーンショットをアップロードまたは貼り付けます。PNG、JPG、WebP形式に対応しています。
- 外観をカスタマイズします：グラデーション背景の選択、シャドウの深さの調整、角丸の設定、画像周囲のパディングの追加ができます。 機密情報はドラッグしてモザイクやぼかしをかけ、シャドウの色も合わせて選べます。
- 選択した解像度で、加工済み画像を PNG・JPG・WebP のいずれかでダウンロードできます。シェアや埋め込みにすぐ使えます。
使用するタイミング
- Dribbble や Behance のポートフォリオに載せるとき、生のスクショを整える。
- Twitter、LinkedIn、ローンチページに投稿する前に、UI をグラデで包む。
- スライドで使うダッシュボード画像を、ベタ塗りスクショから一段引き上げる。
結果
ポートフォリオ用にアプリのダッシュボードのスクリーンショットがあるとします。アップロードして紫青のグラデーションを選択し、16pxの角丸と20pxのシャドウを追加してダウンロードすれば、プロのプロダクトモックアップのような仕上がりになります。
よくある質問
- ファイルをアップロードせず、貼り付けだけで使えますか?
- 使えます。macOS なら Cmd+Shift+4、Windows なら Win+Shift+S でクリップボードに画像をコピーし、ページ上で Cmd/Ctrl+V を押すと即時に読み込みます。ファイル選択ダイアログを経由しません。
- 書き出しのとき、角丸の周囲は透明のまま残りますか?
- 「透明背景」を選んだときだけ残ります。PNG にアルファチャンネルが含まれるので、スライドや Web ページの色に角丸とシャドウがなじみます。単色やグラデでは色が画像に焼き込まれます。 JPG と WebP の書き出しは背景が塗りつぶされるため、透明を残したいときは PNG を選んでください。
- 1x・2x・3x の書き出し倍率は具体的に何が変わりますか?
- 出力解像度が掛け算で増えます。1200×800 を 3x で書き出すと 3600×2400 になります。Retina ノートや 4K モニタで表示する用途では、1x だとやや甘く見えるため高い倍率が効きます。
- 巨大なスクショを開くとプレビューが重くなりますか?
- プレビューでは canvas が縮小して描画し、書き出しのときだけ元解像度を使います。4K の入力でも 1080p と同じ感覚で編集でき、最終的なファイルだけ大きくなります。
- モニタによってグラデにバンディングが出るのはなぜですか?
- 6bit の旧式ディスプレイは滑らかなグラデで段差が見えることがあります。PNG 自体は 8bit/ch で、ほとんどのディスプレイでは問題ありません。気になるときは Slate のような暗めのプリセットを選ぶと目立ちにくくなります。