Screenshot Studio: 無料のスクリーンショット美容ツール、エディター、モックアップ作成ツール

無料のスクリーンショット スタジオ: 画面をキャプチャし、グラデーション背景、ウィンドウ フレーム、3D 傾斜を追加し、矢印、ステップ、ぼかし、スポットライトで注釈を付け、iPhone と MacBook のモックアップを作成し、コードを画像に変換し、スクロール スクリーンショットをつなぎ合わせ、ステータス バーを削除します。 PNG、JPG、WebP、または SVG をブラウザーで最大 4 倍、100% エクスポートします。

Shehzad Munir によって構築および保守されています ·

スクリーンショット スタジオ
Loading Screenshot Studio
  • 画像ツール
  • 無料 · サインアップなし
  • ブラウザで実行
  • 19の特徴
Share

ブラウザ上の完全なスクリーンショット スタジオ

Screenshot Studio は、ブラウザーで実行できる無料のオールインワン スクリーンショット アプリです。画面をキャプチャし、グラデーション、メッシュまたはぼかした背景、ウィンドウ フレーム、3D チルトでショットを美しくし、矢印、番号付きステップ、スポットライト、永続的な墨消しで注釈を付けます。また、iPhone、iPad、MacBook のモックアップに配置したり、コードをテーマ画像に変換したり、スクロール キャプチャをステッチしたり、携帯電話のスクリーンショットをクリーンアップしたりすることもできます。アップロード、透かし、サインアップなしで PNG、JPG、WebP、または SVG をエクスポートします。

Screenshot Studio は、ほとんどの人が使いこなしている単一目的のアプリのスタックを置き換えます。画面、ウィンドウ、またはブラウザーのタブをキャプチャします。グラデーション、メッシュ、ぼかした背景、macOS、Windows、ブラウザのフレーム、3D チルトで美しく仕上げます。矢印、番号付きステップ、テキストラベル、ぼかし、スポットライト、拡大鏡で注釈を付けます。それを iPhone、iPad、または MacBook のモックアップにドロップします。ステッチスクロールは 1 つの長い画像にキャプチャされます。または、コード スニペットを共有可能な画像に変換します。すべてのモードは、送信先を使用して結果を次のモードに渡すため、キャプチャのトリミング、注釈の追加、美化、フレーム化を 1 つのフローで行うことができます。すべてが Canvas API 上でローカルに実行されるため、スクリーンショットがアップロードされることはなく、ウォーターマークやサインアップも必要ありません。

特徴

  • キャプチャ: 3/5/10 秒の遅延と領域選択で画面、ウィンドウ、またはブラウザ タブをキャプチャします。
  • 貼り付け (Ctrl/⌘+V)、ドラッグ アンド ドロップ、または任意のモードにアップロードし、試してみる組み込みのサンプルを追加します。
  • 送信先: 1 つのフローで、Capture、Beautify、Annotate、Mockup、Stitch、Crop の間で結果を渡します。
  • 美化: 18 のグラデーション、8 メッシュのグラデーション、ソリッド、壁紙、または粒子のあるぼかしたスクリーンショットの背景
  • macOS、Windows、ブラウザ (URL 付き)、ガラスおよびアウトライン ウィンドウ フレーム
  • パディング、自動エッジカラー付きインセット、コーナー半径、5 つのシャドウ スタイル、3D パースペクティブの傾斜と回転
  • ソーシャル キャンバス プリセット: X ポスト、Open Graph、LinkedIn、YouTube、Product Hunt、Dribbble、1:1、4:5、9:16、カスタム サイズ
  • 見出し、小見出し、透かしテキスト、8 つのクイック スタイル、記憶されたスタイル、バッチ ZIP エクスポート
  • 注釈: マークの選択、移動、サイズ変更、スタイル変更、複製、並べ替え、削除ができるオブジェクトベースのエディター
  • 先細矢印、クラシック矢印、二重矢印、長方形、楕円、線、テキストラベル、自動番号付きステップ、絵文字スタンプ
  • ピクセル化、ぼかし、または黒いバーで秘匿化し、すべてエクスポートされたピクセルに焼き付けます
  • スポットライト、拡大鏡ルーペ、ハイライト ボックス、蛍光ペン、ペン、元に戻す/やり直し、キーボード ショートカット付き
  • デバイスのモックアップ: iPhone 16 Pro/15/SE、Pixel 9、Galaxy S24、iPad Pro/mini、Galaxy Tab、MacBook Air/Pro、iMac およびモニター
  • 6 つのデバイス仕上げ、ランドスケープ モード、スクリーン グレア、3D チルト、MacBook + iPad + iPhone 対応シーン
  • 各デバイスの CSS ビューポート、ピクセル比率、ネイティブ スクリーンショット サイズを含むビューポート プランナー
  • コードから画像へ: 19 の自動検出言語、10 のテーマ、行番号、強調表示された行、差分カラー、PNG および SVG
  • ピクセル精度のスクロールオーバーラップ除去とスティッキーヘッダートリムを使用して、垂直方向、横方向、またはグリッド内にステッチします。
  • トリミングとクリーン: iPhone/iPad サイズに応じた正確なステータスバーとホームインジケーターの削除、境界線の自動トリミング、回転と反転
  • PNG、JPG、または WebP を 1 ~ 4 倍でエクスポートし、透かしやアップロードなしでクリップボードに直接コピーします

スクリーンショット スタジオの使い方

  1. 1

    スクリーンショットを持ち込む

    「キャプチャ」で画面、ウィンドウ、またはタブをキャプチャし、Ctrl/⌘+V を押して貼り付けるか、ファイルをドラッグするか、「サンプルを試す」をクリックします。

  2. 2

    モードを選択してください

    タブから「美化」、「注釈付け」、「モックアップ」、「コード化」、「ステッチ」または「トリミングとクリーン」を選択します。各モードでの作業内容は、切り替え時に保持されます。

  3. 3

    編集

    背景とフレームのスタイル設定、矢印、ステップ、墨消しの描画、デバイスへのショットの配置、またはステッチとトリミングをすべてライブ プレビューで行います。

  4. 4

    チェーンモード

    [送信先] を使用すると、結果が引き継がれます (たとえば、キャプチャ → トリミングとクリーン → 注釈 → 整形)。

  5. 5

    輸出

    PNG、JPG、または WebP と 1 ~ 4 倍のスケールを選択し、ダウンロードまたはコピーします。すべてはデバイス上で処理されます。

一般的な使用例

  • 普通のスクリーンショットを、グラデーションの背景と見出しを備えた X、LinkedIn、または Product Hunt の投稿に変換します。
  • バグレポートに矢印、番号付きのステップ、編集された個人データで注釈を付ける
  • スポットライトを当てた段階的なスクリーンショットを含むヘルプセンターとオンボーディング ガイドを作成します
  • ランディング ページまたはポートフォリオ用の iPhone、iPad、MacBook のモックアップでアプリまたは Web サイトを表示します。
  • コード スニペットをテーマ画像としてソーシャル メディア、スライド、ドキュメントで共有します。
  • 行が重複することなく、長いスクロール ページやチャットを 1 つの画像につなぎ合わせます
  • App Store の携帯電話のスクリーンショットからステータス バーとホーム インジケーターを削除し、画像を確認します
  • リリースノートと変更ログ用の前後の比較とグリッドを作成する

詳細ガイド

美化: ワンクリックでソーシャル対応のスクリーンショットを作成

Beautify は、プレーンなスクリーンショットを洗練されたカードにラップします。 18 のグラデーション、8 つのメッシュ グラデーション、単色、独自の壁紙、またはスクリーンショット自体のぼかしたコピーのいずれかを選択し、パディング、角の半径、インセット、影、3D の傾きと回転を設定します。キャンバス プリセットは、各プラットフォームに合わせて結果のサイズを正確に調整し、見出し、小見出し、透かしによってスクリーンショットが完成した投稿に変わります。あなたのスタイルはブラウザに記憶され、Batch はそれを一度に多くのスクリーンショットに適用し、ZIP をダウンロードします。

プリセット出力サイズこんな方に最適
×ポスト1600 × 900 pxツイートとスレッド
OG画像1200 × 630 pxリンクプレビュー (Open Graph)
リンクトイン1200 × 627 pxLinkedIn のリンクとフィードの投稿
YouTube1280 × 720 pxビデオのサムネイル
プロダクトハント1270 × 760 pxギャラリー画像を起動する
ドリブル1600 × 1200 pxデザインショット
1:1 · 4:5 · 9:16スクリーンショットの比率Instagram フィード、ポートレート投稿、ストーリーとリール

デスクトップのスクリーンショットエディターのように注釈を付ける

注釈エディタはオブジェクトベースです。すべての矢印、ボックス、ラベル、またはぼかしは引き続き編集可能です。マークを選択して移動したり、ハンドルを使用してサイズ変更したり、スタイルを変更したり、複製したり、削除したりできます。先細り、クラシック、または両頭の矢印、アウトライン、色付き、または実線の形状、および背景に合わせて読み取れるコントラストのアウトラインが付いたテキスト ラベルを選択します。番号付きステップバッジは自動的にカウントアップされます。墨消し(ピクセル化、ぼかし、または黒いバー)はエクスポートされたピクセルに書き込まれるため、隠しテキストはファイルに保持されません。スポットライトは、人々に見てもらいたい領域以外のすべてを暗くし、拡大鏡は細部にまでズームします。エディターには完全な元に戻す機能とやり直し機能、およびエクスポートのみをトリミングするクロップ ツールがあります。

道具ショートカット用途:
選択/移動V注釈の移動、サイズ変更、スタイル変更、または削除
矢印Aボタンまたは設定をポイントします (Shift は 45° にスナップします)
長方形/楕円形R / O領域を枠で囲む (Shift キーで正方形または円を描く)
文章Tラベルとキャプション、Shift+Enter で改行
ステップ番号N自動的にカウントアップされる番号付きのウォークスルー
ぼかし/編集B電子メール、キー、名前のピクセル化、ぼかし、黒バー表示
スポットライトS重要な部分以外を暗くする
拡大鏡Z小さな UI テキストまたはアイコンを拡大表示する
ハイライトボックス / ハイライター / ペンH / M / Pマーカースタイルの強調とフリーハンドのメモ
絵文字・スタンプE✅ ❌ ⚠️ などの素早い反応
作物C注釈を失わずにエクスポートされた画像をトリミングする

スタイル付きのテキストやキャプションを画像に追加します共有する前に非表示の EXIF メタデータを削除する

デバイスのモックアップとビューポート プランナー

モックアップ モードでは、スクリーンショットの周囲にリアルなデバイス フレームが描画されます: iPhone 16 Pro、Dynamic Island を備えた iPhone 15 および 15 Pro Max、ホーム ボタンを備えた iPhone SE、パンチホール カメラを備えた Pixel 9 および Galaxy S24、iPad Pro、iPad mini および Galaxy Tab、MacBook Air、MacBook Pro、iMac、およびデスクトップ モニター。ポートレートとランドスケープの 6 つの仕上げ、オプションの画面グレア、3D チルト、MacBook、iPad、iPhone を一緒に表示するレスポンシブ セット シーンがあります。ビューポート プランナーは、デバイスごとに実際の CSS ビューポート、デバイスのピクセル比、ネイティブ スクリーンショットのサイズを表示し、スクリーンショットの形状が画面と一致しない場合は警告します。

デバイスCSSビューポート画素比ネイティブのスクリーンショット
iPhone16プロ402 × 8743×1206 × 2622
iPhone15/15Pro393 × 8523×1179 × 2556
iPhone 15 プロマックス430 × 9323×1290 × 2796
iPhone SE375 × 6672×750 × 1334
グーグルピクセル9412 × 9232.625×1082 × 2423
サムスンギャラクシーS24360 × 7803×1080 × 2340
iPad Pro 11インチ834 × 11942×1668 × 2388
MacBook Air 13インチ1470 × 9562×2940 × 1912
MacBook Pro 14インチ1512 × 9822×3024 × 1964

コードから画像へ: 無料の Carbon スタイル コード スクリーンショット ジェネレーター

スニペットを貼り付けると、Code to Image によってクリーンな共有可能な画像としてレンダリングされます。 JavaScript、TypeScript、JSX、Python、HTML、CSS、JSON、SQL、Go、Rust、Java、Kotlin、Swift、C/C++、C#、PHP、Ruby、YAML、シェルを含む 19 の言語を自動検出します。 10 種類のエディター テーマ (Dracula、One Dark、Tokyo Night、Night Owl、Monokai、Nord、GitHub Dark and Light、Solarized Light and Paper) から選択できます。行番号、カスタム開始行、強調表示された行、および赤/緑の差分カラーリングにより、ドキュメントやコード レビューに役立ちます。また、macOS または Windows のタイトル バーにはファイル名が表示されます。鮮明なソーシャル投稿用に最大 4 倍の PNG をエクスポートするか、どのサイズでもテキストが鮮明なベクター SVG をエクスポートします。

スクロールするスクリーンショットをつなぎ合わせ、携帯電話のキャプチャをクリーンアップする

ステッチは、スクリーンショットを垂直方向、並べて、またはグリッドに結合します。スクロール キャプチャの場合、隣接するショットをピクセルごとに比較し、繰り返される行を削除します。また、粘着性のあるヘッダーまたはフッターを切り取って、各継ぎ目を微調整することもできます。ラベルを使用すると、前後を簡単に比較できます。クロップ&クリーンは、一般的な iPhone および iPad のスクリーンショット サイズを認識し、そのモデルの正確なステータス バーとホーム インジケーターを削除します。 Android スマートフォンの場合、バーを推定し、最も近い実際のエッジにスナップします。また、空の境界線を自動トリミングし、アスペクト比のプリセット、ピクセル単位で正確なトリミング フィールド、回転と反転を備えています。

最終画像のサイズを正確な寸法に変更しますスクリーンショットを WebP、JPG、または PNG に変換する

よくある質問

背景を付けてスクリーンショットを美しくするにはどうすればよいですか?

Beautify を開き、スクリーンショットをドロップ、ペースト、またはキャプチャします。グラデーション、メッシュ、ソリッド、壁紙、またはぼかした背景を選択し、パディング、角の半径、影、3D の傾きを調整し、必要に応じて macOS、Windows、またはブラウザのフレームを追加し、PNG、JPG、または WebP を 1 ~ 4 倍でエクスポートします。

複数のスクリーンショットを 1 つの画像に結合するにはどうすればよいですか?

Stitch を開き、スクリーンショットを順番に追加し (ドラッグして並べ替え)、縦、横、またはグリッドを選択します。スクロール キャプチャの場合、スマート オーバーラップ削除により、各ショットが繰り返される行がカットされます。粘着性のあるヘッダーまたはフッターをトリミングして、すべての継ぎ目を手動で調整することもできます。

スクリーンショットから電話フレームとステータス バーを削除できますか?

はい。クロップ&クリーンは、一般的な iPhone および iPad のスクリーンショット サイズを認識し、ワンクリックでそのモデルの正確なステータス バーとホーム インジケーターを削除します。 Android の場合、バーを推定して最も近い端にスナップし、自動トリムにより空の境界線またはレターボックスの境界線が削除されます。

スクリーンショットに矢印や数字の注釈を付けるにはどうすればよいですか?

Annotate で、矢印の場合は A、自動番号付きステップ バッジの場合は N、テキスト ラベルの場合は T、ボックスの場合は R を押します。すべてのマークは編集可能なままです。選択 (V) に切り替えると、移動、サイズ変更、スタイル変更、複製、削除ができ、完全に元に戻したりやり直したりできます。

スクリーンショットの機密部分をぼかしたり編集するにはどうすればよいですか?

B を押して、ピクセル化、ぼかし、またはブラック バーを選択し、電子メール、名前、または API キーの上にドラッグします。墨消しはエクスポートされたピクセルに焼き付けられるため、元のテキストはファイルに保存されません。パスワードとシークレットには黒いバーを使用します。

ズームルーペとは何ですか?いつ使用すればよいですか?

拡大鏡 (Z) は、小さな設定、アイコン、エラー メッセージなどの小さな詳細を拡大コピーして表示する円形ルーペで、閲覧者はフルサイズの画像を開かなくても内容を読むことができます。

ビューポート プランナーは応答性の高い QA にどのように役立ちますか?

モックアップでは、各デバイスに実際の CSS ビューポート、デバイスのピクセル比、ネイティブのスクリーンショットのサイズが表示され、スクリーンショットの形状が一致しない場合は警告が表示されます。ブラウザのデバイス ツールバーでこれらの数値をキャプチャすると、ピクセルにぴったりとフィットします。

ウォーターマークはありますか? それともアカウントが必要ですか?

いいえ。Screenshot Studio は無料で、ウォーターマークは追加されず、サインアップも必要ありません。

私のスクリーンショットはサーバーにアップロードされますか?

いいえ。キャプチャ、編集、エクスポートはすべて、Canvas API を使用してブラウザ内でローカルに行われます。画像はセッション中のみメモリに保存され、どこにも送信されることはありません。

背景付きの美しいスクリーンショットを作成するにはどうすればよいですか?

Beautify のクイック スタイル (クリーン、ミッドナイト、ガラス、3D チルト、X ポスト、ブルータル、ブラー、ミニマル) を使用して、ワンクリックで外観を完成させ、背景、フレーム、シャドウを微調整します。

素敵なスタイルのコード スクリーンショットを作成できますか?

はい。コードを開き、スニペットを貼り付けると、言語が自動的に検出されます。テーマ、ウィンドウ スタイル、背景、線のオプションを選択して、PNG またはベクター SVG をエクスポートします。

これはコードイメージ用の Carbon の無料の代替手段ですか?

はい。 Code to Image は、Carbon または ray.so と同じジョブをカバーし、10 のテーマ、19 の言語、行の強調表示、差分カラー、PNG/SVG エクスポートを備えています。サインアップやウォーターマークなしでブラウザーで実行できます。

この Web サイトから直接スクリーンショットを撮ってもいいですか?

はい、デスクトップの Chrome、Edge、Firefox、Safari では可能です。キャプチャを開き、オプションで 3 秒、5 秒、または 10 秒の遅延を設定し、ブラウザのピッカーで画面、ウィンドウ、またはタブを選択します。結果をドラッグして領域を保持し、任意のモードに送信します。携帯電話やタブレットでは Web ページで画面をキャプチャできないため、デバイスでスクリーンショットを撮り、貼り付けるかアップロードします。

アップロードする代わりにスクリーンショットを貼り付けることはできますか?

はい。スクリーンショットをコピーし (たとえば、Win+Shift+S、Cmd+Ctrl+Shift+4、または Print Screen を使用)、ページ上の任意の場所で Ctrl/⌘+V を押します。使用しているモードで開きます。

ソーシャルメディアのスクリーンショットにはどのサイズを使用すればよいですか?

Beautify のキャンバス プリセットを使用します: X ポスト 1600 × 900、Open Graph 1200 × 630、LinkedIn 1200 × 627、YouTube 1280 × 720、Product Hunt 1270 × 760、Dribbble 1600 × 1200、または Instagram フィード、ポートレート、および 1:1、4:5、9:16 の比率物語。

iPhone または MacBook のモックアップにスクリーンショットを挿入するにはどうすればよいですか?

モックアップを開き、スクリーンショットをドロップして、デバイスを選択します。画像の形状から携帯電話、タブレット、ラップトップを自動提案します。仕上げ、ポートレートまたはランドスケープ、背景、影と傾きを選択するか、レスポンシブ セットに切り替えて MacBook、iPad、iPhone を一緒に表示します。

多くのスクリーンショットに同じスタイルを適用できますか?

はい。 Beautify でスタイルを設定し、「バッチ」をクリックして、好きなだけスクリーンショットを選択します。それぞれが同じ背景、フレーム、影、サイズでレンダリングされ、ZIP としてまとめてダウンロードされます。

どのエクスポート形式と解像度がサポートされていますか?

PNG (透明度を維持)、JPG、および品質スライダーを備えた WebP (モードに応じて 1x、2x、3x、または 4x)。 Code to Image はベクター SVG もエクスポートします。非常に大きな結果は、ブラウザーのキャンバスの制限内に収まるように自動的にスケーリングされ、そのタイミングがツールによって通知されます。

日記より

All articles →