スクリーンショット装飾ツール

スクリーンショット装飾ツール

スクリーンショット装飾ツールは、OS が作る端から端までの四角い画面キャプチャを、意図して作ったように見える画像に変えます。色付きのパディングの中に置き、角を丸め、下にやわらかい影を付け、必要ならウィンドウフレームで囲みます。スクリーンショットをドロップしてプリセットを選び、投稿先に合わせたサイズの PNG をダウンロードします。ファイルの読み取りと描画はご自身のブラウザが行うので、ダッシュボード、請求書、社内ツールのスクリーンショットが端末の外に出ることはありません。

このツールが実際に変えるもの

スクリーンショットの中身には一切手を加えません。どの設定も周囲のフレームに対して働き、下の図は調整している4つの層に名前を付けています。

自動背景と、それが重要な理由

多くのスクリーンショット装飾ツールは、誰もが使っている同じ十数個のグラデーションを渡すので、結果はテンプレートに見えます。自動スウォッチは代わりにスクリーンショットをサムネイルまで縮小し、色を平均し、その色相から2ストップのグラデーションを作ります。彩度と明度は、画像の背後でも読みやすい帯に押し上げられます。青い分析ダッシュボードには深い青紫のキャンバス、暖かい写真にはアンバーのキャンバスが付きます。クリック1回で済み、パディングが初期値ではなく選んだように見える最速の方法です。

ウィンドウフレームとパースペクティブの傾き

フレームは、読者に今見ているものが何かをすぐに伝えます。macOS フレームはおなじみの3つの信号機ドットを足し、デスクトップアプリとして読めます。ブラウザ フレームはドットに加え、自分のドメインを入力できるアドレスバーを足し、ウェブページとして読め、画像の中に URL を静かに置けます。スクリーンショットにすでに独自のクロームがあるときはなしを選びます。

傾きスライダーは水平のパースペクティブを適用し、フレーム付きスクリーンショットを列ごとに描いて、手前の辺が奥の辺より高くなるようにします。少し（5〜15度）で 3D の製品モックアップ風になり、それを超えるとスクリーンショット内の文字が読みにくくなり始めます。そこが止めるべき地点です。

各プラットフォーム向けの書き出しサイズ

プリセットがスクリーンショットより細い、または高い場合、切り抜くのではなくパディングの内側に収まるよう縮小するので、中身が切られることはありません。

スクリーンショット装飾ツールの使い方：手順

1. スクリーンショットを追加する: PNG または JPG をアップロードパネルにドロップするか、クリックしてファイルを選ぶか、Ctrl+V でクリップボードからそのまま貼り付けます。
2. スタイルプリセットを選ぶ: サンセット、オーシャン、ミント、グレープ、スレート、ペーパーのいずれかを1クリックすると、背景、パディング、半径、影がまとめて設定されます。
3. 微調整する: パディング、角の半径、影、フレーム、傾きを調整します。プレビューは変更のたびに再描画されます。
4. 出力サイズを選ぶ: 投稿するプラットフォーム向けのキャンバスプリセットを選び、あとからサイズ変更しなくて済むようにします。
5. 書き出す: 「PNGをダウンロード」でファイルを保存し、「画像をコピー」でクリップボードに置き、投稿へ貼れる状態にします。

実践的なヒント

• 飾る前にトリミングする。 パディングは目をスクリーンショットの端へ導くので、話の一部でない空のツールバーやブラウザクロームは先に切り落としてください。
• パディングは 6% から 12% の間に保つ。 それより狭いとフレームが偶然に見え、広いとスマホではスクリーンショットが小さすぎて読めません。
• 角の半径を投稿先に合わせる。 おおよそ 12〜20 ピクセルはほとんどのフィードカードの内側に馴染みます。四角い端のスライドに入れるときは 0 が適切です。
• 明るいスクリーンショットには暗いキャンバスを使い、ダークモードのスクリーンショットには明るいキャンバスを使います。境界のコントラストが、影を読みやすくします。
• サムネイルサイズで確認する。 プレビューを、フィードに出る大きさまで頭の中で縮小します。そのサイズで中の文字が消えるなら、効果を足すのではなくパディングを減らすか、もっとタイトにトリミングしてください。

プライバシー

すべての手順は HTML5 canvas API を通じてブラウザタブ内で動きます。スクリーンショットはローカルのオブジェクト URL で読み取り、描画し、ブラウザ自身の PNG エンコーダで書き出します。画像のアップロード、保存、送信は一切なく、ページが読み込まれたあとはネットワークなしでも動き続けます。

よくある質問

スクリーンショットはどこかにアップロードされますか？

いいえ。このツール全体が、ブラウザタブ内で動くキャンバススクリプトです。ドロップしたファイルは端末上で読み取られ、端末上で描画されます。サーバーには何も送られないので、製品ダッシュボード、請求書、その他の機密スクリーンショットは自分の端末に留まります。ページ読み込み後にオフラインになっても、ツールは動き続けます。

SNS向けにはどのサイズで書き出せばよいですか？

キャンバスプリセットを使ってください。X の投稿は 1600×900（16:9）、Instagram フィードは 1080×1350（4:5）、Instagram と TikTok のストーリーは 1080×1920（9:16）、LinkedIn の投稿は 1200×627、ほぼすべてのプラットフォームのリンクプレビューは 1200×630（Open Graph プリセット）が向いています。自動はスクリーンショット本来の比率を保ち、パディングだけを足します。

なぜパディングを足すとスクリーンショットがよく見えるのですか？

ありのままのスクリーンショットは端から端までの長方形なので、フィードでは投稿の背景とぶつかり、散らかって見えます。パディングは画像自身の余白になり、角丸は周囲のカードの角との衝突を止め、影は背景から浮かせて目がひとつの物体として捉えるようにします。中身は変わりません。変わるのはフレーミングだけです。

背景を透明のままにできますか？

できます。「透明な背景」スウォッチを選ぶと、パディング領域は色ではなくアルファとして書き出され、角丸、フレーム、影はこれまでどおり描画されます。「PNGをダウンロード」はその透明度を保ちます。結果をスライドや、下地の背景を透かせたいページに置くときに使う選択肢です。

クリップボードからスクリーンショットを貼り付けるには？

クリップボードへコピーするショートカットでスクリーンショットを撮り、Windows なら Ctrl+Shift+S、Mac なら Cmd+Ctrl+Shift+4 などです。このページのどこかをクリックしてから Ctrl+V（Mac では Cmd+V）を押します。画像は貼り付けイベントから拾われ、ディスク上のファイルに触れることなくプレビューへ読み込まれます。

自動背景オプションは何をしますか？

自動はスクリーンショットをごく小さいサイズで読み、色を平均し、その平均色相から2ストップのグラデーションを作ります。彩度と明度は、画像の背後でも読みやすい範囲に押し上げられます。結果は汎用の紫グラデーションではなく、そのスクリーンショットに属するパディングになり、テンプレートではなく意図して選んだ投稿画像に見える分かれ目になることが多いです。

画像ツール:

• 画像に線を追加
• 画像にテキストを追加
• アスペクト比電卓 新しい
• 画像を円形に切り抜き 新しい
• コラージュメーカー 人気
• 点つなぎジェネレーター 人気
• EXIFデータビューア・削除ツール 新しい
• GIF を反転
• 画像を反転
• GIFメーカー
• 画像モザイクツール
• 画像圧縮ツール
• 画像トリマー
• 画像エンハンサー
• 画像リサイズ
• 画像回転ツール 人気
• 画像分割ツール 人気
• 画像からASCIIアートへの変換器 新しい
• 画像からSVGトレーサー 新しい
• Lorem Picsum / プレースホルダー画像ジェネレーター 新しい
• 📷 OCR / 画像からテキスト抽出 新しい
• 印刷サイズ・解像度電卓 (DPI/PPI)
• 角丸画像ジェネレーター 新しい
• スクリーンショット装飾ツール 新しい
• デバイスモックアップ作成ツール 新しい
• 画像に影を追加 新しい
• 画像に枠を追加 新しい